/* Smart Driving School — booking form
 * Simple centered single-column layout with optional custom header/footer.
 * Works across desktop and mobile through plain responsive CSS — no mode switching.
 */

/* ============================================================
   OUTER WRAPPER (header + form + footer)
   ============================================================ */
.sds-booking-outer {
	width: 100%;
	background: #fff;
}

/* ============================================================
   CUSTOM HEADER (dark bar, logo + phones)
   ============================================================ */
.sds-custom-header {
	color: #fff;
	padding: 18px 24px;
}
.sds-custom-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.sds-custom-header-brand { display: flex; align-items: center; min-width: 0; }
.sds-custom-header-logo {
	max-height: 54px;
	max-width: 200px;
	display: block;
	object-fit: contain;
}
.sds-custom-header-name {
	color: inherit;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.sds-custom-header-contact {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}
.sds-custom-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s ease;
	letter-spacing: 0.02em;
}
.sds-custom-header-phone:hover { opacity: 0.8; color: inherit; }
.sds-custom-header-phone-ico {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

@media (max-width: 720px) {
	.sds-custom-header { padding: 14px 16px; }
	.sds-custom-header-inner { gap: 12px; justify-content: center; }
	.sds-custom-header-logo { max-height: 40px; }
	.sds-custom-header-phone { font-size: 14px; }
	.sds-custom-header-phone-ico { width: 28px; height: 28px; font-size: 12px; }
	.sds-custom-header-contact { gap: 14px; }
}

/* ============================================================
   CUSTOM FOOTER (company info, centered)
   ============================================================ */
.sds-custom-footer {
	padding: 48px 24px;
	text-align: center;
	color: #6b6558;
	background: #fff;
	border-top: 1px solid #e5e7eb;
}
.sds-custom-footer-inner {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.sds-custom-footer-name {
	font-size: 22px;
	font-weight: 700;
	color: #17150f;
	letter-spacing: -0.01em;
}
.sds-custom-footer-desc {
	font-size: 14px;
	color: #6b6558;
	line-height: 1.6;
	max-width: 560px;
	margin: -8px auto 0;
	text-align: center;
}
.sds-custom-footer-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.sds-custom-footer-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	transition: color 0.15s ease;
}
.sds-custom-footer-item:hover { color: #17150f; }
.sds-custom-footer-ico {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f3f4f6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}
.sds-custom-footer-row {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 640px) {
	.sds-custom-footer { padding: 32px 20px; }
	.sds-custom-footer-row { gap: 20px; flex-direction: column; }
}

/* ============================================================
   BOOKING ROOT + THEME VARS
   ============================================================ */
.sds-booking-root {
	--sds-bg: #f4efe6;
	--sds-paper: #fbf8f1;
	--sds-ink: #17150f;
	--sds-muted: #6b6558;
	--sds-border: #e5ddcb;
	--sds-border-strong: #d9cfb8;
	--sds-accent: #c85a1e;
	--sds-accent-warm: #e8a44c;
	--sds-radius: 16px;
	--sds-radius-sm: 10px;
	--sds-radius-btn: 999px;
	--sds-font-display: 'Instrument Serif', Georgia, serif;
	--sds-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
	--sds-font-mono: 'JetBrains Mono', monospace;
	--sds-bg-effect: none;
	--sds-btn-weight: 600;

	background: var(--sds-bg);
	background-image: var(--sds-bg-effect);
	font-family: var(--sds-font-body);
	color: var(--sds-ink);
	line-height: 1.5;
	padding: 48px 24px;
	min-height: 500px;
	outline: none;
}
.sds-booking-root *, .sds-booking-root *::before, .sds-booking-root *::after { box-sizing: border-box; }
.sds-booking-root button { font-family: inherit; cursor: pointer; }

.sds-booking-loading {
	padding: 40px; text-align: center; color: var(--sds-muted); font-size: 14px;
}

.sds-inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* ============================================================
   PROGRESS DOTS (clickable for completed steps)
   ============================================================ */
.sds-progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 36px;
}
.sds-progress-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: var(--sds-border-strong);
	padding: 0;
	transition: all 0.2s ease;
}
.sds-progress-dot:disabled { cursor: default; }
.sds-progress-dot.is-done { background: var(--sds-ink); }
.sds-progress-dot.is-done:not(:disabled):hover {
	transform: scale(1.3);
	background: var(--sds-accent);
}
.sds-progress-dot.is-current {
	background: var(--sds-accent);
	width: 28px;
	border-radius: 5px;
}
.sds-progress-dot:focus-visible {
	outline: 2px solid var(--sds-accent);
	outline-offset: 3px;
}

/* ============================================================
   STEP HEADING ("1. Question" + subtitle, centered)
   ============================================================ */
.sds-step-heading {
	text-align: center;
	margin-bottom: 36px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.sds-step-title {
	font-family: var(--sds-font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--sds-ink);
	margin: 0 0 8px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.sds-step-num { color: var(--sds-accent); font-weight: 700; }
.sds-step-sub {
	color: var(--sds-muted);
	font-size: 14px;
	margin: 0;
	line-height: 1.5;
}

/* ============================================================
   STEP BODY + NAV
   ============================================================ */
.sds-step-body {
	margin-bottom: 32px;
}
.sds-step-nav {
	/* v1.15.4 — deprecated, contents moved into .sds-stickybar. Hidden but
	   kept in CSS in case any legacy theme overrides target the class. */
	display: none;
}

/* Step transitions (slide) */
.sds-fr-anim-forward { animation: sds-slide-in-right 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sds-fr-anim-back    { animation: sds-slide-in-left  0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sds-slide-in-right {
	from { transform: translateX(18px); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}
@keyframes sds-slide-in-left {
	from { transform: translateX(-18px); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sds-fr-btn {
	padding: 13px 28px;
	border-radius: var(--sds-radius-btn);
	font-size: 14px;
	font-weight: var(--sds-btn-weight);
	font-family: inherit;
	border: 1.5px solid var(--sds-border-strong);
	background: transparent;
	color: var(--sds-ink);
	transition: all 0.18s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.sds-fr-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--sds-ink) 4%, transparent);
	border-color: var(--sds-ink);
}
.sds-fr-btn-primary {
	background: var(--sds-ink);
	color: var(--sds-bg);
	border-color: var(--sds-ink);
	padding: 14px 36px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	box-shadow: 0 2px 0 color-mix(in srgb, var(--sds-ink) 40%, transparent);
}
.sds-fr-btn-primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sds-ink) 30%, transparent);
}
.sds-fr-btn-primary:active:not(:disabled) { transform: translateY(0); }
.sds-fr-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sds-fr-btn:focus-visible { outline: 2px solid var(--sds-accent); outline-offset: 2px; }

/* ============================================================
   FIELDS (step 0: Details)
   ============================================================ */
.sds-fr-field { display: block; margin-bottom: 18px; }
.sds-fr-field-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sds-muted);
	/* v1.20.18 — was 8px, tightened so the label-to-input pairing feels
	   like a single visual unit instead of two stacked items. */
	margin-bottom: 4px;
}
.sds-fr-field input {
	width: 100%;
	/* v1.20.18 — was 13px 16px; reduce vertical padding so inputs are
	   42px tall on desktop instead of 46px. Mobile is enforced separately
	   at 48px in the @media (max-width: 480px) block — that floor stands. */
	padding: 10px 14px;
	border-radius: var(--sds-radius-sm);
	border: 1.5px solid var(--sds-border-strong);
	background: var(--sds-paper);
	color: var(--sds-ink);
	font-size: 16px;
	font-family: inherit;
	transition: all 0.2s ease;
}
.sds-fr-field input:focus {
	outline: none;
	border-color: var(--sds-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sds-ink) 10%, transparent);
}
.sds-fr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sds-fr-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ============================================================
   CARDS (generic selectable)
   ============================================================ */
