/* F9 Doc Locator Client
 *
 * Design tokens (since 0.18.0)
 * ----------------------------
 * Every colour, font, size and radius below comes from a custom property, so
 * a theme can restyle the locator without overriding selectors:
 *
 *   .f9dlc { --f9dlc-accent: #7a2231; --f9dlc-font: "Brandon", sans-serif; }
 *
 * Precedence (highest first):
 *   1. the theme's own rules on .f9dlc (any normal selector)
 *   2. shortcode attributes height="…" / accent="…"  (:where(#f9dlc), on the element)
 *   3. Settings → Doc Locator → Accent color          (:where(html), inherited)
 *   4. the defaults below                             (:where(html), inherited)
 * All plugin rules use :where() and therefore have specificity 0; 2 beats 3/4
 * because a value set on the element always beats an inherited one.
 */
:where(html) {
	/* Brand */
	--f9dlc-accent: #051C2C;          /* Solta master brand; overridden per site */
	--f9dlc-on-accent: #fff;          /* text on accent buttons */
	--f9dlc-link: #3d63dd;

	/* Type */
	--f9dlc-font: inherit;            /* theme font by default */
	--f9dlc-font-size: 16px;        /* base, placeholder text */
	--f9dlc-font-size-lg: 17px;       /* headline */
	--f9dlc-font-size-md: 15px;       /* clinic name, search input, "All" tile */
	--f9dlc-font-size-sm: 14px;       /* card rows, buttons */
	--f9dlc-font-size-xs: 13px;       /* hours, distance, "near me" */
	--f9dlc-font-size-xxs: 12px;      /* badges, consent note */

	/* Shape */
	--f9dlc-radius: 10px;             /* tiles, cards, map, logos */
	--f9dlc-radius-pill: 999px;       /* search bar, buttons */

	/* Surfaces & lines */
	--f9dlc-surface: #fff;            /* tiles, cards, search bar */
	--f9dlc-surface-muted: #eef0f2;   /* map area behind the placeholder */
	--f9dlc-border: #e0e0e3;
	--f9dlc-border-strong: #c9c9ce;   /* radio circles, plain badges */

	/* Text */
	--f9dlc-text: #1d1d1f;
	--f9dlc-text-soft: #444;
	--f9dlc-text-muted: #5b5b60;
	--f9dlc-text-faint: #888;

	/* Layout */
	--f9dlc-height: 640px;            /* map + list height (desktop) */
}

.f9dlc {
	container-type: inline-size;
	container-name: f9dlc;
	font-family: var(--f9dlc-font);
	font-size: var(--f9dlc-font-size);
}

/* Derived tokens: computed on the element, so they follow the accent of this
   placement. color-mix() replaces the old --f9dlc-accent-rgb helper. */
:where(.f9dlc) {
	--f9dlc-accent-05: color-mix(in srgb, var(--f9dlc-accent) 5%, transparent);
	--f9dlc-accent-10: color-mix(in srgb, var(--f9dlc-accent) 10%, transparent);
	--f9dlc-accent-14: color-mix(in srgb, var(--f9dlc-accent) 14%, transparent);
	--f9dlc-accent-30: color-mix(in srgb, var(--f9dlc-accent) 30%, transparent);
	--f9dlc-accent-45: color-mix(in srgb, var(--f9dlc-accent) 45%, transparent);
	--f9dlc-card-border: color-mix(in srgb, var(--f9dlc-accent) 35%, transparent);
}

.f9dlc *, .f9dlc *::before, .f9dlc *::after { box-sizing: border-box; }

.f9dlc-headline { text-align: center; color: var(--f9dlc-text-muted); margin: 0 0 14px; font-size: var(--f9dlc-font-size-lg); }

/* Treatment tiles (doc-finder-embed look) */
/* Equal tiles at any width: auto-fit keeps every column identical, so
   "All treatments" can never be wider than a brand tile. */
