/* =========================================================================
   Sky Horse Farm Booking — Frontend styles
   Luxury dark / gold design matching the existing site aesthetic.

   Palette:
     bg deep       #0b0a08
     bg panel      #100e0b
     bg raised     #14110d
     cream text    #efe7d8
     muted text    rgba(239,231,216,.55)
     gold          #c9a15f
     gold soft     rgba(201,161,95,.35)   (borders)
     gold faint    rgba(201,161,95,.12)   (fills)

   Fonts: Cormorant Garamond (headings), Jost (body/UI),
          Dancing Script (script accents).

   All classes are prefixed shf- to avoid theme conflicts.
   Scoping: styles apply only inside .shf-app.
   ========================================================================= */

.shf-app {
	--shf-bg: #0b0a08;
	--shf-panel: #100e0b;
	--shf-raised: #14110d;
	--shf-raised2: #1a1611;
	--shf-cream: #efe7d8;
	--shf-muted: rgba(239, 231, 216, 0.55);
	--shf-faint: rgba(239, 231, 216, 0.35);
	--shf-gold: #c9a15f;
	--shf-gold-strong: #d8b776;
	--shf-gold-border: rgba(201, 161, 95, 0.35);
	--shf-gold-faint: rgba(201, 161, 95, 0.12);
	--shf-gold-glow: rgba(201, 161, 95, 0.25);
	--shf-danger: #d96a5a;
	--shf-danger-bg: rgba(217, 106, 90, 0.12);
	--shf-ok: #7fb37f;
	--shf-font-serif: "Cormorant Garamond", "Times New Roman", serif;
	--shf-font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--shf-font-script: "Dancing Script", cursive;
	--shf-radius: 14px;
	--shf-radius-sm: 9px;

	background: var(--shf-bg);
	color: var(--shf-cream);
	font-family: var(--shf-font-body);
	font-weight: 300;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.shf-app *,
.shf-app *::before,
.shf-app *::after {
	box-sizing: border-box;
}

.shf-app p,
.shf-app h2,
.shf-app h3,
.shf-app h4 {
	margin: 0;
}

.shf-app__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 40px;
}

.shf-app :focus {
	outline: 2px solid var(--shf-gold);
	outline-offset: 2px;
}

/* Screen-reader helper --------------------------------------------------- */
.shf-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* =========================================================================
   Header
   ========================================================================= */

.shf-header {
	text-align: center;
	padding: 34px 0 10px;
}

.shf-eyebrow {
	font-size: 12px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--shf-gold);
	margin-bottom: 14px;
}

.shf-title {
	font-family: var(--shf-font-serif);
	font-weight: 600;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.12;
	color: var(--shf-cream);
	letter-spacing: 0.01em;
}

.shf-title--script {
	font-family: var(--shf-font-script);
	font-weight: 500;
	font-size: clamp(36px, 5.4vw, 56px);
	color: var(--shf-gold);
	margin-top: 2px;
}

.shf-subtitle {
	color: var(--shf-muted);
	font-size: 16px;
	max-width: 560px;
	margin: 16px auto 0;
}

/* =========================================================================
   Step indicator
   ========================================================================= */

.shf-steps {
	margin: 34px 0 8px;
}

.shf-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 4px;
	counter-reset: shf-step;
}

.shf-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	border: 1px solid transparent;
	color: var(--shf-faint);
	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
	user-select: none;
}

.shf-step__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	border: 1px solid rgba(239, 231, 216, 0.25);
	color: var(--shf-faint);
	transition: all 0.3s ease;
	flex: 0 0 auto;
}

.shf-step__label {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.shf-step.is-active {
	color: var(--shf-gold);
	border-color: var(--shf-gold-border);
	background: var(--shf-gold-faint);
}

.shf-step.is-active .shf-step__dot {
	border-color: var(--shf-gold);
	color: var(--shf-gold);
	background: var(--shf-gold-faint);
}

.shf-step.is-done {
	color: var(--shf-muted);
}

.shf-step.is-done .shf-step__dot {
	border-color: var(--shf-gold-border);
	color: var(--shf-gold);
}

.shf-step.is-done .shf-step__dot::after {
	content: "✓";
	font-size: 12px;
}

.shf-step.is-done .shf-step__dot-num,
.shf-step.is-done .shf-step__num {
	display: none;
}

/* =========================================================================
   Layout
   ========================================================================= */

.shf-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 26px;
	align-items: start;
	margin-top: 26px;
}