.sds-fr-card {
	background: var(--sds-paper);
	border: 1px solid var(--sds-border);
	border-radius: var(--sds-radius);
	padding: 22px;
}
.sds-fr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	align-items: stretch;
}
.sds-fr-cardsel {
	background: var(--sds-paper);
	border: 1.5px solid var(--sds-border);
	border-radius: var(--sds-radius);
	padding: 20px;
	text-align: left;
	font-family: inherit;
	color: var(--sds-ink);
	transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	width: 100%;
}
.sds-fr-cardsel:hover {
	border-color: var(--sds-ink);
}
.sds-fr-cardsel:focus-visible { outline: 2px solid var(--sds-accent); outline-offset: 2px; }
.sds-fr-cardsel.is-selected {
	background: var(--sds-ink);
	color: var(--sds-bg);
	border-color: var(--sds-ink);
	/* v1.20.17 — Selected state is now visually distinguished ONLY by
	   bg/text colour swap + the ✓ checkmark. No box-shadow, no transform,
	   no size change. The previous shadow made the selected card appear
	   taller than its row siblings — even with a small shadow offset, the
	   visible halo bled past the card's actual edges and broke the
	   perceived alignment of the card grid. Selection clarity comes from
	   the strong colour contrast alone, which is more than enough. */
}
.sds-fr-cardsel.is-selected::before {
	content: '✓';
	position: absolute;
	top: 12px; right: 14px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sds-accent);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
	font-weight: 700;
	animation: sds-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sds-pop { from { transform: scale(0); } to { transform: scale(1); } }
.sds-fr-cardsel.is-selected .sds-fr-muted { color: color-mix(in srgb, var(--sds-bg) 60%, var(--sds-muted)); }
.sds-fr-muted { color: var(--sds-muted); font-size: 13px; }

.sds-fr-badge {
	position: absolute;
	top: 14px; right: 14px;
	background: var(--sds-accent);
	color: var(--sds-paper);
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sds-fr-cardsel.is-selected .sds-fr-badge { top: 42px; }

/* Instructor card */
.sds-fr-ins { display: flex; gap: 14px; align-items: flex-start; }
.sds-fr-ins-avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	flex-shrink: 0;
}
.sds-fr-ins-name { font-size: 18px; font-weight: 600; line-height: 1.1; }
.sds-fr-ins-tag { font-size: 12px; margin: 3px 0 6px; opacity: 0.75; }
.sds-fr-ins-meta { display: flex; gap: 10px; font-size: 12px; align-items: center; flex-wrap: wrap; }
.sds-fr-star { color: var(--sds-accent); font-size: 14px; }
.sds-fr-ins-area {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--sds-border);
	font-size: 11px;
	opacity: 0.8;
}
.sds-fr-cardsel.is-selected .sds-fr-ins-area { border-color: color-mix(in srgb, var(--sds-bg) 15%, transparent); }

/* Package card */
.sds-fr-pkg-price { font-size: 36px; line-height: 1; font-weight: 700; }
.sds-fr-pkg-name { font-size: 20px; font-weight: 600; margin: 10px 0 4px; }
.sds-fr-pkg-features { list-style: none; padding: 0; margin: 14px 0 0; }
.sds-fr-pkg-features li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-bottom: 5px; }
.sds-fr-pkg-features li::before {
	content: ''; display: inline-block;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--sds-accent);
	margin-top: 7px; flex-shrink: 0;
}

/* Addon card */
.sds-fr-addon { display: flex; gap: 12px; align-items: flex-start; }
.sds-fr-addon-icon {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--sds-bg);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	font-size: 17px;
}
.sds-fr-cardsel.is-selected .sds-fr-addon-icon { background: var(--sds-accent-warm); color: var(--sds-ink); }
.sds-fr-addon-body { flex: 1; min-width: 0; }
.sds-fr-addon-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.sds-fr-addon-name { font-size: 16px; font-weight: 600; line-height: 1.1; }
.sds-fr-addon-price { font-family: var(--sds-font-mono); font-size: 13px; font-weight: 600; }
.sds-fr-addon-blurb { font-size: 12px; opacity: 0.75; line-height: 1.4; }

/* ============================================================
   CALENDAR + TIME SLOTS
   ============================================================ */
.sds-fr-dt-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.sds-fr-ins-badge { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.sds-fr-ins-badge .sds-fr-ins-avatar { width: 30px; height: 30px; font-size: 11px; }
.sds-fr-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sds-fr-cal-title { font-size: 18px; font-weight: 600; }
.sds-fr-cal-nav {
	background: transparent;
	border: 1.5px solid var(--sds-border-strong);
	width: 34px; height: 34px;
	border-radius: 50%;
	font-size: 14px;
	color: var(--sds-ink);
}
.sds-fr-cal-nav:hover { background: color-mix(in srgb, var(--sds-ink) 5%, transparent); }
.sds-fr-cal-dow, .sds-fr-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sds-fr-cal-dow { margin-bottom: 4px; }
.sds-fr-cal-dow > div {
	text-align: center;
	font-size: 10px;
	color: var(--sds-muted);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 4px 0;
	font-weight: 600;
}
.sds-fr-day {
	aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	background: transparent; border: none;
	border-radius: var(--sds-radius-sm);
	font-size: 13px; font-family: inherit; color: var(--sds-ink);
	position: relative;
	transition: all 0.15s ease;
}
.sds-fr-day:hover:not(:disabled) { background: color-mix(in srgb, var(--sds-ink) 6%, transparent); }
.sds-fr-day:focus-visible { outline: 2px solid var(--sds-accent); outline-offset: -2px; }
.sds-fr-day.is-empty { cursor: default; }
.sds-fr-day.is-past { opacity: 0.2; cursor: not-allowed; }
.sds-fr-day.is-unavail { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }
.sds-fr-day.is-selected { background: var(--sds-ink); color: var(--sds-bg); font-weight: 600; }
.sds-fr-day.is-today::after {
	content: ''; position: absolute; bottom: 5px;
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--sds-accent);
}
.sds-fr-day.is-selected.is-today::after { background: var(--sds-accent-warm); }
.sds-fr-cal-legend {
	display: flex; flex-wrap: wrap; gap: 12px;
	padding-top: 14px; margin-top: 16px;
	border-top: 1px solid var(--sds-border);
	font-size: 10px; color: var(--sds-muted);
}
.sds-fr-cal-legend .dot {
	display: inline-block; width: 9px; height: 9px;
	border-radius: 3px; margin-right: 5px; vertical-align: middle;
}
.sds-fr-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sds-fr-slot {
	padding: 12px 8px;
	border-radius: var(--sds-radius-sm);
	background: var(--sds-paper);
	border: 1.5px solid var(--sds-border-strong);
	font-family: var(--sds-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--sds-ink);
	transition: all 0.15s ease;
}
.sds-fr-slot:hover:not(:disabled) { border-color: var(--sds-ink); }
.sds-fr-slot.is-selected { background: var(--sds-ink); color: var(--sds-bg); border-color: var(--sds-ink); }
.sds-fr-slot:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.sds-fr-slot:focus-visible { outline: 2px solid var(--sds-accent); outline-offset: 2px; }
.sds-fr-date-empty { text-align: center; padding: 24px 10px; color: var(--sds-muted); font-size: 13px; }