.f9dlc-filters {
	display: grid; gap: 12px; margin: 0 auto 26px; justify-content: center;
	grid-template-columns: repeat(auto-fit, 158px);
}
@container f9dlc (max-width: 720px) {
	/* "All treatments" spans the row, the products pair up below it. */
	.f9dlc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.f9dlc-chip--all { grid-column: 1 / -1; }
}
.f9dlc-chip { position: relative; border: 1px solid var(--f9dlc-border); background: var(--f9dlc-surface); border-radius: var(--f9dlc-radius); cursor: pointer; transition: border-color .15s, box-shadow .15s; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.f9dlc-chip--tile { min-height: 76px; padding: 14px 30px 14px 16px; display: flex; align-items: center; justify-content: center; }
.f9dlc-chip--tile img { max-height: 40px; max-width: 120px; object-fit: contain; }
/* Optical balance: the stacked Thermage mark needs more height than the wide
   wordmarks to read as equally weighted. Tune per brand here. */
.f9dlc-chip--tile img[data-brand="thermage"] { max-height: 52px; }
.f9dlc-chip--tile img[data-brand="fraxel"] { max-height: 36px; }
.f9dlc-chip--tile img[data-brand="clear-brilliant"] { max-height: 40px; }
.f9dlc-chip--tile img[data-brand="vaser"] { max-height: 40px; }
.f9dlc-chip--all { padding: 14px 30px 14px 16px; min-height: 76px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--f9dlc-font-size-md); color: var(--f9dlc-text-soft); }
.f9dlc-chip-label { font-weight: 600; color: var(--f9dlc-text-soft); }
.f9dlc-chip-radio { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border: 1.5px solid var(--f9dlc-border-strong); border-radius: 50%; background: var(--f9dlc-surface); }
.f9dlc-chip:hover { border-color: var(--f9dlc-accent); }
.f9dlc-chip.is-active { border-color: var(--f9dlc-accent); box-shadow: 0 0 0 1px var(--f9dlc-accent), 0 1px 3px rgba(0,0,0,.04); background: var(--f9dlc-accent-05); }
.f9dlc-chip.is-active .f9dlc-chip-radio { border-color: var(--f9dlc-accent); box-shadow: inset 0 0 0 4px var(--f9dlc-accent); }

/* ---- theme guard ----------------------------------------------------
   The locator renders inside the customer's theme. Themes (and browser
   defaults) style bare `input`/`select`/`button` selectors, which beat plain
   classes on specificity — the pill then shows a bordered input, a native
   dropdown arrow and a grey button. Every control below is therefore written
   with its tag included. */
.f9dlc input,
.f9dlc select,
.f9dlc button,
.f9dlc input:focus,
.f9dlc select:focus,
.f9dlc button:focus {
	box-shadow: none; text-transform: none; letter-spacing: normal; line-height: 1.2;
	font-family: inherit; min-height: 0;
}

/* Pill search bar with accent radius + button */
.f9dlc-search { display: flex; align-items: center; gap: 6px; max-width: 560px; margin: 0 auto 4px; background: var(--f9dlc-surface); border: 1px solid var(--f9dlc-border); border-radius: var(--f9dlc-radius-pill); padding: 6px 6px 6px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }

/* The pill stays a pill at every width (design node 1:67). Instead of
   breaking into a block, its parts shrink: the input gives up space first,
   then the controls lose padding. Nothing wraps.
   Every control carries its tag in the selector so theme and browser
   defaults (bordered inputs, native select arrows, grey buttons) lose. */
.f9dlc-search { flex-wrap: nowrap; }
.f9dlc-search-icon { color: var(--f9dlc-text-faint); display: flex; flex: 0 0 auto; }

/* Radius, submit and reset sit in a wrapper so they stay together when the
   input shrinks. Without a rule of its own the wrapper falls back to
   display:block and stacks them on top of each other, breaking out of the
   pill. */
.f9dlc .f9dlc-search-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* An element marked hidden must stay hidden. The display declarations on the
   controls below are more specific than the browser's [hidden] rule, so the
   reset button showed up before anything had been searched. Nothing in this
   widget may ever out-rank `hidden`, which is what !important says here. */
.f9dlc [hidden] { display: none !important; }

