/**
 * Fonetech Store Locator — Frontend Styles
 *
 * Design tokens ported verbatim from the sibling fonetech-repair-booking
 * plugin's assets/css/frb-frontend.css (--frb-* → --floc-*), so both
 * plugins' frontends read as the same design system — buttons, cards, and
 * typography match, and a visitor moving between the locator and the
 * booking flow never feels like they've left the site/theme.
 *
 * Layout below follows the minimal redesign: hairline borders + rounded
 * corners, no shadows/gradients on cards or containers (only the list's
 * bottom scroll-fade uses a gradient, which is functional — a persistent
 * "more below" cue — not decorative).
 */

/* ── Reset / Root ─────────────────────────────────────────────────────────── */
.floc-locator-root *,
.floc-locator-root *::before,
.floc-locator-root *::after {
	box-sizing: border-box;
}

.floc-locator-root {
	--floc-primary: #2979FF;
	--floc-primary-dark: #1557C0;
	--floc-primary-light: #eef2ff;
	--floc-accent: #e8202a;
	--floc-accent-dark: #c81a22;
	--floc-open: #059669;
	--floc-open-bg: #d1fae5;
	--floc-closed: #991b1b;
	--floc-closed-bg: #fee2e2;
	--floc-text: #1a1a2e;
	--floc-text-muted: #6b7280;
	--floc-bg: #ffffff;
	--floc-bg-alt: #f7f8fc;
	--floc-border: #e5e7eb;
	--floc-radius: 4px;
	--floc-radius-lg: 8px;
	--floc-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 1px 3px 1px rgb(0 0 0 / 0.06);
	--floc-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 4px 8px 3px rgb(0 0 0 / 0.08);
	--floc-transition: 150ms ease;

	/* @wordpress/components (Button, etc.) reads its own accent/background/
	   foreground colors from these custom properties — see the sibling
	   plugin's frb-frontend.css for the full rationale. */
	--wp-components-color-accent: var(--floc-primary);
	--wp-components-color-accent-darker-10: var(--floc-primary-dark);
	--wp-components-color-accent-darker-20: var(--floc-primary-dark);
	--wp-components-color-background: var(--floc-bg);
	--wp-components-color-foreground: var(--floc-text);
	--wp-components-color-accent-inverted: #fff;
	--wp-components-color-gray-200: var(--floc-primary-light);

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	color: var(--floc-text);
	background: var(--floc-bg);
	line-height: 1.5;
}

.floc-locator-root h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0;
}

/* ── Focus states ──────────────────────────────────────────────────────────── */
.floc-locator-root button:focus-visible,
.floc-locator-root a:focus-visible,
.floc-locator-root input:focus-visible,
.floc-locator-root select:focus-visible {
	outline: 2px solid var(--floc-primary);
	outline-offset: 2px;
}

/* ── Buttons (@wordpress/components Button baseline) ─────────────────────── */
.floc-locator-root .components-button.is-primary,
.floc-locator-root .components-button.is-secondary,
.floc-locator-root .components-button.is-tertiary {
	height: auto !important;
	padding: 6px 12px !important;
	border-radius: var(--floc-radius) !important;
	font-weight: 600 !important;
	transition: background var(--floc-transition), border-color var(--floc-transition),
		box-shadow var(--floc-transition), color var(--floc-transition) !important;
}

.floc-locator-root .components-button.is-primary {
	background: var(--floc-primary) !important;
	border: 1px solid var(--floc-primary) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.floc-locator-root .components-button.is-primary:hover:not(:disabled) {
	background: var(--floc-primary-dark) !important;
	border-color: var(--floc-primary-dark) !important;
}

.floc-locator-root .components-button.is-secondary,
.floc-locator-root .components-button.is-tertiary {
	background: var(--floc-bg) !important;
	border: 1px solid var(--floc-border) !important;
	color: var(--floc-text) !important;
	box-shadow: none !important;
}

.floc-locator-root .components-button.is-secondary:hover:not(:disabled) {
	background: var(--floc-bg-alt) !important;
	border-color: var(--floc-text-muted) !important;
}

/* ── Search bar ────────────────────────────────────────────────────────────── */
.floc-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.floc-search-bar__field {
	display: flex;
	flex: 1 1 260px;
	gap: 0.5rem;
}

.floc-search-bar__input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--floc-border);
	border-radius: var(--floc-radius);
	font-size: 0.9375rem;
	font-family: inherit;
	min-height: 44px;
}

