/* ==========================================================================
   14-nextpatient-results-figma.css
   --------------------------------------------------------------------------
   Styles ONLY the post-search output of the NextPatient widget — provider
   rows (default empty state + populated state), slot-time tiles, "More…"
   pill, "no times available" message, and the "CALL TO SCHEDULE" fallback.

   Does NOT touch the criteria form (Visit Type / Visit Reason / Where /
   Search button). That stays with 13-locations-figma.css and NextPatient's
   own inline <style>.

   Source of truth — Figma node 6509:7446 ("Doctors" frame):
     • Bare layout, no card surface — providers separated by a 1px
       rgba(0,0,0,0.20) BOTTOM divider, 40px padding-bottom + 40px gap.
     • Round 167×167 headshot on a #b9dbeb light-blue mask cast.
     • Provider name      — Mona Sans SemiCondensed Regular 24/32 #114671
     • Provider address   — Mona Sans Regular            18/26 #114671
     • "Next Appointment:" label  — Mona Sans Regular     18/26 #114671
     • Date               — Mona Sans SemiBold           18/26 #114671
     • Empty hint copy    — Mona Sans Regular            16/24 #114671

   Slot tile spec — Sunrise design system .sd-slot
   (Claude Design/extracted/preview/components.css §"Time-slot card"):
     • 178 × auto, 16 padding, 1px var(--sd-border-on-light), 8 radius,
       rgba(255,255,255,0.20) fill, var(--sd-shadow-md).
     • Hover/focus → 2px solid var(--sd-blue), color var(--sd-blue),
       date+time weight 600. No background gradient anywhere.

   Scope — `[id^="nextpatient-widget"]` so rules apply on:
     • /location/                  (widget 4366)
     • /location/daphne/           (widget 4371)
     • /location/foley/            (widget …)
     • /location/mobile/           (widget …)

   Goodman scrub — 08-providers-facet-nextpatient.css still references
   `var(--uncode-palette-color-916765)` (purple-ish in the parent palette)
   in :hover / :focus / .nextpatient-slot-time-more rules. Those rules are
   gated behind `.aqua-book-appt`, which is NOT on Sunrise DOM, so they
   don't render today. The override block at the bottom of this file
   asserts Sunrise tokens with !important regardless, so if `.aqua-book-appt`
   ever shows up later (or 916765 ever resolves to purple via Uncode's
   inline palette CSS) the live UI stays clean.

   Sections:
     1. Schedule wrapper + provider-table layout (bare, divided)
     2. Provider row (default + populated, shared chrome)
     3. Round 167px photo
     4. Provider name / address / profile-link
     5. Default empty-state copy (.next-appt-block + .explanation)
     6. Populated-state slot tiles (.sd-slot tokens)
     7. "More…" pill
     8. "No times available" + "CALL TO SCHEDULE" fallbacks
     9. Goodman/Aqua override scrub
    10. Responsive
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   1. Schedule wrapper + provider-table
   ────────────────────────────────────────────────────────────────────────── */

[id^="nextpatient-widget"] [id^="nextpatient-schedule"] {
	margin-top: 24px;
	font-family: var(--sd-font-body);
	color: var(--sd-blue-gray);
}