.f9dlc input.f9dlc-search-input {
	flex: 1 1 40px; min-width: 0; width: auto; height: auto;
	margin: 0; padding: 8px 6px;
	border: 0; border-radius: 0; outline: none;
	background: transparent; background-image: none;
	color: var(--f9dlc-text); font-size: var(--f9dlc-font-size-md); text-overflow: ellipsis;
}
.f9dlc input.f9dlc-search-input:focus {
	border: 0; outline: none; background: transparent; box-shadow: none;
}

.f9dlc select.f9dlc-radius {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 9px 16px;
	border: 0; border-radius: var(--f9dlc-radius-pill);
	background: var(--f9dlc-accent); background-image: none;
	color: var(--f9dlc-on-accent); font-size: var(--f9dlc-font-size-sm); font-weight: 600; cursor: pointer;
	text-align: center; white-space: nowrap;
}
.f9dlc select.f9dlc-radius:focus {
	background: var(--f9dlc-accent); color: var(--f9dlc-on-accent);
	outline: 2px solid var(--f9dlc-accent); outline-offset: 2px;
}

.f9dlc button.f9dlc-search-btn {
	flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 9px 22px;
	border: 0; border-radius: var(--f9dlc-radius-pill);
	background: var(--f9dlc-accent); background-image: none;
	color: var(--f9dlc-on-accent); font-size: var(--f9dlc-font-size-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.f9dlc button.f9dlc-search-btn:hover { filter: brightness(1.08); }

.f9dlc button.f9dlc-search-reset {
	flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 0 8px;
	border: 0; border-radius: 0; background: none;
	color: var(--f9dlc-accent); font-size: var(--f9dlc-font-size-sm); cursor: pointer;
	text-decoration: underline; white-space: nowrap;
}

@container f9dlc (max-width: 560px) {
	.f9dlc-search { padding: 5px 5px 5px 12px; gap: 4px; }
	.f9dlc-search-icon svg { width: 17px; height: 17px; }
	.f9dlc input.f9dlc-search-input { font-size: var(--f9dlc-font-size-sm); padding: 7px 2px; }
	.f9dlc select.f9dlc-radius { padding: 8px 12px; font-size: var(--f9dlc-font-size-xs); }
	.f9dlc button.f9dlc-search-btn { padding: 8px 16px; font-size: var(--f9dlc-font-size-xs); }
}
@container f9dlc (max-width: 420px) {
	.f9dlc-search { padding: 4px 4px 4px 10px; }
	.f9dlc-search-icon { display: none; }
	.f9dlc select.f9dlc-radius { padding: 8px 10px; font-size: var(--f9dlc-font-size-xxs); }
	.f9dlc button.f9dlc-search-btn { padding: 8px 14px; font-size: var(--f9dlc-font-size-xxs); }
	/* Reset only appears after a search — it may go when space is tightest. */
	.f9dlc-search-reset { display: none; }
}

/* Fallback for browsers without container queries (pre-2023). */
@supports not (container-type: inline-size) {
	@media (max-width: 720px) {
		.f9dlc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.f9dlc-chip--all { grid-column: 1 / -1; }
	}
	@media (max-width: 560px) {
		.f9dlc-search { padding: 5px 5px 5px 12px; gap: 4px; }
		.f9dlc input.f9dlc-search-input { font-size: var(--f9dlc-font-size-sm); }
		.f9dlc select.f9dlc-radius { padding: 8px 12px; font-size: var(--f9dlc-font-size-xs); }
		.f9dlc button.f9dlc-search-btn { padding: 8px 16px; font-size: var(--f9dlc-font-size-xs); }
	}
}

.f9dlc-body { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; height: var(--f9dlc-height); }
.f9dlc-list { overflow-y: auto; padding-right: 4px; }

/* Clinic card — shared between list and marker popup (.f9dlc-cardbody) */
.f9dlc-card { border: 1px solid var(--f9dlc-card-border); border-radius: var(--f9dlc-radius); margin-bottom: 12px; background: var(--f9dlc-surface); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.f9dlc-card:hover, .f9dlc-card.is-highlight { border-color: var(--f9dlc-accent); box-shadow: 0 2px 12px var(--f9dlc-accent-14); }

/* Stacked layout: the selected clinic is marked in the list instead of in a
   popup — a pulsing ring makes it findable after the map pans. */
.f9dlc-card.is-active { border-color: var(--f9dlc-accent); }
.f9dlc-card.is-highlight { animation: f9dlc-pulse 1.4s ease-out 3; }
@keyframes f9dlc-pulse {
	0%   { box-shadow: 0 0 0 0 var(--f9dlc-accent-45); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.f9dlc-card.is-highlight { animation: none; box-shadow: 0 0 0 3px var(--f9dlc-accent-30); }
}
.f9dlc-cardbody { position: relative;  padding: 14px 16px 16px; }
/* Clinic's own logo: subtle, top right, never fights the brand badges */
/* Clinic logo: left-aligned and prominent — it identifies the practice,
   while the small brand badges sit on the right. */
/* Clinic logo sits top right, as in the design (node 1:67). */
.f9dlc-clinic-logo {
	position: absolute; top: 14px; right: 16px;
	width: 70px; height: 72px; padding: 6px;
	border: 1px solid var(--f9dlc-border); border-radius: var(--f9dlc-radius); background: var(--f9dlc-surface);
	object-fit: contain; box-sizing: border-box;
}
.f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-card-name,
.f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-row,
.f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-card-distance { padding-right: 86px; }
@media (max-width: 640px) {
	.f9dlc-clinic-logo { width: 54px; height: 56px; }
	.f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-card-name,
	.f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-row,
	.f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-card-distance { padding-right: 64px; }
}

/* Brand chips: bottom right, each on its own brand tint (10%). */
/* One row, always: four brands must not wrap onto a second line. */
.f9dlc-card-brands {
	display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end;
	margin: 14px 0 0; padding-top: 4px; overflow: hidden;
}
/* Identical chip size for every brand; the padding does the optical
   balancing, because the wordmarks have very different proportions
   (Fraxel is 2.5× as wide as it is tall, Thermage only 1.7×). */
.f9dlc-card-brands img,
.f9dlc-card-brands .f9dlc-badge {
	display: flex; align-items: center; justify-content: center;
	width: 78px; height: 34px; border-radius: var(--f9dlc-radius);
	object-fit: contain; box-sizing: border-box;
	flex: 0 1 78px; min-width: 0; /* shrink instead of wrapping */
}
.f9dlc-card-brands img[data-brand="thermage"] { padding: 4px 12px; }
.f9dlc-card-brands img[data-brand="vaser"] { padding: 5px 14px; }
.f9dlc-card-brands img[data-brand="fraxel"] { padding: 9px 10px; }
.f9dlc-card-brands img[data-brand="clear-brilliant"] { padding: 8px 9px; }
/* Sub-brand tints per Solta Brand Guidelines v1.0 (May 2026):
   Thermage #512A44 · Fraxel #651C32 · VASER #2D2926 · Clear + Brilliant #326295 */
.f9dlc-card-brands img[data-brand="thermage"] { background: rgba(81,42,68,.1); }
.f9dlc-card-brands img[data-brand="fraxel"] { background: rgba(101,28,50,.1); }
.f9dlc-card-brands img[data-brand="vaser"] { background: rgba(45,41,38,.1); }
.f9dlc-card-brands img[data-brand="clear-brilliant"] { background: rgba(50,98,149,.1); }
.f9dlc-card-brands .f9dlc-badge { background: var(--f9dlc-accent-10); color: var(--f9dlc-accent); font-size: var(--f9dlc-font-size-xxs); }
.f9dlc-badge { font-size: var(--f9dlc-font-size-xxs); border: 1px solid var(--f9dlc-border-strong); border-radius: var(--f9dlc-radius-pill); padding: 2px 10px; color: var(--f9dlc-text-muted); }
.f9dlc-card-name { margin: 0 0 10px; font-size: var(--f9dlc-font-size-md); font-weight: 700; color: var(--f9dlc-text); }
.f9dlc-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; font-size: var(--f9dlc-font-size-sm); color: var(--f9dlc-text-soft); line-height: 1.45; }
.f9dlc-row:last-child { margin-bottom: 0; }
.f9dlc-ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--f9dlc-accent); margin-top: 1px; }
.f9dlc-ic svg { width: 16px; height: 16px; display: block; }
.f9dlc-row a { color: var(--f9dlc-link); text-decoration: none; word-break: break-word; }
.f9dlc-row a:hover { text-decoration: underline; }
.f9dlc-hours { white-space: pre-line; color: var(--f9dlc-text-muted); font-size: var(--f9dlc-font-size-xs); }
.f9dlc-card-distance { margin: 8px 0 0; font-size: var(--f9dlc-font-size-xs); color: var(--f9dlc-accent); font-weight: 700; }
.f9dlc-empty { padding: 24px 12px; text-align: center; color: var(--f9dlc-text-muted); }

/* Slim accent scrollbar like the embed. The track is tinted rather than
   transparent: with a long list the thumb shrinks to a few pixels, and on an
   invisible track that reads as a stray mark beside the list instead of as
   something you can drag. */
.f9dlc-list { scrollbar-width: thin; scrollbar-color: var(--f9dlc-accent) rgba(0,0,0,.06); }
.f9dlc-list::-webkit-scrollbar { width: 6px; }
.f9dlc-list::-webkit-scrollbar-thumb { background: var(--f9dlc-accent); border-radius: var(--f9dlc-radius-pill); min-height: 28px; }
.f9dlc-list::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: var(--f9dlc-radius-pill); }

