/* ============================================================================
   FlowBuilder Booking Wizard — [flowbuilder_booking_wizard]
   Layout modelled on book.whitesails.com.sg, but typography + palette follow
   the Destiny Yacht site: Marcellus (headings) / Cormorant Garamond (body &
   buttons), teal #06BAB5 accent, navy #000D1B ink. All values are variables.
   ========================================================================== */

.fbwz{
	--wz-bg:#ffffff;
	--wz-card:#ffffff;
	--wz-navy:#000D1B;
	--wz-navy-2:#0f2033;
	--wz-teal:#06BAB5;
	--wz-teal-dark:#036F72;
	--wz-ink:#1b2430;
	--wz-muted:#7a8a90;
	--wz-line:#e6e6e6;
	--wz-line-2:#f0f0f0;
	--wz-soft:#f4fbfb;             /* teal-tinted selection wash */
	--wz-accent:#06BAB5;
	--wz-ok:#2f9e6d;
	--wz-serif:"Marcellus", Georgia, "Times New Roman", serif;
	--wz-sans:"Cormorant Garamond", Georgia, serif;

	background:#f6f6f4;
	font-family:var(--wz-sans);
	font-size:18px;
	color:var(--wz-ink);
	padding:0;
	margin:0 calc(50% - 50vw) 0;          /* full-bleed section */
	width:100vw;
	scroll-margin-top:0;
}
.fbwz *,.fbwz *::before,.fbwz *::after{ box-sizing:border-box; }
.fbwz [hidden]{ display:none !important; }

/* dark hero band carrying the page title (matches the home page hero) */
.fbwz-hero{
	background:var(--wz-navy);
	padding:60px 18px 52px;
	text-align:center;
}
.fbwz-main{
	padding:36px 18px 84px;
	scroll-margin-top:70px;
}

/* neutralise theme button styling inside the wizard */
.fbwz button{
	margin:0; font-family:inherit; letter-spacing:normal; text-transform:none;
	-webkit-appearance:none; appearance:none; white-space:normal;
}
.fbwz button:focus,.fbwz button:hover{ text-decoration:none; }
.fbwz button:focus-visible{ outline:2px solid var(--wz-teal); outline-offset:2px; }

.fbwz-title{
	font-family:var(--wz-serif);
	font-weight:500;
	font-size:clamp(34px,5vw,52px);
	line-height:1.1;
	color:#fff;
	text-align:center;
	margin:0;
	letter-spacing:.2px;
}