/* ============================================================
   PAYMENT STEP (summary inline)
   ============================================================ */
.sds-fr-pay { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.sds-fr-sum-row {
	display: flex; justify-content: space-between;
	padding: 10px 0; border-bottom: 1px solid var(--sds-border);
	font-size: 14px;
}
.sds-fr-sum-row:last-of-type { border-bottom: none; }
.sds-fr-sum-row.total {
	border-top: 2px solid var(--sds-ink); border-bottom: none;
	padding-top: 14px; margin-top: 6px;
	font-size: 17px; font-weight: 600;
	align-items: baseline;
}
.sds-fr-sum-total { font-size: 28px; line-height: 1; font-weight: 700; }
.sds-fr-discount { color: var(--sds-accent); }
.sds-fr-payopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sds-fr-terms {
	display: flex; gap: 10px; align-items: flex-start;
	margin-top: 18px; font-size: 13px; color: var(--sds-muted);
	cursor: pointer;
}
.sds-fr-terms input { margin-top: 3px; }
.sds-fr-terms a { color: var(--sds-ink); text-decoration: underline; }

.sds-fr-sumup-wrap {
	background: var(--sds-paper);
	border: 1px solid var(--sds-border);
	border-radius: var(--sds-radius);
	padding: 18px; margin-top: 12px;
}
.sds-fr-sumup-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sds-fr-sumup-head h3 { font-size: 18px; font-weight: 600; margin: 0; }
.sds-fr-sumup-amount { font-family: var(--sds-font-mono); font-size: 13px; color: var(--sds-muted); }
.sds-fr-sumup-sec { margin-top: 10px; font-size: 10px; color: var(--sds-muted); }
#sds-sumup-card-target { min-height: 100px; }
.sds-fr-pay-instructions {
	background: var(--sds-paper);
	border: 1px solid var(--sds-border);
	border-radius: var(--sds-radius);
	padding: 18px; margin-top: 12px;
	font-size: 13px; line-height: 1.6;
}
.sds-fr-pay-instructions strong { color: var(--sds-ink); }
.sds-fr-pay-instructions code {
	background: var(--sds-bg); padding: 2px 6px;
	border-radius: 3px; font-family: var(--sds-font-mono); font-size: 12px;
}
.sds-fr-error {
	background: color-mix(in srgb, #dc2626 8%, var(--sds-paper));
	border: 1px solid color-mix(in srgb, #dc2626 30%, var(--sds-border));
	color: #9b1c1c;
	padding: 12px 16px;
	border-radius: var(--sds-radius-sm);
	margin-bottom: 14px;
	font-size: 13px;
}

/* ============================================================
   BLOCK UPSELL
   ============================================================ */
.sds-fr-upsell {
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
	padding: 22px;
	border-radius: var(--sds-radius);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--sds-accent) 8%, var(--sds-paper)),
		var(--sds-paper));
	border: 1.5px solid color-mix(in srgb, var(--sds-accent) 25%, var(--sds-border));
}
.sds-fr-upsell-head { margin-bottom: 14px; }
.sds-fr-upsell-eyebrow {
	display: inline-block;
	font-family: var(--sds-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sds-accent);
	background: color-mix(in srgb, var(--sds-accent) 12%, transparent);
	padding: 3px 9px;
	border-radius: 999px;
	margin-bottom: 8px;
	font-weight: 600;
}
.sds-fr-upsell-title {
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 4px;
	color: var(--sds-ink);
	font-weight: 700;
}
.sds-fr-upsell-title em { font-style: normal; color: var(--sds-accent); font-weight: 700; }
.sds-fr-upsell-sub { margin: 0; color: var(--sds-muted); font-size: 12px; line-height: 1.5; }
.sds-fr-upsell-footer { margin-top: 14px; text-align: center; }
.sds-fr-upsell-skip {
	background: none; border: none;
	color: var(--sds-muted);
	font-size: 12px;
	text-decoration: underline;
	padding: 4px 8px;
	font-family: inherit;
}
.sds-fr-upsell-skip:hover { color: var(--sds-ink); }

.sds-fr-block-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 8px;
}
.sds-fr-block-card {
	padding: 18px 12px;
	text-align: center;
	position: relative;
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sds-fr-block-card.is-recommended {
	border-color: var(--sds-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--sds-accent) 20%, transparent);
}
.sds-fr-block-card.is-selected {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--sds-ink) 20%, transparent);
}
.sds-fr-block-badge {
	position: absolute;
	top: -8px; left: 50%;
	transform: translateX(-50%);
	background: var(--sds-accent); color: #fff;
	font-size: 9px; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px;
	white-space: nowrap;
}
.sds-fr-block-count { font-size: 18px; line-height: 1.1; font-weight: 700; margin-bottom: 6px; }
.sds-fr-block-price { font-family: var(--sds-font-mono); font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 3px; }
.sds-fr-block-saving { font-size: 11px; color: var(--sds-accent); font-weight: 600; }
.sds-fr-block-card.is-selected .sds-fr-block-saving { color: var(--sds-accent-warm); }
.sds-fr-block-discount {
	font-family: var(--sds-font-mono);
	font-size: 9px;
	opacity: 0.6;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 3px;
}
.sds-fr-sum-block {
	background: color-mix(in srgb, var(--sds-accent) 5%, transparent);
	margin: 4px -18px;
	padding: 10px 18px !important;
	border-radius: var(--sds-radius-sm);
	border-bottom-color: transparent !important;
}

/* ============================================================
   SUCCESS + CELEBRATION
   ============================================================ */