/* =========================================================================
   Panels (steps)
   ========================================================================= */

.shf-panel {
	background: var(--shf-panel);
	border: 1px solid var(--shf-gold-border);
	border-radius: var(--shf-radius);
	padding: 30px 28px 34px;
	position: relative;
	overflow: hidden;
}

.shf-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--shf-gold-border), transparent);
}

.shf-panel__title {
	font-family: var(--shf-font-serif);
	font-size: 27px;
	font-weight: 600;
	color: var(--shf-cream);
	margin-bottom: 6px;
}

.shf-panel__intro {
	color: var(--shf-muted);
	font-size: 14.5px;
	margin-bottom: 24px;
	max-width: 640px;
}

/* Transition between steps */
.shf-panel {
	animation: shf-fade-up 0.45s ease both;
}

@keyframes shf-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shf-panel,
	.shf-calendar__day,
	.shf-slot,
	.shf-btn,
	.shf-tour__select,
	.shf-guests__btn {
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================================
   Tour cards
   ========================================================================= */

.shf-tours {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.shf-tour {
	background: var(--shf-raised);
	border: 1px solid rgba(239, 231, 216, 0.1);
	border-radius: var(--shf-radius-sm);
	overflow: hidden;
	transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
	display: flex;
	flex-direction: column;
}

.shf-tour:hover {
	border-color: var(--shf-gold-border);
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.shf-tour.is-selected {
	border-color: var(--shf-gold);
	box-shadow: 0 0 0 1px var(--shf-gold-border), 0 16px 40px rgba(0, 0, 0, 0.45);
}

.shf-tour__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--shf-raised2);
	overflow: hidden;
}

.shf-tour__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.shf-tour:hover .shf-tour__media img {
	transform: scale(1.05);
}

.shf-tour__ph {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(201, 161, 95, 0.25), transparent 60%),
		linear-gradient(160deg, #1a1611, #0f0d0a);
}

.shf-tour__price {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: rgba(11, 10, 8, 0.82);
	border: 1px solid var(--shf-gold-border);
	color: var(--shf-gold);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	backdrop-filter: blur(4px);
}

.shf-tour__per {
	color: var(--shf-muted);
	font-size: 11.5px;
	font-weight: 300;
}

.shf-tour__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.shf-tour__name {
	font-family: var(--shf-font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--shf-cream);
	margin-bottom: 4px;
}

.shf-tour__desc {
	color: var(--shf-muted);
	font-size: 13.5px;
	margin-bottom: 14px;
	flex: 1;
}

.shf-tour__meta {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12.5px;
	color: var(--shf-muted);
}

.shf-tour__meta-icon {
	color: var(--shf-gold);
	margin-right: 4px;
}

.shf-tour__select {
	width: 100%;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--shf-gold-border);
	background: transparent;
	color: var(--shf-gold);
	font-family: var(--shf-font-body);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.shf-tour__select:hover {
	background: var(--shf-gold);
	color: #14110d;
	border-color: var(--shf-gold);
}

.shf-tour.is-selected .shf-tour__select {
	background: var(--shf-gold);
	color: #14110d;
	border-color: var(--shf-gold);
}

.shf-tags {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.shf-tag {
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--shf-muted);
	border: 1px solid rgba(239, 231, 216, 0.14);
	padding: 5px 14px;
	border-radius: 999px;
}

/* =========================================================================
   Calendar
   ========================================================================= */

.shf-calendar {
	margin-top: 4px;
}

.shf-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.shf-calendar__label {
	font-family: var(--shf-font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--shf-cream);
}

.shf-calendar__nav {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--shf-gold-border);
	background: transparent;
	color: var(--shf-gold);
	cursor: pointer;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, color 0.3s ease;
}

.shf-calendar__nav:hover:not(:disabled) {
	background: var(--shf-gold);
	color: #14110d;
}

.shf-calendar__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.shf-calendar__dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	margin-bottom: 7px;
}

.shf-calendar__dow span {
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--shf-faint);
	padding: 4px 0;
}

