/* Tommy Taylor Booking — frontend widget styles
 * Most variables (--bg, --fg, --card, --pill, --radius, --accent, --shadow,
 * --ease) come from the theme. The booking widget is themeable via the same
 * tokens so the theme's main.css owns the look-and-feel.
 *
 * If the plugin is loaded outside the Tommy Taylor theme, fallbacks are used.
 */

:root {
	--ttb-bg:     var(--bg, #fafafa);
	--ttb-fg:     var(--fg, #0b0c10);
	--ttb-muted:  var(--muted, #555);
	--ttb-card:   var(--card, #fff);
	--ttb-pill:   var(--pill, #f0f2f7);
	--ttb-accent: var(--accent, #1f3a8a);
	--ttb-radius: var(--radius, 16px);
	--ttb-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .08));
	--ttb-ease:   var(--ease, cubic-bezier(.2, .8, .2, 1));
}

.tt-booking {
	margin: clamp(28px, 4vw, 48px) auto 0;
	max-width: 760px;
	background: var(--ttb-card);
	border-radius: var(--ttb-radius);
	border: 1px solid color-mix(in oklab, var(--ttb-fg) 6%, transparent);
	box-shadow: var(--ttb-shadow);
	padding: clamp(24px, 4vw, 40px);
	color: var(--ttb-fg);
}
.tt-booking-noscript {
	background: var(--ttb-pill);
	padding: 14px 18px;
	border-radius: 12px;
	font-size: .95rem;
}

/* ---------- Step pills ---------- */
.tt-booking-steps {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ttb-muted);
	flex-wrap: wrap;
}
.tt-booking-steps li {
	padding: 8px 14px;
	background: var(--ttb-pill);
	border-radius: 999px;
	transition: background .2s var(--ttb-ease), color .2s var(--ttb-ease);
}
.tt-booking-steps li.is-active { background: var(--ttb-fg); color: var(--ttb-bg); }
.tt-booking-steps li.is-done   { background: color-mix(in oklab, var(--ttb-fg) 18%, transparent); color: var(--ttb-fg); }

.tt-booking-stage { min-height: 280px; }
.tt-booking-loading { color: var(--ttb-muted); margin: 0; text-align: center; padding: 40px 0; font-style: italic; }

/* ---------- Form ---------- */
.tt-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 18px;
}
@media (max-width: 600px) { .tt-form { grid-template-columns: 1fr; } }

.tt-form-row { display: flex; flex-direction: column; gap: 6px; }
.tt-form-row.is-wide { grid-column: 1 / -1; }
.tt-form-row label { font-weight: 600; font-size: .9rem; }
.tt-form-row input,
.tt-form-row textarea,
.tt-form-row select {
	padding: 10px 12px;
	border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
	border-radius: 10px;
	background: var(--ttb-bg);
	color: var(--ttb-fg);
	font: inherit;
	font-size: 1rem;
}
.tt-form-row input:focus,
.tt-form-row textarea:focus,
.tt-form-row select:focus {
	outline: 2px solid var(--ttb-accent);
	outline-offset: 1px;
}
.tt-form-row textarea { min-height: 100px; resize: vertical; }

.tt-form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	grid-column: 1 / -1;
}
.tt-form-actions .link-quiet {
	color: var(--ttb-muted);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	font-size: .94rem;
	background: none;
	padding: 0;
	cursor: pointer;
}
.tt-form-actions .link-quiet:hover { color: var(--ttb-fg); }

/* Access-code badge — bottom-of-form pill that explains the discount */
.tt-access-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	background: color-mix(in oklab, var(--ttb-accent) 12%, transparent);
	color: var(--ttb-accent);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .01em;
	max-width: 100%;
}
.tt-access-badge-text { line-height: 1.3; }
.tt-access-badge-text strong { font-weight: 700; }
.tt-access-badge-mark {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ttb-accent);
	animation: ttb-pulse 2.4s ease-out infinite;
}
@keyframes ttb-pulse {
	0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--ttb-accent) 65%, transparent); }
	70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--ttb-accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--ttb-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .tt-access-badge-mark { animation: none; } }

.tt-access-savings { color: var(--ttb-accent); font-size: .92rem; }

/* ---------- Calendar ---------- */
.tt-cal {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: start;
}
@media (max-width: 720px) { .tt-cal { grid-template-columns: 1fr; gap: 16px; } }

