/**
 * Dr. Saleh Booking - front-end styles.
 *
 * Everything visual is driven by the custom properties declared on
 * `.dsb-booking`. A theme reproduces its own look by overriding that handful of
 * variables, e.g.:
 *
 *   .dsb-booking {
 *     --dsb-bg: #0d0f10;
 *     --dsb-fg: #f2efe9;
 *     --dsb-accent: #c8a97e;
 *   }
 *
 * No inline styles are emitted anywhere in the plugin.
 */

.dsb-booking {
	--dsb-bg: #ffffff;
	--dsb-fg: #1a1a1a;
	--dsb-muted: #6b7280;
	--dsb-accent: #1f4e46;
	--dsb-accent-ink: #ffffff;
	--dsb-border: #d9d9d6;
	--dsb-error: #b32d2e;
	--dsb-error-border: #b32d2e;
	--dsb-radius: 8px;
	/* Pill buttons without lozenge inputs: override this alone. */
	--dsb-radius-pill: var(--dsb-radius);
	--dsb-font: inherit;
	--dsb-font-heading: inherit;
	/* Drives the native date picker and form controls. Set to `dark` (or
	   `light dark`) alongside a dark palette, or the picker renders
	   black-on-black. */
	--dsb-color-scheme: light;
	/* Swap the whole arrow, e.g. for a light one on a dark background. */
	--dsb-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231a1a1a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");

	color-scheme: var(--dsb-color-scheme, light);

	background: var(--dsb-bg);
	color: var(--dsb-fg);
	font-family: var(--dsb-font);
	box-sizing: border-box;
	max-width: 46rem;
	padding: 1.5rem;
	border: 1px solid var(--dsb-border);
	border-radius: var(--dsb-radius);
}

.dsb-booking *,
.dsb-booking *::before,
.dsb-booking *::after {
	box-sizing: inherit;
}

.dsb-title {
	font-family: var(--dsb-font-heading);
	color: var(--dsb-fg);
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.dsb-description {
	color: var(--dsb-muted);
	margin: 0 0 1.25rem;
}

.dsb-tz,
.dsb-note {
	color: var(--dsb-muted);
	font-size: 0.875rem;
	margin: 0 0 1rem;
}

.dsb-note {
	margin: 1rem 0 0;
}

.dsb-empty {
	color: var(--dsb-muted);
	margin: 0;
}

.dsb-field {
	margin: 0 0 1.25rem;
	border: 0;
	padding: 0;
	min-width: 0;
}

.dsb-slots-field {
	margin-bottom: 1.5rem;
}

.dsb-label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.375rem;
	padding: 0;
	color: var(--dsb-fg);
}

.dsb-required {
	color: var(--dsb-accent);
	margin-inline-start: 0.125rem;
}

.dsb-input,
.dsb-select,
.dsb-textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	font: inherit;
	font-family: var(--dsb-font);
	/* Below 16px iOS Safari zooms the whole page on focus. */
	font-size: max(1rem, 16px);
	color: var(--dsb-fg);
	background: var(--dsb-bg);
	border: 1px solid var(--dsb-border);
	border-radius: var(--dsb-radius);
	color-scheme: var(--dsb-color-scheme, light);
	appearance: none;
	-webkit-appearance: none;
}

/* appearance:none strips the native arrow, so one has to be drawn back. */
.dsb-select {
	padding-inline-end: 2.25rem;
	background-image: var(--dsb-select-arrow);
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 0.75rem 0.5rem;
}

.dsb-select:dir(rtl) {
	background-position: left 0.85rem center;
}

.dsb-textarea {
	min-height: 6rem;
	resize: vertical;
}

.dsb-input:focus-visible,
.dsb-select:focus-visible,
.dsb-textarea:focus-visible,
.dsb-slot:focus-visible,
.dsb-submit:focus-visible {
	outline: 3px solid var(--dsb-accent);
	outline-offset: 2px;
}

.dsb-input[aria-invalid="true"],
.dsb-select[aria-invalid="true"],
.dsb-textarea[aria-invalid="true"] {
	border-color: var(--dsb-error-border);
}

.dsb-status {
	color: var(--dsb-muted);
	font-size: 0.9375rem;
	min-height: 1.5rem;
	margin: 0 0 0.5rem;
}

/*
 * The slot list is capped and scrolls internally. With the clinic open
 * 08:00-22:00 a 45-min service generates 53 slots, which pushed the name /
 * phone / email fields roughly two viewports down the page on mobile. Raise
 * --dsb-slots-max-height (or set it to none) if the clinic ever shortens the
 * working day enough for the whole list to fit.
 */
.dsb-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.5rem;
	max-height: var(--dsb-slots-max-height, 17rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--dsb-border) transparent;
	/* Room for the scrollbar so pills are never clipped mid-focus-ring. */
	padding-right: 0.25rem;
}

.dsb-slot {
	min-height: 44px;
	min-width: 44px;
	padding: 0.625rem 0.5rem;
	font: inherit;
	font-family: var(--dsb-font);
	color: var(--dsb-fg);
	background: transparent;
	border: 1px solid var(--dsb-border);
	border-radius: var(--dsb-radius-pill);
	cursor: pointer;
	text-align: center;
}