.shf-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.shf-calendar__day {
	aspect-ratio: 1 / 0.82;
	border-radius: 8px;
	border: 1px solid rgba(239, 231, 216, 0.1);
	background: var(--shf-raised);
	color: var(--shf-muted);
	font-family: var(--shf-font-body);
	font-size: 14.5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease;
	padding: 0;
}

.shf-calendar__day:hover:not(.is-disabled) {
	border-color: var(--shf-gold);
	transform: translateY(-1px);
}

.shf-calendar__day.is-available {
	color: var(--shf-gold);
	border-color: var(--shf-gold-border);
}

.shf-calendar__day.is-available:hover {
	background: var(--shf-gold-faint);
}

.shf-calendar__day.is-selected {
	background: var(--shf-gold);
	color: #14110d;
	border-color: var(--shf-gold);
	font-weight: 500;
}

.shf-calendar__day.is-disabled {
	opacity: 0.28;
	cursor: default;
	text-decoration: line-through;
	text-decoration-color: rgba(239, 231, 216, 0.4);
}

.shf-calendar__day.is-blocked {
	opacity: 0.5;
	cursor: default;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 4px,
		rgba(217, 106, 90, 0.08) 4px,
		rgba(217, 106, 90, 0.08) 8px
	);
}

.shf-calendar__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--shf-gold);
}

.shf-calendar__day.is-selected.is-today::after {
	background: #14110d;
}

.shf-calendar__day.is-empty {
	visibility: hidden;
}

.shf-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 16px;
	font-size: 12px;
	color: var(--shf-muted);
}

.shf-legend {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.shf-legend__dot {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	display: inline-block;
	border: 1px solid rgba(239, 231, 216, 0.2);
}

.shf-legend__dot--on {
	border-color: var(--shf-gold-border);
	background: var(--shf-gold-faint);
}

.shf-legend__dot--off {
	background: rgba(239, 231, 216, 0.08);
	text-decoration: line-through;
}

.shf-legend__dot--block {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 2px,
		rgba(217, 106, 90, 0.25) 2px,
		rgba(217, 106, 90,  0.25) 4px
	);
}

/* =========================================================================
   Time slots
   ========================================================================= */

.shf-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.shf-slot {
	position: relative;
	border: 1px solid rgba(239, 231, 216, 0.12);
	background: var(--shf-raised);
	border-radius: var(--shf-radius-sm);
	padding: 14px 14px 12px;
	cursor: pointer;
	text-align: left;
	color: var(--shf-cream);
	font-family: var(--shf-font-body);
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.shf-slot:hover:not(.is-disabled) {
	border-color: var(--shf-gold);
	transform: translateY(-2px);
}

.shf-slot.is-selected {
	border-color: var(--shf-gold);
	background: var(--shf-gold-faint);
	box-shadow: inset 0 0 0 1px var(--shf-gold-border);
}

.shf-slot.is-disabled {
	opacity: 0.35;
	cursor: default;
}

.shf-slot__time {
	font-family: var(--shf-font-serif);
	font-size: 21px;
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}

.shf-slot.is-selected .shf-slot__time,
.shf-slot.is-available .shf-slot__time {
	color: var(--shf-gold);
}

.shf-slot__meta {
	font-size: 11.5px;
	color: var(--shf-muted);
	letter-spacing: 0.05em;
}

.shf-slot__meta.is-low {
	color: var(--shf-danger);
}

/* =========================================================================
   Guests stepper
   ========================================================================= */

.shf-guests {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 22px 0 8px;
}

.shf-guests__btn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--shf-gold-border);
	background: transparent;
	color: var(--shf-gold);
	font-size: 24px;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.shf-guests__btn:hover:not(:disabled) {
	background: var(--shf-gold);
	color: #14110d;
}

.shf-guests__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.shf-guests__value {
	text-align: center;
	min-width: 120px;
}

.shf-guests__value span:first-child {
	font-family: var(--shf-font-serif);
	font-size: 54px;
	font-weight: 600;
	color: var(--shf-cream);
	display: block;
	line-height: 1;
}

.shf-guests__word {
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--shf-gold);
}

.shf-hint {
	text-align: center;
	color: var(--shf-muted);
	font-size: 12.5px;
	margin-top: 10px;
}

/* =========================================================================
   Pickup
   ========================================================================= */