.sds-fr-success {
	text-align: center;
	padding: 60px 20px;
	max-width: 560px;
	margin: 0 auto;
	width: 100%;
}
.sds-fr-success .sds-fr-pay-instructions {
	text-align: left;
	margin-top: 24px;
}
.sds-fr-success-icon {
	width: 72px; height: 72px;
	border-radius: 50%;
	background: var(--sds-ink);
	color: var(--sds-bg);
	margin: 0 auto 20px;
	display: flex; align-items: center; justify-content: center;
	font-size: 32px;
	animation: sds-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sds-fr-success-title {
	font-family: var(--sds-font-body);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.sds-fr-success-ref {
	font-family: var(--sds-font-mono);
	display: inline-block;
	padding: 5px 12px;
	background: var(--sds-paper);
	border: 1px solid var(--sds-border);
	border-radius: 999px;
	margin: 14px 0 0;
	font-size: 12px;
}
.sds-fr-saved-flash {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 18px;
	padding: 12px 22px;
	background: var(--sds-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	animation: sds-flash-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--sds-accent) 40%, transparent);
}
.sds-fr-saved-flash strong { font-size: 19px; font-weight: 700; }
@keyframes sds-flash-in {
	from { opacity: 0; transform: translateY(20px) scale(0.8); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Confetti */
.sds-confetti-container {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 100;
}
.sds-confetti-piece {
	position: absolute;
	top: -20px;
	width: calc(10px * var(--sds-confetti-scale, 1));
	height: calc(16px * var(--sds-confetti-scale, 1));
	animation: sds-confetti-fall cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	will-change: transform, opacity;
}
.sds-confetti-rect {
	border-radius: 1px;
}
.sds-confetti-circle {
	border-radius: 50%;
	width: calc(10px * var(--sds-confetti-scale, 1));
	height: calc(10px * var(--sds-confetti-scale, 1));
}
.sds-confetti-strip {
	border-radius: 1px;
	width: calc(4px * var(--sds-confetti-scale, 1));
	height: calc(20px * var(--sds-confetti-scale, 1));
}
@keyframes sds-confetti-fall {
	0% {
		transform: translate3d(0, -30px, 0) rotate(var(--sds-confetti-rotate-start, 0deg));
		opacity: 1;
	}
	15% { opacity: 1; }
	100% {
		transform: translate3d(var(--sds-confetti-drift, 0), 110vh, 0) rotate(var(--sds-confetti-rotate-end, 720deg));
		opacity: 0;
	}
}

/* Toast */
.sds-toast {
	position: fixed;
	top: 24px; left: 50%;
	transform: translate(-50%, -120px);
	background: #17150f;
	color: #fff;
	padding: 13px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
	z-index: 999999;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
	display: flex; align-items: center; gap: 10px;
	max-width: 92vw;
	font-family: 'DM Sans', system-ui, sans-serif;
}
.sds-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.sds-toast-icon { font-size: 16px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sds-confetti-container, .sds-confetti-piece { display: none !important; }
	.sds-fr-saved-flash, .sds-fr-success-icon { animation: none; }
	.sds-fr-anim-forward, .sds-fr-anim-back { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.sds-fr-dt-wrap { grid-template-columns: 1fr; }
	.sds-fr-pay { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.sds-booking-root { padding: 28px 16px; min-height: auto; }
	.sds-step-title { font-size: 22px; }
	.sds-step-heading { margin-bottom: 28px; }
	.sds-progress { margin-bottom: 24px; }
	.sds-fr-cards { grid-template-columns: 1fr; gap: 10px; }
	.sds-fr-grid2 { grid-template-columns: 1fr; }
	.sds-fr-grid3 { grid-template-columns: 1fr; }
	.sds-fr-payopts { grid-template-columns: 1fr; }
	.sds-fr-slots { grid-template-columns: repeat(3, 1fr); }
	.sds-fr-slot { padding: 10px 4px; font-size: 12px; }
	.sds-fr-card { padding: 16px; }
	.sds-fr-cardsel { padding: 16px; }
	.sds-fr-pkg-price { font-size: 30px; }
	.sds-fr-pkg-name { font-size: 18px; }
	.sds-fr-sum-total { font-size: 24px; }
	.sds-fr-block-grid { grid-template-columns: repeat(2, 1fr); }
	.sds-fr-upsell { padding: 16px; }
	.sds-fr-upsell-title { font-size: 17px; }
	.sds-step-nav { flex-direction: column-reverse; gap: 8px; }
	.sds-step-nav .sds-fr-btn { width: 100%; }
	.sds-fr-success-title { font-size: 24px; }
	.sds-fr-success-icon { width: 60px; height: 60px; font-size: 26px; }
	.sds-toast { top: 14px; padding: 11px 18px; font-size: 13px; }
}

/* ============================================================
   v1.20.1 — narrow phone breakpoint (≤480px) + fluid hardening.
   Modern phones are typically 360–430px wide in portrait. The 640px
   rules above cover tablets and large phones, but small phones need
   tighter spacing, larger touch targets, and aggressive stacking.
   ============================================================ */

@media (max-width: 480px) {
	.sds-booking-root { padding: 20px 12px; }
	.sds-step-title { font-size: 20px; line-height: 1.2; }
	.sds-step-heading { margin-bottom: 22px; }
	.sds-progress { margin-bottom: 18px; gap: 6px; }
	.sds-fr-card { padding: 14px; border-radius: 12px; }
	.sds-fr-cardsel { padding: 14px; border-radius: 12px; }
	.sds-fr-pkg-price { font-size: 26px; }
	.sds-fr-pkg-name { font-size: 16px; }
	.sds-fr-sum-total { font-size: 20px; }
	.sds-fr-slots { grid-template-columns: repeat(2, 1fr); gap: 6px; }
	.sds-fr-slot { padding: 12px 4px; font-size: 13px; min-height: 44px; }
	.sds-fr-block-grid { grid-template-columns: 1fr; }
	.sds-fr-pay-grid { grid-template-columns: 1fr; gap: 16px; }
	.sds-fr-eyebrow { font-size: 11px; }
	.sds-fr-title { font-size: 24px; line-height: 1.15; }
	/* Tap target floor — 44px is iOS HIG, 48px is Material */
	.sds-fr-btn,
	.sds-step-nav .sds-fr-btn { min-height: 48px; padding-left: 18px; padding-right: 18px; }
	/* Form inputs must be readable + tappable */
	.sds-fr-input,
	.sds-fr-select,
	.sds-fr-textarea {
		min-height: 48px;
		font-size: 16px; /* prevents iOS zoom-in on focus */
	}
	.sds-fr-textarea { min-height: 96px; }
	/* Summary rows pack tight */
	.sds-fr-sum-row { padding: 8px 0; font-size: 13px; }
	/* Step navigation always full-width on small phones */
	.sds-step-nav { gap: 10px; }
}

/* ============================================================
   v1.20.1 — universal fluid hardening (applies at all sizes).
   These rules prevent overflow on edge content (long names, big
   numbers, long URLs in rare emails). They cost nothing on desktop.
   ============================================================ */

.sds-booking-root { max-width: 100%; box-sizing: border-box; }
.sds-booking-root *,
.sds-booking-root *::before,
.sds-booking-root *::after { box-sizing: border-box; }
.sds-booking-root img,
.sds-booking-root svg { max-width: 100%; height: auto; }
/* Long words (booking refs, IBANs, emails) wrap rather than overflow */
.sds-fr-eyebrow,
.sds-fr-sum-row,
.sds-fr-card { overflow-wrap: anywhere; word-break: break-word; }
/* Tap targets — tighten focus rings so they don't crop on tiny screens */
.sds-fr-btn:focus-visible,
.sds-fr-input:focus-visible,
.sds-fr-select:focus-visible { outline-offset: 2px; }
/* Honor reduced motion preference everywhere */
@media (prefers-reduced-motion: reduce) {
	.sds-booking-root *,
	.sds-booking-root *::before,
	.sds-booking-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   FULL-PAGE OVERLAY (shortcode fullpage="true")
   The template JS moves .sds-booking-outer--fullpage to be a direct
   child of <body>, then we hide all *other* body children, leaving
   only the overlay and the WP admin bar visible.
   Works on every WordPress theme — classic, block (Twenty Twenty-*),
   page builders, everything.
   ============================================================ */

/* Lock the page scroll while overlay is active */
html.sds-fullpage-active,
body.sds-fullpage-active {
	overflow: hidden !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
}

/* Hide every body child except the overlay and the admin bar */
body.sds-fullpage-active > *:not(.sds-booking-outer--fullpage):not(#wpadminbar):not(script):not(style):not(noscript) {
	display: none !important;
}

/* WP admin bar sits above our overlay */
html.sds-fullpage-active #wpadminbar { z-index: 9999999 !important; }

/* The overlay itself */
.sds-booking-outer--fullpage {
	position: fixed;
	inset: 0;
	z-index: 999990;
	background: #fff;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	display: grid;
	grid-template-rows: auto 1fr auto;
	width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 !important;
}
/* Push below WP admin bar when logged in */
body.admin-bar .sds-booking-outer--fullpage { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .sds-booking-outer--fullpage { top: 46px; }
}

.sds-booking-outer--fullpage .sds-custom-header { grid-row: 1; }
.sds-booking-outer--fullpage .sds-booking-root {
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 24px;
	background: #fff;
	min-height: auto;
}
.sds-booking-outer--fullpage .sds-booking-root .sds-inner {
	width: 100%;
	max-width: 1080px;
}
.sds-booking-outer--fullpage .sds-custom-footer { grid-row: 3; }

@media (max-width: 640px) {
	.sds-booking-outer--fullpage .sds-booking-root {
		padding: 28px 16px;
		align-items: flex-start;
	}
}

/* Same layout for the (legacy) PHP page template route */
body.sds-fullpage-body { margin: 0; padding: 0; background: #fff; }
body.sds-fullpage-body .sds-booking-outer {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
	min-height: 100dvh;
}
body.sds-fullpage-body .sds-booking-root {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 24px;
	background: #fff;
	min-height: auto;
}
@media (max-width: 640px) {
	body.sds-fullpage-body .sds-booking-root {
		padding: 28px 16px;
		align-items: flex-start;
	}
}

/* ============================================================
   BOOKING TYPE TILES (step 0) + fieldsets
   ============================================================ */
.sds-fr-type-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	/* v1.20.18 — was 28px; tightened since the form below has been compacted. */
	margin-bottom: 18px;
}
.sds-fr-type-tile {
	background: var(--sds-paper);
	border: 1.5px solid var(--sds-border);
	border-radius: var(--sds-radius);
	/* v1.20.18 — was 18px 14px; compacted to 12px 14px so the three tiles
	   take up ~30px less vertical space at the top of the step. */
	padding: 12px 14px;
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	color: var(--sds-ink);
	transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sds-fr-type-tile:hover {
	border-color: var(--sds-ink);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sds-ink) 10%, transparent);
}
.sds-fr-type-tile.is-selected {
	background: var(--sds-ink);
	color: var(--sds-bg);
	border-color: var(--sds-ink);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--sds-ink) 22%, transparent);
}
/* v1.20.18 — Icon was 28px with 8px mb. Reduced to 24px with 4px mb to
   compact the tile vertically without losing the visual anchor. */
.sds-fr-type-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.sds-fr-type-label { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.sds-fr-type-sub { font-size: 11px; opacity: 0.7; line-height: 1.3; }
.sds-fr-type-tile.is-selected .sds-fr-type-sub { opacity: 0.8; }

.sds-fr-fieldset {
	background: var(--sds-paper);
	border: 1px solid var(--sds-border);
	border-radius: var(--sds-radius);
	/* v1.20.18 — was 20px / mb 14px; tightened so multi-fieldset flows
	   (for_other has 2 fieldsets, gift has 2) save ~12-16px between them. */
	padding: 16px;
	margin-bottom: 10px;
}
.sds-fr-fieldset-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sds-muted);
	/* v1.20.18 — was 14px; smaller gap before first field. */
	margin-bottom: 8px;
}
.sds-fr-checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13px; color: var(--sds-ink);
	cursor: pointer;
	/* v1.20.18 — was 10px 0; reduce so it doesn't add a full row of blank
	   space above and below the previously-held-licence checkbox. */
	padding: 6px 0;
	line-height: 1.4;
}
.sds-fr-checkbox input { margin-top: 3px; flex-shrink: 0; }
.sds-fr-field textarea {
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--sds-radius-sm);
	border: 1.5px solid var(--sds-border-strong);
	background: #fff;
	color: var(--sds-ink);
	font-size: 15px;
	font-family: inherit;
	resize: vertical;
}
.sds-fr-field textarea:focus {
	outline: none;
	border-color: var(--sds-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sds-ink) 10%, transparent);
}
.sds-fr-note {
	background: color-mix(in srgb, var(--sds-accent) 5%, var(--sds-bg));
	border-left: 3px solid var(--sds-accent);
	padding: 12px 14px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sds-muted);
	border-radius: 4px;
}