.floc-search-bar__radius {
	padding: 8px 12px;
	border: 1px solid var(--floc-border);
	border-radius: var(--floc-radius);
	font-family: inherit;
	font-size: 0.9375rem;
	min-height: 44px;
	background: var(--floc-bg);
}

/* ── Layout: list + (map, detail) ────────────────────────────────────────── */
/* The right column (map + detail card) always renders at its natural, full
   height — it must never be clipped or made to scroll, since that cut off
   the Book Now/Directions buttons whenever the detail card was taller than
   a fixed guessed height. The list column matches that height via
   FlocApp.js's ResizeObserver (see `matchHeight` passed into StoreList),
   set as an inline style — CSS alone can't reliably measure a sibling's
   rendered height net of its own scrollable content, which is exactly what
   made the previous grid-stretch and fixed-vh attempts unreliable. */
.floc-locator__layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 1.25rem;
	align-items: start;
}

/* ── List column ───────────────────────────────────────────────────────────
   Height comes from the `style` prop StoreList.js applies (matching the
   right column via ResizeObserver); this fallback only covers the brief
   moment before that first measurement lands. The inner scroll box takes
   the full height via `flex: 1; min-height: 0`, so only IT scrolls. */
.floc-locator__list-col {
	position: relative;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--floc-border);
	border-radius: var(--floc-radius-lg);
	background: var(--floc-bg);
}

.floc-locator__list-scroll {
	flex: 1;
	/* 0, not a fixed floor — the parent's height is already governed by the
	   inline `style` height (or the min-height fallback above) — the
	   flex/grid default of `auto` would instead size to the full ~20-row
	   content and defeat overflow-y below. */
	min-height: 0;
	overflow-y: auto;
	/* Always-visible thin scrollbar — not the OS's auto-hiding one. */
	scrollbar-width: thin;
	scrollbar-color: var(--floc-border) transparent;
}

.floc-locator__list-scroll::-webkit-scrollbar {
	width: 8px;
}

.floc-locator__list-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.floc-locator__list-scroll::-webkit-scrollbar-thumb {
	background: var(--floc-border);
	border-radius: 4px;
}

.floc-locator__list-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--floc-text-muted);
}

.floc-store-list {
	display: flex;
	flex-direction: column;
}

.floc-store-list__load-more {
	margin: 0.75rem 1rem;
	justify-content: center;
}

/* Persistent "more below" cue — visible whenever the list isn't scrolled to
   the bottom, not just on hover, per the redesign's overflow-affordance
   requirement. */
.floc-locator__list-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 4px;
	background: linear-gradient(to bottom, transparent, var(--floc-bg) 70%);
	color: var(--floc-text-muted);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--floc-transition);
	cursor: pointer;
}

.floc-locator__list-fade.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ── Store row (list) ─────────────────────────────────────────────────────── */
.floc-store-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--floc-border);
	cursor: pointer;
	transition: background var(--floc-transition);
}

.floc-store-list>.floc-store-row:last-child {
	border-bottom: none;
}

.floc-store-row:hover {
	background: var(--floc-bg-alt);
}

.floc-store-row.is-active {
	background: var(--floc-primary-light);
	border-left: 3px solid var(--floc-primary);
	padding-left: calc(1rem - 3px);
}