.shf-toggle-group {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.shf-toggle {
	flex: 1;
	min-width: 180px;
	padding: 14px 18px;
	border-radius: var(--shf-radius-sm);
	border: 1px solid rgba(239, 231, 216, 0.14);
	background: var(--shf-raised);
	color: var(--shf-muted);
	font-family: var(--shf-font-body);
	font-size: 14px;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: all 0.3s ease;
}

.shf-toggle.is-on {
	border-color: var(--shf-gold);
	color: var(--shf-gold);
	background: var(--shf-gold-faint);
}

.shf-toggle-group[hidden] {
	display: none;
}

.shf-pickup-fields {
	display: grid;
	gap: 16px;
}

.shf-pickup-fields[hidden] {
	display: none;
}

/* =========================================================================
   Form fields
   ========================================================================= */

.shf-fields {
	display: grid;
	gap: 16px;
}

.shf-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.shf-field {
	display: grid;
	gap: 7px;
}

.shf-label {
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--shf-muted);
}

.shf-input,
.shf-select,
.shf-textarea {
	width: 100%;
	background: var(--shf-raised);
	border: 1px solid rgba(239, 231, 216, 0.14);
	border-radius: var(--shf-radius-sm);
	color: var(--shf-cream);
	font-family: var(--shf-font-body);
	font-size: 15px;
	padding: 12px 14px;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.shf-input::placeholder,
.shf-textarea::placeholder {
	color: var(--shf-faint);
}

.shf-input:focus,
.shf-select:focus,
.shf-textarea:focus {
	border-color: var(--shf-gold);
	background: var(--shf-raised2);
	outline: none;
}

.shf-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9a15f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px;
	padding-right: 36px;
}

.shf-select option {
	background: #14110d;
	color: var(--shf-cream);
}

.shf-textarea {
	resize: vertical;
	min-height: 84px;
}

.shf-field__hint {
	font-size: 12px;
	color: var(--shf-muted);
}

.shf-field__error {
	font-size: 12.5px;
	color: var(--shf-danger);
	background: var(--shf-danger-bg);
	border: 1px solid rgba(217, 106, 90, 0.3);
	padding: 6px 10px;
	border-radius: 6px;
}

.shf-field.has-error .shf-input,
.shf-field.has-error .shf-select {
	border-color: var(--shf-danger);
}

/* =========================================================================
   Review
   ========================================================================= */

.shf-review__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}

.shf-review__cell {
	background: var(--shf-raised);
	border: 1px solid rgba(239, 231, 216, 0.1);
	border-radius: var(--shf-radius-sm);
	padding: 14px 16px;
}

.shf-review__cell--wide {
	grid-column: span 3;
}

.shf-review__label {
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--shf-faint);
	margin-bottom: 5px;
}

.shf-review__value {
	font-family: var(--shf-font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--shf-cream);
	line-height: 1.3;
}

.shf-review__price {
	border: 1px solid var(--shf-gold-border);
	border-radius: var(--shf-radius-sm);
	padding: 18px 20px;
	background: var(--shf-gold-faint);
}

.shf-review__line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14.5px;
	color: var(--shf-muted);
	padding: 7px 0;
}

.shf-review__line--total {
	border-top: 1px solid var(--shf-gold-border);
	margin-top: 8px;
	padding-top: 14px;
	font-family: var(--shf-font-serif);
	font-size: 22px;
	color: var(--shf-cream);
}

.shf-review__line--total span:last-child {
	color: var(--shf-gold);
	font-weight: 600;
}

.shf-review__note {
	font-size: 12px;
	color: var(--shf-muted);
	margin-top: 10px;
}

.shf-review__policy {
	margin-top: 16px;
	font-size: 12.5px;
	color: var(--shf-faint);
	border-left: 2px solid var(--shf-gold-border);
	padding-left: 12px;
}

/* =========================================================================
   Confirmation
   ========================================================================= */

.shf-panel--confirm {
	text-align: center;
}

.shf-confirm__mark {
	color: var(--shf-gold);
	margin-bottom: 12px;
}

.shf-confirm__eyebrow {
	font-size: 11px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--shf-gold);
	margin-bottom: 8px;
}

.shf-confirm__title {
	font-family: var(--shf-font-serif);
	font-size: 34px;
	font-weight: 600;
	color: var(--shf-cream);
	margin-bottom: 10px;
}

.shf-confirm__title span {
	color: var(--shf-gold);
}