@media (max-width: 640px) {
	.sds-fr-type-tiles { grid-template-columns: 1fr; gap: 8px; }
	.sds-fr-type-tile { padding: 14px; display: flex; align-items: center; gap: 12px; text-align: left; }
	.sds-fr-type-icon { margin-bottom: 0; font-size: 24px; flex-shrink: 0; }
	.sds-fr-fieldset { padding: 16px; }
}

/* ============================================================
   VOUCHER REDEMPTION BANNER + CREDIT LINE
   ============================================================ */
.sds-voucher-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--sds-radius);
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.sds-voucher-banner-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}
.sds-voucher-banner-text { flex: 1; min-width: 0; }
.sds-voucher-banner-text strong { font-weight: 700; }

.sds-voucher-banner--active {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--sds-accent) 10%, var(--sds-paper)),
		var(--sds-paper));
	border: 1.5px solid color-mix(in srgb, var(--sds-accent) 35%, var(--sds-border));
	color: var(--sds-ink);
}
.sds-voucher-banner--loading {
	background: var(--sds-paper);
	border: 1.5px dashed var(--sds-border-strong);
	color: var(--sds-muted);
}
.sds-voucher-banner--error {
	background: color-mix(in srgb, #dc2626 7%, var(--sds-paper));
	border: 1.5px solid color-mix(in srgb, #dc2626 30%, var(--sds-border));
	color: #9b1c1c;
}

.sds-voucher-banner-msg {
	width: 100%;
	margin-top: 8px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.5);
	border-left: 3px solid var(--sds-accent);
	font-style: italic;
	font-size: 13px;
	color: var(--sds-ink);
	border-radius: 4px;
}

/* Voucher credit line in the payment summary */
.sds-fr-sum-row.sds-fr-voucher-credit {
	color: var(--sds-accent);
	font-weight: 600;
}
.sds-fr-sum-row.sds-fr-voucher-credit span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

@media (max-width: 640px) {
	.sds-voucher-banner { padding: 12px 14px; font-size: 13px; margin-bottom: 20px; }
	.sds-voucher-banner-icon { font-size: 18px; }
}

/* ============================================================
   VOUCHER LANDING PAGE (/voucher/CODE/)
   ============================================================ */
body.sds-voucher-landing-body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	color: #17150f;
	line-height: 1.5;
}
body.sds-voucher-landing-body .sds-booking-outer {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
	min-height: 100dvh;
}
body.sds-voucher-landing-body .sds-voucher-landing-root {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 24px;
	background: #fff;
}
.sds-voucher-landing-inner {
	max-width: 540px;
	width: 100%;
	text-align: center;
}
.sds-vl-icon {
	font-size: 54px;
	line-height: 1;
	margin-bottom: 16px;
}
.sds-vl-title {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 10px;
}
.sds-vl-subtitle {
	font-size: 16px;
	color: #6b6558;
	line-height: 1.5;
	margin: 0 0 24px;
}
.sds-vl-message {
	background: #fbf8f1;
	border-left: 3px solid #c85a1e;
	padding: 14px 18px;
	margin: 0 0 24px;
	font-style: italic;
	color: #17150f;
	border-radius: 4px;
	text-align: left;
	font-size: 15px;
}
.sds-vl-card {
	background: #17150f;
	color: #fbf8f1;
	padding: 24px 22px;
	border-radius: 14px;
	margin: 0 0 24px;
}
.sds-vl-card-label {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 8px;
}
.sds-vl-card-code {
	font-family: 'JetBrains Mono', monospace;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
}
.sds-vl-card-meta {
	margin-top: 12px;
	font-size: 12px;
	opacity: 0.7;
}
.sds-vl-btn {
	display: inline-block;
	background: #c85a1e;
	color: #fff;
	padding: 14px 32px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s ease;
	box-shadow: 0 2px 0 color-mix(in srgb, #c85a1e 40%, transparent);
}
.sds-vl-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, #c85a1e 30%, transparent);
	color: #fff;
}
.sds-vl-note {
	margin-top: 18px;
	font-size: 13px;
	color: #6b6558;
}
.sds-vl-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
	max-width: 340px;
	margin: 0 auto;
}
.sds-vl-form input {
	padding: 14px 16px;
	border-radius: 10px;
	border: 1.5px solid #d9cfb8;
	background: #fbf8f1;
	font-size: 16px;
	text-align: center;
}
.sds-vl-form input:focus {
	outline: none;
	border-color: #17150f;
	box-shadow: 0 0 0 3px rgba(23, 21, 15, 0.1);
}

