/* ==========================================================================
   13-locations-figma.css — Sunrise Dermatology /location/ landing alignment
   --------------------------------------------------------------------------
   Source: Figma node 4531:9376 (file mIY3xFtVxnPjx9zUEZHWEN, frame
   "Frame 1000004796" — the Locations search-and-cities row).

   Loaded last after 12-home-figma.css so its rules win by load order
   without touching working tier files (01-tokens, 03-typography, 05, 08).

   Scope: `body.page-id-229` only (the published /location/ landing).
   Other pages (single-location detail, header nav) stay on their own tiers.

   Live page anatomy (matches Figma frame top-down):
     row-unique-0 — "Our Locations" h1 + intro paragraph    (existing OK)
     row-unique-1 — col-double-gutter row:
        col-lg-8: H2 "Search First Available Appointment"
                  .sdg-nextpatient (NextPatient widget)
                  Two disclaimer paragraphs
                  Map.webp image
        col-lg-4: ul#menu-locations-menu (Daphne / Foley / Mobile)

   Figma → live mapping table:
     4531:9382 (Heading)            → #row-unique-1 h2.h3
     4583:3544 (Form container)     → .sdg-nextpatient .nextpatient-criteria-container
     4583:3545 (Visit Type field)   → .nextpatient-criteria-box:has(select[name="group"])
     4583:3548 (Visit Reason field) → .nextpatient-criteria-box:has(select[name="reason_id"])
     4583:3551 (Location field)     → .nextpatient-criteria-box:has(input[name="zip"])
     4583:3554 (Within field)       → .nextpatient-criteria-box:has(select[name="max_miles"])
     6510:9399 (Search button)      → .nextpatient-criteria-box:has(input[type="submit"])
     4583:3242 (Map illustration)   → .uncode-single-media img (Map.webp)
     4531:9434 (City list)          → ul#menu-locations-menu

   Sections:
     1. Section background and outer spacing
     2. H2 "Search First Available Appointment" — 56/64
     3. NextPatient form chrome (.sdg-nextpatient)
        3a. Container layout (flex wrap, gap)
        3b. Hidden Age / Insurance fields
        3c. Field labels (Satoshi/Mona Sans Medium 16/24)
        3d. Dropdowns + zip input (h56, r6, shadow-md, #114671 text)
        3e. Submit button (pill, blue bg, white text, search SVG)
        3f. Hide injected #filtersubmit FA icon
     4. Disclaimer paragraphs
     5. Map image — 24px radius
     6. City list (#menu-locations-menu) — 40/48 #114671
     7. Two-column gap
     8. Responsive (959 / 640 / 479)
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   1. Section background + outer spacing
   --------------------------------------------------------------------------
   Figma: #fcfaf7 bg, pt 72, pb 160 on the search-and-cities row.
   Live `style-light-bg` on body resolves to --sd-white via the palette,
   so we just need to assert pb on the row (not strictly required, but
   keeps the row from butting against the footer CTA).
   ────────────────────────────────────────────────────────────────────────── */

body.page-id-229 #row-unique-1 {
	background-color: var(--sd-white);
}


/* ──────────────────────────────────────────────────────────────────────────
   2. Heading — Figma 4531:9382
   --------------------------------------------------------------------------
   Figma: "Schedule Appointment" 56/64 Mona Sans SemiCondensed Regular #114671.
   Live: `<h2 class="h3">Search First Available Appointment</h2>`
   We keep the user's copy ("Search First Available Appointment") and only
   align the typography to the Figma display tier.
   ────────────────────────────────────────────────────────────────────────── */

body.page-id-229 #row-unique-1 .heading-text h2.h3,
body.page-id-229 #row-unique-1 .heading-text h2.h3 span {
	font-family: var(--sd-font-display) !important;
	font-size: 56px !important;
	font-weight: 400 !important;
	line-height: 64px !important;
	letter-spacing: -0.5px !important;
	color: var(--sd-blue-gray) !important;
	margin: 0 0 24px !important;
}

/* Kill the 36px margin-top WPBakery applies to .wpb_raw_html so the form
   sits directly under the heading instead of with a 76px gap. */
