/**
 * SAINT Yachting — Booking Form CSS
 * Glass-effect UI · Image-rich cards · Mobile-first responsive
 */

/* ── Custom properties ─────────────────────────────────────────────────────── */

.syt-booking {
	/* Colour */
	--syt-color-bg:          #ffffff;
	--syt-color-surface:     #f6f5f2;
	--syt-color-border:      #e2deda;
	--syt-color-text:        #1a1a1a;
	--syt-color-text-muted:  #6b6b6b;
	--syt-color-accent:      #1a1a1a;
	--syt-color-accent-fg:   #ffffff;
	--syt-color-selected-bg: #1a1a1a;
	--syt-color-selected-fg: #ffffff;
	--syt-color-error:       #c0392b;
	--syt-color-success:     #27ae60;
	--syt-color-focus:       #1a6fff;

	/* Glass */
	--syt-glass-card:    rgba(255, 255, 255, 0.72);
	--syt-glass-border:  rgba(255, 255, 255, 0.6);
	--syt-glass-shadow:  0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
	--syt-glass-blur:    blur(16px);

	/* Image gradient fallbacks (shown when photo is missing) */
	--syt-grad-journey:       linear-gradient( 150deg, #0b1f3a 0%, #1a4a78 65%, #0d3555 100% );
	--syt-grad-charter:       linear-gradient( 150deg, #0a2235 0%, #155f82 65%, #1e8fa0 100% );
	--syt-grad-introduction:  linear-gradient( 150deg, #1a2f4e 0%, #2d6090 100% );
	--syt-grad-escape:        linear-gradient( 150deg, #0d2a1f 0%, #1e5c3a 65%, #2a7050 100% );
	--syt-grad-signature:     linear-gradient( 150deg, #1c0d30 0%, #4a1a70 65%, #3d1560 100% );
	--syt-grad-grand:         linear-gradient( 150deg, #1a0808 0%, #7a1515 65%, #9a2020 100% );
	--syt-grad-half-day:      linear-gradient( 150deg, #0b2a45 0%, #1a5080 100% );
	--syt-grad-sunset:        linear-gradient( 150deg, #3a0d05 0%, #b04010 45%, #e09020 100% );
	--syt-grad-full-day:      linear-gradient( 150deg, #071525 0%, #0d3060 65%, #1a5090 100% );
	--syt-grad-yacht:         linear-gradient( 150deg, #0a1520 0%, #152a40 100% );

	/* Spacing / shape */
	--syt-radius:      6px;
	--syt-radius-card: 12px;
	--syt-gap:         1.5rem;
	--syt-gap-sm:      0.75rem;
	--syt-transition:  0.2s ease;
	--syt-font:        inherit;
	--syt-max-width:   860px;
}

.syt-booking--dark {
	--syt-color-bg:          #0f0f0f;
	--syt-color-surface:     #1a1a1a;
	--syt-color-border:      #2e2e2e;
	--syt-color-text:        #f0ece4;
	--syt-color-text-muted:  #888888;
	--syt-color-accent:      #f0ece4;
	--syt-color-accent-fg:   #111111;
	--syt-color-selected-bg: #f0ece4;
	--syt-color-selected-fg: #111111;
	--syt-glass-card:        rgba(20, 20, 20, 0.78);
	--syt-glass-border:      rgba(255, 255, 255, 0.08);
	--syt-glass-shadow:      0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Box sizing ───────────────────────────────────────────────────────────── */

.syt-booking *,
.syt-booking *::before,
.syt-booking *::after {
	box-sizing: border-box;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.syt-booking {
	font-family: var( --syt-font );
	color:       var( --syt-color-text );
	max-width:   var( --syt-max-width );
	margin:      0 auto;
	padding:     var( --syt-gap );
}

/* ── Screen-reader only ───────────────────────────────────────────────────── */

.syt-sr-only {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border:      0;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */

.syt-booking__progress {
	margin-bottom: var( --syt-gap );
}

.syt-booking__progress-track {
	height:        3px;
	background:    var( --syt-color-border );
	border-radius: 2px;
	margin-bottom: var( --syt-gap-sm );
	overflow:      hidden;
}

.syt-booking__progress-fill {
	height:        100%;
	background:    var( --syt-color-accent );
	border-radius: 2px;
	transition:    width 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.syt-booking__step-indicators {
	display:   flex;
	list-style: none;
	margin:    0;
	padding:   0;
	gap:       var( --syt-gap-sm );
	flex-wrap: wrap;
}

.syt-booking__step-indicator {
	font-size:  0.75rem;
	color:      var( --syt-color-text-muted );
	opacity:    0.5;
	transition: opacity var( --syt-transition ), color var( --syt-transition );
}

.syt-booking__step-indicator.is-active {
	color:       var( --syt-color-accent );
	opacity:     1;
	font-weight: 600;
}

.syt-booking__step-indicator.is-completed {
	opacity: 0.65;
}

/* ── Step header ──────────────────────────────────────────────────────────── */

.syt-booking__step-header {
	margin-bottom: var( --syt-gap );
}

.syt-booking__step-title {
	margin:      0 0 0.4em;
	font-size:   clamp( 1.2rem, 3.5vw, 1.75rem );
	font-weight: 500;
	line-height: 1.2;
	color:       var( --syt-color-text );
}

.syt-booking__step-subtitle {
	margin:      0;
	color:       var( --syt-color-text-muted );
	font-size:   0.93rem;
	line-height: 1.55;
}

/* ── TYPE SELECTOR CARDS ─────────────────────────────────────────────────── */

.syt-booking__type-cards {
	display:               grid;
	grid-template-columns: repeat( 2, 1fr );
	gap:                   var( --syt-gap-sm );
}

.syt-booking__type-card {
	position:      relative;
	height:        300px;
	overflow:      hidden;
	border-radius: var( --syt-radius-card );
	border:        1px solid rgba( 255, 255, 255, 0.15 );
	cursor:        pointer;
	background:    var( --syt-grad-journey );
	display:       flex;
	text-align:    left;
	font:          inherit;
	color:         #fff;
	transition:    transform var( --syt-transition ), box-shadow var( --syt-transition );
	box-shadow:    0 4px 16px rgba( 0, 0, 0, 0.18 );
}

.syt-booking__type-card[data-type="day-charter"] {
	background: var( --syt-grad-charter );
}

.syt-booking__type-card-bg {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Dark-to-transparent overlay for text legibility */
.syt-booking__type-card::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.82 ) 0%,
		rgba( 0, 0, 0, 0.38 ) 45%,
		rgba( 0, 0, 0, 0.12 ) 100%
	);
	z-index:    1;
	transition: background var( --syt-transition );
}

.syt-booking__type-card:hover {
	transform:  translateY( -3px );
	box-shadow: 0 10px 32px rgba( 0, 0, 0, 0.24 );
}

.syt-booking__type-card:hover .syt-booking__type-card-bg {
	transform: scale( 1.06 );
}

.syt-booking__type-card:focus-visible {
	outline:        2px solid var( --syt-color-focus );
	outline-offset: 2px;
}

.syt-booking__type-card-content {
	position:        relative;
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	width:           100%;
	padding:         var( --syt-gap );
	justify-content: flex-end;
}

.syt-booking__type-card-icon {
	position:          absolute;
	top:               var( --syt-gap );
	left:              var( --syt-gap );
	color:             rgba( 255, 255, 255, 0.9 );
	background:        rgba( 255, 255, 255, 0.12 );
	backdrop-filter:   blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border:            1px solid rgba( 255, 255, 255, 0.22 );
	border-radius:     var( --syt-radius );
	padding:           0.4rem;
	line-height:       0;
}

.syt-booking__type-card-label {
	font-size:      1.25rem;
	font-weight:    600;
	letter-spacing: -0.01em;
	text-shadow:    0 1px 4px rgba( 0, 0, 0, 0.3 );
}

.syt-booking__type-card-desc {
	font-size:   0.85rem;
	opacity:     0.75;
	margin-top:  0.25rem;
	line-height: 1.4;
}

.syt-booking__type-card-arrow {
	position:        absolute;
	bottom:          var( --syt-gap-sm );
	right:           var( --syt-gap-sm );
	z-index:         3;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      rgba( 255, 255, 255, 0.14 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border:          1px solid rgba( 255, 255, 255, 0.25 );
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.1rem;
	transition:      background var( --syt-transition ), transform var( --syt-transition );
}

.syt-booking__type-card:hover .syt-booking__type-card-arrow {
	background:  rgba( 255, 255, 255, 0.24 );
	transform:   translateX( 2px );
}

/* ── TIER CARDS ──────────────────────────────────────────────────────────── */

.syt-booking__tier-cards {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap:                   var( --syt-gap-sm );
}

.syt-booking__tier-card {
	position:       relative;
	height:         210px;
	overflow:       hidden;
	border-radius:  var( --syt-radius-card );
	border:         2px solid transparent;
	cursor:         pointer;
	background:     var( --syt-grad-introduction );
	display:        flex;
	flex-direction: column;
	color:          #fff;
	transition:     border-color var( --syt-transition ), box-shadow var( --syt-transition ), transform var( --syt-transition );
	box-shadow:     0 2px 10px rgba( 0, 0, 0, 0.15 );
}

.syt-booking__tier-card[data-tier="escape"]        { background: var( --syt-grad-escape );    }
.syt-booking__tier-card[data-tier="signature"]     { background: var( --syt-grad-signature ); }
.syt-booking__tier-card[data-tier="grand_journey"] { background: var( --syt-grad-grand );     }

.syt-booking__tier-card-bg {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.syt-booking__tier-card::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.78 ) 0%,
		rgba( 0, 0, 0, 0.28 ) 55%,
		rgba( 0, 0, 0, 0.08 ) 100%
	);
	z-index:    1;
	transition: background var( --syt-transition );
}

.syt-booking__tier-card:hover {
	transform:  translateY( -2px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.2 );
}

.syt-booking__tier-card:hover .syt-booking__tier-card-bg {
	transform: scale( 1.05 );
}

.syt-booking__tier-card.is-selected,
.syt-booking__tier-card:has( input:checked ) {
	border-color: rgba( 255, 255, 255, 0.9 );
	box-shadow:   0 0 0 3px rgba( 255, 255, 255, 0.28 ), 0 6px 20px rgba( 0, 0, 0, 0.25 );
}

/* Checkmark badge for selected */
.syt-booking__tier-card.is-selected::after,
.syt-booking__tier-card:has( input:checked )::after {
	content:         '✓';
	position:        absolute;
	top:             0.6rem;
	right:           0.6rem;
	z-index:         4;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	background:      rgba( 255, 255, 255, 0.92 );
	color:           #1a1a1a;
	font-size:       0.72rem;
	font-weight:     700;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.syt-booking__tier-card-content {
	position:        relative;
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	height:          100%;
	padding:         var( --syt-gap-sm ) var( --syt-gap-sm ) 0.875rem;
}

.syt-booking__tier-card-name {
	font-weight:    600;
	font-size:      1rem;
	letter-spacing: -0.01em;
	text-shadow:    0 1px 3px rgba( 0, 0, 0, 0.4 );
}

.syt-booking__tier-card-tagline {
	font-size:   0.78rem;
	opacity:     0.76;
	margin-top:  0.2rem;
	line-height: 1.4;
}

.syt-booking__tier-card-duration {
	font-size:      0.7rem;
	opacity:        0.55;
	margin-top:     0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Duration cards ───────────────────────────────────────────────────────── */

.syt-booking__duration-options {
	display:               grid;
	grid-template-columns: repeat( 2, minmax( 120px, 220px ) );
	gap:                   var( --syt-gap-sm );
}

.syt-booking__duration-card {
	display:                 flex;
	flex-direction:          column;
	align-items:             center;
	justify-content:         center;
	padding:                 1.75rem var( --syt-gap );
	border:                  2px solid var( --syt-color-border );
	border-radius:           var( --syt-radius-card );
	background:              var( --syt-glass-card );
	backdrop-filter:         var( --syt-glass-blur );
	-webkit-backdrop-filter: var( --syt-glass-blur );
	cursor:                  pointer;
	transition:              border-color var( --syt-transition ), background var( --syt-transition ), box-shadow var( --syt-transition );
	box-shadow:              var( --syt-glass-shadow );
}

.syt-booking__duration-card:hover {
	border-color: var( --syt-color-accent );
	box-shadow:   0 4px 16px rgba( 0, 0, 0, 0.1 );
}

.syt-booking__duration-card.is-selected,
.syt-booking__duration-card:has( input:checked ) {
	border-color: var( --syt-color-selected-bg );
	background:   var( --syt-color-selected-bg );
	color:        var( --syt-color-selected-fg );
	box-shadow:   0 4px 16px rgba( 0, 0, 0, 0.15 );
}

.syt-booking__duration-number {
	font-size:   2.75rem;
	font-weight: 300;
	line-height: 1;
}

.syt-booking__duration-unit {
	font-size:      0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity:        0.65;
	margin-top:     0.3rem;
}

/* ── CHARTER TYPE CARDS ──────────────────────────────────────────────────── */

.syt-booking__charter-cards {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap:                   var( --syt-gap-sm );
}

.syt-booking__charter-card {
	position:       relative;
	height:         210px;
	overflow:       hidden;
	border-radius:  var( --syt-radius-card );
	border:         2px solid transparent;
	cursor:         pointer;
	background:     var( --syt-grad-half-day );
	display:        flex;
	flex-direction: column;
	color:          #fff;
	transition:     border-color var( --syt-transition ), box-shadow var( --syt-transition ), transform var( --syt-transition );
	box-shadow:     0 2px 10px rgba( 0, 0, 0, 0.15 );
}

.syt-booking__charter-card[data-charter-type="sunset"]   { background: var( --syt-grad-sunset );   }
.syt-booking__charter-card[data-charter-type="full_day"] { background: var( --syt-grad-full-day ); }

.syt-booking__charter-card-bg {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.syt-booking__charter-card::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.78 ) 0%,
		rgba( 0, 0, 0, 0.28 ) 55%,
		rgba( 0, 0, 0, 0.08 ) 100%
	);
	z-index:    1;
	transition: background var( --syt-transition );
}

.syt-booking__charter-card:hover {
	transform:  translateY( -2px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.2 );
}

.syt-booking__charter-card:hover .syt-booking__charter-card-bg {
	transform: scale( 1.05 );
}

.syt-booking__charter-card.is-selected,
.syt-booking__charter-card:has( input:checked ) {
	border-color: rgba( 255, 255, 255, 0.9 );
	box-shadow:   0 0 0 3px rgba( 255, 255, 255, 0.28 ), 0 6px 20px rgba( 0, 0, 0, 0.25 );
}

.syt-booking__charter-card.is-selected::after,
.syt-booking__charter-card:has( input:checked )::after {
	content:         '✓';
	position:        absolute;
	top:             0.6rem;
	right:           0.6rem;
	z-index:         4;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	background:      rgba( 255, 255, 255, 0.92 );
	color:           #1a1a1a;
	font-size:       0.72rem;
	font-weight:     700;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.syt-booking__charter-card-content {
	position:        relative;
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	height:          100%;
	padding:         var( --syt-gap-sm ) var( --syt-gap-sm ) 0.875rem;
}

.syt-booking__charter-card-name {
	font-weight: 600;
	font-size:   1rem;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
}

.syt-booking__charter-card-desc {
	font-size:   0.78rem;
	opacity:     0.76;
	margin-top:  0.2rem;
	line-height: 1.4;
}

.syt-booking__charter-card-duration {
	font-size:      0.7rem;
	opacity:        0.55;
	margin-top:     0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Date fields ──────────────────────────────────────────────────────────── */

.syt-booking__date-fields {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap:                   var( --syt-gap );
}

/* ── YACHT CARDS ─────────────────────────────────────────────────────────── */

.syt-booking__yacht-list {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap:                   var( --syt-gap-sm );
}

/* Best Available spans full width */
.syt-booking__yacht-card--best-available {
	grid-column: 1 / -1;
}

.syt-booking__yacht-card {
	display:                 block;
	border:                  2px solid var( --syt-color-border );
	border-radius:           var( --syt-radius-card );
	overflow:                hidden;
	cursor:                  pointer;
	background:              var( --syt-glass-card );
	backdrop-filter:         var( --syt-glass-blur );
	-webkit-backdrop-filter: var( --syt-glass-blur );
	box-shadow:              var( --syt-glass-shadow );
	transition:              border-color var( --syt-transition ), box-shadow var( --syt-transition ), transform var( --syt-transition );
}

.syt-booking__yacht-card:hover {
	border-color: var( --syt-color-accent );
	transform:    translateY( -2px );
	box-shadow:   0 6px 22px rgba( 0, 0, 0, 0.1 );
}

.syt-booking__yacht-card.is-selected {
	border-color: var( --syt-color-accent );
	box-shadow:   0 0 0 3px rgba( 26, 26, 26, 0.14 ), 0 4px 16px rgba( 0, 0, 0, 0.1 );
}

/* Specific yacht card inner = column (image top, body bottom) */
.syt-booking__yacht-card-inner {
	display: flex;
}

.syt-booking__yacht-card:not( .syt-booking__yacht-card--best-available ) .syt-booking__yacht-card-inner {
	flex-direction: column;
}

/* Image area */
.syt-booking__yacht-card-img {
	height:     175px;
	overflow:   hidden;
	background: var( --syt-grad-yacht );
	flex-shrink: 0;
}

.syt-booking__yacht-card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.45s ease;
}

.syt-booking__yacht-card:hover .syt-booking__yacht-card-img img {
	transform: scale( 1.04 );
}

/* Info row below image */
.syt-booking__yacht-card-body {
	display:     flex;
	align-items: center;
	gap:         var( --syt-gap-sm );
	padding:     0.875rem var( --syt-gap-sm );
	flex:        1;
}

.syt-booking__yacht-card-info {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
	flex:           1 1 auto;
}

.syt-booking__yacht-card-name {
	font-weight: 600;
	font-size:   0.95rem;
}

.syt-booking__yacht-card-specs,
.syt-booking__yacht-card-desc {
	font-size: 0.82rem;
	color:     var( --syt-color-text-muted );
}

.syt-booking__yacht-card-select-indicator {
	width:         22px;
	height:        22px;
	border-radius: 50%;
	border:        2px solid var( --syt-color-border );
	flex-shrink:   0;
	position:      relative;
	transition:    border-color var( --syt-transition ), background var( --syt-transition );
}

.syt-booking__yacht-card.is-selected .syt-booking__yacht-card-select-indicator {
	background:   var( --syt-color-accent );
	border-color: var( --syt-color-accent );
}

.syt-booking__yacht-card.is-selected .syt-booking__yacht-card-select-indicator::after {
	content:     '';
	position:    absolute;
	top:         3px;
	left:        6px;
	width:       5px;
	height:      9px;
	border:      2px solid #fff;
	border-top:  none;
	border-left: none;
	transform:   rotate( 45deg );
}

/* Best Available — horizontal layout */
.syt-booking__yacht-card--best-available .syt-booking__yacht-card-inner {
	flex-direction: row;
	align-items:    center;
	gap:            var( --syt-gap-sm );
	padding:        var( --syt-gap-sm ) var( --syt-gap );
	background:     var( --syt-color-surface );
}

.syt-booking__yacht-card-icon {
	flex-shrink: 0;
	color:       var( --syt-color-text-muted );
	line-height: 0;
}

/* ── Time slot cards ──────────────────────────────────────────────────────── */

.syt-booking__timeslot-list {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap:                   var( --syt-gap-sm );
}

.syt-booking__timeslot-card {
	padding:                 var( --syt-gap );
	border:                  2px solid var( --syt-color-border );
	border-radius:           var( --syt-radius-card );
	cursor:                  pointer;
	background:              var( --syt-glass-card );
	backdrop-filter:         var( --syt-glass-blur );
	-webkit-backdrop-filter: var( --syt-glass-blur );
	box-shadow:              var( --syt-glass-shadow );
	transition:              border-color var( --syt-transition ), background var( --syt-transition );
}

.syt-booking__timeslot-card:hover {
	border-color: var( --syt-color-accent );
}

.syt-booking__timeslot-card.is-selected {
	border-color: var( --syt-color-selected-bg );
	background:   var( --syt-color-selected-bg );
	color:        var( --syt-color-selected-fg );
}

.syt-booking__timeslot-card.is-disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */

.syt-booking__fields-grid {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap:                   var( --syt-gap );
}

.syt-booking__field-group {
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
}

.syt-booking__field-group--full {
	grid-column: 1 / -1;
}

.syt-booking__label {
	font-size:   0.85rem;
	font-weight: 500;
	color:       var( --syt-color-text );
}

.syt-booking__label-optional {
	font-weight: 400;
	color:       var( --syt-color-text-muted );
}

.syt-booking__required {
	color:       var( --syt-color-error );
	margin-left: 2px;
}

.syt-booking__input,
.syt-booking__select,
.syt-booking__textarea {
	width:                   100%;
	padding:                 0.65rem 0.9rem;
	border:                  1px solid var( --syt-color-border );
	border-radius:           var( --syt-radius );
	background:              var( --syt-glass-card );
	backdrop-filter:         var( --syt-glass-blur );
	-webkit-backdrop-filter: var( --syt-glass-blur );
	color:                   var( --syt-color-text );
	font:                    inherit;
	font-size:               0.95rem;
	transition:              border-color var( --syt-transition ), box-shadow var( --syt-transition );
	-webkit-appearance:      none;
	appearance:              none;
}

.syt-booking__input:focus,
.syt-booking__select:focus,
.syt-booking__textarea:focus {
	outline:      none;
	border-color: var( --syt-color-focus );
	box-shadow:   0 0 0 3px rgba( 26, 111, 255, 0.15 );
}

.syt-booking__input--readonly {
	background: var( --syt-color-surface );
	color:      var( --syt-color-text-muted );
}

.syt-booking__input--number {
	width: 100px;
}

.syt-booking__textarea {
	resize:     vertical;
	min-height: 100px;
}

.syt-booking__field-note {
	font-size: 0.8rem;
	color:     var( --syt-color-text-muted );
}

.syt-booking__field-error {
	font-size:  0.82rem;
	color:      var( --syt-color-error );
	min-height: 1em;
}

/* ── Fieldset ─────────────────────────────────────────────────────────────── */

.syt-booking__fieldset {
	border:  none;
	margin:  0;
	padding: 0;
}

.syt-booking__radio-row {
	display: flex;
	gap:     var( --syt-gap );
}

.syt-booking__radio-label {
	display:     flex;
	align-items: center;
	gap:         0.4rem;
	cursor:      pointer;
	font-size:   0.9rem;
}

/* ── Navigation bar ───────────────────────────────────────────────────────── */

.syt-booking__nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      var( --syt-gap );
	padding-top:     var( --syt-gap );
	border-top:      1px solid var( --syt-color-border );
	gap:             var( --syt-gap-sm );
	flex-wrap:       wrap;
}

.syt-booking__nav-right {
	display:     flex;
	align-items: center;
	gap:         var( --syt-gap-sm );
}

.syt-booking__btn {
	display:        inline-flex;
	align-items:    center;
	gap:            0.4rem;
	padding:        0.65rem 1.5rem;
	border:         1px solid var( --syt-color-accent );
	border-radius:  var( --syt-radius );
	background:     transparent;
	color:          var( --syt-color-accent );
	font:           inherit;
	font-size:      0.92rem;
	font-weight:    500;
	cursor:         pointer;
	transition:     background var( --syt-transition ), color var( --syt-transition ), box-shadow var( --syt-transition );
	white-space:    nowrap;
	letter-spacing: 0.01em;
}

.syt-booking__btn:focus-visible {
	outline:        2px solid var( --syt-color-focus );
	outline-offset: 2px;
}

.syt-booking__btn--back {
	border-color: var( --syt-color-border );
	color:        var( --syt-color-text-muted );
}

.syt-booking__btn--back:hover {
	background: var( --syt-color-surface );
}

.syt-booking__btn--next,
.syt-booking__btn--submit {
	background:   var( --syt-color-accent );
	color:        var( --syt-color-accent-fg );
	border-color: var( --syt-color-accent );
	box-shadow:   0 2px 8px rgba( 0, 0, 0, 0.12 );
}

.syt-booking__btn--next:hover,
.syt-booking__btn--submit:hover {
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
}

.syt-booking__btn:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

/* ── Loading indicator ────────────────────────────────────────────────────── */

.syt-booking__loading-indicator {
	display:     flex;
	align-items: center;
	gap:         0.4rem;
	font-size:   0.85rem;
	color:       var( --syt-color-text-muted );
}

.syt-booking__spinner {
	display:          inline-block;
	width:            16px;
	height:           16px;
	border:           2px solid var( --syt-color-border );
	border-top-color: var( --syt-color-accent );
	border-radius:    50%;
	animation:        syt-spin 0.7s linear infinite;
	flex-shrink:      0;
}

@keyframes syt-spin {
	to { transform: rotate( 360deg ); }
}

/* ── Availability states ──────────────────────────────────────────────────── */

.syt-booking__availability-state {
	margin-top: var( --syt-gap-sm );
}

.syt-booking__availability-checking,
.syt-booking__yacht-loading {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	font-size:   0.87rem;
	color:       var( --syt-color-text-muted );
	padding:     var( --syt-gap-sm ) 0;
}

.syt-booking__availability-error {
	padding:       0.65rem var( --syt-gap-sm );
	background:    #fef0ef;
	border:        1px solid #f5c6c3;
	border-radius: var( --syt-radius );
	color:         var( --syt-color-error );
	font-size:     0.87rem;
}

.syt-booking--dark .syt-booking__availability-error {
	background:   rgba( 192, 57, 43, 0.15 );
	border-color: rgba( 192, 57, 43, 0.4 );
}

/* ── Review sections ──────────────────────────────────────────────────────── */

.syt-booking__review-sections {
	display:        flex;
	flex-direction: column;
	gap:            var( --syt-gap-sm );
	margin-bottom:  var( --syt-gap );
}

.syt-booking__review-section {
	border:                  1px solid var( --syt-color-border );
	border-radius:           var( --syt-radius-card );
	overflow:                hidden;
	background:              var( --syt-glass-card );
	backdrop-filter:         var( --syt-glass-blur );
	-webkit-backdrop-filter: var( --syt-glass-blur );
	box-shadow:              var( --syt-glass-shadow );
}

.syt-booking__review-section-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0.75rem var( --syt-gap );
	background:      var( --syt-color-surface );
	border-bottom:   1px solid var( --syt-color-border );
}

.syt-booking__review-section-title {
	margin:         0;
	font-size:      0.85rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.syt-booking__review-edit {
	background:      none;
	border:          none;
	font:            inherit;
	font-size:       0.82rem;
	color:           var( --syt-color-accent );
	cursor:          pointer;
	padding:         0;
	text-decoration: underline;
}

.syt-booking__review-list {
	display:               grid;
	grid-template-columns: 130px 1fr;
	gap:                   0.4rem 1rem;
	margin:                0;
	padding:               var( --syt-gap-sm ) var( --syt-gap );
	font-size:             0.9rem;
}

.syt-booking__review-list dt {
	color:     var( --syt-color-text-muted );
	font-size: 0.82rem;
}

.syt-booking__review-list dd {
	margin:      0;
	font-weight: 400;
}

/* ── Consent block ────────────────────────────────────────────────────────── */

.syt-booking__consent-block {
	display:        flex;
	flex-direction: column;
	gap:            var( --syt-gap-sm );
	padding:        var( --syt-gap ) 0;
	border-top:     1px solid var( --syt-color-border );
}

.syt-booking__consent-label {
	display:     flex;
	align-items: flex-start;
	gap:         0.6rem;
	font-size:   0.87rem;
	cursor:      pointer;
	line-height: 1.45;
}

.syt-booking__checkbox {
	flex-shrink:  0;
	width:        16px;
	height:       16px;
	margin-top:   2px;
	cursor:       pointer;
	accent-color: var( --syt-color-accent );
}

/* ── Error banner ─────────────────────────────────────────────────────────── */

.syt-booking__error-banner {
	margin-top:    var( --syt-gap-sm );
	padding:       0.75rem var( --syt-gap );
	background:    #fef0ef;
	border:        1px solid #f5c6c3;
	border-radius: var( --syt-radius );
	color:         var( --syt-color-error );
	font-size:     0.9rem;
}

.syt-booking__step-errors {
	margin-top: var( --syt-gap-sm );
	color:      var( --syt-color-error );
	font-size:  0.87rem;
}

.syt-booking__step-errors p {
	margin: 0 0 0.3em;
}

/* ── Success screen ───────────────────────────────────────────────────────── */

.syt-booking__success {
	padding: calc( var( --syt-gap ) * 2 ) var( --syt-gap );
}

.syt-booking__success-inner {
	text-align: center;
	max-width:  480px;
	margin:     0 auto;
}

.syt-booking__success-icon {
	color:         var( --syt-color-success );
	margin-bottom: var( --syt-gap );
}

.syt-booking__success-title {
	font-size:   1.5rem;
	font-weight: 500;
	margin:      0 0 0.5rem;
}

.syt-booking__success-message {
	color:       var( --syt-color-text-muted );
	line-height: 1.6;
}

.syt-booking__success-reference,
.syt-booking__success-next-steps {
	margin-top: var( --syt-gap-sm );
	font-size:  0.85rem;
	color:      var( --syt-color-text-muted );
}

/* ── Responsive — tablet ─────────────────────────────────────────────────── */

@media ( max-width: 720px ) {
	.syt-booking__type-cards {
		grid-template-columns: 1fr;
	}

	.syt-booking__type-card {
		height: 240px;
	}

	.syt-booking__tier-cards,
	.syt-booking__charter-cards {
		grid-template-columns: repeat( 2, 1fr );
	}

	.syt-booking__yacht-list {
		grid-template-columns: repeat( 2, 1fr );
	}

	.syt-booking__yacht-card--best-available {
		grid-column: 1 / -1;
	}
}

/* ── Responsive — mobile ─────────────────────────────────────────────────── */

@media ( max-width: 540px ) {
	.syt-booking {
		padding: var( --syt-gap-sm );
	}

	.syt-booking__type-card {
		height: 200px;
	}

	.syt-booking__tier-card,
	.syt-booking__charter-card {
		height: 170px;
	}

	.syt-booking__yacht-list {
		grid-template-columns: 1fr;
	}

	.syt-booking__yacht-card-img {
		height: 150px;
	}

	.syt-booking__duration-options {
		grid-template-columns: 1fr 1fr;
	}

	.syt-booking__fields-grid {
		grid-template-columns: 1fr;
	}

	.syt-booking__review-list {
		grid-template-columns: 1fr;
	}

	.syt-booking__review-list dt {
		margin-top: 0.4em;
	}

	.syt-booking__nav {
		flex-direction: column-reverse;
		align-items:    stretch;
	}

	.syt-booking__btn {
		justify-content: center;
		width:           100%;
	}
}

/* ── Responsive — extra small ────────────────────────────────────────────── */

@media ( max-width: 360px ) {
	.syt-booking__tier-cards,
	.syt-booking__charter-cards {
		grid-template-columns: 1fr;
	}
}