@media (max-width: 640px) {
	body.sds-voucher-landing-body .sds-voucher-landing-root { padding: 32px 18px; align-items: flex-start; }
	.sds-vl-title { font-size: 26px; }
	.sds-vl-card-code { font-size: 24px; }
}

/* ---- v1.9.2 voucher input on payment step ---- */
.sds-fr-voucher-card {
	border: 1px dashed var(--sds-border);
	background: var(--sds-paper-muted, #fbf8f1);
}
.sds-fr-voucher-card input[type="text"] {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--sds-border);
	background: var(--sds-paper, #fff);
	font-size: 14px;
	outline: none;
	transition: border-color 0.15s ease;
	width: 100%;
	box-sizing: border-box;
}
.sds-fr-voucher-card input[type="text"]:focus {
	border-color: var(--sds-ink);
	box-shadow: 0 0 0 3px rgba(23, 21, 15, 0.08);
}
.sds-fr-btn-secondary {
	background: var(--sds-ink);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s;
	font-family: inherit;
}
.sds-fr-btn-secondary:hover { opacity: 0.88; }
.sds-fr-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- v1.12.3 validation + phone prefix + method info panels ---- */

/* Inline field errors */
.sds-fr-field.has-error input,
.sds-fr-field.has-error select,
.sds-fr-field.has-error textarea {
	border-color: #dc2626 !important;
	background: #fff5f5;
}
.sds-fr-field.has-error input:focus,
.sds-fr-field.has-error select:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.sds-fr-field-err {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #dc2626;
	font-weight: 500;
}

/* Phone with international prefix */
.sds-fr-field-phone .sds-fr-phone-row {
	display: grid;
	grid-template-columns: minmax(92px, 110px) 1fr;
	gap: 8px;
}
.sds-fr-phone-prefix {
	padding: 11px 10px;
	border-radius: 10px;
	border: 1px solid var(--sds-border);
	background: var(--sds-paper, #fff);
	font-size: 14px;
	font-family: inherit;
	color: var(--sds-ink);
	outline: none;
	cursor: pointer;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6558' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px;
	padding-right: 30px;
}
.sds-fr-phone-prefix:focus {
	border-color: var(--sds-ink);
	box-shadow: 0 0 0 3px rgba(23, 21, 15, 0.08);
}
.sds-fr-phone-number {
	/* Uses the default .sds-fr-field input styles — nothing extra needed. */
}
@media (max-width: 520px) {
	.sds-fr-field-phone .sds-fr-phone-row {
		grid-template-columns: 1fr;
	}
}

/* Payment method info panel */
.sds-fr-method-info {
	margin-top: 14px;
	padding: 14px 16px;
	background: #fbf8f1;
	border: 1px solid #e5ddcb;
	border-radius: 12px;
}
.sds-fr-method-info-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--sds-ink);
}
.sds-fr-method-info-body {
	font-size: 13px;
	color: #4a4438;
	line-height: 1.5;
}
.sds-fr-method-info-body p {
	margin: 0 0 8px;
}
.sds-fr-method-info-body p:last-child {
	margin-bottom: 0;
}

