/*
 * Xtreme Locator Search — front-end styles
 *
 * Colors, fonts, width, etc. are driven by CSS custom properties set inline
 * on the .xlocator-form element (see xtreme-locator-search.php), based on
 * Settings → Xtreme Locator and/or shortcode attributes. The var(...)
 * fallbacks below match the plugin's own defaults and only apply if a
 * property is somehow missing.
 */

/* Reset the outer wrapper (the actual <form> tag for most search types, or
   a <div> for "Near Me"). Many themes style bare <form> elements with a
   default border/background/box-shadow (e.g. for comment or contact
   forms) — without this reset, that theme styling would wrap the search
   box in an unwanted box regardless of this plugin's own settings. */
.xlocator-form {
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0;
	margin: 0;
	display: block;
	max-width: 100%;
}

.xlocator_form {
	display: block;
	width: 100%;
	max-width: var(--xlocator-width, 420px);
	box-sizing: border-box;
	padding: 10px;
	font-family: var(--xlocator-font, Verdana, Geneva, sans-serif);
	color: var(--xlocator-text-color, #000);
	background-color: var(--xlocator-bg, transparent);
	border-style: solid;
	border-color: var(--xlocator-border-color, transparent);
	border-width: var(--xlocator-border-width, 0);
}

.xlocator_form * {
	box-sizing: border-box;
}

.xlocator-heading {
	text-align: center;
	margin-bottom: 8px;
}

.xlocator-heading span {
	color: var(--xlocator-heading-color, #000);
	font-size: var(--xlocator-heading-size, 16px);
	font-family: inherit;
	font-weight: bold;
}

.xlocator-fields {
	display: flex;
	gap: 8px;
}

.xlocator-layout-inline .xlocator-fields {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
}

.xlocator-layout-stacked .xlocator-fields {
	flex-direction: column;
	align-items: stretch;
}

.xlocator-field {
	display: flex;
	flex-direction: column;
}

.xlocator-layout-inline .xlocator-field-zip,
.xlocator-layout-inline .xlocator-field-dist,
.xlocator-layout-inline .xlocator-field-country {
	flex: 1 1 140px;
}

.xlocator-layout-stacked .xlocator-field-zip,
.xlocator-layout-stacked .xlocator-field-dist,
.xlocator-layout-stacked .xlocator-field-country {
	width: 100%;
}

.xlocator-fields-nearme {
	justify-content: center;
}

.xlocator-label {
	font-size: 1.1em;
	font-family: inherit;
	color: inherit;
	margin-bottom: 4px;
}

.xlocator-form input[type="text"],
.xlocator-form select {
	font-size: 1em;
	font-family: inherit;
	padding: 6px 8px;
	width: 100%;
	min-width: 110px;
}

.xlocator-form select {
	display: block !important; /* matches Xtreme Locator's own country-picker script expectations */
	background-color: #fff;
}

.xlocator-submit {
	background-color: var(--xlocator-button-bg, #008CBA);
	color: var(--xlocator-button-color, #fff);
	border: none;
	padding: 8px 14px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	cursor: pointer;
	border-radius: 2px;
	width: 100%;
}

.xlocator-layout-inline .xlocator-field-submit {
	flex: 0 0 auto;
}

.xlocator-layout-inline .xlocator-submit {
	width: auto;
}

.xlocator-advanced-row {
	text-align: center;
	margin-top: 8px;
}

.xlocator-advanced-link {
	background-color: var(--xlocator-button-bg, #008CBA);
	color: var(--xlocator-button-color, #fff);
	border: none;
	padding: 3px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	font-family: inherit;
	border-radius: 2px;
}

.xlocator-footer {
	text-align: center;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	margin-top: 8px;
}

/* Results page: your theme's header/footer wrap a sandboxed iframe that
   shows the Xtreme Locator results, so the address bar stays on your site
   while the results content itself is isolated from the rest of the page. */
.xlocator-results-page {
	max-width: 100%;
	margin: 0 auto;
	padding: 20px 0;
}

.xlocator-results-iframe {
	/* Width/height are set inline per the plugin's admin settings
	   (Settings → Xtreme Locator); these are just safe fallbacks. */
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
}

.xlocator-fallback-link {
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
	margin-top: 8px;
}

/* Shown when no Xtreme Locator Site ID is configured yet. */
.xlocator-error {
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #b3541e;
	background-color: #fdf3e7;
	border: 1px solid #f0c896;
	border-radius: 3px;
	padding: 10px 14px;
	margin: 0;
}