.shf-confirm__text {
	color: var(--shf-muted);
	max-width: 480px;
	margin: 0 auto 6px;
}

.shf-confirm__email {
	color: var(--shf-cream);
	font-size: 15px;
	margin-bottom: 24px;
}

.shf-confirm__card {
	text-align: left;
	max-width: 460px;
	margin: 0 auto 18px;
	border: 1px solid var(--shf-gold-border);
	border-radius: var(--shf-radius-sm);
	background: var(--shf-raised);
	overflow: hidden;
}

.shf-confirm__row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 11px 18px;
	border-bottom: 1px solid rgba(239, 231, 216, 0.07);
	font-size: 13.5px;
}

.shf-confirm__row span {
	color: var(--shf-muted);
}

.shf-confirm__row strong {
	color: var(--shf-cream);
	font-weight: 500;
	text-align: right;
}

.shf-confirm__row--total {
	background: var(--shf-gold-faint);
	border-bottom: none;
}

.shf-confirm__row--total strong {
	color: var(--shf-gold);
	font-size: 16px;
}

.shf-confirm__status {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--shf-faint);
	margin-bottom: 20px;
}

.shf-confirm__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 14px;
}

.shf-confirm__policy {
	font-size: 12px;
	color: var(--shf-faint);
	max-width: 480px;
	margin: 0 auto;
}

/* =========================================================================
   Buttons / navigation
   ========================================================================= */

.shf-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
}

.shf-btn[hidden] {
	display: none !important;
}

.shf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--shf-font-body);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.shf-btn--gold {
	background: linear-gradient(135deg, var(--shf-gold-strong), var(--shf-gold));
	color: #14110d;
	font-weight: 500;
	box-shadow: 0 8px 26px var(--shf-gold-glow);
}

.shf-btn--gold:hover:not(:disabled) {
	box-shadow: 0 10px 32px var(--shf-gold-glow);
	transform: translateY(-1px);
}

.shf-btn--ghost {
	background: transparent;
	border-color: rgba(239, 231, 216, 0.2);
	color: var(--shf-muted);
}

.shf-btn--ghost:hover:not(:disabled) {
	border-color: var(--shf-gold-border);
	color: var(--shf-gold);
}

.shf-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.shf-btn__arrow {
	transition: transform 0.3s ease;
}

.shf-btn:hover:not(:disabled) .shf-btn__arrow {
	transform: translateX(4px);
}

/* =========================================================================
   Banner (global errors)
   ========================================================================= */

.shf-banner {
	margin-top: 18px;
	border: 1px solid rgba(217, 106, 90, 0.4);
	background: var(--shf-danger-bg);
	color: var(--shf-danger);
	border-radius: var(--shf-radius-sm);
	padding: 13px 18px;
	font-size: 13.5px;
}

.shf-banner.is-ok {
	border-color: rgba(127, 179, 127, 0.4);
	background: rgba(127, 179, 127, 0.1);
	color: var(--shf-ok);
}

/* =========================================================================
   Summary sidebar
   ========================================================================= */

.shf-summary {
	position: sticky;
	top: 24px;
	background: var(--shf-panel);
	border: 1px solid var(--shf-gold-border);
	border-radius: var(--shf-radius);
	overflow: hidden;
}

.shf-summary__scroll {
	padding: 22px 22px 18px;
}

.shf-summary__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.shf-summary__icon {
	color: var(--shf-gold);
	display: inline-flex;
}

.shf-summary__title {
	font-size: 13px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--shf-cream);
	font-weight: 500;
}

.shf-summary__empty-title {
	font-family: var(--shf-font-serif);
	font-size: 18px;
	color: var(--shf-muted);
	margin-bottom: 4px;
}

.shf-summary__empty-sub {
	font-size: 12.5px;
	color: var(--shf-faint);
}

.shf-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(239, 231, 216, 0.07);
	font-size: 13.5px;
}

.shf-summary__label {
	color: var(--shf-muted);
	flex: 0 0 auto;
}

.shf-summary__value {
	color: var(--shf-cream);
	text-align: right;
	font-weight: 400;
}

.shf-summary__price {
	margin-top: 14px;
	border: 1px solid var(--shf-gold-border);
	background: var(--shf-gold-faint);
	border-radius: var(--shf-radius-sm);
	padding: 12px 16px;
}

.shf-summary__line {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--shf-muted);
	padding: 4px 0;
}