/* Bank details dl list */
.sds-fr-bank-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 14px;
	margin: 10px 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e5ddcb;
	border-radius: 8px;
	font-size: 13px;
}
.sds-fr-bank-details dt {
	color: #6b6558;
	font-weight: 500;
	font-size: 12px;
}
.sds-fr-bank-details dd {
	margin: 0;
	color: var(--sds-ink);
	font-weight: 500;
	word-break: break-all;
}
.sds-fr-mono {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: 0.01em;
}

/* Revolut QR block */
.sds-fr-revolut-qr {
	text-align: center;
	padding: 14px;
	background: #fff;
	border: 1px solid #e5ddcb;
	border-radius: 10px;
	margin-top: 10px;
}
.sds-fr-revolut-qr img {
	display: block;
	margin: 0 auto 10px;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}
.sds-fr-revolut-link {
	display: inline-block;
	padding: 10px 18px;
	background: var(--sds-ink);
	color: #fff !important;
	border-radius: 999px;
	text-decoration: none !important;
	font-weight: 500;
	font-size: 13px;
	margin-top: 4px;
	transition: opacity 0.15s;
}
.sds-fr-revolut-link:hover {
	opacity: 0.88;
}

/* v1.14.1 — SumUp inline payment page two-column layout */
.sds-fr-pay-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	/* v1.20.16 — stretch instead of start so the two cards (booking summary
	   on the left, payment instructions on the right) are equal height when
	   one has more content than the other. Cards inside use display:flex so
	   their inner content can space-between to fill the available height. */
	align-items: stretch;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 8px;
}
.sds-fr-pay-grid > .sds-fr-card {
	display: flex;
	flex-direction: column;
}
.sds-fr-pay-left {
	min-width: 0;
}
.sds-fr-pay-right {
	min-width: 0;
}
@media (max-width: 880px) {
	.sds-fr-pay-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.sds-fr-pay-left .sds-fr-title {
		font-size: 28px;
	}
}

.sds-fr-sumup-loading {
	text-align: center;
	padding: 30px 20px;
	color: var(--sds-muted);
}
.sds-fr-spin {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--sds-border);
	border-top-color: var(--sds-ink);
	border-radius: 50%;
	animation: sdsSpin 0.8s linear infinite;
}
@keyframes sdsSpin {
	to { transform: rotate(360deg); }
}