body.page-id-229 .wpb_raw_html.sdg-nextpatient,
body.page-id-229 .sdg-nextpatient {
	margin-top: 0 !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. NextPatient form chrome — Figma 4583:3544 → .sdg-nextpatient
   --------------------------------------------------------------------------
   The widget renders a <form> with 6 children (.nextpatient-criteria-box):
       group (Visit Type)        — keep, label "Visit Type"
       reason_id (Visit Reason)  — keep, label "Visit Reason"
       age                       — HIDE (not in Figma)
       insurance_id              — HIDE (not in Figma)
       zip + max_miles           — combined "Location" / "Within" pair
       submit                    — pill button + search icon

   We mirror Goodman's selector strategy (proven at scale) but retoken
   to the Sunrise palette via --sd-blue-gray, --sd-shadow-md, etc.
   ────────────────────────────────────────────────────────────────────────── */

/* 3a. Outer wrapper margin so the form sits 24-36px under the heading
       (Figma container "Frame 1000004723" gap 40 between heading and form,
       40 already on the heading margin-bottom above; this just guards
       NextPatient's own .nextpatient-box top padding). */
body.page-id-229 .sdg-nextpatient .nextpatient-box {
	width: 100%;
	max-width: 100%;
	padding-bottom: 0;
	margin-top: 0;
}

/* 3a. Criteria container — flex wrap, two rows like Figma */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 16px 14px !important;
	width: 100% !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
}

/* 3a. Criteria boxes — column with label-on-top */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* 3b. Hide Age and Insurance (Figma frame only shows 4 inputs + button) */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[name="age"]),
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="insurance_id"]) {
	display: none !important;
}

/* 3a. Field flex sizing — REAL DOM is 4 visible boxes:
       Box: Visit Type        — select[name="group"]
       Box: Visit Reason      — select[name="reason_id"]
       Box: "Where"           — contains BOTH input[name="zip"] AND select[name="max_miles"]
                                with raw "within" text node between them
       Box: Search submit     — input[type="submit"]
       Layout target:
         Row 1: [ Visit Type 50% ] [ Visit Reason 50% ]
         Row 2: [ Where (zip + miles inline) flex-grow ]    [ Search auto ] */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="group"]),
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="reason_id"]) {
	flex: 1 1 calc(50% - 7px) !important;
	min-width: 220px;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[name="zip"]) {
	flex: 1 1 calc(70% - 14px) !important;
	min-width: 320px;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[type="submit"]) {
	flex: 0 0 auto !important;
	margin-left: auto !important;
}

/* 3c. Field labels — Figma calls for 16/24 Medium body text on light;
       use --sd-blue-gray (Sunrise body-text token from 01-tokens.css).
       Matches the /location/[city]/ form labels from 08- (single-location)
       which the user signed off on. Mona Sans Medium for the body face. */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-label,
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-label label {
	display: block !important;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	font-family: var(--sd-font-body) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 500 !important;
	color: var(--sd-blue-gray) !important;
}

/* The inner <label> element shouldn't double up the bottom margin — only the
   wrapping .nextpatient-criteria-label div needs the gap to the input. Same
   pattern 08- uses for body.single-location. */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-label label {
	margin-bottom: 0 !important;
}

/* 3d. Dropdowns + zip input — Figma dropdown chrome
       (h56, border 1px rgba(0,0,0,0.2), radius 6, shadow-md, #114671 text 18) */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-input {
	display: flex !important;
	align-items: stretch !important;
	gap: 8px;
	min-width: 0;
	width: 100%;
}