.shf-summary__line--total {
	border-top: 1px solid var(--shf-gold-border);
	margin-top: 8px;
	padding-top: 10px;
	font-family: var(--shf-font-serif);
	font-size: 19px;
	color: var(--shf-cream);
}

.shf-summary__line--total span:last-child {
	color: var(--shf-gold);
	font-weight: 600;
}

.shf-summary__trust {
	margin-top: 20px;
	display: grid;
	gap: 14px;
}

.shf-trust {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.shf-trust__icon {
	color: var(--shf-gold);
	flex: 0 0 auto;
	margin-top: 2px;
}

.shf-trust__title {
	font-size: 13px;
	color: var(--shf-cream);
	font-weight: 400;
	letter-spacing: 0.04em;
}

.shf-trust__sub {
	font-size: 11.5px;
	color: var(--shf-faint);
}

.shf-summary__foot {
	text-align: center;
	padding: 18px 20px 22px;
	border-top: 1px solid var(--shf-gold-border);
	background: linear-gradient(180deg, transparent, rgba(201, 161, 95, 0.05));
}

.shf-summary__script {
	font-family: var(--shf-font-script);
	font-size: 21px;
	color: var(--shf-cream);
	line-height: 1.25;
}

.shf-summary__script--gold {
	color: var(--shf-gold);
}

/* =========================================================================
   Skeletons (loading states)
   ========================================================================= */

.shf-skeleton {
	width: 100%;
	min-height: 220px;
	border-radius: var(--shf-radius-sm);
	background: linear-gradient(
		100deg,
		var(--shf-raised) 40%,
		var(--shf-raised2) 50%,
		var(--shf-raised) 60%
	);
	background-size: 200% 100%;
	animation: shf-shimmer 1.4s ease infinite;
}

@keyframes shf-shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
	.shf-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 20px;
	}
}

@media (max-width: 900px) {
	.shf-layout {
		grid-template-columns: 1fr;
	}

	.shf-summary {
		position: static;
	}

	/* Collapsible summary for mobile flows */
	.shf-summary.is-collapsed .shf-summary__scroll {
		display: none;
	}

	.shf-summary__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 18px;
		background: transparent;
		border: none;
		color: var(--shf-cream);
		font-family: var(--shf-font-body);
		font-size: 12px;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.shf-summary__toggle-value {
		color: var(--shf-gold);
		letter-spacing: 0.06em;
		font-size: 14px;
		text-transform: none;
	}

	.shf-summary__toggle-arrow {
		transition: transform 0.3s ease;
		color: var(--shf-gold);
	}

	.shf-summary.is-collapsed .shf-summary__toggle-arrow {
		transform: rotate(-90deg);
	}
}

@media (min-width: 901px) {
	.shf-summary__toggle {
		display: none;
	}
}

@media (max-width: 720px) {
	.shf-app__inner {
		padding: 16px 14px 32px;
	}

	.shf-header {
		padding-top: 22px;
	}

	.shf-panel {
		padding: 22px 18px 26px;
	}

	.shf-tours {
		grid-template-columns: 1fr;
	}

	.shf-slots {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	.shf-review__grid {
		grid-template-columns: 1fr 1fr;
	}

	.shf-review__cell--wide {
		grid-column: span 2;
	}

	.shf-field-row {
		grid-template-columns: 1fr;
	}

	.shf-steps__list {
		gap: 4px;
	}

	.shf-step {
		padding: 4px 8px 4px 4px;
	}

	.shf-step__label {
		display: none;
	}

	.shf-step.is-active .shf-step__label {
		display: inline;
	}

	.shf-nav {
		flex-direction: row-reverse;
	}
}

@media (max-width: 480px) {
	.shf-review__grid {
		grid-template-columns: 1fr;
	}

	.shf-review__cell--wide {
		grid-column: span 1;
	}

	.shf-slots {
		grid-template-columns: 1fr 1fr;
	}

	.shf-guests {
		gap: 16px;
	}
}

/* =========================================================================
   High contrast / forced colors
   ========================================================================= */

@media (forced-colors: active) {
	.shf-btn,
	.shf-tour__select,
	.shf-calendar__day,
	.shf-slot,
	.shf-toggle {
		border: 1px solid ButtonBorder;
	}
}

/* =========================================================================
   Print (booking confirmation)
   ========================================================================= */

@media print {
	.shf-app {
		background: #fff;
		color: #111;
	}

	.shf-summary,
	.shf-steps,
	.shf-nav,
	.shf-banner {
		display: none !important;
	}

	.shf-panel {
		border: 1px solid #ccc;
		break-inside: avoid;
	}
}

/* =========================================================================
   Full-bleed Sky Horse background + payment options
   ========================================================================= */
.shf-app {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	min-height: 100vh;
	margin-left: -50vw;
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(180deg, rgba(7,6,5,.72) 0%, rgba(11,10,8,.93) 48%, rgba(8,7,6,.98) 100%),
		url('https://skyhorsefarmhurghada.com/wp-content/uploads/2026/09/8c81bb92-a9a8-4e70-a7d0-55177af1bf57.png') center top / cover no-repeat;
	background-attachment: fixed;
}

.shf-app::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 12% 12%, rgba(201,161,95,.15), transparent 28%),
		radial-gradient(circle at 88% 20%, rgba(201,161,95,.10), transparent 24%),
		linear-gradient(90deg, rgba(0,0,0,.32), transparent 25%, transparent 75%, rgba(0,0,0,.38));
	pointer-events: none;
}

