/*!
 * Scholarly-Ink — Auth modal + account forms.
 *
 * Scoped under `.si-auth-modal` and `.si-acct` so nothing leaks into
 * existing theme styles. Brand tokens (--si-*) come from the theme.
 *
 *  Sections:
 *   1.  Modal shell + backdrop
 *   2.  Modal card
 *   3.  States (email / code / password / success)
 *   4.  6-digit code input
 *   5.  Buttons + utility
 *   6.  Account forms (.si-acct)
 *   7.  Step header / progress
 *   8.  Booking form
 *   9.  Reduced motion
 *  10.  Mobile
 */

/* ============================================================
   00. HOMEPAGE OVERRIDES (front-page.php)
   ============================================================
   Targets the abbreviated class names used in the custom
   homepage template (.sec-cta, .insall, .call, .slk, .ss, etc.)
   without editing front-page.php itself.
   ============================================================ */

/* "See all workshops & opportunities" on the dark workshops section.
   Currently a plain orange text link — restyle to match the .exbtn /
   .insall / .brwl pill-button family with parchment outline. */
#workshops a.sec-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 8px !important;
	padding: 14px 32px !important;
	border: 2px solid rgba(248,244,238,.55) !important;
	border-radius: 50px !important;
	color: var(--si-parchment, #F8F4EE) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease, gap .25s ease !important;
}
#workshops a.sec-cta:hover {
	background: var(--si-parchment, #F8F4EE) !important;
	color: var(--si-forest, #0E2A1C) !important;
	border-color: var(--si-parchment, #F8F4EE) !important;
	transform: translateY(-2px);
	gap: 12px !important;
}

/* "View all competitions" on the dark competition section.
   Same parchment-outline treatment. */
#competition a.call {
	display: inline-flex !important;
	align-items: center;
	gap: 8px !important;
	padding: 14px 32px !important;
	border: 2px solid rgba(248,244,238,.55) !important;
	border-radius: 50px !important;
	color: var(--si-parchment, #F8F4EE) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease, gap .25s ease !important;
}
#competition a.call:hover {
	background: var(--si-parchment, #F8F4EE) !important;
	color: var(--si-forest, #0E2A1C) !important;
	border-color: var(--si-parchment, #F8F4EE) !important;
	transform: translateY(-2px);
	gap: 12px !important;
}

/* Service-card "Learn More" — snappier hover state.
   .slk is the link inside each .sc service card. */
a.slk {
	position: relative;
	transition: color .22s ease, transform .22s ease, letter-spacing .22s ease !important;
}
a.slk::after {
	content: "";
	position: absolute;
	left: 0; bottom: -3px;
	width: 0; height: 2px;
	background: currentColor;
	transition: width .28s cubic-bezier(.4,0,.2,1);
}
a.slk:hover {
	color: var(--si-forest, #0E2A1C);
	transform: translateX(2px);
	letter-spacing: .015em;
}
a.slk:hover::after {
	width: 100%;
}

/* Insights section — "Stay sharp" paragraph moved to ABOVE the cards
   by JS (applyInsightsReorder), then styled here as a proper intro. */
.si-insights-intro {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto 2.5rem !important;
	color: rgba(248,244,238,.78) !important;
	font-size: 1.05rem !important;
	line-height: 1.65 !important;
	padding: 0 1rem;
}

/* Breathing room before the dark footer.
   #outro contains #testimonials + footer with fixed vh heights.
   We add internal padding so the parchment band feels generous. */
#outro #testimonials {
	padding-bottom: 6vh;
}
/* Reclaim a touch from the footer so the proportions feel calmer. */
@media (min-height: 800px) {
	#outro #testimonials { padding-bottom: 8vh; }
}

/* CART BADGE on the homepage account icon */
.si-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--si-terra, #C8614A);
	color: #fff;
	border: 2px solid var(--si-parchment, #F8F4EE);
	border-radius: 50px;
	font-family: var(--si-font-sans, "DM Sans"), sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	transform: scale(0);
	transition: transform .35s cubic-bezier(.16,1.06,.34,1);
	pointer-events: none;
	z-index: 5;
}
.si-cart-badge.is-visible {
	display: inline-flex;
	transform: scale(1);
}

/* ============================================================
   0. ACCOUNT-ICON HOVER DROPDOWN
   ============================================================ */
.si-acct-drop {
	position: absolute;
	z-index: 9000;
	width: 248px;
	background: #fff;
	color: var(--si-ink, #090F16);
	border-radius: 16px;
	padding: 8px;
	font-family: var(--si-font-sans, "DM Sans"), system-ui, sans-serif;
	font-size: .92rem;
	border: 1px solid rgba(14,42,28,.06);
	box-shadow:
		0 1px 0 rgba(255,255,255,.6) inset,
		0 24px 60px rgba(9,15,22,.18),
		0 6px 16px rgba(14,42,28,.10);
	opacity: 0;
	transform: translateY(-6px) scale(.97);
	transform-origin: top right;
	pointer-events: none;
	transition:
		transform .28s cubic-bezier(.16,1.06,.34,1),
		opacity .22s ease-out;
}
.si-acct-drop[hidden] { display: none; }
.si-acct-drop.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Little notch arrow pointing up at the anchor */
.si-acct-drop::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 18px;
	width: 12px; height: 12px;
	background: #fff;
	border-top: 1px solid rgba(14,42,28,.06);
	border-left: 1px solid rgba(14,42,28,.06);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.si-acct-drop__head {
	padding: 12px 14px 10px;
	border-bottom: 1px solid rgba(14,42,28,.06);
	margin-bottom: 6px;
}
.si-acct-drop__head strong {
	display: block;
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--si-forest, #0E2A1C);
	line-height: 1.2;
}
.si-acct-drop__head span {
	display: block;
	font-size: .78rem;
	color: rgba(14,42,28,.55);
	margin-top: 2px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.si-acct-drop__item {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	color: var(--si-ink, #090F16);
	font: inherit;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.si-acct-drop__item:hover,
.si-acct-drop__item:focus-visible {
	background: var(--si-parchment-soft, #F2EBE0);
	color: var(--si-forest, #0E2A1C);
	outline: none;
}
.si-acct-drop__item--primary {
	color: var(--si-terra, #C8614A);
}
.si-acct-drop__item--primary:hover {
	background: rgba(200,97,74,.08);
	color: var(--si-terra, #C8614A);
}
.si-acct-drop__item--muted { color: rgba(14,42,28,.55); }
.si-acct-drop__item--muted:hover { color: var(--si-terra, #C8614A); background: rgba(200,97,74,.06); }

.si-acct-drop__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	color: var(--si-forest, #0E2A1C);
	flex-shrink: 0;
}
.si-acct-drop__ico svg { width: 18px; height: 18px; }
.si-acct-drop__item--primary .si-acct-drop__ico { color: var(--si-terra, #C8614A); }

.si-acct-drop__divider {
	height: 1px;
	background: rgba(14,42,28,.08);
	margin: 6px 8px;
}

.si-acct-drop__item--cart { position: relative; }
.si-acct-drop__count {
	margin-left: auto;
	min-width: 22px; height: 22px; padding: 0 7px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--si-terra, #C8614A);
	color: #fff;
	border-radius: 50px;
	font-size: .72rem; font-weight: 700; letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
	.si-acct-drop {
		transition: opacity .12s linear !important;
		transform: none !important;
	}
}

@media (max-width: 600px) {
	.si-acct-drop {
		width: calc(100vw - 24px);
		max-width: 320px;
	}
}

/* ============================================================
   1. MODAL SHELL
   ============================================================ */
.si-auth-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(.75rem, 2vw, 2rem);
	font-family: var(--si-font-sans);
	color: var(--si-ink);
	-webkit-font-smoothing: antialiased;
}
.si-auth-modal[hidden] { display: none; }

.si-auth-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(9, 15, 22, .62);
	backdrop-filter: blur(8px) saturate(120%);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	opacity: 0;
	transition: opacity .35s cubic-bezier(.4,.0,.2,1);
}
.si-auth-modal.is-open .si-auth-modal__backdrop { opacity: 1; }

/* ============================================================
   2. MODAL CARD
   ============================================================ */
.si-auth-modal__card {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: var(--si-parchment, #F8F4EE);
	border-radius: 22px;
	box-shadow:
		0 1px 0 rgba(255,255,255,.6) inset,
		0 30px 80px rgba(9,15,22,.32),
		0 8px 24px rgba(14,42,28,.18);
	overflow: hidden;
	transform: translateY(28px) scale(.96);
	opacity: 0;
	transition:
		transform .55s cubic-bezier(.16,1.06,.34,1),
		opacity .35s ease-out;
	will-change: transform, opacity;
}
.si-auth-modal.is-open .si-auth-modal__card {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Decorative band — radial wash, matches homepage hero gradient palette */
.si-auth-modal__card::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 150px;
	background:
		radial-gradient(circle at 18% 22%, rgba(200,97,74,.22), transparent 38%),
		radial-gradient(circle at 86% 16%, rgba(45,212,160,.12), transparent 34%),
		linear-gradient(135deg, #071019 0%, var(--si-ink, #090F16) 46%, var(--si-forest, #0E2A1C) 100%);
	z-index: 0;
}

/* TAB STRIP — segmented pill control */
.si-auth-modal__head {
	position: relative; z-index: 1;
	padding: 22px 28px 18px;
	color: var(--si-parchment, #F8F4EE);
}
.si-auth-modal__tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: rgba(248,244,238,.07);
	border: 1px solid rgba(248,244,238,.12);
	border-radius: 999px;
	margin-bottom: 16px;
}
.si-auth-modal__tab {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 8px 18px;
	border: 0;
	background: transparent;
	color: rgba(248,244,238,.65);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: 999px;
	cursor: pointer;
	transition: background .26s ease, color .26s ease, transform .2s ease;
}
.si-auth-modal__tab:hover { color: rgba(248,244,238,.92); }
.si-auth-modal__tab.is-active {
	background: var(--si-terra, #C8614A);
	color: #fff;
	box-shadow: 0 4px 14px rgba(200,97,74,.34);
}
.si-auth-modal__tab:focus-visible {
	outline: 2px solid var(--si-terra-light, #D4735E);
	outline-offset: 2px;
}

/* Eyebrow above the heading — crystal-clear action label */
.si-auth-modal__eyebrow {
	display: inline-block;
	font-family: var(--si-font-sans, "DM Sans"), sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--si-terra-light, #D4735E);
	margin: 8px 0 6px;
	transition: opacity .14s ease, transform .14s ease;
}
.si-auth-modal__eyebrow.is-swapping {
	opacity: 0;
	transform: translateY(-3px);
}

/* Title crossfade when switching tabs */
.si-auth-modal__title {
	transition: opacity .14s ease, transform .14s ease;
}
.si-auth-modal__title.is-swapping {
	opacity: 0;
	transform: translateY(-4px);
}

.si-auth-modal__close {
	position: absolute; top: 14px; right: 14px;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(248,244,238,.18);
	border: 1px solid rgba(248,244,238,.28);
	border-radius: 999px;
	color: var(--si-parchment, #F8F4EE);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
	z-index: 2;
}
.si-auth-modal__close:hover { background: rgba(248,244,238,.3); transform: rotate(90deg); }
.si-auth-modal__close svg { width: 16px; height: 16px; }

/* Old .si-auth-modal__brand container retained for any straggler markup */
.si-auth-modal__brand {
	position: relative; z-index: 1;
	padding: 28px 28px 18px;
	color: var(--si-parchment, #F8F4EE);
}
.si-auth-modal__brand-mark { display: none; }  /* Brand mark removed per UX feedback */
.si-auth-modal__intro      { display: none; }  /* Subtitle removed per UX feedback   */
.si-auth-modal__brand-mark {
	display: inline-flex; align-items: center;
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 400; font-size: 1.15rem;
	letter-spacing: .02em;
	opacity: .92;
}
.si-auth-modal__brand-mark::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px; margin-right: 10px;
	border-radius: 50%;
	background: var(--si-terra, #C8614A);
	box-shadow: 0 0 0 4px rgba(200,97,74,.22);
}
.si-auth-modal__title {
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 300; font-size: clamp(1.6rem, 4vw, 2rem);
	color: var(--si-parchment, #F8F4EE);
	margin: 12px 0 6px;
	letter-spacing: -.01em;
	line-height: 1.12;
}
.si-auth-modal__intro {
	margin: 0;
	font-size: .92rem;
	color: rgba(248,244,238,.72);
	line-height: 1.55;
	max-width: 36ch;
}

.si-auth-modal__body {
	position: relative; z-index: 1;
	padding: 22px 28px 28px;
	background: linear-gradient(180deg, rgba(248,244,238,0) 0%, var(--si-parchment, #F8F4EE) 14%);
	border-top: 1px solid rgba(248,244,238,.08);
	min-height: 220px;
}

/* ============================================================
   3. STATES — cross-fade with subtle lift
   ============================================================ */
.si-auth-modal__state {
	position: absolute;
	inset: 22px 28px 28px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.4,.0,.2,1);
	pointer-events: none;
}
.si-auth-modal__state.is-active {
	position: relative; inset: auto;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.si-auth-modal__field { margin: 0 0 14px; }
.si-auth-modal__label {
	display: block;
	font-size: .78rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--si-forest, #0E2A1C);
	margin: 0 0 6px;
}
.si-auth-modal input[type="email"],
.si-auth-modal input[type="password"],
.si-auth-modal input[type="text"] {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: 14px 16px;
	background: #fff;
	/* Neutral grey by default — only terra on focus, only red on validation error. */
	border: 1px solid rgba(14,42,28,.14);
	border-radius: 12px;
	color: var(--si-ink, #090F16);
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.si-auth-modal input:hover { border-color: rgba(14,42,28,.22); }
.si-auth-modal input:focus-visible {
	outline: none;
	border-color: var(--si-terra, #C8614A);
	box-shadow: 0 0 0 4px rgba(200,97,74,.14);
}
.si-auth-modal input[aria-invalid="true"] {
	border-color: #C8614A;
	box-shadow: 0 0 0 4px rgba(200,97,74,.10);
}
.si-auth-modal input::placeholder { color: rgba(14,42,28,.4); }

.si-auth-modal__email-summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px;
	background: #fff;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--si-border, rgba(14,42,28,.12));
	margin: 0 0 16px;
}
.si-auth-modal__email-summary strong {
	font-weight: 500; color: var(--si-forest, #0E2A1C);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.si-auth-modal__email-summary button {
	background: none; border: 0; padding: 0;
	font: inherit;
	color: var(--si-terra, #C8614A);
	font-size: .82rem; font-weight: 600;
	cursor: pointer;
}
.si-auth-modal__email-summary button:hover { color: var(--si-forest, #0E2A1C); }

/* ============================================================
   4. 6-DIGIT CODE INPUT
   ============================================================ */
.si-auth-code {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin: 4px 0 18px;
}
.si-auth-code input {
	font-family: var(--si-font-mono, ui-monospace), Menlo, monospace;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	padding: 14px 0;
	background: #fff;
	border: 1px solid var(--si-border, rgba(14,42,28,.12));
	border-radius: 12px;
	color: var(--si-forest, #0E2A1C);
	caret-color: var(--si-terra, #C8614A);
	transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease, background .2s ease;
	min-width: 0;
}
.si-auth-code input:focus-visible {
	outline: none;
	border-color: var(--si-terra, #C8614A);
	box-shadow: 0 0 0 4px rgba(200,97,74,.16);
	transform: translateY(-2px);
}
.si-auth-code input.is-filled {
	background: rgba(200,97,74,.06);
	border-color: rgba(200,97,74,.42);
}
.si-auth-code.is-shake { animation: si-auth-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes si-auth-shake {
	10%, 90%  { transform: translateX(-2px); }
	20%, 80%  { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60%  { transform: translateX(5px); }
}

.si-auth-modal__resend {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px;
	font-size: .82rem;
	color: rgba(14,42,28,.6);
	margin: 0 0 12px;
}
.si-auth-modal__resend button {
	background: none; border: 0; padding: 0;
	font: inherit;
	color: var(--si-terra, #C8614A);
	font-weight: 600; cursor: pointer;
}
.si-auth-modal__resend button:disabled { color: rgba(14,42,28,.4); cursor: default; }

/* ============================================================
   5. ACTIONS / BUTTONS
   ============================================================ */
.si-auth-modal__actions {
	display: grid; gap: 8px;
	margin: 6px 0 0;
}
.si-auth-modal__btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: .98rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	background: var(--si-terra, #C8614A);
	color: #fff;
	transition:
		background .25s ease, color .25s ease,
		border-color .25s ease,
		transform .15s ease,
		box-shadow .25s ease;
	will-change: transform;
}
.si-auth-modal__btn:hover { background: var(--si-terra-light, #D4735E); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(200,97,74,.28); }
.si-auth-modal__btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(200,97,74,.18); }
.si-auth-modal__btn:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }

.si-auth-modal__btn--ghost {
	background: transparent;
	color: var(--si-forest, #0E2A1C);
	border-color: rgba(14,42,28,.16);
}
.si-auth-modal__btn--ghost:hover {
	background: rgba(14,42,28,.04);
	color: var(--si-forest, #0E2A1C);
	border-color: rgba(14,42,28,.28);
	box-shadow: none;
}

.si-auth-modal__btn[data-loading="true"] .si-auth-modal__btn-label { opacity: .6; }
.si-auth-modal__spinner {
	display: inline-block; width: 16px; height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: si-auth-spin .8s linear infinite;
	margin-left: 4px;
}
@keyframes si-auth-spin { to { transform: rotate(360deg); } }

.si-auth-modal__footer-link {
	display: block; text-align: center;
	margin-top: 14px;
	font-size: .85rem;
	color: rgba(14,42,28,.6);
}
.si-auth-modal__footer-link button {
	background: none; border: 0; padding: 0;
	font: inherit; font-weight: 600;
	color: var(--si-terra, #C8614A); cursor: pointer;
}
.si-auth-modal__footer-link button:hover { color: var(--si-forest, #0E2A1C); }

.si-auth-modal__error {
	background: rgba(200,97,74,.08);
	border: 1px solid rgba(200,97,74,.32);
	color: #8a3923;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: .85rem;
	margin: 0 0 12px;
	animation: si-auth-fade .25s ease;
}
@keyframes si-auth-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.si-auth-modal__legal {
	font-size: .72rem; color: rgba(14,42,28,.5);
	text-align: center; margin: 14px 0 0;
}

/* WELCOME STATE (logged-in but profile incomplete) */
.si-auth-modal__welcome { padding: 6px 0 4px; }
.si-auth-modal__welcome-greet {
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 300;
	font-size: 1.45rem;
	color: var(--si-forest, #0E2A1C);
	margin: 0 0 .35rem;
	line-height: 1.2;
}
.si-auth-modal__welcome-intro {
	color: rgba(14,42,28,.65);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0 0 1.1rem;
}

/* SUCCESS STATE */
.si-auth-modal__success {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 14px 0;
}
.si-auth-modal__success-mark {
	width: 64px; height: 64px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(45,212,160,.16);
	color: var(--si-mint, #2DD4A0);
	margin-bottom: 12px;
}
.si-auth-modal__success-mark svg {
	width: 36px; height: 36px;
}
.si-auth-modal__success-mark path {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: si-auth-tick .55s .15s cubic-bezier(.4,.0,.2,1) forwards;
}
@keyframes si-auth-tick { to { stroke-dashoffset: 0; } }

/* ============================================================
   6. ACCOUNT FORMS (.si-acct)
   ============================================================ */
.si-acct {
	padding: clamp(2.5rem, 8vw, 5rem) 0;
	background: var(--si-parchment, #F8F4EE);
}
.si-acct--inline { padding: 0; background: transparent; }

.si-acct__head {
	text-align: center;
	margin: 0 0 2.5rem;
}
.si-acct__title {
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 300;
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	letter-spacing: -.02em;
	color: var(--si-forest, #0E2A1C);
	margin: .35rem 0 .8rem;
	line-height: 1.05;
}
.si-acct__intro {
	max-width: 52ch;
	margin: 0 auto;
	font-size: 1.04rem;
	color: rgba(14,42,28,.7);
	line-height: 1.65;
}

/* ============================================================
   7. STEPS PROGRESS
   ============================================================ */
.si-acct__steps {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	list-style: none; padding: 0; margin: 0 0 2rem;
	font-size: .82rem;
	color: rgba(14,42,28,.55);
}
.si-acct__steps li {
	display: inline-flex; align-items: center;
	gap: .55rem;
	padding: 0 1rem 0 0;
	margin: 0 .25rem 0 0;
	position: relative;
	font-weight: 500;
	transition: color .3s ease;
}
.si-acct__steps li::after {
	content: "";
	width: 28px; height: 1px;
	margin-left: .55rem;
	background: rgba(14,42,28,.16);
}
.si-acct__steps li:last-child::after { display: none; }
.si-acct__steps li span {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(14,42,28,.16);
	background: #fff;
	font-weight: 700;
	font-size: .8rem;
	color: rgba(14,42,28,.55);
	transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.si-acct__steps li.is-active { color: var(--si-forest, #0E2A1C); }
.si-acct__steps li.is-active span {
	background: var(--si-terra, #C8614A);
	border-color: var(--si-terra, #C8614A);
	color: #fff;
	transform: scale(1.06);
	box-shadow: 0 6px 18px rgba(200,97,74,.28);
}
.si-acct__steps li.is-done { color: var(--si-forest, #0E2A1C); }
.si-acct__steps li.is-done span {
	background: var(--si-forest, #0E2A1C);
	border-color: var(--si-forest, #0E2A1C);
	color: var(--si-parchment, #F8F4EE);
}

/* Form */
.si-acct__form {
	background: #fff;
	border-radius: 22px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: 0 18px 50px rgba(14,42,28,.06);
	border: 1px solid rgba(14,42,28,.05);
	position: relative;
	overflow: hidden;
}
.si-acct__form--inline {
	box-shadow: none;
	border: 1px solid rgba(14,42,28,.06);
	background: #fff;
	border-radius: 18px;
}

.si-acct__panel {
	border: 0; padding: 0; margin: 0;
	opacity: 0;
	transform: translateY(12px);
	height: 0; overflow: hidden;
	transition: opacity .35s ease, transform .35s cubic-bezier(.4,.0,.2,1);
	pointer-events: none;
}
.si-acct__panel.is-active {
	opacity: 1;
	transform: none;
	height: auto; overflow: visible;
	pointer-events: auto;
}
.si-acct__legend {
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 300;
	font-size: clamp(1.4rem, 3vw, 1.7rem);
	color: var(--si-forest, #0E2A1C);
	margin: 0 0 .25rem;
	padding: 0;
	line-height: 1.2;
}
.si-acct__panel-intro {
	color: rgba(14,42,28,.6);
	margin: 0 0 1.4rem;
	font-size: .95rem;
}

.si-acct__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (max-width: 540px) {
	.si-acct__grid { grid-template-columns: 1fr; }
}

.si-acct__field {
	display: block;
	margin: 0 0 16px;
}
.si-acct__field .si-acct__label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--si-forest, #0E2A1C);
	margin: 0 0 6px;
}
.si-acct__req { color: var(--si-terra, #C8614A); margin-left: 2px; font-weight: 400; }
.si-acct__help {
	display: block;
	margin-top: 6px;
	font-size: .78rem;
	color: rgba(14,42,28,.55);
	line-height: 1.45;
}
.si-acct input[type="text"],
.si-acct input[type="email"],
.si-acct input[type="tel"],
.si-acct input[type="password"],
.si-acct input[type="date"],
.si-acct select,
.si-acct textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--si-ink, #090F16);
	padding: 13px 16px;
	background: var(--si-parchment, #F8F4EE);
	border: 1px solid rgba(14,42,28,.1);
	border-radius: 12px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.si-acct input:focus-visible,
.si-acct select:focus-visible,
.si-acct textarea:focus-visible {
	outline: none;
	background: #fff;
	border-color: var(--si-terra, #C8614A);
	box-shadow: 0 0 0 4px rgba(200,97,74,.14);
}
.si-acct textarea { resize: vertical; min-height: 110px; }
.si-acct input[aria-invalid="true"],
.si-acct select[aria-invalid="true"] {
	border-color: rgba(200,97,74,.5);
	background: rgba(200,97,74,.04);
}

.si-acct__field--checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	cursor: pointer; user-select: none;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(14,42,28,.025);
	transition: background .2s ease;
	margin-bottom: 12px;
}
.si-acct__field--checkbox:hover { background: rgba(14,42,28,.05); }
.si-acct__field--checkbox input {
	margin-top: 3px;
	width: 18px; height: 18px;
	accent-color: var(--si-terra, #C8614A);
	flex-shrink: 0;
}
.si-acct__field--checkbox span {
	font-size: .92rem;
	color: var(--si-ink, #090F16);
	line-height: 1.45;
}

.si-acct__field--radio-group .si-acct__label { display: block; margin-bottom: 10px; }
.si-acct__radios { display: flex; gap: 8px; flex-wrap: wrap; }
.si-acct__radio {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: rgba(14,42,28,.04);
	border-radius: 999px;
	cursor: pointer;
	font-size: .9rem;
	border: 1px solid transparent;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.si-acct__radio input { accent-color: var(--si-terra, #C8614A); }
.si-acct__radio:has(input:checked) {
	background: var(--si-terra, #C8614A);
	color: #fff;
	border-color: var(--si-terra, #C8614A);
}

.si-acct__password-wrap {
	position: relative;
}
.si-acct__password-wrap input { padding-right: 50px; }
.si-acct__password-toggle {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
	background: transparent; border: 0; padding: 8px;
	color: rgba(14,42,28,.45); cursor: pointer;
	border-radius: 8px;
	transition: color .2s ease, background .2s ease;
}
.si-acct__password-toggle:hover { color: var(--si-forest, #0E2A1C); background: rgba(14,42,28,.04); }

.si-acct__actions {
	display: flex; justify-content: flex-end;
	gap: 12px; margin-top: 1.4rem;
}
.si-acct__actions--split { justify-content: space-between; }

.si-acct .si-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	padding: .95rem 1.85rem;
	border-radius: 999px;
	font-family: var(--si-font-sans, "DM Sans"), sans-serif;
	font-size: .96rem;
	font-weight: 600;
	letter-spacing: .01em;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.si-acct .si-btn:hover { transform: translateY(-1px); }
.si-acct .si-btn--primary { background: var(--si-terra, #C8614A); color: #fff; }
.si-acct .si-btn--primary:hover { background: var(--si-terra-light, #D4735E); box-shadow: 0 14px 30px rgba(200,97,74,.26); }
.si-acct .si-btn--ghost { background: transparent; color: var(--si-forest, #0E2A1C); border-color: rgba(14,42,28,.18); }
.si-acct .si-btn--ghost:hover { background: rgba(14,42,28,.04); }
.si-acct .si-btn--large { padding: 1.1rem 2.2rem; font-size: 1rem; }
.si-acct .si-btn[disabled] { opacity: .6; cursor: wait; transform: none; }

.si-acct__feedback {
	padding: 12px 14px;
	border-radius: 12px;
	font-size: .9rem;
	margin: 0 0 1rem;
	animation: si-auth-fade .25s ease;
}
.si-acct__feedback.is-error {
	background: rgba(200,97,74,.08);
	border: 1px solid rgba(200,97,74,.3);
	color: #8a3923;
}
.si-acct__feedback.is-success {
	background: rgba(45,212,160,.1);
	border: 1px solid rgba(45,212,160,.35);
	color: #145e44;
}

/* Sub-cards on Security tab */
.si-acct__card {
	background: #fff;
	border-radius: 18px;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(14,42,28,.06);
	box-shadow: 0 8px 24px rgba(14,42,28,.05);
}
.si-acct__card--status {
	display: flex; align-items: flex-start; gap: 1rem;
	margin: 0 0 1.5rem;
}
.si-acct__status-icon {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(45,212,160,.15);
	color: var(--si-mint, #2DD4A0);
	border-radius: 12px;
	flex-shrink: 0;
}
.si-acct__card--logout {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem;
	margin-top: 1.5rem;
	background: var(--si-parchment-soft, #F2EBE0);
}
.si-acct__card--logout p { margin: .25rem 0 0; color: rgba(14,42,28,.6); font-size: .92rem; }

.si-acct--prompt .si-acct__card {
	text-align: center;
	padding: 3rem 2rem;
	max-width: 480px;
	margin: 0 auto;
}
.si-acct--prompt h1 {
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 300;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	color: var(--si-forest, #0E2A1C);
	margin: .5rem 0 .8rem;
}
.si-acct--prompt p { color: rgba(14,42,28,.65); margin: 0 0 1.5rem; }

/* ============================================================
   8. BOOKING SUCCESS
   ============================================================ */
.si-acct__success {
	text-align: center;
	padding: 2rem 1rem;
	animation: si-auth-fade .4s ease;
}
.si-acct__success-mark {
	color: var(--si-mint, #2DD4A0);
	margin-bottom: 1.5rem;
}
.si-acct__success-mark svg path,
.si-acct__success-mark svg circle {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: si-auth-tick-long .9s cubic-bezier(.4,0,.2,1) forwards;
}
.si-acct__success-mark svg path { animation-delay: .2s; }
@keyframes si-auth-tick-long { to { stroke-dashoffset: 0; } }
.si-acct__success h2 {
	font-family: var(--si-font-serif, "Cormorant Garamond"), Georgia, serif;
	font-weight: 300;
	color: var(--si-forest, #0E2A1C);
	margin: 0 0 .5rem;
}
.si-acct__success p { color: rgba(14,42,28,.65); margin: 0 0 1.2rem; }

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.si-auth-modal__card,
	.si-auth-modal__backdrop,
	.si-auth-modal__state,
	.si-acct__panel {
		transition: opacity .12s linear !important;
		transform: none !important;
	}
	.si-auth-code.is-shake,
	.si-auth-modal__success-mark path,
	.si-acct__success-mark svg path,
	.si-acct__success-mark svg circle {
		animation: none !important;
	}
}

/* ============================================================
   10. MOBILE
   ============================================================ */
@media (max-width: 480px) {
	.si-auth-modal { padding: 0; align-items: flex-end; }
	.si-auth-modal__card {
		max-width: 100%;
		border-radius: 22px 22px 0 0;
		transform: translateY(28px);
	}
	.si-auth-modal.is-open .si-auth-modal__card { transform: translateY(0); }
	.si-auth-code { gap: 6px; }
	.si-auth-code input { font-size: 1.2rem; padding: 12px 0; }
	.si-acct__steps { font-size: .72rem; }
	.si-acct__steps li::after { width: 12px; margin-left: .35rem; }
	.si-acct__steps li { padding: 0 .5rem 0 0; }
}

/* Safe area for iOS PWAs */
@supports (padding: max(0px)) {
	@media (max-width: 480px) {
		.si-auth-modal__card { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
	}
}