/* 3d-i. Where-box inner row — zip [within] max_miles flow
        NextPatient renders the raw text node "within " between input and select.
        Goodman's pattern: zero font-size on wrapper, restore on real controls. */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[name="zip"]) .nextpatient-criteria-input {
	flex-wrap: nowrap !important;
	gap: 8px !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[name="zip"] {
	flex: 1 1 50% !important;
	min-width: 0 !important;
	width: auto !important;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select[name="max_miles"] {
	flex: 1 1 50% !important;
	min-width: 0 !important;
	width: auto !important;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select,
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input:not([type="submit"]) {
	width: 100% !important;
	height: 56px !important;
	min-width: 0;
	padding: 0 18px !important;
	margin: 0 !important;
	border: 1px solid var(--sd-border-on-light) !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	background-color: #ffffff;
	box-shadow: var(--sd-shadow-md);
	font-family: var(--sd-font-body) !important;
	font-size: 18px !important;
	line-height: 26px !important;
	font-weight: 400 !important;
	color: var(--sd-blue-gray) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 46px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23114671' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 24px !important;
	cursor: pointer;
	text-overflow: ellipsis;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select:disabled {
	color: var(--sd-blue-gray);
	opacity: 0.6;
	cursor: not-allowed;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[name="zip"]::placeholder {
	color: var(--sd-blue-gray);
	opacity: 0.6;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select:hover,
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input:not([type="submit"]):hover {
	border-color: rgba(17, 70, 113, 0.45) !important;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select:focus,
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input:not([type="submit"]):focus {
	outline: none;
	border-color: var(--sd-blue-gray) !important;
	box-shadow: 0 0 0 3px rgba(17, 70, 113, 0.18) !important;
}

/* 3e. Submit button — Figma 6510:9399 (pill, h48, blue, white text, search icon)
       NextPatient renders <input type="submit" value="Search">, so we set the
       search icon as a left-positioned background image. */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[type="submit"] {
	width: auto !important;
	min-width: 140px;
	height: 48px !important;
	padding: 0 24px 0 46px !important;
	margin: 0 !important;
	border: 1px solid var(--sd-blue-gray) !important;
	border-radius: 24px !important;
	box-sizing: border-box;
	background-color: var(--sd-blue-gray) !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%23FCFAF7' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%23FCFAF7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 20px center !important;
	background-size: 16px !important;
	box-shadow: none;
	color: var(--sd-white) !important;
	font-family: var(--sd-font-body) !important;
	font-size: 18px !important;
	line-height: 26px !important;
	font-weight: 600 !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[type="submit"]:hover,
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[type="submit"]:focus {
	background-color: var(--sd-blue) !important;
	border-color: var(--sd-blue) !important;
}

body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[type="submit"]:active {
	background-color: var(--sd-blue) !important;
	border-color: var(--sd-blue) !important;
	background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)) !important;
}

/* 3e. Submit-box label is empty in NextPatient markup — keep its 16px height
       so the input bottom-aligns with the dropdowns above it. */
body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[type="submit"]) .nextpatient-criteria-label {
	display: none !important;
}

/* 3f. Hide the FA search icon the inline page script appends after the submit.
       It's redundant with the SVG we baked into the button background. */
body.page-id-229 .sdg-nextpatient #filtersubmit {
	display: none !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. Disclaimer paragraphs
   --------------------------------------------------------------------------
   Two <p style="font-weight: 300;">…</p> blocks below the form, listing
   the office and Virtual Scheduling Assistant phone numbers. Inline
   styles win over class selectors so we override with !important.
   ────────────────────────────────────────────────────────────────────────── */

body.page-id-229 .sdg-nextpatient .wpb_wrapper > p {
	font-family: var(--sd-font-body) !important;
	font-size: 14px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	color: rgba(17, 70, 113, 0.78) !important;
	margin: 0 0 8px !important;
}

body.page-id-229 .sdg-nextpatient .wpb_wrapper > p:last-child {
	margin-bottom: 0 !important;
}

body.page-id-229 .sdg-nextpatient .wpb_wrapper > p a {
	color: var(--sd-blue-gray) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

body.page-id-229 .sdg-nextpatient .wpb_wrapper > p a:hover {
	text-decoration: underline !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. Map image — Figma 4583:3242 (689×496 rounded)
   --------------------------------------------------------------------------
   Live image is wp-image-53161 (Map.webp) inside a tmb-light img-round-xl
   wrapper. img-round-xl already supplies a large radius, but the
   .uncode-single-media-wrapper sometimes overflows; we just assert 24px.
   ────────────────────────────────────────────────────────────────────────── */

body.page-id-229 #row-unique-1 .uncode-single-media .uncode-single-media-wrapper,
body.page-id-229 #row-unique-1 .uncode-single-media img {
	border-radius: 24px !important;
	overflow: hidden;
}

body.page-id-229 #row-unique-1 .uncode-single-media {
	margin-top: 24px;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. City list — Figma 4531:9434
   --------------------------------------------------------------------------
   Live: ul#menu-locations-menu rendered by a wp_nav_menu sidebar widget.
   Existing 05-header-nav.css gives 24/32 var(--sd-blue-gray) with a \f105 chevron.
   Figma calls for 40/48 #114671 SemiCondensed with the same chevron and
   24px y-padding (already in 05). We override only on this page.
   ────────────────────────────────────────────────────────────────────────── */

body.page-id-229 #menu-locations-menu li {
	padding: 24px 0 !important;
	border-bottom: 1px solid var(--sd-border-on-light) !important;
	text-transform: none !important;
}

body.page-id-229 #menu-locations-menu li:last-child {
	border-bottom: none !important;
}

body.page-id-229 #menu-locations-menu li a {
	font-family: var(--sd-font-display) !important;
	font-size: 40px !important;
	line-height: 48px !important;
	font-weight: 400 !important;
	letter-spacing: -0.4px !important;
	color: var(--sd-blue-gray) !important;
	text-transform: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px;
	transition: color 0.2s ease, transform 0.2s ease;
}

/* Suppress Uncode parent-theme `style-widgets.css`:
   `.widget-container.widget_nav_menu .menu-item a::before { content: "\f105"; }`
   That left-side chevron stacks against our `::after`, producing > TEXT >. */
body.page-id-229 #menu-locations-menu li.menu-item a::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	margin: 0 !important;
}

body.page-id-229 #menu-locations-menu li a:hover,
body.page-id-229 #menu-locations-menu li a:focus {
	color: #0d3858 !important;
}

body.page-id-229 #menu-locations-menu li a:hover::after {
	transform: translateX(4px);
}