.shf-app__inner {
	position: relative;
	z-index: 1;
}

.shf-payment-return {
	max-width: 1180px;
	margin: 10px auto 0;
	padding: 13px 18px;
	border: 1px solid var(--shf-gold-border);
	background: rgba(20,17,13,.82);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	color: var(--shf-cream);
	font-size: 14px;
}

.shf-payment-return--success { box-shadow: 0 0 30px rgba(201,161,95,.08); }
.shf-payment-return--warning { border-color: rgba(217,106,90,.45); }

.shf-payment-choice {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(201,161,95,.22);
}

.shf-payment-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 10px;
}

.shf-payment-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 16px;
	border: 1px solid rgba(201,161,95,.22);
	border-radius: 10px;
	background: rgba(20,17,13,.72);
	cursor: pointer;
	transition: .2s ease;
}

.shf-payment-option:hover,
.shf-payment-option:has(input:checked) {
	border-color: var(--shf-gold);
	background: rgba(201,161,95,.10);
	box-shadow: 0 0 20px rgba(201,161,95,.08);
}

.shf-payment-option input {
	accent-color: var(--shf-gold);
	margin-top: 4px;
}

.shf-payment-option strong {
	display: block;
	color: var(--shf-cream);
	font-size: 14px;
	font-weight: 500;
}

.shf-payment-option small {
	display: block;
	margin-top: 4px;
	color: var(--shf-muted);
	font-size: 12px;
	line-height: 1.45;
}

.shf-payment-option__body {
	min-width: 0;
	flex: 1;
}

.shf-payment-option__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.shf-payment-badges {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.shf-payment-badges b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 20px;
	padding: 0 5px;
	border: 1px solid rgba(239,231,216,.18);
	border-radius: 4px;
	background: rgba(255,255,255,.06);
	color: #efe7d8;
	font: 600 8px/1 Jost, sans-serif;
	letter-spacing: .03em;
}

.shf-payment-option--stripe {
	border-color: rgba(201,161,95,.42);
}

@media (max-width: 700px) {
	.shf-app {
		background-attachment: scroll;
	}
	.shf-payment-options {
		grid-template-columns: 1fr;
	}
}


