/*
 * Booking Suite — public-facing form styles.
 *
 * Mobile-first. CSS Grid for layout. Container queries adapt the layout to
 * whichever element actually hosts the form (so two shortcodes side-by-side
 * each get their own ideal layout).
 *
 * Design tokens are declared on :root so admin + frontend share the same
 * palette. This file is self-bootstrapping when loaded standalone (public-only
 * contexts); when loaded inside an admin page, admin.css overrides take
 * precedence in cascade order.
 *
 * 1.6.0: dropped the .bs-cal* month-view calendar + .bs-slots grid (1.4.6 era)
 * and replaced them with a CTA button + <dialog> modal containing iOS-style
 * vertical scroll wheels (.bs-wheel) for date + time selection. The inline
 * fallback form for no-JS / modal-blocked visitors reuses the .bs-form shell.
 *
 * @package Booking_Suite
 */

:root {
	--bs-radius:        10px;
	--bs-pad:           16px;
	--bs-gap:           14px;
	--bs-accent:        #3b4cf6;
	--bs-accent-contrast: #ffffff;
	--bs-muted:         #5a6470;
	--bs-border:        rgba(0, 0, 0, 0.10);
	--bs-bg:            #ffffff;
	--bs-input-bg:      #f5f7fb;
	--bs-text:          #1f2530;
	--bs-text-muted:    #5a6470;
	--bs-surface:       #ffffff;
	--bs-surface-2:     #f8f9fb;
	--bs-success-bg:    #e6f4ea;
	--bs-success-fg:    #1a6b34;
	--bs-error-bg:      #fdecec;
	--bs-error-fg:      #842323;
	--bs-error-text:    #d23547;
	--bs-info-bg:       #eef2ff;
	--bs-info-fg:       #20306c;
	--bs-shadow:        0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
	--bs-shadow-lift:   0 4px 12px rgba(0,0,0,0.06), 0 18px 40px rgba(0,0,0,0.08);
	--bs-font:          ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bs-font-wheel:    var(--bs-font);
	/* 1.6.8: removed — the v1.6.5-1.6.7 iOS white-on-slate scroller has been
	   replaced wholesale by the teal-vibe picker. The wheel now ships its
	   own colours (teal gradient bg + cyan #00ffd1 glow + per-column
	   overlays, 200px / 40px) — there are no `--bs-wheel-*` vars anymore.

	   1.6.5-1.6.7 had `--bs-wheel-row-h` (280px) + `--bs-wheel-option-h`
	   (56px) for sizing and `--bs-wheel-bg-edge/mid/text-default/selected/
	   band-bg/band-border` for colouring. The new picker hard-codes the
	   dimensions in the `.bs-wheel` rule below and renders its own colours
	   via `.bs-wheel[data-bs-wheel="…"]` + `.bs-wheel__option.active` etc.
	   Operators who want a different look can override those selectors
	   directly. */
}

@media (prefers-color-scheme: dark) {
	:root {
		--bs-bg:         #15171c;
		--bs-surface:    #15171c;
		--bs-surface-2:  #1d2129;
		--bs-input-bg:   #1d2129;
		--bs-text:       #e4e8ef;
		--bs-muted:      #a4adba;
		--bs-text-muted: #a4adba;
		--bs-border:     rgba(255, 255, 255, 0.08);
		--bs-shadow:     0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.4);
		--bs-shadow-lift:0 4px 12px rgba(0,0,0,0.5), 0 18px 48px rgba(0,0,0,0.55);
		--bs-success-bg: #142a1d;
		--bs-success-fg: #6ddb94;
		--bs-error-bg:   #2a1416;
		--bs-error-fg:   #ff8a96;
		--bs-error-text: #ff6675;
		--bs-info-bg:    #1c2233;
		--bs-info-fg:    #c8d2ec;
	}
}