body.page-id-229 #menu-locations-menu li a::after {
	font-family: "uncodeicon";
	content: "\f105";
	font-size: 24px;
	font-weight: 400;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}


/* ──────────────────────────────────────────────────────────────────────────
   7. Two-column gap
   --------------------------------------------------------------------------
   Verified at 1440px viewport via DevTools: .col-lg-8 = 800/728 outer/inner,
   .col-lg-4 = 400/328 outer/inner, both with padding-left 72px from
   .col-double-gutter. That works out to ~72-100px visible whitespace
   between the form and the city list, which reads close enough to Figma's
   144px without needing extra padding. (Earlier attempt to add another
   64-96px broke layout by compounding padding.)
   ────────────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   8. Responsive
   ────────────────────────────────────────────────────────────────────────── */

/* Tablet — search form stays multi-row but loosens; city list shrinks */
@media (max-width: 959px) {
	body.page-id-229 #row-unique-1 .heading-text h2.h3,
	body.page-id-229 #row-unique-1 .heading-text h2.h3 span {
		font-size: 44px !important;
		line-height: 52px !important;
		margin-bottom: 32px !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-container {
		gap: 16px !important;
		margin-bottom: 28px !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="group"]),
	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="reason_id"]) {
		flex: 1 1 calc(50% - 8px) !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[name="zip"]) {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	body.page-id-229 #menu-locations-menu li a {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

/* Tablet portrait — stack form rows fully, allow search to wrap full-width */
@media (max-width: 640px) {
	body.page-id-229 #row-unique-1 .heading-text h2.h3,
	body.page-id-229 #row-unique-1 .heading-text h2.h3 span {
		font-size: 36px !important;
		line-height: 44px !important;
		letter-spacing: -0.3px !important;
		margin-bottom: 24px !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="group"]),
	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(select[name="reason_id"]),
	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[name="zip"]) {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box:has(input[type="submit"]) {
		flex: 1 1 100% !important;
		margin-left: 0 !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input[type="submit"] {
		width: 100% !important;
		min-width: 0 !important;
	}

	body.page-id-229 #menu-locations-menu li a {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	body.page-id-229 #menu-locations-menu li {
		padding: 18px 0 !important;
	}
}

/* Phone — keep dropdowns finger-friendly */
@media (max-width: 479px) {
	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-label,
	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-label label {
		font-size: 14px !important;
		margin-bottom: 8px !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select,
	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box input:not([type="submit"]) {
		font-size: 16px !important;
		line-height: 22px !important;
		padding: 0 14px !important;
	}

	body.page-id-229 .sdg-nextpatient .nextpatient-criteria-box select {
		padding: 0 40px 0 14px !important;
		background-position: right 12px center !important;
	}

	body.page-id-229 #menu-locations-menu li a {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}