.dsb-slot:hover {
	border-color: var(--dsb-accent);
}

.dsb-slot[aria-pressed="true"] {
	background: var(--dsb-accent);
	color: var(--dsb-accent-ink);
	border-color: var(--dsb-accent);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Steps
 *
 * The template ships every step visible; dsb.js adds `is-stepped` and sets
 * [hidden] on the inactive ones. So these rules only ever describe the
 * scripted state - nothing here can hide a field from a visitor without JS.
 * ------------------------------------------------------------------------- */

.dsb-stepper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--dsb-border);
}

.dsb-stepper-item {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--dsb-muted);
	font-size: 0.8125rem;
}

.dsb-stepper-num {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.dsb-stepper-item.is-active {
	color: var(--dsb-fg);
}

.dsb-stepper-item.is-active .dsb-stepper-num,
.dsb-stepper-item.is-done .dsb-stepper-num {
	color: var(--dsb-accent);
}

/* Explicit, because any theme rule that sets `display` on .dsb-step would beat
   the browser's built-in [hidden] rule and leak every step onto the page. */
.dsb-step[hidden] {
	display: none;
}

.dsb-step-title {
	font-family: var(--dsb-font-heading);
	color: var(--dsb-fg);
	margin: 0 0 1.25rem;
	line-height: 1.2;
}

/* The heading is focused on every step change so the move is announced; it is
   not interactive, so the ring is the only thing that should appear. */
.dsb-step-title:focus {
	outline: none;
}

.dsb-step-title:focus-visible {
	outline: 2px solid var(--dsb-accent);
	outline-offset: 4px;
}

/* Service cards ----------------------------------------------------------- */

.dsb-services {
	display: grid;
	gap: 0.5rem;
}

.dsb-service {
	display: block;
	cursor: pointer;
}

.dsb-service-card {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--dsb-border);
	border-radius: var(--dsb-radius);
}

.dsb-service:hover .dsb-service-card {
	border-color: var(--dsb-accent);
}

/* Visually hidden, but still focusable and still the accessible control:
   arrow keys must keep working through the radio group. */
.dsb-service-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dsb-service-input:focus-visible ~ .dsb-service-card {
	outline: 2px solid var(--dsb-accent);
	outline-offset: 2px;
}

.dsb-service-input:checked ~ .dsb-service-card {
	border-color: var(--dsb-accent);
	box-shadow: inset 0 0 0 1px var(--dsb-accent);
}

.dsb-service-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.dsb-service-name {
	color: var(--dsb-fg);
}

.dsb-service-meta {
	color: var(--dsb-muted);
	font-size: 0.8125rem;
}

.dsb-service-price {
	color: var(--dsb-fg);
	white-space: nowrap;
}

/* Recap on the last step -------------------------------------------------- */

.dsb-summary {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--dsb-border);
	border-radius: var(--dsb-radius);
}

.dsb-summary[hidden] {
	display: none;
}

.dsb-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
}

.dsb-summary dt {
	color: var(--dsb-muted);
	font-size: 0.8125rem;
}

.dsb-summary dd {
	margin: 0;
	color: var(--dsb-fg);
	text-align: right;
}

/* Step navigation --------------------------------------------------------- */

.dsb-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.dsb-next,
.dsb-back {
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	font: inherit;
	font-family: var(--dsb-font-heading);
	border-radius: var(--dsb-radius-pill);
	cursor: pointer;
}

.dsb-next {
	flex: 1 1 auto;
	font-weight: 600;
	color: var(--dsb-accent-ink);
	background: var(--dsb-accent);
	border: 1px solid var(--dsb-accent);
}

.dsb-back {
	flex: 0 0 auto;
	color: var(--dsb-fg);
	background: transparent;
	border: 1px solid var(--dsb-border);
}

.dsb-back:hover {
	border-color: var(--dsb-accent);
}

.dsb-actions {
	margin: 1.5rem 0 0;
}

/* Submit is full-width on its own; beside a Back button it must share. */
.dsb-nav .dsb-submit {
	flex: 1 1 auto;
	width: auto;
}

.dsb-submit {
	min-height: 48px;
	width: 100%;
	padding: 0.75rem 1.5rem;
	font: inherit;
	font-family: var(--dsb-font-heading);
	font-weight: 600;
	color: var(--dsb-accent-ink);
	background: var(--dsb-accent);
	border: 1px solid var(--dsb-accent);
	border-radius: var(--dsb-radius-pill);
	cursor: pointer;
}

.dsb-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.dsb-form[aria-busy="true"] {
	cursor: progress;
}

.dsb-error {
	display: none;
	color: var(--dsb-error);
	font-size: 0.875rem;
	margin-top: 0.375rem;
}

.dsb-error.is-visible {
	display: block;
}

.dsb-message {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	color: var(--dsb-fg);
}

.dsb-message:empty {
	margin: 0;
}

.dsb-message.is-error {
	color: var(--dsb-error);
}

.dsb-message.is-success {
	color: var(--dsb-accent);
}

/* Honeypot: hidden from people, reachable by naive bots. */
.dsb-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.dsb-booking {
		padding: 1rem;
	}

	.dsb-slots {
		grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dsb-slot,
	.dsb-submit {
		transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	}
}