/* 1.8.0: cyan #00ffd1 / dark-teal aesthetic for both booking forms (modal +
   fallback). Scoped via :is(.bs-form--modal, .bs-form--fallback) (specificity
   0,1,0) so the token cascade wins over the operator's `:where(.bs-form){...}`
   default that Settings → Styling emits inline in the page head (specificity
   0,0,0 + later cascade position). Both forms now share the same palette —
   JS-enabled visitors see the modal dialog with the iOS picker in step 1,
   JS-disabled visitors see the inline form with native `<input type="date">`
   in step 1, but step 2 (prospect fields + submit) looks identical. Operator
   custom values still cascade via the same `:where(.bs-form)` block (both
   forms carry `.bs-form`). */
:is(.bs-form--modal, .bs-form--fallback) {
	--bs-accent:          var(--bs-picker-accent,    #00ffd1);
	--bs-accent-contrast: var(--bs-picker-contrast, #0f2027);
	--bs-bg:              var(--bs-picker-contrast, #0f2027);
	--bs-surface:         var(--bs-picker-contrast, #0f2027);
	--bs-surface-2:       #143040;
	--bs-input-bg:        #143040;
	--bs-text:            #e6f7f5;
	--bs-text-muted:      #8da4b0;
	--bs-muted:           #8da4b0;
	--bs-border:          color-mix(in oklab, var(--bs-picker-accent, #00ffd1) 18%, transparent);
	--bs-info-bg:         color-mix(in oklab, var(--bs-picker-accent, #00ffd1)  8%, transparent);
	--bs-info-fg:         var(--bs-picker-accent, #00ffd1);
	--bs-error-bg:        rgba(255, 75, 75, 0.12);
	--bs-error-fg:        #ff8080;
	--bs-error-text:      #ff8080;
	--bs-success-bg:      color-mix(in oklab, var(--bs-picker-accent, #00ffd1) 12%, transparent);
	--bs-success-fg:      var(--bs-picker-accent, #00ffd1);
	--bs-shadow:          0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 0 color-mix(in oklab, var(--bs-picker-accent, #00ffd1) 15%, transparent) inset;
	--bs-shadow-lift:     0 8px 24px rgba(0, 0, 0, 0.55), 0 18px 48px color-mix(in oklab, var(--bs-picker-accent, #00ffd1) 12%, transparent);
}

/* 1.8.0.4 + 1.8.0.6: explicit input + label rules for both forms. `.bs-input`
   alone has specificity (0,1,0) and loses to Divi theme's `input[type="text"]`
   (specificity (0,1,1) — `input` + `[type="text"]`), which painted text
   fields white with a gray border. `.bs-label` had no color set so it
   inherited the dark `--bs-text` (#1f2530) once the operator's
   `:where(.bs-form)` inline style reset it. The rules below use
   `:is(.bs-form--modal, .bs-form--fallback) .bs-input` (specificity (0,2,0))
   to win the cascade for fields in BOTH forms — step 2 of the modal AND
   the entire fallback form. */
:is(.bs-form--modal, .bs-form--fallback) .bs-input,
:is(.bs-form--modal, .bs-form--fallback) textarea.bs-input {
	background-color: var(--bs-input-bg);
	color:            var(--bs-text);
	border:           1.5px solid transparent;
}
:is(.bs-form--modal, .bs-form--fallback) .bs-input:focus {
	border-color: var(--bs-accent);
}
:is(.bs-form--modal, .bs-form--fallback) .bs-label {
	color: var(--bs-text);
}
:is(.bs-form--modal, .bs-form--fallback) .bs-form__title {
	color: var(--bs-text);
}
:is(.bs-form--modal) .bs-modal__title,
:is(.bs-form--modal) .bs-step__title {
	color: var(--bs-text);
}
:is(.bs-form--modal) .bs-modal__close {
	color: var(--bs-text-muted);
}

:is(.bs-form--modal, .bs-form--fallback) .bs-radio input[type="radio"] { accent-color: var(--bs-picker-accent, #00ffd1); }
:is(.bs-form--modal) .bs-modal { border: 1px solid color-mix(in oklab, var(--bs-picker-accent, #00ffd1) 25%, transparent); }

.bs-form {
	font-family: var(--bs-font);
	color: var(--bs-text);
	background: var(--bs-bg);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	padding: var(--bs-pad);
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
}

.bs-form *,
.bs-form *::before,
.bs-form *::after {
	box-sizing: inherit;
}

.bs-form__title {
	margin: 0 0 0.4em;
	font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.95rem);
	font-weight: 600;
	line-height: 1.2;
}

.bs-form__intro {
	color: var(--bs-muted);
	margin: 0 0 var(--bs-gap);
	font-size: 1rem;
}

.bs-form__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bs-gap);
}

.bs-step__title {
	margin: 0 0 calc(var(--bs-gap) * 0.75);
	font-size: 1.1rem;
	font-weight: 600;
}

.bs-step__title--success {
	color: var(--bs-accent);
}

/* 1.6.3: Cloudflare Turnstile widget. The iframe sizes itself once rendered
   (~300×65px); the explicit min-height prevents layout jump while the
   challenges.cloudflare.com script loads. */
.bs-turnstile {
	margin: 12px 0 4px;
	min-height: 65px;
}

.bs-form__notice,
.bs-fallback__notice {
	background: var(--bs-info-bg);
	color: var(--bs-info-fg);
	border: 1px solid color-mix(in oklab, var(--bs-accent) 32%, transparent);
	border-radius: var(--bs-radius);
	padding: 10px 14px;
	margin: 0 0 var(--bs-gap);
	font-size: 0.9rem;
}

/* Inputs ------------------------------------------------------------- */

.bs-label {
	display: block;
	font-weight: 500;
	margin: var(--bs-gap) 0 4px;
	font-size: 0.94rem;
}

.bs-label--inline {
	display: inline-block;
	margin-right: 8px;
}

.bs-req {
	color: var(--bs-error-text);
	margin-left: 2px;
}

.bs-input {
	display: block;
	width: 100%;
	font: inherit;
	padding: 11px 14px;
	background: var(--bs-input-bg);
	border: 1.5px solid transparent;
	border-radius: var(--bs-radius);
	color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bs-input:focus {
	outline: 3px solid color-mix(in oklab, var(--bs-accent) 30%, transparent);
	outline-offset: 1px;
	border-color: var(--bs-accent);
	background: var(--bs-bg);
}

.bs-input[aria-invalid="true"] {
	border-color: var(--bs-error-text);
	background: var(--bs-error-bg);
}

textarea.bs-input {
	resize: vertical;
	min-height: 96px;
}

/* CTA button (modal trigger) ---------------------------------------- */

.bs-cta {
	appearance: none;
	font: inherit;
	font-weight: 600;
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	margin: 0 auto var(--bs-gap);
	background: var(--bs-accent);
	color: var(--bs-accent-contrast);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: var(--bs-shadow);
	transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
	text-align: left;
	max-width: 720px;
	width: 100%;
	justify-content: center;
}

.bs-cta:hover,
.bs-cta:focus-visible {
	background: color-mix(in oklab, var(--bs-accent) 88%, black);
	transform: translateY(-1px);
	box-shadow: var(--bs-shadow-lift);
	outline: none;
}

.bs-cta:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--bs-accent) 30%, transparent);
	outline-offset: 2px;
}

.bs-cta__icon {
	font-size: 1.2rem;
	line-height: 1;
}

/* Modal dialog ------------------------------------------------------ */

body.bs-modal-open {
	overflow: hidden;
}

.bs-modal {
	padding: 0;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	color: var(--bs-text);
	box-shadow: var(--bs-shadow-lift);
	max-width: min(560px, 96vw);
	max-height: 92vh;
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.bs-modal::backdrop {
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.bs-modal[open] {
	display: flex;
	flex-direction: column;
	animation: bs-modal-in 180ms ease-out;
}

@keyframes bs-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.bs-modal__title {
	margin: 0;
	padding: 18px 20px 8px;
	font-size: 1.15rem;
	font-weight: 600;
}

.bs-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	appearance: none;
	background: transparent;
	border: 1.5px solid transparent;
	color: var(--bs-text-muted);
	width: 36px;
	height: 36px;
	border-radius: 999px;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bs-modal__close:hover,
.bs-modal__close:focus-visible {
	background: color-mix(in oklab, var(--bs-accent) 8%, transparent);
	color: var(--bs-text);
	border-color: var(--bs-border);
	outline: none;
}

.bs-modal__close:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--bs-accent) 30%, transparent);
	outline-offset: 2px;
}

.bs-modal .bs-form__steps {
	list-style: none;
	padding: 8px 20px 20px;
	overflow-y: auto;
	flex: 1;
}

/* 1.8.0: the v1.6.8 teal-vibe scroller (.bs-wheels / .bs-wheel /
   .bs-wheel__option / per-column tints / band / colon separator / container
   queries / @supports fallback) is gone — step 1 of the modal now embeds
   the iOS picker widget (assets/css/ios-picker.css), which ships its own
   styles. The .bs-summary pill below remains: it's used by both step 2 of
   the modal (showing the picked date+time with a back link) and the
   fallback form's success notice. */

/* Inline ghost link (Back to date / Book another) ----------------- */

.bs-link {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin: 8px 0 0;
	color: var(--bs-accent);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}

.bs-link:hover {
	text-decoration: underline;
}

/* Contact-step summary (picked day + time + back link) -------------- */

.bs-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--bs-info-bg);
	color: var(--bs-info-fg);
	border: 1px solid color-mix(in oklab, var(--bs-accent) 32%, transparent);
	border-radius: var(--bs-radius);
	padding: 10px 14px;
	margin: 0 0 var(--bs-gap);
	font-size: 0.95rem;
}

.bs-summary .bs-link {
	color: var(--bs-info-fg);
	margin: 0;
}

/* Fieldset (contact methods) ---------------------------------------- */

.bs-fieldset {
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 12px 16px;
	margin: var(--bs-gap) 0;
}

.bs-fieldset > legend {
	padding: 0 6px;
	font-weight: 600;
}

.bs-radio {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-right: 18px;
	margin-block: 6px;
}

/* Buttons ----------------------------------------------------------- */

.bs-button {
	appearance: none;
	border: 1.5px solid transparent;
	border-radius: var(--bs-radius);
	font: inherit;
	font-weight: 600;
	padding: 12px 18px;
	margin-top: 12px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.bs-button--primary {
	background: var(--bs-accent);
	color: var(--bs-accent-contrast);
}

.bs-button--primary:hover {
	background: color-mix(in oklab, var(--bs-accent) 88%, black);
}

.bs-button--ghost {
	background: transparent;
	color: var(--bs-accent);
	border-color: var(--bs-accent);
}

/* Continue button in the modal step 1 — slightly rounded + a little smaller
   than the default .bs-button (12px 18px / radius 10px). */
[data-bs-modal-continue] {
	border-radius: 6px;
	padding: 8px 14px;
	margin-top: 8px;
	font-weight: 600;
}

/* Help + instructional text ------------------------------------------- */

.bs-help {
	color: var(--bs-muted);
	margin: 4px 0 0;
	font-size: 0.9rem;
}

.bs-instructions {
	background: var(--bs-info-bg);
	border: 1px solid color-mix(in oklab, var(--bs-accent) 32%, transparent);
	border-radius: var(--bs-radius);
	padding: 14px 16px;
	margin-top: var(--bs-gap);
	color: var(--bs-info-fg);
	font-size: 0.95rem;
}

/* Error banner ----------------------------------------------------- */

.bs-form__error {
	background: var(--bs-error-bg);
	border: 1px solid color-mix(in oklab, var(--bs-error-text) 32%, transparent);
	color: var(--bs-error-fg);
	padding: 12px 14px;
	border-radius: var(--bs-radius);
	margin-top: var(--bs-gap);
}

/* Fallback form (no-JS / modal-blocked) --------------------------- */

.bs-form--fallback {
	margin-top: var(--bs-gap);
}

/* Success summary */

.bs-success-body {
	font-size: 1rem;
	color: var(--bs-text);
	margin: 8px 0 16px;
}

.bs-success-body a {
	color: var(--bs-accent);
	text-decoration: underline;
}

/* 1.8.0: keep container-name `bs-form` on both form variants so the
   iOS picker widget's CSS (which still uses `@container bs-form`) keeps
   working — the container is set on each form root, not on the now-gone
   wheel layout. */
.bs-form--modal {
	container-type: inline-size;
	container-name: bs-form;
}

.bs-form--fallback {
	container-type: inline-size;
	container-name: bs-form;
}

/* Reduced-motion respect: zero animation, instant swap. */
@media (prefers-reduced-motion: reduce) {
	.bs-form *,
	.bs-form *::before,
	.bs-form *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.bs-modal[open] {
		animation: none !important;
	}
}

/* Responsive -------------------------------------------------------- */
/* The booking form is already mostly responsive (modal adapts 360→560px,
   fallback inputs are full-width with `width:100%`, radios wrap, submit
   stretches). What changes at ≤ 480px:

   - Modal goes nearly edge-to-edge with hairline gutters + uses `100dvh`
     so it fills the visible viewport on mobile (handles browser chrome
     show/hide correctly — `100vh` would leave a gap when the URL bar
     collapses).
   - Title padding shrinks, font-size steps down to 1.05rem.
   - Form padding steps from 16px to 12px to recover horizontal room.
   - Inputs / buttons get a 44px min-height for iOS HIG touch targets.
   - The submit button becomes full-width so thumbs can hit it without
     precise aim.
   - Fieldset legend font shrinks + radios are allowed to wrap.

   Below 360px (Galaxy Fold cover / older iPhone SE 1st gen) we tighten
   further: 4px gutters on the modal, 10px form padding.

   Container queries are not used here because the dialog / form is the
   whole page on small screens — viewport media queries are simpler and
   work correctly when the dialog is rendered into a third-party theme
   that may itself have a non-responsive wrapper. */

@media (max-width: 480px) {
	.bs-modal {
		max-width: calc(100vw - 8px);
		max-height: calc(100dvh - 8px);
		border-radius: 8px;
	}
	.bs-modal__title {
		padding: 14px 16px 6px;
		font-size: 1.05rem;
	}
	.bs-modal__close {
		top: 8px;
		right: 8px;
		width: 32px;
		height: 32px;
		font-size: 1.25rem;
	}
	.bs-modal .bs-form__steps {
		padding: 6px 16px 16px;
	}
	.bs-form {
		padding: 12px;
	}
	:is(.bs-form--modal, .bs-form--fallback) .bs-input,
	:is(.bs-form--modal, .bs-form--fallback) textarea.bs-input {
		min-height: 44px;
	}
	:is(.bs-form--modal, .bs-form--fallback) .bs-button--primary,
	:is(.bs-form--modal, .bs-form--fallback) .bs-button--ghost {
		width: 100%;
		min-height: 44px;
	}
	.bs-fieldset {
		padding: 10px 14px;
	}
	.bs-fieldset > legend {
		font-size: 0.95rem;
		padding: 0 4px;
	}
	.bs-radio {
		margin-right: 12px;
	}
}

@media (max-width: 360px) {
	.bs-modal {
		max-width: calc(100vw - 4px);
		max-height: calc(100dvh - 4px);
		border-radius: 6px;
	}
	.bs-modal__title {
		padding: 12px 12px 6px;
	}
	.bs-modal .bs-form__steps {
		padding: 6px 12px 14px;
	}
	.bs-modal__close {
		top: 6px;
		right: 6px;
	}
	.bs-form {
		padding: 10px;
	}
}