/* ── step bar ─────────────────────────────────────────────────────────── */
.fbwz-steps{
	list-style:none; margin:0 auto 26px; padding:0;
	max-width:640px; display:flex; justify-content:space-between; position:relative;
}
.fbwz-steps::before{
	content:""; position:absolute; left:22px; right:22px; top:16px; height:2px;
	background:var(--wz-line); z-index:0;
}
.fbwz-step{
	position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
	gap:8px; flex:1 1 0; text-align:center;
}
.fbwz-step-dot{
	width:34px; height:34px; border-radius:50%; background:var(--wz-card);
	border:2px solid var(--wz-line); display:flex; align-items:center; justify-content:center;
	transition:all .2s ease;
}
.fbwz-step-dot i{ font-style:normal; font-size:13px; font-weight:600; color:var(--wz-muted); }
.fbwz-step-label{ font-size:13px; font-weight:500; color:var(--wz-muted); letter-spacing:.3px; }
.fbwz-step.is-active .fbwz-step-dot{ background:var(--wz-teal); border-color:var(--wz-teal); }
.fbwz-step.is-active .fbwz-step-dot i{ color:#fff; }
.fbwz-step.is-active .fbwz-step-label{ color:var(--wz-navy); font-weight:600; }
.fbwz-step.is-done .fbwz-step-dot{ background:var(--wz-navy); border-color:var(--wz-navy); }
.fbwz-step.is-done .fbwz-step-dot i{ font-size:0; }
.fbwz-step.is-done .fbwz-step-dot::after{ content:"✓"; color:#fff; font-size:14px; font-weight:700; }
@media(max-width:560px){ .fbwz-step-label{ display:none; } .fbwz-steps{ max-width:340px; } }

/* ── card ────────────────────────────────────────────────────────────── */
.fbwz-card{
	max-width:680px; margin:0 auto; background:var(--wz-card);
	border:1px solid var(--wz-line); border-radius:18px;
	box-shadow:0 24px 60px rgba(0,13,27,.06);
	overflow:hidden;
}
.fbwz-body{ padding:30px 30px 8px; }
@media(max-width:560px){ .fbwz-body{ padding:22px 18px 6px; } }

.fbwz-step-title{
	font-family:var(--wz-serif); font-weight:400; font-size:27px; color:var(--wz-navy); margin:0; letter-spacing:.3px;
}
.fbwz-step-sub{ font-size:16px; color:var(--wz-muted); margin:5px 0 0; }
.fbwz-rule{ width:44px; height:3px; border-radius:3px; background:var(--wz-teal); margin:14px 0 22px; }

/* ── generic controls ────────────────────────────────────────────────── */
.fbwz-foot{
	display:flex; gap:12px; align-items:center; padding:18px 30px;
	background:#fafafa; border-top:1px solid var(--wz-line);
}
@media(max-width:560px){ .fbwz-foot{ padding:16px 18px; } }
.fbwz .fbwz-btn{
	appearance:none; border:none; cursor:pointer; font-family:var(--wz-sans);
	font-size:17px; font-weight:500; border-radius:3px; padding:15px 26px; line-height:1;
	text-transform:uppercase; letter-spacing:1px;
	transition:background .16s ease, box-shadow .16s ease, color .16s ease;
}
.fbwz .fbwz-btn-primary{ background:var(--wz-teal); color:#fff; flex:1; box-shadow:0 6px 18px rgba(6,186,181,.22); }
.fbwz .fbwz-btn-primary:hover{ background:var(--wz-teal-dark); }
.fbwz .fbwz-btn-primary:disabled{ background:#c7ccd2; box-shadow:none; cursor:not-allowed; }
.fbwz .fbwz-btn-ghost{ background:transparent; color:var(--wz-navy); border:1px solid var(--wz-navy); padding:14px 22px; }
.fbwz .fbwz-btn-ghost:hover{ background:rgba(0,13,27,.05); }

.fbwz-loading{ text-align:center; padding:56px 0; }
.fbwz-spinner{
	display:inline-block; width:30px; height:30px; border:3px solid var(--wz-line);
	border-top-color:var(--wz-teal); border-radius:50%; animation:fbwz-spin .8s linear infinite;
}
@keyframes fbwz-spin{ to{ transform:rotate(360deg); } }
.fbwz-error{
	max-width:680px; margin:40px auto; padding:22px; background:#fff5f5; color:#b3261e;
	border:1px solid #f3c6c2; border-radius:12px; text-align:center; font-family:var(--wz-sans);
}
.fbwz-note{
	display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.5;
	background:#f2fbfb; border:1px solid #cdeeed; color:#1b2430;
	border-radius:10px; padding:11px 14px; margin:0 0 18px;
}
.fbwz-inline-err{ color:#c0392b; font-size:13px; margin:6px 0 0; }

/* ── step 1 · experiences (mirrors the home-page service grid) ──────── */
.fbwz-vessels{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 6px; }
@media(max-width:700px){ .fbwz-vessels{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .fbwz-vessels{ grid-template-columns:1fr; } }
.fbwz-vessel{
	position:relative; display:flex; flex-direction:column; justify-content:flex-end;
	min-height:290px; border-radius:10px; overflow:hidden; cursor:pointer;
	background-size:cover; background-position:center; background-color:#0b1f33;
	border:none; padding:0; width:100%; text-align:left; white-space:normal;
	transition:box-shadow .2s ease, transform .2s ease;
}
.fbwz-vessel *{ white-space:normal; }
.fbwz-vessel-overlay{
	position:absolute; inset:0; z-index:1; background:var(--wz-navy); opacity:.6;
	transition:opacity .3s ease, background .3s ease;
}
.fbwz-vessel:hover{ transform:translateY(-2px); }
.fbwz-vessel:hover .fbwz-vessel-overlay{ opacity:.44; }
.fbwz-vessel.is-selected{ box-shadow:0 0 0 3px var(--wz-teal); }
.fbwz-vessel.is-selected .fbwz-vessel-overlay{
	opacity:1; background:linear-gradient(180deg, rgba(0,13,27,.12) 0%, rgba(0,13,27,.72) 100%);
}
.fbwz-vessel-check{
	position:absolute; top:10px; right:10px; z-index:3; width:26px; height:26px; border-radius:50%;
	background:var(--wz-teal); color:#fff; display:none; align-items:center; justify-content:center;
	font-size:14px; font-weight:700;
}
.fbwz-vessel.is-selected .fbwz-vessel-check{ display:flex; }
.fbwz-vessel-body{
	position:relative; z-index:2; padding:16px 16px 18px;
	display:flex; flex-direction:column; gap:6px;
}
.fbwz-vessel-kicker{
	font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
	color:rgba(255,255,255,.72); font-family:var(--wz-sans);
}
.fbwz-vessel-name{ font-family:var(--wz-serif); font-size:21px; font-weight:500; color:#fff; line-height:1.2; }
.fbwz-vessel-price{ font-size:17px; font-weight:600; color:#fff; margin-top:2px; }
.fbwz-vessel-price small{ display:block; font-weight:400; color:rgba(255,255,255,.72); font-size:13px; }

/* ── guests dropdown (matches the service-details GUESTS field) ──────── */
.fbwz-guests{ display:flex; flex-direction:column; gap:7px; margin:22px 0 4px; }
.fbwz-guests label{
	font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
	color:var(--wz-muted); font-family:var(--wz-sans);
}
.fbwz-select{
	width:100%; padding:14px 15px; border:1.5px solid var(--wz-line); border-radius:8px;
	font-family:var(--wz-sans); font-size:17px; color:var(--wz-ink); background:#fff;
	outline:none; cursor:pointer; transition:border-color .14s, box-shadow .14s;
}
.fbwz-select:hover{ border-color:var(--wz-teal); }
.fbwz-select:focus{ border-color:var(--wz-teal); box-shadow:0 0 0 3px rgba(6,186,181,.16); }
.fbwz-guests-hint{ font-size:14px; color:var(--wz-muted); }

/* ── steppers (shared) ───────────────────────────────────────────────── */
.fbwz-stepper{ display:inline-flex; align-items:center; gap:14px; }
.fbwz-stepper button{
	width:32px; height:32px; border-radius:50%; border:1.5px solid var(--wz-teal); background:#fff;
	color:var(--wz-teal); font-size:17px; line-height:1; cursor:pointer; display:flex;
	align-items:center; justify-content:center; padding:0; transition:background .15s, color .15s;
}
.fbwz-stepper button:hover:not(:disabled){ background:var(--wz-teal); color:#fff; }
.fbwz-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.fbwz-stepper span{ min-width:20px; text-align:center; font-weight:600; font-size:16px; }

/* ── step 2 · calendar ───────────────────────────────────────────────── */
.fbwz-cal-wrap{ border:1px solid var(--wz-line); border-radius:14px; padding:16px; }
.fbwz-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fbwz-cal-head h4{ font-family:var(--wz-serif); font-size:19px; font-weight:500; margin:0; color:var(--wz-navy); }
.fbwz-cal-nav{
	width:32px; height:32px; border-radius:50%; border:1px solid var(--wz-line); background:#fff;
	cursor:pointer; font-size:15px; color:var(--wz-ink);
}
.fbwz-cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.fbwz-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.fbwz-cal-dow{ text-align:center; font-size:12px; font-weight:600; color:var(--wz-muted); padding:4px 0; }
.fbwz-day{
	min-height:60px; border-radius:10px; border:1px solid transparent; background:transparent;
	font-weight:500; color:var(--wz-ink); cursor:default; display:flex; flex-direction:column;
	align-items:center; justify-content:center; gap:3px; padding:5px 2px;
	transition:background .12s, border-color .12s;
}
.fbwz-day-num{ font-size:17px; line-height:1; }
.fbwz-day-price{ font-size:12px; font-weight:600; line-height:1; color:var(--wz-teal-dark); letter-spacing:.2px; }
.fbwz-day.is-empty{ visibility:hidden; }
.fbwz-day.is-available{ background:#fff; border-color:var(--wz-line); cursor:pointer; }
.fbwz-day.is-available:hover{ background:#dff6f5; border-color:var(--wz-teal); }
.fbwz-day.is-weekend{ background:#eef7f7; }
.fbwz-day.is-disabled{ color:#c7ccd2; }
.fbwz-day.is-disabled .fbwz-day-price{ display:none; }
.fbwz-day.is-selected{ background:linear-gradient(135deg,#06BAB5,#0aa6a2); border-color:var(--wz-teal); color:#fff; box-shadow:0 4px 12px rgba(6,186,181,.35); }
.fbwz-day.is-selected .fbwz-day-price{ color:rgba(255,255,255,.85); }
.fbwz-cal-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--wz-muted); }
.fbwz-cal-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

.fbwz-slots-label{ font-size:16px; font-weight:600; color:var(--wz-ink); margin:20px 0 10px; }
.fbwz-slots{ display:flex; flex-wrap:wrap; gap:10px; }
.fbwz-slot{
	border:1.5px solid #bfeceb; background:#f2fbfb; border-radius:22px; padding:10px 18px;
	font-size:16px; font-weight:500; cursor:pointer; color:var(--wz-navy); transition:all .14s ease;
}
.fbwz-slot:hover{ border-color:var(--wz-teal); background:#dff6f5; }
.fbwz-slot.is-selected{ border-color:var(--wz-teal); background:var(--wz-teal); color:#fff; }
.fbwz-slot.is-booked{ text-decoration:line-through; color:#b7bcc2; cursor:not-allowed; background:#f5f4f1; }

/* ── step 3 · add-ons ────────────────────────────────────────────────── */
.fbwz-addons{ display:flex; flex-direction:column; gap:10px; }
.fbwz-addon{
	display:flex; align-items:center; gap:14px; border:1.5px solid var(--wz-line);
	border-radius:12px; padding:12px 14px; background:#fafcfc;
}
.fbwz-addon.is-on{ border-color:var(--wz-teal); background:#f4fbfb; }
.fbwz-addon-thumb{ width:52px; height:52px; border-radius:9px; object-fit:cover; flex:none; background:#eef2f2; }
.fbwz-addon-main{ flex:1; min-width:0; }
.fbwz-addon-name{ font-weight:600; font-size:17px; color:var(--wz-ink); }
.fbwz-addon-desc{ font-size:14px; color:var(--wz-muted); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fbwz-addon-price{ font-weight:600; font-size:16px; color:var(--wz-teal-dark); white-space:nowrap; }
.fbwz-addons-empty{ text-align:center; color:var(--wz-muted); font-size:15px; padding:24px 0; }

/* ── step 4 · details ────────────────────────────────────────────────── */
.fbwz-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.fbwz-field{ display:flex; flex-direction:column; gap:6px; }
.fbwz-field.is-full{ grid-column:1 / -1; }
@media(max-width:520px){ .fbwz-form{ grid-template-columns:1fr; } }
.fbwz-field label{ font-size:14px; font-weight:600; color:var(--wz-ink); }
.fbwz-field label .req{ color:var(--wz-teal-dark); }
.fbwz-input{
	width:100%; padding:13px 14px; border:1.5px solid var(--wz-line); border-radius:9px;
	font-family:var(--wz-sans); font-size:17px; color:var(--wz-ink); background:#fff; outline:none;
	transition:border-color .14s, box-shadow .14s;
}
.fbwz-input:focus{ border-color:var(--wz-teal); box-shadow:0 0 0 3px rgba(6,186,181,.16); }
.fbwz-input.is-error{ border-color:#e2585b; }
textarea.fbwz-input{ min-height:92px; resize:vertical; }
.fbwz-check{
	grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start; font-size:14px;
	color:var(--wz-muted); border:1px solid var(--wz-line); border-radius:10px; padding:12px 14px;
}
.fbwz-check input{ margin-top:2px; accent-color:var(--wz-teal); }

/* ── step 5 · review ─────────────────────────────────────────────────── */
.fbwz-summary{ border:1px solid var(--wz-line); border-radius:14px; overflow:hidden; }
.fbwz-summary-head{
	background:#f6fbfb; padding:12px 16px; font-size:12px; font-weight:700; letter-spacing:1px;
	text-transform:uppercase; color:var(--wz-muted); border-bottom:1px solid var(--wz-line);
}
.fbwz-summary-row{ display:flex; justify-content:space-between; gap:14px; padding:12px 16px; font-size:16px; }
.fbwz-summary-row + .fbwz-summary-row{ border-top:1px solid var(--wz-line-2); }
.fbwz-summary-row span:last-child{ font-weight:600; white-space:nowrap; }
.fbwz-summary-row.is-muted span{ color:var(--wz-muted); font-weight:400; }
.fbwz-summary-row.is-accent span:last-child{ color:var(--wz-accent); }
.fbwz-summary-row.is-total{ border-top:2px solid var(--wz-line); background:#f6fbfb; }
.fbwz-summary-row.is-total span{ font-family:var(--wz-serif); font-size:18px; color:var(--wz-navy); }
.fbwz-summary-row.is-total span:last-child{ color:var(--wz-teal-dark); }

.fbwz-promo{ display:flex; gap:10px; margin:18px 0 6px; }
.fbwz-promo .fbwz-input{ flex:1; }
.fbwz-promo button{
	border:1px solid var(--wz-navy); background:#fff; color:var(--wz-navy); border-radius:9px;
	padding:0 18px; font-size:14px; font-weight:600; cursor:pointer;
}
.fbwz-fineprint{ font-size:13px; color:var(--wz-muted); text-align:center; margin:14px 0 2px; }