/* Embedded Stripe Payment Element */
.shf-embedded-payment{margin-top:18px;padding:18px;border:1px solid rgba(201,161,91,.35);background:rgba(12,10,8,.55);border-radius:10px}
.shf-embedded-payment[hidden]{display:none!important}
.shf-embedded-payment__header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;color:#eee7d8}
.shf-embedded-payment__header strong{font-family:Cormorant Garamond,Georgia,serif;font-size:20px;font-weight:600}
.shf-embedded-payment__header span{font-size:10px;letter-spacing:1.5px;color:#b99555;text-transform:uppercase}
#shf-payment-element{width:100%;min-height:130px}
.shf-payment-error{min-height:18px;margin-top:10px;color:#e06b59;font-size:12px}


/* WooCommerce Stripe embedded payment bridge */
.shf-woo-payment{margin-top:12px;padding:0;overflow:hidden;border:1px solid rgba(201,161,91,.28);border-radius:12px;background:#11100d;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.shf-woo-payment__loading{padding:22px;color:#c9a15b;text-align:center;font-size:14px}
.shf-woo-payment__frame{display:block;width:100%;height:520px;border:0;background:#11100d;transition:height .15s ease}
.shf-woo-payment .shf-payment-error{margin:0 18px 18px;color:#e06b57}
@media (max-width:760px){.shf-woo-payment__frame{height:500px}}

/* Multi-experience booking */
.shf-tour.is-selected{outline:1px solid rgba(201,161,91,.9);box-shadow:0 0 0 1px rgba(201,161,91,.18),0 10px 30px rgba(0,0,0,.22)}
.shf-tour.is-selected .shf-tour__select{background:rgba(201,161,91,.12);border-color:#c9a15b}
.shf-selected-experiences{margin:18px 0 4px;padding:16px 18px;border:1px solid rgba(201,161,91,.32);border-radius:12px;background:rgba(18,16,13,.72)}
.shf-selected-experiences__head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:10px}.shf-selected-experiences__head strong{color:#eee7d8}.shf-selected-experiences__head span{font-size:12px;color:#9d978d}
.shf-selected-experience{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
.shf-selected-experience__name{color:#eee7d8;font-size:14px}.shf-selected-experience__remove{border:1px solid rgba(201,161,91,.4);background:transparent;color:#c9a15b;border-radius:999px;padding:5px 10px;font-size:11px;cursor:pointer}.shf-selected-experience__remove:disabled{opacity:.7;cursor:default}
.shf-tour-time-group{grid-column:1 / -1;margin-bottom:24px;padding:18px;border:1px solid rgba(201,161,91,.25);border-radius:12px;background:rgba(18,16,13,.45)}
.shf-tour-time-group h4{margin:0 0 3px;color:#eee7d8;font-family:inherit;font-size:18px}.shf-tour-time-group>p{margin:0 0 14px;color:#9d978d;font-size:13px}.shf-slots__group{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
@media(max-width:600px){.shf-selected-experiences__head{display:block}.shf-selected-experiences__head span{display:block;margin-top:4px}.shf-slots__group{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Per-experience guest selectors */
.shf-tour-guests{display:grid;gap:12px;margin-top:20px}.shf-tour-guest-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid rgba(201,161,91,.24);border-radius:12px;background:rgba(18,16,13,.58)}.shf-tour-guest-row strong{display:block;color:#eee7d8;font-family:Cormorant Garamond,Georgia,serif;font-size:18px}.shf-tour-guest-row>div:first-child span{display:block;margin-top:4px;color:#9d978d;font-size:12px}.shf-tour-guest-controls{display:flex;align-items:center;gap:12px}.shf-tour-guest-btn{width:34px;height:34px;border:1px solid rgba(201,161,91,.48);border-radius:50%;background:transparent;color:#c9a15b;font-size:18px;line-height:1;cursor:pointer}.shf-tour-guest-btn:disabled{opacity:.35;cursor:not-allowed}.shf-tour-guest-count{min-width:22px;text-align:center;color:#f1eadc;font-weight:600}
@media(max-width:600px){.shf-tour-guest-row{align-items:flex-start;flex-direction:column}.shf-tour-guest-controls{align-self:flex-end}.shf-selected-experience{align-items:center}}

/* ========================================================================
   Multi-experience UI hardening — v1.3.3
   Keep quantities OUT of the selected-experience list. Guest counts are
   edited only in Step 4. Also force time cards back into the wide,
   horizontal layout used by the original booking UI.
   ======================================================================== */
.shf-selected-experiences .shf-selected-experience__controls,
.shf-selected-experiences .shf-selected-experience__guest-btn,
.shf-selected-experiences .shf-selected-experience__guest-count,
.shf-selected-experiences .shf-tour-guest-controls,
.shf-selected-experiences .shf-tour-guest-btn,
.shf-selected-experiences .shf-tour-guest-count {
	display: none !important;
}

.shf-selected-experiences .shf-selected-experience {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.shf-slots {
	display: block !important;
	width: 100%;
}

.shf-tour-time-group {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
	margin: 0 0 24px !important;
}

.shf-slots__group {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 10px;
	width: 100%;
}

@media (max-width: 900px) {
	.shf-slots__group {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.shf-slots__group {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}