.floc-store-row__main {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.floc-store-row__name {
	font-weight: 600;
	font-size: 0.9375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.floc-store-row__status {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	color: var(--floc-text-muted);
}

.floc-store-row__status.is-open {
	color: var(--floc-open);
}

.floc-store-row__distance {
	flex: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--floc-text-muted);
}

.floc-store-row.is-active .floc-store-row__distance {
	color: var(--floc-primary);
}

/* ── Open/closed badge ─────────────────────────────────────────────────────── */
.floc-open-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.floc-open-badge--open {
	background: var(--floc-open-bg);
	color: var(--floc-open);
}

.floc-open-badge--closed {
	background: var(--floc-closed-bg);
	color: var(--floc-closed);
}

/* ── Right column: map + single detail card ──────────────────────────────── */
.floc-locator__right-col {
	/* Deliberately no height/overflow constraints — this column must always
	   render fully, at whatever height its content (fixed-height map +
	   auto-height detail card) naturally needs. It's the list column that
	   adapts to match this one, never the other way around. */
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.floc-store-map {
	height: 360px;
	flex: none;
	border-radius: var(--floc-radius-lg);
	overflow: hidden;
	border: 1px solid var(--floc-border);
}

/* ── Detail card ───────────────────────────────────────────────────────────
   One instance for whichever store is active — not one per list row. The
   real storefront photo lives here, large and clear, per the redesign. */
.floc-detail-card {
	display: flex;
	border: 1px solid var(--floc-border);
	border-radius: var(--floc-radius-lg);
	overflow: hidden;
	background: var(--floc-bg);
}

.floc-detail-card__photo {
	position: relative;
	height: 220px;
	/* Belt-and-braces alongside the !important sizing below — if the <img>
	   ever renders taller than this box for any reason, clip it here rather
	   than letting it push .floc-detail-card__body out of view. */
	overflow: hidden;
	background: var(--floc-bg-alt);
}

/* The active theme/page-builder (this site runs Elementor + Royal
   Elementor Addons, both of which style generic <img> tags with their own
   !important rules elsewhere on this page) may set its own width/height/
   object-fit on every <img>. At equal specificity, whichever rule is
   !important — or loads later in the cascade — wins regardless of our
   selector's specificity, so this must also be !important to reliably
   constrain the photo to its 220px box instead of rendering at its
   intrinsic size and pushing the card body out of view. */
.floc-detail-card__photo img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
}

.floc-detail-card__photo-placeholder {
	width: 100%;
	min-width: 220px;
	height: 100%;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--floc-text-muted);
}

.floc-detail-card__photo .floc-open-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
}

.floc-detail-card__body {
	padding: 1.25rem;
}

.floc-detail-card__name {
	margin: 0 0 0.4rem;
	font-size: 1.125rem;
}

.floc-detail-card__address,
.floc-detail-card__hours,
.floc-detail-card__phone {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	color: var(--floc-text-muted);
}

.floc-detail-card__phone a {
	color: inherit;
	text-decoration: none;
}

.floc-detail-card__actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.1rem;
}

.floc-detail-card__actions .components-button {
	flex: 1;
	justify-content: center;
}

/* ── State messages ────────────────────────────────────────────────────────── */
.floc-state-message {
	padding: 1.5rem;
	text-align: center;
	color: var(--floc-text-muted);
	border: 1px solid var(--floc-border);
	border-radius: var(--floc-radius-lg);
}

.floc-state-message--error {
	color: var(--floc-accent-dark);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 782px) {

	/* Stacked single column: the two sections no longer share a row, so the
	   list goes back to its own fixed ~300px scroll box instead of trying
	   to match the (now-stacked-above) right column's height — `!important`
	   is needed here to override the inline `style` height StoreList.js
	   sets from the desktop-only ResizeObserver match. */
	.floc-locator__layout {
		grid-template-columns: 1fr;
	}

	.floc-locator__right-col {
		order: -1;
	}

	.floc-locator__list-col {
		height: auto !important;
		min-height: 0;
	}

	.floc-store-map {
		height: 50vh;
	}

	.floc-locator__list-scroll {
		min-height: 300px;
		max-height: 300px;
	}

	.floc-search-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.floc-search-bar__field {
		flex: 1 1 auto;
	}
}