.tt-cal-month-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 1.05rem;
}
.tt-cal-nav {
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ttb-pill);
	color: var(--ttb-fg);
	font-size: 1.1rem;
}
.tt-cal-nav:hover { background: color-mix(in oklab, var(--ttb-pill) 60%, var(--ttb-fg) 8%); }

.tt-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	font-size: .92rem;
}
.tt-cal-dow {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ttb-muted);
	text-align: center;
	padding: 6px 0;
}
.tt-cal-day {
	aspect-ratio: 1;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: color-mix(in oklab, var(--ttb-fg) 30%, transparent);
	cursor: not-allowed;
	font-size: .92rem;
}
.tt-cal-day.is-empty { background: transparent; }
.tt-cal-day.is-available {
	background: var(--ttb-pill);
	color: var(--ttb-fg);
	font-weight: 600;
	cursor: pointer;
}
.tt-cal-day.is-available:hover {
	background: color-mix(in oklab, var(--ttb-pill) 60%, var(--ttb-fg) 8%);
}
.tt-cal-day.is-selected {
	background: var(--ttb-fg);
	color: var(--ttb-bg);
}

.tt-cal-slots { padding-top: 8px; }
.tt-cal-hint { color: var(--ttb-muted); font-style: italic; margin: 0; }
.tt-cal-day-label {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 12px;
}
.tt-cal-tz {
	margin: 14px 0 0;
	font-size: .82rem;
	color: var(--ttb-muted);
}

.tt-slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
	gap: 8px;
}
.tt-slot {
	padding: 12px 10px;
	border-radius: 10px;
	background: var(--ttb-pill);
	border: 1px solid transparent;
	font-weight: 600;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s var(--ttb-ease), background .15s var(--ttb-ease);
}
.tt-slot:hover { border-color: var(--ttb-fg); }
.tt-slot.is-selected {
	background: var(--ttb-fg);
	color: var(--ttb-bg);
}

/* ---------- Confirm ---------- */
.tt-confirm h3 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.5rem;
	margin: 0 0 16px;
}

/* "What you're getting" panel — used on both step 1 (intake) and step 3 (confirm) */
.tt-confirm-product {
	margin: 0 0 18px;
	padding: 14px 18px;
	background: color-mix(in oklab, var(--ttb-accent) 8%, transparent);
	border: 1px solid color-mix(in oklab, var(--ttb-accent) 22%, transparent);
	border-radius: 12px;
}
.tt-intake-product {
	margin-bottom: clamp(20px, 2.5vw, 28px);
}
.tt-confirm-product-label {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: .98rem;
	color: var(--ttb-fg);
	letter-spacing: -.005em;
}
.tt-confirm-product-price-row { white-space: nowrap; }
.tt-strikethrough {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	color: var(--ttb-muted);
	font-weight: 500;
	margin-right: 4px;
}
.tt-confirm-product-price { color: var(--ttb-fg); }

.tt-confirm-product-access {
	margin: 0 0 10px;
	font-size: .88rem;
	color: var(--ttb-accent);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	background: color-mix(in oklab, var(--ttb-accent) 14%, transparent);
	border-radius: 999px;
	font-weight: 500;
}
.tt-confirm-product-access strong { font-weight: 700; }
.tt-access-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ttb-accent);
	flex-shrink: 0;
	animation: ttb-pulse 2.4s ease-out infinite;
}

.tt-confirm-product-desc {
	margin: 0;
	color: var(--ttb-muted);
	font-size: .92rem;
	line-height: 1.55;
}
.tt-confirm-list {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 8px 16px;
	margin: 0 0 18px;
}
.tt-confirm-list dt { color: var(--ttb-muted); font-size: .9rem; }
.tt-confirm-list dd { margin: 0; }
.tt-confirm-note {
	background: var(--ttb-pill);
	padding: 14px 18px;
	border-radius: 12px;
	color: var(--ttb-muted);
	font-size: .94rem;
	margin: 0 0 22px;
}
.tt-error {
	background: #fff0f0;
	border: 1px solid #f5c6c6;
	color: #842029;
	padding: 10px 14px;
	border-radius: 10px;
	margin-top: 14px;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	transition: transform .15s var(--ttb-ease), opacity .15s var(--ttb-ease);
	cursor: pointer;
	border: 1px solid transparent;
}
.btn-primary {
	background: var(--ttb-fg);
	color: var(--ttb-bg);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }