/**
 * SAINT Yachting — Booking Form
 * Glassmorphism · Luxury minimal · Apple-inspired
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */

.syt-booking {
	/* Foundation */
	--sb-bg:             #ffffff;
	--sb-ink:            #0A1F33;
	--sb-ink-75:         rgba( 13, 13, 13, 0.75 );
	--sb-ink-45:         rgba( 13, 13, 13, 0.45 );
	--sb-ink-20:         #C9D6DF;
	--sb-ink-08:         #C9D6DF;

	/* Glass */
	--sb-glass:          #C9D6DF;
	--sb-glass-mid:      rgba(210, 235, 255, 0.70);
	--sb-glass-strong:   rgba(225, 245, 255, 0.85);
	--sb-glass-border:   rgba(255, 255, 255, 0.65);
	--sb-glass-border-d: rgba(120, 160, 200, 0.15);

	/* Image gradient fallbacks */
	--sb-grad-journey:      linear-gradient( 150deg, #0b1f3a, #1a4a78 );
	--sb-grad-charter:      linear-gradient( 150deg, #0a2235, #1e8fa0 );
	--sb-grad-introduction: linear-gradient( 150deg, #1a2f4e, #2d6090 );
	--sb-grad-escape:       linear-gradient( 150deg, #0d2a1f, #2a7050 );
	--sb-grad-signature:    linear-gradient( 150deg, #1c0d30, #3d1560 );
	--sb-grad-grand:        linear-gradient( 150deg, #1a0808, #9a2020 );
	--sb-grad-half-day:     linear-gradient( 150deg, #0b2a45, #1a5080 );
	--sb-grad-sunset:       linear-gradient( 150deg, #3a0d05, #e09020 );
	--sb-grad-full-day:     linear-gradient( 150deg, #071525, #1a5090 );
	--sb-grad-yacht:        linear-gradient( 150deg, #0a1520, #152a40 );

	/* Accent */
	--sb-gold:           #c4a35a;

	/* Radii */
	--sb-r:              0px;
	--sb-r-card:         0px;
	--sb-r-img:          0px;
	--sb-r-pill:         0px;

	/* Spacing */
	--sb-gap:            1.5rem;
	--sb-gap-sm:         0.75rem;

	/* Motion */
	--sb-ease:           cubic-bezier( 0.16, 1, 0.3, 1 );
	--sb-t:              280ms;

	/* Typography */
	--sb-font:           -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', sans-serif;

	/* Layout */
	--sb-max-width:      860px;
}

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

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

/* ── Theme isolation — undo common WP theme overrides ──────────────────────── */

.syt-booking h1, .syt-booking h2, .syt-booking h3,
.syt-booking h4, .syt-booking h5, .syt-booking h6 {
	font-family:    var( --sb-font );
	font-weight:    400;
	line-height:    1.2;
	color:          var( --sb-ink );
	margin:         0;
	padding:        0;
	border:         none;
	background:     none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow:    none;
}

.syt-booking button {
	font-family:        var( --sb-font );
	font-size:          inherit;
	line-height:        normal;
	text-transform:     none;
	letter-spacing:     normal;
	cursor:             pointer;
	-webkit-appearance: none;
	appearance:         none;
}

.syt-booking input,
.syt-booking select,
.syt-booking textarea {
	font-family:        var( --sb-font );
	font-size:          inherit;
	color:              var( --sb-ink )!important;
	-webkit-appearance: none;
	appearance:         none;
	outline:            none;
	line-height:        normal;
	padding:            16px !important;
}

.syt-booking input.syt-booking__checkbox {
	-webkit-appearance: none;
	appearance:         none;
	width:              16px;
	height:             16px;
	padding:            0 !important;
	margin-top:         2px;
	flex-shrink:        0;
	border:             1.5px solid var( --sb-ink-45 );
	background:         #ffffff;
	cursor:             pointer;
	position:           relative;
	transition:         background 180ms ease, border-color 180ms ease;
}

.syt-booking input.syt-booking__checkbox:checked {
	background:   var( --sb-ink );
	border-color: var( --sb-ink );
}

.syt-booking input.syt-booking__checkbox:checked::after {
	content:      '';
	position:     absolute;
	left:         4px;
	top:          1px;
	width:        5px;
	height:       9px;
	border:       1.5px solid #ffffff;
	border-top:   none;
	border-left:  none;
	transform:    rotate( 45deg );
}
.syt-booking p {
	margin:  0;
	padding: 0;
}
.syt-booking__month-nav:hover {
    box-shadow: unset !important;
    background: transparent !important;
}
.syt-booking ul,
.syt-booking ol {
	list-style: none;
	margin:     0;
	padding:    0;
}

.syt-booking li {
	list-style: none;
	margin:     0;
	padding:    0;
}

.syt-booking img {
	max-width: 100%;
	height:    auto;
	border:    none;
	outline:   none;
}

.syt-booking a {
	color:           inherit;
	text-decoration: none;
}

.syt-booking label {
	cursor: default;
}

.syt-booking svg {
	overflow:   visible;
	display:    inline-block;
	max-width:  none;
	color: #212121
}
span.syt-booking__yacht-card-info{
	top: -6px;
    position: relative;
}

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

.syt-booking {
	font-family:   var( --sb-font );
	color:         var( --sb-ink );
	background:    var( --sb-bg );
	max-width:     var( --sb-max-width );
	margin:        0 auto;
	padding:       48px 40px;
	border-radius: var( --sb-r-img );
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */

.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: 40px;
}

.syt-booking__step-dots {
	display:         flex;
	align-items:     flex-start;
	justify-content: center;
	list-style:      none;
	margin:          0;
	padding:         0;
	width:           100%;
	overflow-x:      auto;
	scrollbar-width: none;
	gap:             0;
}

.syt-booking__step-dots::-webkit-scrollbar {
	display: none;
}

/* Each step item */
.syt-booking__step-dot {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	flex:           1;
	min-width:      0;
	position:       relative;
}

/* Connector line between items */
.syt-booking__step-dot:not( :last-child )::after {
	content:    '';
	position:   absolute;
	top:        14px;
	left:       calc( 50% + 15px );
	right:      calc( -50% + 15px );
	height:     1px;
	background: var( --sb-ink-20 );
	transition: background 300ms ease;
}

.syt-booking__step-dot.is-completed:not( :last-child )::after {
	background: var( --sb-ink-45 );
}

/* Number circle */
.syt-booking__step-dot-num {
	width:           28px;
	height:          28px;
	border-radius:   50%;
	border:          1.5px solid var( --sb-ink-20 );
	background:      var( --sb-bg );
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.72rem;
	font-weight:     500;
	color:           var( --sb-ink-45 );
	position:        relative;
	z-index:         1;
	flex-shrink:     0;
	transition:      background var( --sb-t ) ease,
	                 border-color var( --sb-t ) ease,
	                 color var( --sb-t ) ease;
	line-height:     1;
}

/* Step label */
.syt-booking__step-dot-label {
	font-size:      0.58rem;
	font-weight:    500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:          var( --sb-ink-45 );
	opacity:        0.5;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	max-width:      100%;
	transition:     opacity var( --sb-t ) ease, color var( --sb-t ) ease;
	line-height:    1;
}

/* Active state */
.syt-booking__step-dot.is-active .syt-booking__step-dot-num {
	background:   var( --sb-ink );
	border-color: var( --sb-ink );
	color:        #ffffff;
}

.syt-booking__step-dot.is-active .syt-booking__step-dot-label {
	opacity: 1;
	color:   var( --sb-ink );
}

/* Completed state */
.syt-booking__step-dot.is-completed .syt-booking__step-dot-num {
	background:   var( --sb-ink-20 );
	border-color: transparent;
	color:        var( --sb-ink-75 );
}

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

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

.syt-booking__step-header {
	margin-bottom: var( --sb-gap );
}
.syt-booking__step-header.syt-booking__step-header--saint-experiences {
    margin-top: 40px;
}

.syt-booking__step-title {
	margin:         0 0 0.3em;
	font-size:      clamp( 1.7rem, 4vw, 2.4rem );
	font-weight:    300;
	line-height:    1.1;
	letter-spacing: -0.03em;
	color:          var( --sb-ink );
}

.syt-booking__step-subtitle {
	margin:         0;
	font-size:      0.9rem;
	color:          var( --sb-ink-45 );
	letter-spacing: 0.01em;
	line-height:    1.5;
}

/* ── Step transitions ──────────────────────────────────────────────────────── */

.syt-booking__step {
	display: none;
}

@keyframes syt-step-in-fwd {
	from { opacity: 0; transform: translateY( 16px ); }
	to   { opacity: 1; transform: translateY(    0 ); }
}

@keyframes syt-step-in-bwd {
	from { opacity: 0; transform: translateY( -12px ); }
	to   { opacity: 1; transform: translateY(     0 ); }
}

@keyframes syt-step-out-fwd {
	from { opacity: 1; transform: translateY(    0 ); }
	to   { opacity: 0; transform: translateY( -10px ); }
}

@keyframes syt-step-out-bwd {
	from { opacity: 1; transform: translateY(    0 ); }
	to   { opacity: 0; transform: translateY(  10px ); }
}

.syt-booking__step.is-entering-fwd {
	display:   block;
	animation: syt-step-in-fwd 340ms var( --sb-ease ) both;
}

.syt-booking__step.is-entering-bwd {
	display:   block;
	animation: syt-step-in-bwd 340ms var( --sb-ease ) both;
}

.syt-booking__step.is-leaving-fwd {
	display:   block;
	animation: syt-step-out-fwd 280ms var( --sb-ease ) both;
	pointer-events: none;
}

.syt-booking__step.is-leaving-bwd {
	display:   block;
	animation: syt-step-out-bwd 280ms var( --sb-ease ) both;
	pointer-events: none;
}

/* ── Type selector ─────────────────────────────────────────────────────────── */

.syt-booking__step--type-select {
	display: block;
}

.syt-booking__type-cards {
	display:               grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap:                   var( --sb-gap-sm );
}

.syt-booking__type-card {
	position:      relative;
	height:        340px;
	border-radius: var( --sb-r-img );
	overflow:      hidden;
	cursor:        pointer;
	border:        none!important;
	padding:       0;
	background:    var( --sb-grad-journey );
	transition:    transform var( --sb-t ) var( --sb-ease ),
	               box-shadow var( --sb-t ) var( --sb-ease );
	display:       block;
	text-align:    left;
}

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

.syt-booking__type-card-bg {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 600ms var( --sb-ease );
}

.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.18 ) 48%,
		transparent 72%
	);
	z-index: 1;
}

.syt-booking__type-card-content {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         2;
	padding:         28px;
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	gap:             5px;
}

.syt-booking__type-card-icon {
	color:         rgba( 255, 255, 255, 0.65 );
	margin-bottom: 6px;
}

.syt-booking__type-card-label {
	font-size:      1.4rem;
	font-weight:    500;
	color:          #ffffff;
	letter-spacing: -0.02em;
	line-height:    1.1;
}

.syt-booking__type-card-desc {
	font-size:      0.8rem;
	color:          rgba( 255, 255, 255, 0.55 );
	letter-spacing: 0.03em;
}

.syt-booking__type-card-arrow {
	position:        absolute;
	bottom:          28px;
	right:           28px;
	z-index:         2;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      rgba( 255, 255, 255, 0.13 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border:          1px solid rgba( 255, 255, 255, 0.2 );
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1rem;
	color:           rgba( 255, 255, 255, 0.8 );
	line-height:     1;
}

.syt-booking__type-card:hover {
	transform:  translateY( -4px );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.2 );
}

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

.syt-booking__type-card:focus-visible {
	outline:        2px solid rgba( 255, 255, 255, 0.8 );
	outline-offset: 3px;
}

/* ── Tier cards ────────────────────────────────────────────────────────────── */

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

.syt-booking__tier-card {
	position:      relative;
	height:        220px;
	border-radius: var( --sb-r-card );
	overflow:      hidden;
	cursor:        pointer;
	background:    var( --sb-grad-introduction );
	border:        1.5px solid rgba( 255, 255, 255, 0.05 );
	transition:    transform var( --sb-t ) var( --sb-ease ),
	               box-shadow var( --sb-t ) var( --sb-ease ),
	               border-color var( --sb-t ) ease;
	display:       block;
}

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

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

.syt-booking__tier-card::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.82 ) 0%,
		rgba( 0, 0, 0, 0.1 ) 55%,
		transparent 80%
	);
	z-index: 1;
}

.syt-booking__tier-card-content {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         2;
	padding:         16px 18px;
	display:         flex;
	flex-direction:  column;
	gap:             3px;
}

.syt-booking__tier-card-name {
	font-size:      1rem;
	font-weight:    500;
	color:          #ffffff;
	letter-spacing: -0.01em;
}

.syt-booking__tier-card-tagline {
	font-size:   0.76rem;
	color:       rgba( 255, 255, 255, 0.58 );
	line-height: 1.35;
}

.syt-booking__tier-card-duration {
	font-size:      0.68rem;
	color:          rgba( 255, 255, 255, 0.38 );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top:     4px;
}

.syt-booking__tier-card.is-selected,
.syt-booking__tier-card:has( input:checked ) {
	border-color: rgba( 255, 255, 255, 0.88 );
	box-shadow:   0 0 0 3px rgba( 255, 255, 255, 0.1 ),
	              0 12px 40px rgba( 0, 0, 0, 0.22 );
}

.syt-booking__tier-card.is-selected::after,
.syt-booking__tier-card:has( input:checked )::after {
	content:         '✓';
	position:        absolute;
	top:             10px;
	right:           10px;
	z-index:         3;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	background:      rgba( 255, 255, 255, 0.92 );
	color:           #0d0d0d;
	font-size:       11px;
	font-weight:     700;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

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

/* ── Charter type cards ────────────────────────────────────────────────────── */

.syt-booking__charter-cards {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.syt-booking__charter-card {
	display:       flex !important;
	height:       350px;
	border-radius: var( --sb-r-card );
	overflow:      hidden;
	cursor:        pointer;
	background:    #ffffff !important;
	border:        1.5px solid var( --sb-glass-border-d ) !important;
	transition:    border-color var( --sb-t ) ease,
	               box-shadow    var( --sb-t ) ease;
}

.syt-booking__charter-card-image {
	width:      42%;
	flex-shrink: 0;
	overflow:   hidden;
	background: var( --sb-glass-mid );
}

.syt-booking__charter-card-image img {
	width:      100%!important;
	height:     100%!important;
	object-fit: cover;
	display:    block;
	transition: transform 500ms ease;
}

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

.syt-booking__charter-card-body {
	flex:           1;
	padding:        24px 22px;
	display:        flex;
	flex-direction: column;
	justify-content: center;
}

.syt-booking__charter-card-name {
	font-size:      1.3rem;
	font-weight:    500;
	color:          var( --sb-ink );
	letter-spacing: -0.02em;
	line-height:    1.2;
}

.syt-booking__charter-card-meta {
	font-size:  0.78rem;
	color:      var( --sb-ink-45 );
	margin-top: 6px;
}

.syt-booking__charter-card-route {
	font-size:      0.7rem;
	color:          va5r( --sb-ink-45 );
	margin-top:     8px;
	letter-spacing: 0.01em;
}

.syt-booking__charter-card-price {
	font-size:   0.9rem;
	font-weight: 500;
	color:       var( --sb-ink );
	margin-top:  14px;
}

.syt-booking__charter-card-btn {
	display:       inline-block;
	align-self:    flex-start;
	margin-top:    14px;
	padding:       10px;
	border:        1px solid var( --sb-ink );
	border-radius: 0px;
	font-size:     0.9rem;
	color:         var( --sb-ink );
	letter-spacing: 0.02em;
	background-color: transparent;
	transition:    background var( --sb-t ) ease, color var( --sb-t ) ease;
}

.syt-booking__charter-card.is-selected,
.syt-booking__charter-card:has( input:checked ) {
	border-color: var( --sb-ink ) !important;
	box-shadow:   0 4px 24px rgba( 0, 0, 0, 0.1 );
}

.syt-booking__charter-card.is-selected .syt-booking__charter-card-btn,
.syt-booking__charter-card:has( input:checked ) .syt-booking__charter-card-btn {
	background: var( --sb-ink );
	color:      #ffffff;
}

/* ── Experience select — 3-column day trip grid ────────────────────────────── */

.syt-booking__experience-grid {
	display:               grid;
	grid-template-columns: repeat( 4, 1fr );
	gap:                   16px;
}

/* ── Experience select — Island Escapes section ─────────────────────────────── */

.syt-booking__island-escapes {
	margin-top: 40px;
}

@media ( max-width: 680px ) {
	.syt-booking__experience-grid {
		grid-template-columns: 1fr;
	}
}

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

.syt-booking__duration-options {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
}

.syt-booking__duration-card {
	padding:         11px 22px !important;
	border-radius:   var( --sb-r-pill ) !important;
	background:      var( --sb-glass ) !important;
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border:          1px solid var( --sb-glass-border-d ) !important;
	font:            inherit;
	font-size:       0.88rem;
	font-weight:     450;
	color:           var( --sb-ink );
	cursor:          pointer;
	transition:      background var( --sb-t ) ease,
	                 border-color var( --sb-t ) ease,
	                 box-shadow var( --sb-t ) ease,
	                 color var( --sb-t ) ease;
}

.syt-booking__duration-card.is-selected,
.syt-booking__duration-card:has( input:checked ) {
	background:   var( --sb-ink ) !important;
	border-color: transparent;
	color:        #ffffff;
	box-shadow:   0 4px 16px rgba( 0, 0, 0, 0.16 );
}

.syt-booking__duration-number,
.syt-booking__duration-unit {
	/* Legacy spans removed — kept for safety in case cached HTML lingers */
	display: none;
}

/* ── Month calendar ────────────────────────────────────────────────────────── */

.syt-booking__date-strip-wrap {
	display:        flex;
	flex-direction: column;
	gap:            var( --sb-gap-sm );
}

.syt-booking__date-strip-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

.syt-booking__month-label {
	flex:           1;
	text-align:     center;
	font-size:      0.82rem;
	font-weight:    600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color:          var( --sb-ink-75 );
}

.syt-booking__month-nav {
	width:           36px !important;
	height:          36px !important;
	border-radius:   50% !important;
	/* background:      var( --sb-glass ) !important; */
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border:          0px solid var( --sb-glass-border-d ) !important;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	color:           var( --sb-ink-75 );
	font-size:       1rem;
	line-height:     1;
	transition:      background var( --sb-t ) ease, box-shadow var( --sb-t ) ease;
	flex-shrink:     0;
}
button.syt-booking__month-nav.syt-booking__month-nav--prev, button.syt-booking__month-nav.syt-booking__month-nav--next {
    font-size: 22px;
    color: #0a1f33;
	background: transparent;
}
button.syt-booking__month-nav.syt-booking__month-nav--prev:hover, button.syt-booking__month-nav.syt-booking__month-nav--next:hover,button.syt-booking__month-nav.syt-booking__month-nav--prev:focus, button.syt-booking__month-nav.syt-booking__month-nav--next:focus, button.syt-booking__month-nav.syt-booking__month-nav--prev:active, button.syt-booking__month-nav.syt-booking__month-nav--next:active{
	background: transparent;
}
.syt-booking__month-nav:hover {
	background: var( --sb-glass-mid );
	box-shadow: 0 2px 12px var( --sb-ink-08 );
}

/* 7-column month grid */
.syt-booking__date-strip {
	display:               grid;
	grid-template-columns: repeat( 7, 1fr );
	gap:                   3px;
	padding:               4px 0;
}

/* Day-of-week headers */
.syt-booking__cal-dow {
	text-align:     center;
	font-size:      0.6rem;
	font-weight:    600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:          var( --sb-ink-45 );
	padding:        6px 0 10px;
	line-height:    1;
}

/* Empty cells before month start */
.syt-booking__cal-empty {
	aspect-ratio: 1;
}

/* Date cells */
.syt-booking__date-card {
	aspect-ratio:    1;
	border-radius:   var( --sb-r );
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.88rem;
	font-weight:     400;
	line-height:     1;
	cursor:          pointer;
	background:      transparent;
	border:          1px solid transparent;
	color:           var( --sb-ink );
	transition:      background var( --sb-t ) ease,
	                 border-color var( --sb-t ) ease,
	                 color var( --sb-t ) ease,
	                 box-shadow var( --sb-t ) ease;
	padding:         0;
	font-family:     var( --sb-font );
	position:        relative;
}

/* Availability status colors — placed first so is-selected/is-in-range/is-return override via cascade */
.syt-booking__date-card.is-status-available {
	background:   #c9d6df;
	border-color: #c9d6df;
	color:        #212121;
}

.syt-booking__date-card.is-status-partial {
	background:   #e1c5b0;
	border-color: #e1c5b0;
	color:        #212121;
}

.syt-booking__date-card.is-status-unavailable {
	background:   #c73131;
	border-color: #c73131;
	color:        #212121;
}

.syt-booking__date-card:not( .is-disabled ):hover {
	background:   var( --sb-ink-08 );
	border-color: var( --sb-ink-20 );
	color:        var( --sb-ink );
}

.syt-booking__date-card.is-in-range {
	background:   #0A1F33;
	border-color: transparent;
	color:        #ffffff;
}

.syt-booking__date-card.is-selected {
	background:   #0A1F33;
	border-color: transparent;
	color:        #ffffff;
	font-weight:  500;
	box-shadow:   0 4px 14px rgba( 0, 0, 0, 0.18 );
}

.syt-booking__date-card.is-return {
	background:   #0A1F33;
	border-color: transparent;
	color:        #ffffff;
	font-weight:  500;
	box-shadow:   0 4px 14px rgba( 0, 0, 0, 0.18 );
}

.syt-booking__date-card.is-disabled {
	opacity:        0.22;
	cursor:         not-allowed;
	pointer-events: none;
}

.syt-booking__date-confirm-text {
	font-size:       0.88rem;
	color:           var( --sb-ink-75 );
	letter-spacing:  0.01em;
	padding:         10px 16px!important;
	border-radius:   var( --sb-r );
	background:      #ffffff;
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border:          1px solid var( --sb-ink-20  );
	opacity:         0;
	transform:       translateY( 6px );
	transition:      opacity 250ms ease 80ms, transform 250ms var( --sb-ease ) 80ms;
	pointer-events:  none;
	display:         inline-block;
}

.syt-booking__date-confirm-text.is-visible {
	opacity:        1;
	transform:      translateY( 0 );
	pointer-events: auto;
}

/* Availability feedback on date steps */
.syt-booking__availability-state {
	margin-top: var( --sb-gap-sm );
}

.syt-booking__availability-checking {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.83rem;
	color:       var( --sb-ink-45 );
}

.syt-booking__availability-error {
	padding:         10px 16px;
	border-radius:   var( --sb-r-pill );
	background:      rgba( 255, 255, 255, 0.8 );
	backdrop-filter: blur( 16px );
	border:          1px solid rgba( 155, 30, 30, 0.2 );
	color:           rgba( 130, 20, 20, 0.9 );
	font-size:       0.83rem;
	display:         inline-block;
}

/* ── Yacht cards ───────────────────────────────────────────────────────────── */

.syt-booking__yacht-list {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.syt-booking__yacht-card {
	display:        flex !important;
	flex-direction: row;
	height:         200px;
	border-radius:  var( --sb-r-card ) !important;
	overflow:       hidden;
	border:         1.5px solid var( --sb-glass-border-d ) !important;
	background:     #ffffff !important;
	cursor:         pointer;
	transition:     border-color var( --sb-t ) ease,
	                box-shadow    var( --sb-t ) ease;
}

.syt-booking__yacht-card:hover {
	border-color: var( --sb-ink-20 ) !important;
	box-shadow:   0 4px 20px rgba( 0, 0, 0, 0.08 );
}

.syt-booking__yacht-card.is-selected {
	border-color: var( --sb-ink ) !important;
	box-shadow:   0 4px 24px rgba( 0, 0, 0, 0.1 );
}

.syt-booking__yacht-card-image {
	width:      42%;
	flex-shrink: 0;
	overflow:   hidden;
	background: var( --sb-glass-mid );
}

.syt-booking__yacht-card-image img {
	width:      100%;
	height:     100%!important;
	object-fit: cover;
	display:    block;
	transition: transform 500ms ease;
}

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

.syt-booking__yacht-card-body {
	flex:           1;
	padding:        24px 22px;
	display:        flex;
	flex-direction: column;
	justify-content: center;
	min-width:      0;
}

.syt-booking__yacht-card-name {
	font-size:      1.3rem;
	font-weight:    500;
	letter-spacing: -0.02em;
	color:          var( --sb-ink );
	line-height:    1.2;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
}

.syt-booking__yacht-card-specs {
	display:     flex;
	align-items: center;
	gap:         14px;
	font-size:   0.78rem;
	color:       var( --sb-ink-45 );
	margin-top:  6px;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.syt-booking__yacht-spec {
	display:     inline-flex;
	align-items: center;
	gap:         4px;
}

.syt-booking__yacht-card-price {
	display:        block;
	margin-top:     8px;
	font-size:      0.82rem;
	font-weight:    500;
	letter-spacing: 0.04em;
	color:          var( --sb-gold );
}

.syt-booking__yacht-card-btn {
	display:       inline-block;
	align-self:    flex-start;
	margin-top:    16px;
	padding:       15px;
	border:        1px solid var( --sb-ink );
	border-radius: 0px;
	font-size:     1rem;
	color:         var( --sb-ink );
	letter-spacing: 0.02em;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	max-width:     100%;
	transition:    background var( --sb-t ) ease, color var( --sb-t ) ease;
}

.syt-booking__yacht-card.is-selected .syt-booking__yacht-card-btn {
	background: var( --sb-ink );
	color:      #ffffff;
}

.syt-booking__yacht-card--preselected {
	height:         auto;
	flex-direction: column;
}

.syt-booking__yacht-card--preselected .syt-booking__yacht-card-image {
	width:       100% !important;
	flex:        1 1 auto;
	flex-shrink: 1;
}

.syt-booking__yacht-card--preselected .syt-booking__yacht-card-body {
	flex: 0 0 auto;
}

.syt-booking__yacht-card--unavailable {
	opacity:        0.42;
	cursor:         not-allowed;
	pointer-events: none;
}

/* Best Available — full-width special card */
.syt-booking__yacht-card--best-available {
	height:      auto !important;
	display:     flex !important;
	align-items: center;
	gap:         18px;
	padding:     20px 22px !important;
	background:  #ffffff !important;
	border:      1.5px solid var( --sb-glass-border-d ) !important;
	overflow:    visible;
}

/* TEMPORARY: hide the "Best Available" card everywhere. The rule above forces
   display:flex !important, which an inline display:none can't override — so this
   later, equal-specificity !important rule wins. Delete this block to restore. */
.syt-booking__yacht-card--best-available {
	display: none !important;
}

.syt-booking__yacht-card--best-available:hover {
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.1 );
}

.syt-booking__yacht-card--best-available.is-selected {
	background:   var( --sb-ink ) !important;
	border-color: transparent !important;
	box-shadow:   0 6px 28px rgba( 0, 0, 0, 0.18 );
}

.syt-booking__yacht-card--best-available .syt-booking__yacht-card-body {
	flex:    1 1 auto;
	padding: 0;
	justify-content: flex-start;
}

.syt-booking__yacht-card--best-available .syt-booking__yacht-card-name {
	font-size: 1.3rem;
}

.syt-booking__yacht-card--best-available.is-selected .syt-booking__yacht-card-name,
.syt-booking__yacht-card--best-available.is-selected .syt-booking__yacht-card-desc {
	color: rgba( 255, 255, 255, 0.88 );
}

.syt-booking__yacht-card--best-available.is-selected .syt-booking__yacht-card-btn {
	background:   rgba( 255, 255, 255, 0.15 );
	color:        #ffffff;
	border-color: rgba( 255, 255, 255, 0.4 );
}

.syt-booking__yacht-card-icon {
	width:           44px;
	height:          44px;
	border-radius:   var( --sb-r );
	background:      transparent;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var( --sb-ink-45 );
	flex-shrink:     0;
	transition:      background var( --sb-t ) ease, color var( --sb-t ) ease;
}

.syt-booking__yacht-card--best-available.is-selected .syt-booking__yacht-card-icon {
	background: transparent;
	color:      rgba( 255, 255, 255, 0.7 );
}
.syt-booking__yacht-card--best-available.is-selected .syt-booking__yacht-card-icon svg{
	color: white;
}

.syt-booking__yacht-card-desc {
	font-size:   0.8rem;
	color:       var( --sb-ink-45 );
	line-height: 1.4;
	margin-top:  2px;
	transition:  color var( --sb-t ) ease;
}

/* Skeleton loading */
.syt-booking__yacht-skeleton {
	border-radius: var( --sb-r-card );
	overflow:      hidden;
	background:    var( --sb-glass );
	border:        1.5px solid var( --sb-glass-border-d );
}

.syt-booking__yacht-skeleton-img {
	height:          185px;
	background:      linear-gradient(
		90deg,
		rgba( 0, 0, 0, 0.04 ) 0%,
		rgba( 0, 0, 0, 0.08 ) 50%,
		rgba( 0, 0, 0, 0.04 ) 100%
	);
	background-size: 200% 100%;
	animation:       syt-shimmer 1.6s ease infinite;
}

.syt-booking__yacht-skeleton-footer {
	padding:    14px 16px;
	background: var( --sb-glass-mid );
}

.syt-booking__yacht-skeleton-line {
	height:          10px;
	border-radius:   5px;
	background:      linear-gradient(
		90deg,
		rgba( 0, 0, 0, 0.04 ) 0%,
		rgba( 0, 0, 0, 0.09 ) 50%,
		rgba( 0, 0, 0, 0.04 ) 100%
	);
	background-size: 200% 100%;
	animation:       syt-shimmer 1.6s ease infinite;
	margin-bottom:   7px;
}

.syt-booking__yacht-skeleton-line:last-child {
	width:         60%;
	margin-bottom: 0;
}

@keyframes syt-shimmer {
	0%   { background-position:  200% 0; }
	100% { background-position: -200% 0; }
}

.syt-booking__yacht-loading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.83rem;
	color:       var( --sb-ink-45 );
	padding:     var( --sb-gap-sm ) 0;
}

.syt-booking__yacht-unavailable {
	padding:     var( --sb-gap );
	text-align:  center;
	color:       var( --sb-ink-45 );
	font-size:   0.88rem;
	line-height: 1.6;
}

/* ── Time slot pills ───────────────────────────────────────────────────────── */

.syt-booking__timeslot-list {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
}

.syt-booking__timeslot-card {
	padding:         11px 22px !important;
	border-radius:   var( --sb-r-pill ) !important;
	background:      var( --sb-glass ) !important;
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border:          1px solid var( --sb-glass-border-d ) !important;
	font:            inherit;
	font-size:       0.88rem;
	font-weight:     450;
	color:           var( --sb-ink );
	cursor:          pointer;
	transition:      background var( --sb-t ) ease,
	                 border-color var( --sb-t ) ease,
	                 box-shadow var( --sb-t ) ease,
	                 color var( --sb-t ) ease;
}

.syt-booking__timeslot-card.is-selected {
	background:   var( --sb-ink )!important;
	border-color: transparent;
	color:        #ffffff;
	box-shadow:   0 4px 16px rgba( 0, 0, 0, 0.16 );
}

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

.syt-booking__timeslot-loading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.83rem;
	color:       var( --sb-ink-45 );
}

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

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

.syt-booking__field-group {
	display:        flex;
	flex-direction: column;
	gap:            7px;
}

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

.syt-booking__label {
	font-size:      0.7rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var( --sb-ink-45 );
}

.syt-booking__label-optional {
	font-weight:    400;
	text-transform: none;
	letter-spacing: 0;
	color:          var( --sb-ink-20 );
}

.syt-booking__required {
	color:       rgba( 155, 30, 30, 0.9 );
	margin-left: 2px;
}

.syt-booking__input,
.syt-booking__select,
.syt-booking__textarea {
	width:              100%;
	height:             52px;
	padding:            0 18px !important;
	border-radius:      var( --sb-r ) !important;
	background:         #fff!important;
	backdrop-filter:    blur( 16px );
	-webkit-backdrop-filter: blur( 16px );
	border:             1px solid var( --sb-ink-20 )!important;
	color:              var( --sb-ink ) !important;
	font:               inherit;
	font-size:          0.97rem;
	letter-spacing:     -0.01em;
	box-shadow:         none !important;
	outline:            none !important;
	transition:         border-color 200ms ease,
	                    background 200ms ease,
	                    box-shadow 200ms ease;
	-webkit-appearance: none;
	appearance:         none;
}

.syt-booking__textarea {
	height:     auto;
	min-height: 100px;
	padding:    14px 18px !important;
	resize:     vertical;
}

.syt-booking__input::placeholder,
.syt-booking__textarea::placeholder {
	color: rgba( 0, 0, 0, 0.22 );
}

.syt-booking__input:focus,
.syt-booking__select:focus,
.syt-booking__textarea:focus {
	outline:      none !important;
	background:   #ffffff !important;
	box-shadow:   0 0 0 3px var( --sb-ink-08 ) !important;
}
button.syt-booking__stepper-btn.syt-booking__stepper-btn--minus, button.syt-booking__stepper-btn.syt-booking__stepper-btn--plus {
    color: #0a1f33;
}

/* Guest count stepper */
.syt-booking__guest-stepper {
	display:         inline-flex !important;
	align-items:     center;
	width:           auto !important;
	align-self:      flex-start;
	border-radius:   var( --sb-r ) !important;
	border:          1px solid rgba( 0, 0, 0, 0.1 ) !important;
	background:      #ffffff !important;
	backdrop-filter: blur( 16px );
	-webkit-backdrop-filter: blur( 16px );
	overflow:        hidden;
}

.syt-booking__stepper-btn {
	width:            52px !important;
	height:           52px !important;
	background:       transparent !important;
	border:           none !important;
	border-radius:    0 !important;
	padding:          0 !important;
	font-size:        1.3rem;
	font-weight:      300;
	color:            var( --sb-ink-45 );
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       background 150ms ease, color 150ms ease;
	flex-shrink:      0;
	box-shadow:       none !important;
}

.syt-booking__stepper-btn:hover {
	background: var( --sb-ink-08 ) !important;
	color:      var( --sb-ink ) !important;
}

.syt-booking__stepper-display {
	min-width:    52px;
	height:       52px;
	line-height:  52px;
	text-align:   center;
	font-size:    1.05rem;
	font-weight:  500;
	border-left:  1px solid rgba( 0, 0, 0, 0.08 );
	border-right: 1px solid rgba( 0, 0, 0, 0.08 );
}

.syt-booking__field-error {
	font-size:      0.76rem;
	color:          rgba( 140, 20, 20, 0.85 );
	min-height:     1em;
	letter-spacing: 0.01em;
}

.syt-booking__field-note {
	font-size: 0.78rem;
	color:     var( --sb-ink-45 );
}

/* ── Conflict prompt ───────────────────────────────────────────────────────── */

.syt-booking__conflict-actions {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	margin-top:     var( --sb-gap );
}

.syt-booking__conflict-btn {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         18px 28px;
	border-radius:   var( --sb-r-card );
	font-family:     var( --sb-font );
	font-size:       1rem;
	font-weight:     500;
	letter-spacing:  0.01em;
	cursor:          pointer;
	transition:      background var( --sb-t ) ease,
	                 box-shadow var( --sb-t ) ease,
	                 transform  var( --sb-t ) var( --sb-ease );
	white-space:     nowrap;
	border:          none;
}

.syt-booking__conflict-btn--change-dates {
	background:  var( --sb-glass );
	color:       var( --sb-ink-75 );
	border:      1px solid var( --sb-ink-08 );
	justify-content: flex-start;
}

.syt-booking__conflict-btn--change-dates:hover {
	background:  var( --sb-glass-mid );
	color:       var( --sb-ink );
}

.syt-booking__conflict-btn--day-charter {
	background:      var( --sb-ink );
	color:           #ffffff;
	justify-content: space-between;
	box-shadow:      0 4px 20px rgba( 0, 0, 0, 0.15 );
}

.syt-booking__conflict-btn--day-charter:hover {
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.22 );
	transform:  translateY( -1px );
}

.syt-booking__dates-conflict-hint {
	font-size:     0.85rem;
	color:         #212121;
	padding:       10px 14px;
	border-radius: var( --sb-r );
	border:        1px solid var( --sb-ink-08 );
	background:    var( --sb-glass );
	margin-top:    12px;
}

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

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

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

.syt-booking__btn--back {
	background:     transparent !important;
	border:         none !important;
	border-radius:  0 !important;
	box-shadow:     none !important;
	padding:        0 !important;
	font:           inherit;
	font-size:      0.88rem;
	color:          var( --sb-ink-45 ) !important;
	cursor:         pointer;
	letter-spacing: 0.01em;
	display:        flex;
	align-items:    center;
	gap:            5px;
	transition:     color 200ms ease;
}

.syt-booking__btn--back:hover {
	background: transparent !important;
	color:      var( --sb-ink ) !important;
}

.syt-booking__btn--next,
.syt-booking__btn--submit, .syt-booking__conflict-btn.syt-booking__conflict-btn--change-dates ,button.syt-booking__conflict-btn.syt-booking__conflict-btn--day-charter {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	height:          52px;
	padding:         0 32px !important;
	border-radius:   var( --sb-r-pill ) !important;
	background:      #fff!important;
	color:           var( --sb-ink )  !important;
	border:          1px solid var( --sb-ink )!important;
	font:            inherit;
	font-size:       0.9rem;
	font-weight:     500;
	letter-spacing:  0.01em;
	cursor:          pointer;
	box-shadow:      0 4px 20px rgba( 0, 0, 0, 0.15 ) !important;
	transition:      box-shadow var( --sb-t ) ease,
	                 transform var( --sb-t ) var( --sb-ease );
	white-space:     nowrap;
	text-decoration: none !important;
}

.syt-booking__btn--next:hover,
.syt-booking__btn--submit:hover {
	background: var( --sb-ink ) !important;
	color:      #ffffff !important;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.22 ) !important;
	transform:  translateY( -1px );
}

.syt-booking__btn--next:active,
.syt-booking__btn--submit:active {
	background: var( --sb-ink ) !important;
	color:      #ffffff !important;
	transform:  translateY( 0 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 ) !important;
}

.syt-booking__btn--next:disabled,
.syt-booking__btn--submit:disabled {
	opacity:   0.5;
	cursor:    not-allowed;
	transform: none;
}

.syt-booking__btn--next:focus-visible,
.syt-booking__btn--submit:focus-visible,
.syt-booking__btn--back:focus-visible {
	outline:        2px solid var( --sb-ink );
	outline-offset: 3px;
}

.syt-booking__loading-indicator {
	display:     flex;
	align-items: center;
	gap:         7px;
	font-size:   0.82rem;
	color:       var( --sb-ink-45 );
}

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

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

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

.syt-booking__review-heading {
	margin:         var( --sb-gap ) 0 10px;
	font-size:      0.72rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var( --sb-ink-45 );
}

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

.syt-booking__review-section {
	border-radius:   var( --sb-r-card ) !important;
	overflow:        hidden;
	border:          1px solid var( --sb-glass-border-d ) !important;
	background:      var( --sb-glass ) !important;
	backdrop-filter: blur( 20px );
	-webkit-backdrop-filter: blur( 20px );
}

.syt-booking__review-section-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         13px 22px;
	background:      #0a1f33;
	border-bottom:   1px solid var( --sb-glass-border-d );
}

.syt-booking__review-section-title {
	margin:         0;
	font-size:      1rem;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          #ffffff!important;
}

.syt-booking__review-edit {
	background:    none;
	border:        none;
	font:          inherit;
	font-size:     0.78rem;
	color:         var( --sb-ink-45 );
	cursor:        pointer;
	padding:       0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.2 );
	line-height:   1.3;
	transition:    color 180ms ease;
}
button.syt-booking__review-edit {
    background: transparent!important;
    border: 1px solid white!important;
    color: white!important;
    border-radius: 0!important;
}
button.syt-booking__review-edit:hover {
    background: transparent!important;
    border: 1px solid white!important;
    color: white!important;
    border-radius: 0!important;
}
.syt-booking__review-edit:hover {
	color: var( --sb-ink );
}

.syt-booking__review-list {
	background: white;
	display:               grid;
	grid-template-columns: 110px 1fr;
	gap:                   6px 16px;
	margin:                0;
	padding:               16px 22px;
	font-size:             0.9rem;
}

.syt-booking__review-list dt {
	color:      var( --sb-ink-45 );
	font-size:  0.79rem;
	align-self: baseline;
}

.syt-booking__review-list dd {
	margin:      0;
	font-weight: 450;
	align-self:  baseline;
}

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

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

.syt-booking__consent-label {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	font-size:   0.86rem;
	cursor:      pointer;
	line-height: 1.5;
	color:       var( --sb-ink-75 );
}

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

.syt-booking__privacy-toggle {
	display:        inline-flex;
	align-items:    center;
	vertical-align: middle;
	background:     none;
	border:         none;
	padding:        0 0 0 4px;
	color:          var( --sb-ink-45 );
	cursor:         pointer;
	transition:     color 180ms ease;
}

.syt-booking__privacy-toggle:hover {
	color: var( --sb-ink );
}

.syt-booking__privacy-toggle .syt-privacy-chevron {
	transition: transform 200ms var( --sb-ease );
}

.syt-booking__privacy-toggle[aria-expanded="true"] .syt-privacy-chevron {
	transform: rotate( 180deg );
}

.syt-booking__privacy-accordion {
	margin-left: 26px;
	padding:     10px 16px;
	border-left: 1px solid var( --sb-ink-08 );
	font-size:   0.78rem;
	color:       var( --sb-ink-45 );
	line-height: 1.65;
}

.syt-booking__privacy-accordion p {
	margin: 0;
}

/* ── Error states ──────────────────────────────────────────────────────────── */

.syt-booking__error-banner {
	margin-top:      var( --sb-gap-sm );
	padding:         10px 18px;
	border-radius:   var( --sb-r-pill );
	background:      rgba( 255, 255, 255, 0.82 );
	backdrop-filter: blur( 16px );
	border:          1px solid rgba( 155, 30, 30, 0.2 );
	color:           rgba( 130, 20, 20, 0.9 );
	font-size:       0.86rem;
	display:         inline-block;
}

.syt-booking__step-errors {
	margin-top: var( --sb-gap-sm );
	font-size:  0.83rem;
	color:      rgba( 140, 20, 20, 0.85 );
}

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

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

.syt-booking__success {
	padding: calc( var( --sb-gap ) * 1.5 ) 0;
}

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

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

.syt-booking__success-icon circle {
	stroke-dasharray:  190;
	stroke-dashoffset: 190;
	animation:         syt-draw-circle 600ms ease-out 100ms forwards;
}

.syt-booking__success-icon polyline {
	stroke-dasharray:  50;
	stroke-dashoffset: 50;
	animation:         syt-draw-check 400ms ease-out 650ms forwards;
}

@keyframes syt-draw-circle {
	to { stroke-dashoffset: 0; }
}

@keyframes syt-draw-check {
	to { stroke-dashoffset: 0; }
}

.syt-booking__success-title {
	font-size:      1.6rem;
	font-weight:    300;
	letter-spacing: -0.025em;
	margin:         0 0 12px;
	opacity:        0;
	transform:      translateY( 10px );
	animation:      syt-fade-up 350ms var( --sb-ease ) 300ms forwards;
}

.syt-booking__success-message {
	font-size:   0.88rem;
	color:       var( --sb-ink-45 );
	line-height: 1.65;
	margin:      0 0 16px;
	opacity:     0;
	transform:   translateY( 10px );
	animation:   syt-fade-up 350ms var( --sb-ease ) 450ms forwards;
}

.syt-booking__success-reference {
	font-size:      0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var( --sb-ink-20 );
	margin:         0 0 8px;
	opacity:        0;
	animation:      syt-fade-up 350ms var( --sb-ease ) 600ms forwards;
}

.syt-booking__success-next-steps {
	font-size:  0.82rem;
	color:      var( --sb-ink-45 );
	margin:     0;
	opacity:    0;
	animation:  syt-fade-up 350ms var( --sb-ease ) 700ms forwards;
}

.syt-booking__success-divider {
	width:      40px;
	height:     1px;
	background: var( --sb-ink-20 );
	margin:     20px auto;
	opacity:    0;
	animation:  syt-fade-up 250ms ease 900ms forwards;
}
label.syt-booking__charter-card, label.syt-booking__timeslot-card, label.syt-booking__yacht-card, label.syt-booking__duration-card {
    cursor: pointer;
}

@keyframes syt-fade-up {
	to { opacity: 1; transform: translateY( 0 ); }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media ( max-width: 680px ) {

	.syt-booking {
		padding:       24px 20px;
		border-radius: var( --sb-r-card );
	}

	.syt-booking__step-dot-label {
		display: none;
	}

	.syt-booking__step-dot-num {
		width:     24px;
		height:    24px;
		font-size: 0.65rem;
	}

	.syt-booking__step-dot:not( :last-child )::after {
		top: 12px;
	}

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

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

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

	.syt-booking__tier-card {
		height: 180px;
	}

	.syt-booking__charter-card,
	.syt-booking__yacht-card {
		height: auto;
	}

	/* Charter/journey cards: image left, body right on mobile */
	.syt-booking__charter-card {
		flex-direction: row;
	}

	.syt-booking__charter-card-image {
		width:      40%;
		flex-shrink: 0;
		align-self: stretch;
	}

	.syt-booking__charter-card-btn-suffix {
		display: none;
	}

	.syt-booking__charter-card-name {
		font-size: 1rem;
	}

	.syt-booking__yacht-card-name {
		font-size:     0.95rem;
		white-space:   normal;
		overflow:      visible;
		text-overflow: clip;
	}

	.syt-booking__yacht-card-specs {
		white-space:   normal;
		overflow:      visible;
		text-overflow: clip;
	}

	.syt-booking__yacht-card-btn-name {
		display: none;
	}

	.syt-booking__charter-card-body,
	.syt-booking__yacht-card-body {
		padding: 16px 16px;
	}

	.syt-booking__charter-card-price,
	.syt-booking__charter-card-btn,
	.syt-booking__yacht-card-btn {
		margin-top: 10px;
	}

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

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

	.syt-booking__nav {
		position:       sticky;
		bottom:         0;
		padding-bottom: max( 16px, env( safe-area-inset-bottom ) );
		background:     linear-gradient(
			to top,
			var( --sb-bg ) 60%,
			transparent 100%
		);
		flex-direction: row;
		align-items:    center;
	}

	.syt-booking__btn--next,
	.syt-booking__btn--submit {
		justify-content: center;
	}

	.syt-booking__btn--back {
		justify-content: flex-start;
	}

	.syt-booking__date-card {
		font-size: 0.82rem;
	}
	.syt-booking__yacht-card-image {
		width: 60%;

	}
	.syt-booking__yacht-card-btn{
		padding: 10px;
	}
		.syt-booking__yacht-card--preselected {
			height:         auto!important;
			flex-direction: column;
		}
}

@media ( max-width: 400px ) {

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

	/* Yacht cards stack vertically on very small screens */
	.syt-booking__yacht-card {
		flex-direction: column !important;
		height:         auto !important;
	}
.syt-booking__yacht-card--preselected {
			height:         auto!important;
			flex-direction: column;
		}
		.syt-booking__yacht-card-image {
		width:  100% !important;
		height: auto;
	}



	/* Charter/journey cards stay horizontal on very small screens */
	.syt-booking__charter-card {
		flex-direction: row !important;
		height:         auto !important;
	}

	.syt-booking__charter-card-image {
		width:      40% !important;
		height:     auto !important;
		align-self: stretch;
	}

	.syt-booking__charter-card-body,
	.syt-booking__yacht-card-body {
		padding: 16px !important;
	}
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {

	.syt-booking *,
	.syt-booking *::before,
	.syt-booking *::after {
		animation-duration:  0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Glassmorphism fallback ────────────────────────────────────────────────── */

@supports not ( backdrop-filter: blur( 1px ) ) {

	.syt-booking__duration-card,
	.syt-booking__date-card,
	.syt-booking__month-nav,
	.syt-booking__date-confirm-text,
	.syt-booking__yacht-card,
	.syt-booking__yacht-card--best-available,
	.syt-booking__timeslot-card,
	.syt-booking__input,
	.syt-booking__select,
	.syt-booking__textarea,
	.syt-booking__guest-stepper,
	.syt-booking__review-section,
	.syt-booking__error-banner,
	.syt-booking__availability-error {
		background: rgba( 255, 255, 255, 0.97 );
	}
}

/* ── Experience select — column layout always wins (placed last to override mobile rules) ── */

.syt-booking__charter-card--vertical,
.syt-booking__charter-card--journey {
	flex-direction: column !important;
	height:         auto !important;
}

.syt-booking__charter-card--vertical .syt-booking__charter-card-image,
.syt-booking__charter-card--journey .syt-booking__charter-card-image {
	width:     100% !important;
	height:    300px;
	min-height: 0;
	align-self: auto;
}
.syt-booking__charter-card--vertical .syt-booking__charter-card-image{
	height: 300px;
}
.syt-booking__charter-card--journey .syt-booking__charter-card-image {
	height: 350px;
}