[id^="nextpatient-widget"] .nextpatient-provider-table {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	text-align: left;
	margin: 0 !important;
	padding: 0 !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. Provider row — bare, with bottom divider per Figma
   --------------------------------------------------------------------------
   Default NP renders <div class="nextpatient-provider"> as `display:table`
   with two children (.image-cell + .provider-cell). Switch to flex so the
   round 167×167 photo stays fixed and doesn't stretch to match the content
   cell's height (table-cell rows force equal height across siblings).
   ────────────────────────────────────────────────────────────────────────── */

[id^="nextpatient-widget"] .nextpatient-provider {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 40px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 24px 0 40px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sd-border-on-light) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--sd-blue-gray) !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-table .nextpatient-provider:first-child {
	padding-top: 0 !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-table .nextpatient-provider:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

[id^="nextpatient-widget"] .nextpatient-provider:hover {
	transform: none !important;
	box-shadow: none !important;
	border-color: var(--sd-border-on-light) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. Round 167px photo on a light-blue cast
   --------------------------------------------------------------------------
   NP wraps the headshot in two cells:
     • .nextpatient-provider-image-cell  — desktop large photo
     • .nextpatient-provider-name-block-left .nextpatient-provider-small-photo
                                          — mobile fallback
   Figma uses a single round mask. We render the cell as a 167px circle
   on #b9dbeb so the mask cast peeks around any portrait photo.
   ────────────────────────────────────────────────────────────────────────── */

/* CSS variable lets every breakpoint resize the photo by changing ONE value
   — width/height/flex/max all derive from --np-photo so the shape can never
   go oval. */
[id^="nextpatient-widget"] .nextpatient-provider {
	--np-photo: 167px;
}

[id^="nextpatient-widget"] .nextpatient-provider-image-cell {
	display: block !important;
	flex: 0 0 var(--np-photo) !important;
	width: var(--np-photo) !important;
	height: var(--np-photo) !important;
	min-width: var(--np-photo) !important;
	max-width: var(--np-photo) !important;
	background-color: var(--sd-light-blue) !important;
	background-size: cover !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	border-radius: 24px !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
}

[id^="nextpatient-widget"] .nextpatient-provider-provider-cell {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	vertical-align: top !important;
}

/* The mobile-only small photo node — keep hidden on desktop */
[id^="nextpatient-widget"] .nextpatient-provider-name-block-left {
	display: none !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. Name / address / profile link — Figma type tokens
   ────────────────────────────────────────────────────────────────────────── */

[id^="nextpatient-widget"] .nextpatient-provider-name-block {
	display: block !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-name-block-right {
	display: block !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-name {
	font-family: var(--sd-font-display) !important;
	font-size: 24px !important;
	line-height: 32px !important;
	font-weight: 400 !important;
	letter-spacing: -0.2px !important;
	color: var(--sd-blue-gray) !important;
	margin: 0 0 16px !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-name b {
	font-weight: inherit;
}

[id^="nextpatient-widget"] .nextpatient-provider-address {
	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;
	margin: 0 0 12px !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-address em {
	font-style: italic;
	color: var(--sd-blue-gray) !important;
	font-weight: 400 !important;
	opacity: 0.7;
}

[id^="nextpatient-widget"] .nextpatient-provider-blurb {
	margin: 0 0 16px !important;
	font-size: 16px !important;
	line-height: 24px !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-blurb a.nextpatient-profile-url {
	color: var(--sd-blue) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 2px;
	background: transparent !important;
	background-image: none !important;
}

[id^="nextpatient-widget"] .nextpatient-provider-blurb a.nextpatient-profile-url:hover,
[id^="nextpatient-widget"] .nextpatient-provider-blurb a.nextpatient-profile-url:focus {
	color: var(--sd-blue-gray) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. Default empty-state copy — .next-appt-block + .explanation
   --------------------------------------------------------------------------
   When the widget loads BEFORE a full search, NP renders providers with
   a `.next-appt-block` (Next Appointment: <date>) followed by an
   `.explanation` ("Choose a visit reason above to see exact times").
   Style to match Figma node 6509:7467.
   ────────────────────────────────────────────────────────────────────────── */

[id^="nextpatient-widget"] .next-appt-block {
	margin: 0 0 16px !important;
	padding: 0 !important;
	font-family: var(--sd-font-body) !important;
	color: var(--sd-blue-gray) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	max-width: 480px;
}

[id^="nextpatient-widget"] .next-appt-block .time-line {
	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;
	margin: 0 !important;
	background: transparent !important;
}

[id^="nextpatient-widget"] .next-appt-block .time-line b,
[id^="nextpatient-widget"] .next-appt-block .time-line strong {
	font-weight: 600 !important;
}

[id^="nextpatient-widget"] .next-appt-block .explanation {
	font-family: var(--sd-font-body) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 400 !important;
	color: var(--sd-blue-gray) !important;
	opacity: 0.85;
	margin: 8px 0 0 !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. Populated state — slot-time tiles (sd-slot tokens)
   --------------------------------------------------------------------------
   NP wraps each <a class="nextpatient-link nextpatient-slot-time"> in a
   non-classed inline-block <div>. We promote the parent .nextpatient-
   provider-times to flex so the tiles flow with consistent gaps.

   sd-slot tokens (preview/components.css):
     width: 178px; padding: 16px; border: 1px var(--sd-border-on-light);
     bg: rgba(255,255,255,0.20); radius: 8; shadow: var(--sd-shadow-md);
     date 14/+0.5; time 16/+0.5; weight 400 default.
     :is-selected → border 2px var(--sd-blue), color var(--sd-blue),
                    date+time weight 600.
   ────────────────────────────────────────────────────────────────────────── */

/* CSS Grid auto-fit packs slots into as many columns as fit at >=110px each.
   auto-fit (vs auto-fill) collapses empty tracks so 4 slots in a 1000px
   container become 4 wider tiles instead of 8 narrow ones with 4 blank
   tracks on the right. The max-width caps tile growth so they don't
   stretch absurdly wide on the locations-index full-bleed widget. */
[id^="nextpatient-widget"] .nextpatient-provider-times {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	background: transparent !important;
	background-image: none !important;
	width: 100%;
	min-width: 0;
	max-width: 720px;
}

/* NP wraps each slot <a> in an unstyled <div style="display: inline-block">.
   Make the wrapper transparent in the grid so the <a> fills the cell. */
[id^="nextpatient-widget"] .nextpatient-provider-times > div {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
}

[id^="nextpatient-widget"] a.nextpatient-slot-time {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 80px;
	padding: 14px 12px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border: 1px solid var(--sd-border-on-light) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.20) !important;
	background-color: rgba(255, 255, 255, 0.20) !important;
	background-image: none !important;
	box-shadow: var(--sd-shadow-md);
	font-family: var(--sd-font-body) !important;
	color: var(--sd-blue-gray) !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

[id^="nextpatient-widget"] a.nextpatient-slot-time:hover,
[id^="nextpatient-widget"] a.nextpatient-slot-time:focus,
[id^="nextpatient-widget"] a.nextpatient-slot-time:active {
	border: 2px solid var(--sd-blue) !important;
	padding: 13px 11px !important; /* keep tile size constant when border thickens */
	color: var(--sd-blue) !important;
	background: rgba(255, 255, 255, 0.45) !important;
	background-color: rgba(255, 255, 255, 0.45) !important;
	background-image: none !important;
	outline: none;
	transform: none !important;
}

[id^="nextpatient-widget"] a.nextpatient-slot-time:hover .nextpatient-slot-time-day,
[id^="nextpatient-widget"] a.nextpatient-slot-time:focus .nextpatient-slot-time-day,
[id^="nextpatient-widget"] a.nextpatient-slot-time:hover .nextpatient-slot-time-time,
[id^="nextpatient-widget"] a.nextpatient-slot-time:focus .nextpatient-slot-time-time {
	font-weight: 600 !important;
	color: var(--sd-blue) !important;
}

[id^="nextpatient-widget"] .nextpatient-slot-time-day {
	font-family: var(--sd-font-body) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.5px !important;
	font-weight: 400 !important;
	color: var(--sd-blue-gray) !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

[id^="nextpatient-widget"] .nextpatient-slot-time-time {
	font-family: var(--sd-font-body) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.5px !important;
	font-weight: 400 !important;
	color: var(--sd-blue-gray) !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   7. "More…" pill
   --------------------------------------------------------------------------
   Same DOM as a slot but with .nextpatient-slot-time-more.
   Treat as a solid CTA: blue-gray bg, white text. No purple gradient.
   ────────────────────────────────────────────────────────────────────────── */

[id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 80px;
	padding: 14px 12px !important;
	background: var(--sd-blue-gray) !important;
	background-color: var(--sd-blue-gray) !important;
	background-image: none !important;
	border: 1px solid var(--sd-blue-gray) !important;
	box-shadow: var(--sd-shadow-md);
	color: var(--sd-white) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.3px !important;
}

[id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more:hover,
[id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more:focus,
[id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more:active {
	padding: 14px 12px !important; /* override the slot-tile :hover that thickens border */
	background: var(--sd-blue) !important;
	background-color: var(--sd-blue) !important;
	background-image: none !important;
	border: 1px solid var(--sd-blue) !important;
	color: var(--sd-white) !important;
	transform: none !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   8. Empty / fallback states
   --------------------------------------------------------------------------
   .nextpatient-no-times-available   — practice-wide "Sorry, no times…" panel
   .call-no-times                    — single provider's "CALL TO SCHEDULE"
                                       row when no online booking offered
   ────────────────────────────────────────────────────────────────────────── */

[id^="nextpatient-widget"] .nextpatient-no-times-available {
	font-family: var(--sd-font-body) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 400 !important;
	color: var(--sd-blue-gray) !important;
	padding: 16px 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	font-style: normal !important;
}

[id^="nextpatient-widget"] .nextpatient-no-times-available a {
	color: var(--sd-blue) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 2px;
	white-space: nowrap;
	background: transparent !important;
	background-image: none !important;
}

[id^="nextpatient-widget"] .call-no-times {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	font-family: var(--sd-font-body) !important;
	font-size: 18px !important;
	line-height: 26px !important;
	font-weight: 400 !important;
	letter-spacing: 0.6px !important;
	color: var(--sd-blue-gray) !important;
	background: transparent !important;
	background-image: none !important;
	font-style: normal !important;
}

[id^="nextpatient-widget"] .call-no-times a {
	color: var(--sd-blue) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: transparent !important;
	background-image: none !important;
}

[id^="nextpatient-widget"] .call-no-times a:hover,
[id^="nextpatient-widget"] .call-no-times a:focus {
	color: var(--sd-blue-gray) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
}

[id^="nextpatient-widget"] .call-no-times a b {
	font-weight: inherit;
}


/* ──────────────────────────────────────────────────────────────────────────
   9. Goodman/Aqua override scrub — defensive
   --------------------------------------------------------------------------
   `08-providers-facet-nextpatient.css` references
   `var(--uncode-palette-color-916765)` (purple-ish in Goodman's parent
   palette) and `var(--uncode-palette-color-206917)` for hover gradients.
   Those rules are scoped behind `.aqua-book-appt`, which is NOT on Sunrise
   pages today (verified via DevTools). We assert Sunrise tokens with
   `!important` here so any accidental future re-introduction of the
   `.aqua-book-appt` class — or any inline Uncode palette CSS that happens
   to define those palette IDs — can't bleed through.
   ────────────────────────────────────────────────────────────────────────── */

.aqua-book-appt [id^="nextpatient-widget"] a.nextpatient-slot-time,
.aqua-book-appt [id^="nextpatient-widget"] a.nextpatient-slot-time:hover,
.aqua-book-appt [id^="nextpatient-widget"] a.nextpatient-slot-time:focus {
	background-image: none !important;
	color: var(--sd-blue-gray) !important;
}

.aqua-book-appt [id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more,
.aqua-book-appt [id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more:hover,
.aqua-book-appt [id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more:focus {
	background-image: none !important;
	background-color: var(--sd-blue-gray) !important;
	color: var(--sd-white) !important;
}

.aqua-book-appt [id^="nextpatient-widget"] .nextpatient-provider-blurb a,
.aqua-book-appt [id^="nextpatient-widget"] .nextpatient-provider-address em,
.aqua-book-appt [id^="nextpatient-widget"] .call-no-times a {
	color: var(--sd-blue) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   10. Responsive
   --------------------------------------------------------------------------
   Below 640: shrink the photo, stack tiles 2-up.
   Below 500: stack vertically — flip to NP's mobile small-photo path.
   Below 430: tiles full-width.
   ────────────────────────────────────────────────────────────────────────── */

/* Tablet — gap tightens, photo scales */
@media (max-width: 959px) {
	[id^="nextpatient-widget"] .nextpatient-provider {
		--np-photo: 140px;
		gap: 28px !important;
		padding: 20px 0 32px !important;
	}
	[id^="nextpatient-widget"] .nextpatient-provider-name {
		font-size: 22px !important;
		line-height: 30px !important;
		margin-bottom: 12px !important;
	}
	[id^="nextpatient-widget"] .nextpatient-provider-address {
		font-size: 16px !important;
		line-height: 24px !important;
	}
}

/* Small tablet / large phone — photo shrinks, tile min relaxes */
@media (max-width: 640px) {
	[id^="nextpatient-widget"] .nextpatient-provider {
		--np-photo: 120px;
		gap: 20px !important;
	}
	[id^="nextpatient-widget"] .nextpatient-provider-times {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
		gap: 10px !important;
	}
	[id^="nextpatient-widget"] a.nextpatient-slot-time {
		padding: 12px 8px !important;
		min-height: 72px;
	}
	[id^="nextpatient-widget"] a.nextpatient-slot-time.nextpatient-slot-time-more {
		padding: 12px 8px !important;
		min-height: 72px;
	}
}

/* Phone — stack photo above content */
@media (max-width: 500px) {
	[id^="nextpatient-widget"] .nextpatient-provider {
		--np-photo: 112px;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}
	[id^="nextpatient-widget"] .nextpatient-provider-name {
		font-size: 20px !important;
		line-height: 28px !important;
	}
	[id^="nextpatient-widget"] .nextpatient-provider-times {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
	}
}

/* Narrow phone — slot tiles fall to row layout (date + time inline) */
@media (max-width: 380px) {
	[id^="nextpatient-widget"] .nextpatient-provider-times {
		grid-template-columns: 1fr !important;
	}
	[id^="nextpatient-widget"] a.nextpatient-slot-time {
		flex-direction: row !important;
		gap: 10px !important;
		min-height: 0 !important;
		padding: 12px 16px !important;
	}
	[id^="nextpatient-widget"] a.nextpatient-slot-time:hover,
	[id^="nextpatient-widget"] a.nextpatient-slot-time:focus {
		padding: 11px 15px !important;
	}
}