/* "Near me" map control */
.f9dlc-nearme { position: absolute; left: 12px; bottom: 24px; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--f9dlc-surface); border: 0; border-radius: var(--f9dlc-radius-pill); padding: 9px 16px; font-size: var(--f9dlc-font-size-xs); cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.25); color: var(--f9dlc-text-soft); }

/* Break out of narrow theme content containers (e.g. block themes) */
.f9dlc--fullwidth { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.f9dlc-nearme-dot { width: 9px; height: 9px; border-radius: 50%; background: #e03131; box-shadow: 0 0 0 3px rgba(224,49,49,.2); }

.f9dlc-map-wrap { position: relative; border-radius: var(--f9dlc-radius); overflow: hidden; background: var(--f9dlc-surface-muted); }
.f9dlc-map { width: 100%; height: 100%; }
.f9dlc-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 12px; }
.f9dlc-consent-text { max-width: 460px; color: var(--f9dlc-text-soft); margin: 0; }
.f9dlc-consent-btn { background: var(--f9dlc-accent); color: var(--f9dlc-on-accent); border: 0; border-radius: var(--f9dlc-radius-pill); padding: 12px 28px; font-size: var(--f9dlc-font-size); cursor: pointer; }
.f9dlc-consent-note { max-width: 460px; font-size: var(--f9dlc-font-size-xxs); color: var(--f9dlc-text-faint); margin: 0; }
.f9dlc-admin-hint { border: 1px dashed #b32d2e; color: #b32d2e; padding: 12px; border-radius: 6px; }

@container f9dlc (max-width: 820px) {
  .f9dlc-body { grid-template-columns: 1fr; height: auto; }
  .f9dlc-map-wrap { height: 380px; order: -1; }
  .f9dlc-list { max-height: 480px; }
  .f9dlc-search { flex-wrap: wrap; }
  .f9dlc-search-input { min-width: 100%; }
}

/* Map-only mode + info popup */
.f9dlc--map-only .f9dlc-body { grid-template-columns: 1fr; }
.f9dlc--map-only .f9dlc-list { display: none; }
.f9dlc-info { min-width: 240px; max-width: 320px; }
.f9dlc-info .f9dlc-cardbody { position: relative; padding: 6px 4px 10px; }
.f9dlc-info .f9dlc-clinic-logo { top: 2px; right: 4px; width: 62px; height: 64px; }
.f9dlc-info .f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-card-name,
.f9dlc-info .f9dlc-cardbody:has(.f9dlc-clinic-logo) .f9dlc-row { padding-right: 74px; }
.f9dlc-info .f9dlc-card-brands { margin-top: 14px; padding-bottom: 6px; }
@media (max-width: 820px) {
  .f9dlc--map-only .f9dlc-map-wrap { height: var(--f9dlc-height); order: 0; }
}

/* Privacy link in the two-click placeholder */
.f9dlc-consent-note a.f9dlc-consent-privacy { color: inherit; text-decoration: underline; }