/* v1.14.6 — Congratulations celebration banner when a block upsell is selected */
.sds-fr-celebrate {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0;
	padding: 16px 20px;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
	border: 1px solid #f59e0b;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(251, 191, 36, 0.25);
	animation: sds-celebrate-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sds-fr-celebrate-icon {
	font-size: 32px;
	line-height: 1;
	flex-shrink: 0;
	animation: sds-celebrate-bounce 1.2s ease-in-out infinite;
}
.sds-fr-celebrate-body { flex: 1; min-width: 0; }
.sds-fr-celebrate-title {
	font-family: var(--sds-font-display, 'DM Sans', system-ui, sans-serif);
	font-size: 19px;
	font-weight: 700;
	color: #78350f;
	margin-bottom: 2px;
	letter-spacing: -0.01em;
}
.sds-fr-celebrate-sub {
	font-size: 14px;
	color: #7c2d12;
	line-height: 1.4;
}
.sds-fr-celebrate-sub strong {
	font-family: var(--sds-font-mono, ui-monospace, monospace);
	font-weight: 700;
	color: #7c2d12;
}
@keyframes sds-celebrate-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sds-celebrate-bounce {
	0%, 100% { transform: translateY(0) rotate(-5deg); }
	50%      { transform: translateY(-3px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
	.sds-fr-celebrate, .sds-fr-celebrate-icon { animation: none !important; }
}
@media (max-width: 520px) {
	.sds-fr-celebrate { padding: 14px 16px; gap: 12px; }
	.sds-fr-celebrate-icon { font-size: 26px; }
	.sds-fr-celebrate-title { font-size: 16px; }
	.sds-fr-celebrate-sub { font-size: 13px; }
}

/* v1.15.4 — Sticky action bar at the bottom of the booking form */
:root {
	--sds-stickybar-height: 68px;
}
/* Reserve space at the bottom of the form body so content doesn't get
   hidden under the fixed bar. Uses the sds-fullpage scope so embedded
   shortcodes (where the whole page is a normal WP post) still work. */
.sds-fullpage,
.sds-booking-root {
	padding-bottom: calc(var(--sds-stickybar-height) + env(safe-area-inset-bottom, 0px));
}

.sds-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* No border — the box-shadow above is enough visual separation and
	   a hard border line felt like a page divider, not a UI chrome edge. */
	box-shadow: 0 -6px 20px rgba(23, 21, 15, 0.05);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	animation: sds-stickybar-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sds-stickybar-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.sds-stickybar-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.sds-stickybar-progress {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sds-stickybar-progress-track {
	height: 4px;
	background: var(--sds-border);
	border-radius: 999px;
	overflow: hidden;
}
.sds-stickybar-progress-fill {
	height: 100%;
	background: var(--sds-ink);
	border-radius: 999px;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sds-stickybar-progress-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
	line-height: 1.2;
}
.sds-stickybar-progress-step {
	font-weight: 600;
	color: var(--sds-ink);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 11px;
	white-space: nowrap;
}
.sds-stickybar-progress-name {
	color: var(--sds-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sds-stickybar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sds-stickybar .sds-fr-btn {
	margin: 0;  /* override default button margins */
}
.sds-stickybar-back {
	padding-left: 14px;
	padding-right: 14px;
}

/* Mobile — tighten padding, stack total+button if needed */
@media (max-width: 520px) {
	:root { --sds-stickybar-height: 74px; }
	.sds-stickybar-inner {
		padding: 10px 14px;
		gap: 10px;
	}
	.sds-stickybar-progress-name {
		display: none;  /* room is tight — keep "Step X of Y" only */
	}
	.sds-stickybar .sds-fr-btn {
		padding: 10px 14px;
		font-size: 13px;
	}
	.sds-stickybar-back {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* On really tight screens, hide the label "Back" text and show just the arrow */
@media (max-width: 380px) {
	.sds-stickybar-back {
		font-size: 0;
		padding: 10px 12px;
	}
	.sds-stickybar-back::before {
		content: '←';
		font-size: 16px;
	}
}

/* SumUp variant — no total display, simpler layout */
.sds-stickybar--sumup .sds-stickybar-progress-step::before {
	content: '🔒 ';
}

@media (prefers-reduced-motion: reduce) {
	.sds-stickybar { animation: none; }
	.sds-stickybar-progress-fill { transition: none; }
}

/* v1.19.2 — SMS opt-in checkbox on booking form
   v1.20.18 — Tighter padding and inline-friendly so it nests below the
   contact-fields row without adding much vertical weight. */
.sds-fr-field-sms-opt {
	display: block;
	margin: 4px 0 4px;
	padding: 8px 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	cursor: pointer;
}
.sds-fr-field-sms-opt:hover {
	background: #dbeafe;
}
.sds-fr-sms-opt-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #1e3a8a;
}
.sds-fr-sms-opt-row input[type="checkbox"] {
	margin: 0;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	cursor: pointer;
}
.sds-fr-sms-opt-label {
	line-height: 1.4;
	user-select: none;
}

/* ============================================================
   v1.20.9 — Fluid compaction layer.
   Goal: form fits in ~720-900px viewport height instead of
   running to 1100-1300px. All spacing values use clamp() so
   they scale smoothly between phone (smallest) and large
   desktop (largest), avoiding sudden jumps at breakpoints.
   No new responsive breakpoints added — clamp() handles the
   continuum.
   ============================================================ */

/* Wrapper — was padding: 48px 24px (huge top space) */
.sds-booking-root {
	padding: clamp(16px, 3.5vw, 32px) clamp(12px, 3vw, 32px);
}

/* Stepper dots — was margin-bottom: 36px */
.sds-progress {
	margin-bottom: clamp(14px, 2vw, 22px);
}

/* Step heading block ("1. Who is this booking for?" + subtitle) */
.sds-step-heading {
	/* v1.20.18 — was 16-24px; tightened to 12-16px so the step title block
	   sits closer to the form content below it. */
	margin-bottom: clamp(12px, 1.4vw, 16px);
}

/* Section spacing inside steps
   v1.20.18 — was 14-22px; tightened to 10-14px. The fieldsets already have
   margin-bottom of their own, so this controls the gap between bigger
   blocks (booking-type tiles → first fieldset, etc). */
.sds-fr-step > * + * {
	margin-top: clamp(10px, 1.2vw, 14px);
}

/* Field rows
   v1.20.18 — Compact form pass. Was margin-bottom: 18px (in main rule above)
   then clamped 10-16px here. Now scales tighter on desktop (10px at the top
   end) while leaving 12px floor on small phones for thumb-comfort. */
.sds-fr-field {
	margin-bottom: clamp(8px, 1vw, 12px);
}

/* Card paddings (booking-type cards, summary cards, etc.) */
.sds-fr-card,
.sds-fr-cardsel {
	padding: clamp(14px, 2.2vw, 20px);
}

/* Booking-type tiles ("For myself" / "For someone else" / "As a gift")
   — these are the big tiles at the top of step 1 with the icon + label */
.sds-fr-bt-grid {
	gap: clamp(8px, 1.5vw, 14px);
	margin-bottom: clamp(16px, 2.5vw, 24px);
}
.sds-fr-bt {
	padding: clamp(16px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
}
.sds-fr-bt-icon {
	font-size: clamp(28px, 3.5vw, 36px);
	margin-bottom: clamp(6px, 1vw, 10px);
}

/* "YOUR DETAILS" card — give it less generous internal padding */
.sds-fr-section-card {
	padding: clamp(16px, 2.2vw, 22px);
}

/* The two-column grid (First/Last name) — slightly tighter gap */
.sds-fr-grid2,
.sds-fr-grid3 {
	gap: clamp(10px, 1.4vw, 14px);
}

/* Step navigation (Back / Continue) at the bottom */
.sds-step-nav {
	margin-top: clamp(16px, 2.5vw, 24px);
	gap: clamp(10px, 1.5vw, 14px);
}

/* Tighten the title sizes a touch — Fraunces is generous by nature */
.sds-step-title,
.sds-fr-title {
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.2;
	margin: 0 0 clamp(4px, 0.6vw, 8px);
}
.sds-step-subtitle,
.sds-fr-muted {
	font-size: clamp(13px, 1.05vw, 14.5px);
}

/* Eyebrow labels ("YOUR DETAILS") — leave readable but not chunky */
.sds-fr-eyebrow {
	font-size: clamp(10.5px, 0.9vw, 11.5px);
	margin-bottom: clamp(8px, 1.1vw, 12px);
}

/* Form inputs — keep 48px on mobile (already enforced in 1.20.1)
   but on desktop allow slightly less to save vertical space */
@media (min-width: 768px) {
	.sds-fr-input,
	.sds-fr-select {
		min-height: 42px;
		padding: 10px 14px;
	}
	.sds-fr-textarea {
		min-height: 84px;
		padding: 10px 14px;
	}
}

/* The success/confirmation screen — tighten the giant padding */
.sds-fr-success {
	padding: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 24px);
}
.sds-fr-success-icon {
	width: clamp(48px, 5vw, 64px);
	height: clamp(48px, 5vw, 64px);
	font-size: clamp(22px, 2.5vw, 28px);
	margin-bottom: clamp(14px, 1.8vw, 20px);
}
.sds-fr-success-title {
	font-size: clamp(22px, 2.6vw, 28px);
	margin-bottom: clamp(6px, 1vw, 10px);
}

/* Time-slot grid on the date/time step — let it use space efficiently
   on mid-sized screens (was 3 cols on desktop, 2 below 480px). At
   wide desktops, allow 4 columns so all available times for a day
   fit without scrolling. */
@media (min-width: 1024px) {
	.sds-fr-slots {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================================
   v1.20.12 — Even-height package cards.
   The grid already stretches all cards to the tallest card's
   height, but cards with less content (e.g. Single Lesson with
   2 bullets vs EDT Essentials with 3) end up with empty space
   at the bottom looking unbalanced. Make each card a flex column
   with the features list pinned to the bottom — visual harmony
   regardless of feature-count differences.

   v1.20.16 — Badge clearance. The 'BEST VALUE' / 'MOST COMPLETE'
   pill badges are absolutely positioned at top:14px right:14px.
   With only 20px of card padding-top, the price line on badged
   cards would visually overlap the badge area, while badge-less
   cards (Single Lesson, Pre-Test) had their prices hugging the
   top edge — different content-start Y on sibling cards. Bumping
   the top padding to 42px universally on cards-grid-children
   gives every card the same content baseline whether badged or
   not. Also explicitly stretches via height:100% to defeat any
   later rules that might break grid stretch.
   ============================================================ */

.sds-fr-cards .sds-fr-cardsel {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
	padding-top: 42px;
	/* v1.20.17 — Belt-and-braces: explicit stretch so each card fills its
	   row even if a parent rule has overridden the grid's align-items. */
	align-self: stretch;
	/* v1.20.17 — Restrict transition to colour properties only. Previously
	   `transition: all` on the base .sds-fr-cardsel rule animated padding,
	   width, etc., which could cause visible mid-transition layout shifts
	   when toggling selection. Colours-only is smooth and safe. */
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sds-fr-cards .sds-fr-cardsel .sds-fr-pkg-features {
	margin-top: auto; /* push bullets to bottom of card */
	padding-top: 12px;
}