/**
 * Simple Booking Plugin – Front-end Styles
 * v1.1.0 — Production-grade, theme-inheriting
 *
 * PHILOSOPHY:
 *   1. Inherit EVERYTHING possible from the active theme (fonts, colors, radii).
 *   2. Provide elegant defaults that look premium on any theme.
 *   3. Every override sits behind a CSS custom property — themes can
 *      control the entire look by setting a handful of vars on .sbp-booking-wrap.
 *   4. Zero !important, zero fixed pixel fonts, zero hardcoded colours outside vars.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Custom-property defaults (all theme-overridable)
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-booking-wrap {
	/* ── Colors ─────────────────────────────────────────────────────────── */
	--sbp-accent:            var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #0c0c0c));
	--sbp-accent-text:       #fff;
	--sbp-accent-hover:      color-mix(in srgb, var(--sbp-accent), #000 12%);
	--sbp-accent-ring:       color-mix(in srgb, var(--sbp-accent), transparent 82%);
	--sbp-bg:                var(--wp--preset--color--background, var(--wp--preset--color--base, transparent));
	--sbp-surface:           var(--wp--preset--color--tertiary, #f8f8f8);
	--sbp-border:            var(--wp--custom--color--border, #ddd);
	--sbp-text:              var(--wp--preset--color--contrast, inherit);
	--sbp-text-soft:         color-mix(in srgb, var(--sbp-text), transparent 40%);
	--sbp-error:             #c0392b;
	--sbp-error-bg:          #fef2f2;
	--sbp-success:           #16a34a;
	--sbp-success-bg:        #f0fdf4;
	--sbp-slot-hover:        color-mix(in srgb, var(--sbp-accent), transparent 90%);
	--sbp-slot-active:       var(--sbp-accent);
	--sbp-slot-active-text:  var(--sbp-accent-text);

	/* ── Typography (inherit first, fallback second) ───────────────────── */
	--sbp-font:              inherit;
	--sbp-font-size:         inherit;
	--sbp-line-height:       inherit;
	--sbp-font-mono:         ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

	/* ── Spacing & Shape ───────────────────────────────────────────────── */
	--sbp-radius:            var(--wp--custom--border-radius, 6px);
	--sbp-radius-lg:         calc(var(--sbp-radius) * 1.6);
	--sbp-radius-pill:       100px;
	--sbp-shadow-sm:         0 1px 2px rgba(0,0,0,.05);
	--sbp-shadow:            0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--sbp-shadow-md:         0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.04);
	--sbp-max-width:         600px;

	/* ── Transitions ───────────────────────────────────────────────────── */
	--sbp-ease:              cubic-bezier(.4, 0, .2, 1);
	--sbp-duration:          180ms;
	--sbp-transition:        var(--sbp-duration) var(--sbp-ease);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.sbp-booking-wrap {
		--sbp-duration: 0ms;
	}
	.sbp-booking-wrap *,
	.sbp-booking-wrap *::before,
	.sbp-booking-wrap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Reset & wrapper
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-booking-wrap {
	font-family:  var(--sbp-font);
	font-size:    var(--sbp-font-size);
	line-height:  var(--sbp-line-height);
	color:        var(--sbp-text);
	background:   var(--sbp-bg);
	max-width:    var(--sbp-max-width);
	margin:       0 auto;
	box-sizing:   border-box;
	position:     relative;
}
.sbp-booking-wrap *,
.sbp-booking-wrap *::before,
.sbp-booking-wrap *::after {
	box-sizing: inherit;
}
/* Don't interfere with theme resets */
.sbp-booking-wrap img { max-width: 100%; height: auto; }
.sbp-booking-wrap a   { color: inherit; }

/* ── Honeypot (invisible to users) ──────────────────────────────────────── */
.sbp-hp {
	position: absolute;
	left:     -9999px;
	width:    1px;
	height:   1px;
	overflow: hidden;
	opacity:  0;
	pointer-events: none;
	tab-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Header
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-header {
	margin-bottom: 1.5rem;
}
.sbp-title {
	margin:      0;
	font-size:   1.35em;
	font-weight: 700;
	color:       var(--sbp-text);
	letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Step indicator
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-steps {
	display:       flex;
	align-items:   center;
	gap:           0;
	margin-bottom: 2rem;
	padding:       0.8rem 1rem;
	background:    var(--sbp-surface);
	border-radius: var(--sbp-radius-lg);
	border:        1px solid var(--sbp-border);
}

.sbp-step {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	font-size:   0.82em;
	font-weight: 500;
	color:       var(--sbp-text-soft);
	white-space: nowrap;
	transition:  color var(--sbp-transition);
}

.sbp-step--active { color: var(--sbp-accent); font-weight: 600; }
.sbp-step--done   { color: var(--sbp-success); }

.sbp-step__num {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	border-radius:   50%;
	font-weight:     700;
	font-size:       0.75em;
	border:          2px solid currentColor;
	flex-shrink:     0;
	transition:      background var(--sbp-transition),
	                 color var(--sbp-transition),
	                 border-color var(--sbp-transition),
	                 box-shadow var(--sbp-transition);
}
.sbp-step--active .sbp-step__num {
	background:   var(--sbp-accent);
	color:        var(--sbp-accent-text);
	border-color: var(--sbp-accent);
	box-shadow:   0 0 0 3px var(--sbp-accent-ring);
}
.sbp-step--done .sbp-step__num {
	background:   var(--sbp-success);
	color:        #fff;
	border-color: var(--sbp-success);
}

.sbp-step__label {
	display: none;
}
.sbp-step--active .sbp-step__label { display: inline; }
@media (min-width: 520px) {
	.sbp-step__label { display: inline; }
}

.sbp-step__divider {
	flex:       1;
	height:     2px;
	background: var(--sbp-border);
	margin:     0 10px;
	min-width:  16px;
	border-radius: 1px;
	transition: background var(--sbp-transition);
}
.sbp-step--done + .sbp-step__divider,
.sbp-step--done + .sbp-step__divider + .sbp-step--done ~ .sbp-step__divider {
	background: var(--sbp-success);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Panels
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-panel {
	animation: sbpSlideIn var(--sbp-duration) var(--sbp-ease);
}
@keyframes sbpSlideIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Form fields
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-field-group {
	margin-bottom: 1.25rem;
}

.sbp-field-row {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   0;
}
@media (min-width: 520px) {
	.sbp-field-row {
		grid-template-columns: 1fr 1fr;
		gap:                   1rem;
	}
}

.sbp-label {
	display:       block;
	margin-bottom: 0.4rem;
	font-size:     0.85em;
	font-weight:   600;
	color:         var(--sbp-text);
	letter-spacing: 0.01em;
}
.sbp-required {
	color:           var(--sbp-error);
	text-decoration: none;
	margin-left:     2px;
	font-weight:     400;
}

.sbp-input {
	font:           inherit;
	color:          var(--sbp-text);
	background:     var(--sbp-bg, #fff);
	width:          100%;
	padding:        0.65rem 0.85rem;
	border:         1px solid var(--sbp-border);
	border-radius:  var(--sbp-radius);
	box-shadow:     var(--sbp-shadow-sm);
	transition:     border-color var(--sbp-transition),
	                box-shadow var(--sbp-transition);
	appearance:     none;
	-webkit-appearance: none;
}
.sbp-input::placeholder {
	color:   var(--sbp-text-soft);
	opacity: 0.6;
}
.sbp-input:hover {
	border-color: color-mix(in srgb, var(--sbp-border), var(--sbp-accent) 30%);
}
.sbp-input:focus {
	outline:      none;
	border-color: var(--sbp-accent);
	box-shadow:   0 0 0 3px var(--sbp-accent-ring);
}
.sbp-input--half { max-width: 280px; }
.sbp-textarea    { resize: vertical; min-height: 80px; }

.sbp-input.sbp-input--error {
	border-color: var(--sbp-error);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--sbp-error), transparent 85%);
}

.sbp-field-error {
	display:    block;
	margin-top: 0.35rem;
	font-size:  0.78em;
	font-weight: 500;
	color:      var(--sbp-error);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Time slots
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-slots-group { margin-top: 0.5rem; }

.sbp-slots {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;
	margin-top: 0.35rem;
}

.sbp-slot {
	cursor:        pointer;
	padding:       0.5rem 1rem;
	font:          inherit;
	font-size:     0.85em;
	font-weight:   500;
	border:        1px solid var(--sbp-border);
	border-radius: var(--sbp-radius-pill);
	background:    var(--sbp-bg, #fff);
	color:         var(--sbp-text);
	box-shadow:    var(--sbp-shadow-sm);
	transition:    all var(--sbp-transition);
	user-select:   none;
	position:      relative;
}
.sbp-slot:hover {
	background:   var(--sbp-slot-hover);
	border-color: var(--sbp-accent);
	box-shadow:   var(--sbp-shadow);
	transform:    translateY(-1px);
}
.sbp-slot:active {
	transform: translateY(0);
}
.sbp-slot.sbp-slot--selected {
	background:   var(--sbp-slot-active);
	color:        var(--sbp-slot-active-text);
	border-color: var(--sbp-slot-active);
	box-shadow:   var(--sbp-shadow-md), 0 0 0 3px var(--sbp-accent-ring);
	font-weight:  600;
}

.sbp-slots-loading {
	font-size:    0.85em;
	color:        var(--sbp-text-soft);
	font-style:   italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Navigation buttons
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-nav {
	display:    flex;
	margin-top: 1.75rem;
	gap:        0.75rem;
}
.sbp-nav--right  { justify-content: flex-end; }
.sbp-nav--split  { justify-content: space-between; }

.sbp-btn {
	cursor:          pointer;
	display:         inline-flex;
	align-items:     center;
	gap:             0.4rem;
	padding:         0.65rem 1.5rem;
	font:            inherit;
	font-size:       0.9em;
	font-weight:     600;
	border-radius:   var(--sbp-radius);
	border:          2px solid transparent;
	transition:      all var(--sbp-transition);
	text-decoration: none;
	white-space:     nowrap;
	position:        relative;
	overflow:        hidden;
}

/* Primary button */
.sbp-btn--primary {
	background:   var(--sbp-accent);
	color:        var(--sbp-accent-text);
	border-color: var(--sbp-accent);
	box-shadow:   var(--sbp-shadow-sm);
}
.sbp-btn--primary:hover:not(:disabled) {
	background:   var(--sbp-accent-hover);
	border-color: var(--sbp-accent-hover);
	box-shadow:   var(--sbp-shadow);
	transform:    translateY(-1px);
}
.sbp-btn--primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: var(--sbp-shadow-sm);
}
.sbp-btn--primary:disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}

/* Ghost button */
.sbp-btn--ghost {
	background:   transparent;
	color:        var(--sbp-text);
	border-color: var(--sbp-border);
}
.sbp-btn--ghost:hover {
	background:   var(--sbp-surface);
	border-color: color-mix(in srgb, var(--sbp-border), var(--sbp-text) 20%);
}

.sbp-btn__arrow {
	font-size:   1em;
	line-height: 1;
	transition:  transform var(--sbp-transition);
}
.sbp-btn:hover .sbp-btn__arrow {
	transform: translateX(2px);
}
.sbp-btn--ghost:hover .sbp-btn__arrow {
	transform: translateX(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Review panel (Step 3)
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-review {
	background:    var(--sbp-surface);
	border:        1px solid var(--sbp-border);
	border-radius: var(--sbp-radius-lg);
	padding:       1.25rem 1.5rem;
	margin-bottom: 1rem;
}
.sbp-review__title {
	margin:        0 0 0.75rem;
	font-size:     0.95em;
	font-weight:   700;
	color:         var(--sbp-text);
}
.sbp-review__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        0.45rem;
}
.sbp-review__list li {
	display:   flex;
	gap:       0.5rem;
	font-size: 0.88em;
	padding:   0.25rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--sbp-border), transparent 50%);
}
.sbp-review__list li:last-child { border-bottom: none; }
.sbp-review__list li strong {
	min-width:   95px;
	color:       var(--sbp-text-soft);
	font-weight: 600;
	flex-shrink: 0;
}

.sbp-consent {
	font-size: 0.78em;
	color:     var(--sbp-text-soft);
	margin:    0 0 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Loading / spinner
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-submitting {
	display:     flex;
	align-items: center;
	gap:         0.6rem;
	font-size:   0.88em;
	color:       var(--sbp-text-soft);
	margin-top:  0.75rem;
}

.sbp-spinner {
	display:          inline-block;
	width:            18px;
	height:           18px;
	border:           2px solid var(--sbp-border);
	border-top-color: var(--sbp-accent);
	border-radius:    50%;
	animation:        sbpSpin 0.65s linear infinite;
	flex-shrink:      0;
}
@keyframes sbpSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Success screen
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-success {
	text-align: center;
	padding:    2.5rem 1rem;
}

.sbp-success__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           56px;
	height:          56px;
	margin:          0 auto 1.25rem;
	background:      var(--sbp-success);
	color:           #fff;
	border-radius:   50%;
	font-size:       1.6rem;
	font-weight:     700;
	box-shadow:      0 0 0 6px var(--sbp-success-bg),
	                 0 0 0 8px color-mix(in srgb, var(--sbp-success), transparent 80%);
	animation:       sbpPop 0.35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes sbpPop {
	from { transform: scale(0) rotate(-8deg); opacity: 0; }
	to   { transform: scale(1) rotate(0);     opacity: 1; }
}

.sbp-success__title {
	font-size:   1.3em;
	font-weight: 700;
	margin:      0 0 0.5rem;
	color:       var(--sbp-text);
}
.sbp-success__msg {
	color:  var(--sbp-text-soft);
	margin: 0 0 0.5rem;
}
.sbp-success__ref {
	display:       inline-block;
	font-family:   var(--sbp-font-mono);
	font-size:     0.88em;
	background:    var(--sbp-surface);
	border:        1px solid var(--sbp-border);
	border-radius: var(--sbp-radius);
	padding:       0.3rem 0.7rem;
	margin:        0.25rem 0;
	letter-spacing: 0.04em;
}
.sbp-success__email {
	font-size: 0.82em;
	color:     var(--sbp-text-soft);
	margin:    0.5rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Global error
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp-global-error {
	background:    var(--sbp-error-bg);
	border:        1px solid color-mix(in srgb, var(--sbp-error), transparent 60%);
	color:         var(--sbp-error);
	border-radius: var(--sbp-radius);
	padding:       0.75rem 1rem;
	font-size:     0.88em;
	font-weight:   500;
	margin-top:    0.75rem;
	animation:     sbpShake 0.3s var(--sbp-ease);
}
@keyframes sbpShake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Dark theme support (auto)
   Inherits from WP theme's dark mode; also works standalone.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
	/* Only apply if the theme hasn't already set custom property overrides */
	.sbp-booking-wrap:not([data-sbp-light]) {
		--sbp-bg:         var(--wp--preset--color--background, #1a1a1a);
		--sbp-surface:    var(--wp--preset--color--tertiary, #2a2a2a);
		--sbp-border:     #3a3a3a;
		--sbp-text:       var(--wp--preset--color--contrast, #e8e8e8);
		--sbp-text-soft:  #999;
		--sbp-error-bg:   #2d1515;
		--sbp-success-bg: #0d2818;
		--sbp-shadow-sm:  0 1px 2px rgba(0,0,0,.2);
		--sbp-shadow:     0 1px 3px rgba(0,0,0,.25);
		--sbp-shadow-md:  0 4px 6px rgba(0,0,0,.3);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: Print styles
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
	.sbp-booking-wrap {
		box-shadow: none;
		border:     1px solid #ccc;
	}
	.sbp-nav,
	.sbp-steps,
	.sbp-submitting,
	.sbp-global-error { display: none; }
}