/* Cruise (Icon of the Seas) styles, split out of flow_components.css on 2026-10-11
   so cruise merges cannot break shared resort CSS (see css_brace_balance_test.exs).
   Every rule here is scoped to .fs-cruise*. Loaded after flow_components.css. */
/* ═══════════════════════════════════════════════════════════════════════
   Cruise S4 (docs/plans/cruise-ultra-ui.md, C1 and C2). Component:
   FlowstayWeb.DesignSystem.DesktopWebExperience.Scenes.Cruise. Every rule is
   scoped under .fs-cruise; values follow the v3 mockup (build.py, base.css).
   ═══════════════════════════════════════════════════════════════════════ */
.fs-cruise {
  --cr-gold: var(--flow-gold, #d4a853);
  --cr-gold-40: rgba(212, 168, 83, 0.4);
  --cr-gold-08: rgba(212, 168, 83, 0.08);
  --cr-card: #1d1d1d;
  --cr-ink: rgba(255, 255, 255, 0.92);
  --cr-ink-2: rgba(255, 255, 255, 0.72);
  --cr-ink-3: rgba(255, 255, 255, 0.5);
  --cr-ink-4: rgba(255, 255, 255, 0.35);
  --cr-line: rgba(255, 255, 255, 0.1);
  --cr-line-2: rgba(255, 255, 255, 0.06);
  --cr-serif: var(--flow-font-display, 'Cormorant Garamond', Georgia, serif);
  font-family: var(--flow-font-ui, 'DM Sans', sans-serif);
  font-variant-numeric: lining-nums;
  color: var(--cr-ink);
  height: 100%;
  overflow-y: auto;
  padding: 22px 32px 18px;
  box-sizing: border-box;
  position: relative;
}
.fs-cruise *, .fs-cruise *::before, .fs-cruise *::after { box-sizing: border-box; }
/* :where keeps this reset at zero specificity so .fs-cruise-chip and
   .fs-cruise-btn set their own size on a button. */
.fs-cruise :where(button) { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fs-cruise-eyebrow { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cr-gold); font-weight: 700; }
.fs-cruise-h2 { font-family: var(--cr-serif); font-weight: 600; font-size: 34px; line-height: 1.1; margin: 6px 0 0; color: var(--cr-ink); }
.fs-cruise-sml { font-size: 12.5px; color: var(--cr-ink-2); margin: 4px 0 0; }
.fs-cruise-loading { padding: 40px 0; }
.fs-cruise-error { margin-top: 10px; font-size: 12.5px; color: #e8a34a; }
.fs-cruise-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fs-cruise-chip { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cr-line); font-size: 12.5px; color: var(--cr-ink); font-weight: 500; background: rgba(255, 255, 255, 0.02); white-space: nowrap; }
.fs-cruise-chip.is-on { border-color: var(--cr-gold-40); background: var(--cr-gold-08); }
.fs-cruise-chip.is-ghost { color: var(--cr-ink-3); }
.fs-cruise-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-gold); }
.fs-cruise-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 11px; border: 1px solid var(--cr-gold); background: var(--cr-gold); color: #1a1408 !important; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.fs-cruise-btn.is-chosen { background: var(--cr-gold-08); color: var(--cr-gold) !important; border-color: var(--cr-gold-40); }
.fs-cruise-tag { display: inline-block; line-height: 1.4; font-size: 11px; padding: 3px 9px; border-radius: 6px; color: var(--cr-gold); border: 1px solid rgba(212, 168, 83, 0.25); background: var(--cr-gold-08); margin-bottom: 6px; }
.fs-cruise-label { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-ink-4); }
.fs-cruise-price { display: block; font-family: var(--cr-serif); font-weight: 600; color: var(--cr-gold); font-size: 26px; line-height: 1.1; }
.fs-cruise-price.is-out { color: var(--cr-ink-3); font-size: 20px; }
.fs-cruise-per { display: block; font-size: 11px; color: var(--cr-ink-3); }
/* C1 */
.fs-cruise-c1 { display: grid; grid-template-columns: 1fr 470px; gap: 30px; min-height: 100%; }
.fs-cruise-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fs-cruise-sail { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); width: 100%; }
.fs-cruise-sail:hover { border-color: var(--cr-gold-40); }
.fs-cruise-sail.is-on { border-color: var(--cr-gold-40); background: linear-gradient(90deg, rgba(212, 168, 83, 0.09), rgba(212, 168, 83, 0.03)); box-shadow: inset 3px 0 0 var(--cr-gold); }
.fs-cruise-sail-date { text-align: center; border-right: 1px solid var(--cr-line-2); padding-right: 14px; }
.fs-cruise-sail-date b { display: block; font-family: var(--cr-serif); font-size: 34px; font-weight: 600; line-height: 1; }
.fs-cruise-sail-date span { display: block; white-space: nowrap; font-size: 9.5px; letter-spacing: 0.14em; color: var(--cr-ink-3); margin-top: 3px; }
.fs-cruise-sail-title { display: block; font-family: var(--cr-serif); font-size: 23px; font-weight: 600; }
.fs-cruise-sail-title small { font-family: var(--flow-font-ui, 'DM Sans', sans-serif); font-size: 12px; color: var(--cr-ink-3); font-weight: 500; margin-left: 8px; }
.fs-cruise-sail-route { display: block; font-size: 12.5px; color: var(--cr-ink-2); margin-top: 4px; }
.fs-cruise-sail-price { text-align: right; }
.fs-cruise-st3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.fs-cruise-st3 > div { border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); padding: 13px 16px; }
.fs-cruise-st3 b { display: block; font-family: var(--cr-serif); font-size: 26px; font-weight: 600; color: var(--cr-gold); font-variant-numeric: lining-nums; line-height: 1.15; }
.fs-cruise-st3 span { font-size: 12px; color: var(--cr-ink-2); }
.fs-cruise-fine { font-size: 11.5px; color: var(--cr-ink-4); margin-top: 12px; }
.fs-cruise-map { position: relative; overflow: hidden; min-height: 560px; border: 1px solid var(--cr-line); border-radius: 14px; background: #0f1720; }
.fs-cruise-map-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(10, 14, 20, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--cr-line); }
.fs-cruise-map-title { font-family: var(--cr-serif); font-size: 24px; font-weight: 600; margin-top: 2px; }
.fs-cruise-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fs-cruise-chart-land { fill: #1b2630; }
.fs-cruise-chart-route { fill: none; stroke: #d4a853; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fs-cruise-chart-pin { fill: #d4a853; }
.fs-cruise-chart-label { fill: rgba(255, 255, 255, 0.75); font-size: 13px; }
.fs-cruise-chart-label.is-accent { fill: #e6bd6a; }
.fs-cruise-c2h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.fs-cruise-c2r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fs-cruise-days { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.fs-cruise-day { border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); overflow: hidden; height: 420px; display: flex; flex-direction: column; }
.fs-cruise-day-label { font-size: 10.5px; letter-spacing: 0.16em; color: var(--cr-ink-3); font-weight: 700; padding: 12px 12px 8px; }
.fs-cruise-day-img { display: block; height: 240px; flex: none; background: #111 center / cover no-repeat; }
.fs-cruise-day-title { font-family: var(--cr-serif); font-size: 20px; font-weight: 600; padding: 12px 12px 0; line-height: 1.1; }
.fs-cruise-day-note { font-size: 11.5px; color: var(--cr-ink-3); padding: 6px 12px; }
.fs-cruise-day.is-key { border-color: var(--cr-gold-40); }
.fs-cruise-day.is-key .fs-cruise-day-label { color: var(--cr-gold); }
.fs-cruise-day.is-sea .fs-cruise-day-img { filter: saturate(0.6) brightness(0.8); }
.fs-cruise-day.is-embark .fs-cruise-day-img { filter: grayscale(0.3) brightness(0.7); }
.fs-cruise-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.fs-cruise-tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--cr-line-2); font-size: 12.5px; color: var(--cr-ink-2); line-height: 1.5; }
.fs-cruise-tip b { color: var(--cr-gold); white-space: nowrap; }
/* C3 (Cruise v4 V3): class tabs, then the class's sub-types for the party, guarantees first */
.fs-cruise-stn { display: block; font-family: var(--cr-serif); font-size: 28px; font-weight: 600; line-height: 1.1; }
.fs-cruise-stprice { display: inline-block; font-family: var(--cr-serif); font-weight: 600; color: var(--cr-gold); font-size: 26px; line-height: 1; }
.fs-cruise-stprice.is-out { font-size: 20px; font-weight: 500; color: var(--cr-ink-3); }
.fs-cruise-c3h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.fs-cruise-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--cr-line); background: rgba(255, 255, 255, 0.03); }
.fs-cruise-tab { border: 0; background: transparent; color: var(--cr-ink-2); font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.fs-cruise-tab b { font-weight: 600; color: var(--cr-ink-3); margin-left: 4px; }
.fs-cruise-tab.is-on { background: var(--cr-gold); color: #1a1408; }
.fs-cruise-tab.is-on b { color: #1a1408; }
.fs-cruise-tab.is-sold { color: var(--cr-ink-4); }
.fs-cruise-c3note { margin: 14px 0 0; color: var(--cr-ink-3); }
.fs-cruise-c3g { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-top: 20px; }
.fs-cruise-subg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fs-cruise-sub { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--cr-line); background: var(--cr-card); display: flex; flex-direction: column; padding: 0; width: 100%; text-align: left; color: inherit; cursor: pointer; }
.fs-cruise-sub:not(.is-sold):hover { border-color: var(--cr-gold-40); }
.fs-cruise-sub.is-on { border-color: var(--cr-gold); box-shadow: 0 0 0 1px var(--cr-gold); }
.fs-cruise-sub.is-sold, .fs-cruise-sub:disabled { cursor: not-allowed; }
.fs-cruise-sub.is-sold .fs-cruise-subi { filter: grayscale(0.85) brightness(0.55); }
.fs-cruise-subi { position: relative; display: block; height: 130px; flex: none; background: #111 center / cover no-repeat; }
.fs-cruise-gtag { position: absolute; top: 10px; left: 10px; background: var(--cr-gold); color: #1a1408; font-size: 9.5px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.fs-cruise-ltag { position: absolute; top: 10px; right: 10px; background: rgba(10, 14, 20, 0.78); color: #e8a34a; border: 1px solid rgba(232, 163, 74, 0.5); font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.fs-cruise-subb { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1 1 auto; }
.fs-cruise-subk { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cr-ink-4); font-weight: 700; }
.fs-cruise-sub.is-guarantee .fs-cruise-subk { color: var(--cr-gold); }
.fs-cruise-subn { font-family: var(--cr-serif); font-size: 19px; font-weight: 600; line-height: 1.15; }
.fs-cruise-vcs { display: flex; flex-wrap: wrap; gap: 5px; }
.fs-cruise-vc { font-size: 10.5px; color: var(--cr-ink-2); border: 1px solid var(--cr-line); border-radius: 999px; padding: 2px 8px; }
.fs-cruise-spr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: auto; padding-top: 6px; }
.fs-cruise-spr .fs-cruise-per { display: inline; }
.fs-cruise-tr { flex-basis: 100%; font-size: 11px; color: var(--cr-ink-3); }
.fs-cruise-c3s { display: flex; flex-direction: column; gap: 12px; }
.fs-cruise-side { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); padding: 14px 16px; }
.fs-cruise-side > .fs-cruise-label { margin-bottom: 10px; color: var(--cr-ink-3); }
.fs-cruise-inf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-cruise-infc { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fs-cruise-infc figcaption { font-size: 12.5px; font-weight: 600; color: var(--cr-ink); }
.fs-cruise-infc .fs-cruise-sml { margin: 0; font-size: 11px; color: var(--cr-ink-3); }
.fs-cruise-infd { display: flex; height: 54px; border: 1px solid var(--cr-line); border-radius: 6px; overflow: hidden; }
.fs-cruise-infd i { display: block; }
.fs-cruise-infd .is-room { flex: 3; background: rgba(255, 255, 255, 0.06); }
.fs-cruise-infd .is-bal { flex: 1; background: rgba(212, 168, 83, 0.25); border-left: 2px solid var(--cr-gold); }
.fs-cruise-infc.is-infinite .is-room { flex: 3; }
.fs-cruise-infc.is-infinite .is-bal { flex: 1; background: repeating-linear-gradient(90deg, rgba(212, 168, 83, 0.25) 0 6px, rgba(212, 168, 83, 0.08) 6px 12px); border-left: 2px dashed var(--cr-gold); }
.fs-cruise-tiers { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--cr-ink-2); }
.fs-cruise-tiers b { display: block; color: var(--cr-gold); font-size: 12.5px; }
.fs-cruise-quote { margin: 0; font-family: var(--cr-serif); font-size: 15px; line-height: 1.4; color: var(--cr-ink-2); }
.fs-cruise-c3f { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; }
.fs-cruise-c3f .fs-cruise-sml { margin: 0; flex: 1 1 auto; color: var(--cr-ink-3); }
/* C2p (Cruise v4 V2): party size, room by room, and the four classes for that party */
.fs-cruise-c2p { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.fs-cruise-c2p-l { display: flex; flex-direction: column; gap: 14px; }
.fs-cruise-c2p-l .fs-cruise-h2 { margin-bottom: 4px; }
.fs-cruise-src { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 9px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: #6fcf8e; border: 1px solid rgba(111, 207, 142, 0.45); border-radius: 999px; padding: 1px 7px; }
.fs-cruise-room { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); padding: 16px 20px 12px; }
.fs-cruise-room-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; }
.fs-cruise-room-h .fs-cruise-sml { margin: 0; }
.fs-cruise-room > .fs-cruise-row:last-child, .fs-cruise-room > .fs-cruise-row:nth-last-child(2):has(+ .fs-cruise-link) { border-bottom: 0; }
.fs-cruise-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cr-line-2); }
.fs-cruise-row b { display: block; font-size: 15px; font-weight: 600; color: var(--cr-ink); }
.fs-cruise-row .fs-cruise-sml { display: block; margin: 2px 0 0; color: var(--cr-ink-3); }
.fs-cruise-ctr { display: inline-flex; align-items: center; gap: 18px; }
.fs-cruise-ctr > b { min-width: 18px; text-align: center; font-family: var(--cr-serif); font-size: 24px; font-weight: 600; }
.fs-cruise-ctrb { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cr-gold-40); color: var(--cr-gold); background: transparent; font-size: 16px; line-height: 1; }
.fs-cruise-ctrb:disabled { border-color: var(--cr-line); color: var(--cr-ink-4); cursor: not-allowed; }
.fs-cruise-switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; border: 1px solid var(--cr-line); background: rgba(255, 255, 255, 0.08); padding: 0; }
.fs-cruise-switch > span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cr-ink-2); transition: left 0.15s ease; }
.fs-cruise-switch.is-on { background: var(--cr-gold-08); border-color: var(--cr-gold-40); }
.fs-cruise-switch.is-on > span { left: 21px; background: var(--cr-gold); }
.fs-cruise-link { align-self: flex-start; background: none; border: 0; padding: 10px 0 2px; color: var(--cr-gold); font-size: 13.5px; font-weight: 600; }
.fs-cruise-offer { margin: 0; padding: 12px 16px; border: 1px dashed var(--cr-gold-40); border-radius: 11px; font-size: 12.5px; color: var(--cr-ink-2); }
.fs-cruise-offer b { color: var(--cr-gold); font-weight: 600; }
.fs-cruise-c2p-r { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--cr-line); border-radius: 16px; background: rgba(255, 255, 255, 0.015); padding: 18px 20px; }
.fs-cruise-c2p-r > .fs-cruise-label { margin-bottom: 4px; color: var(--cr-ink-3); }
.fs-cruise-pc { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); }
.fs-cruise-pci { display: block; width: 84px; height: 58px; border-radius: 6px; background: #111 center / cover no-repeat; }
.fs-cruise-pct { display: block; min-width: 0; }
.fs-cruise-pct .fs-cruise-stn { font-size: 21px; }
.fs-cruise-pct .fs-cruise-sml { display: block; margin: 2px 0 0; color: var(--cr-ink-3); }
.fs-cruise-pcp { text-align: right; padding-right: 4px; }
.fs-cruise-pcp .fs-cruise-price { font-size: 22px; }
.fs-cruise-c2p-r[data-priced="false"] .fs-cruise-pcp .fs-cruise-per { color: var(--cr-ink-3); font-style: italic; }
.fs-cruise-c2p-f { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--cr-line); }
.fs-cruise-c2p-f > p { margin: 0; flex: 1 1 auto; }
.fs-cruise-c2p-f .fs-cruise-btn:disabled { background: transparent; color: var(--cr-ink-4) !important; border-color: var(--cr-line); cursor: not-allowed; }
.fs-cruise-from { display: block; font-size: 11px; color: var(--cr-ink-3); margin-top: 2px; }
.fs-cruise-from b:first-child { font-family: var(--cr-serif); font-size: 30px; font-weight: 600; color: var(--cr-gold); }
.fs-cruise-from b + b { font-size: 14px; color: var(--cr-ink); }
.fs-cruise-c2p-r > [data-part="stamp"] { color: var(--cr-ink-4); margin: 0; }
/* C4 (Cruise v4 V4): Royal's deck selector, our drawing of the rows around the category, list view. */
.fs-cruise-c4 { display: grid; grid-template-columns: 1fr 380px; gap: 28px; min-height: 100%; }
.fs-cruise-c4-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fs-cruise-seg { display: inline-flex; padding: 3px; border: 1px solid var(--cr-line); border-radius: 999px; flex: none; }
.fs-cruise-seg-b { background: transparent; border: 0; color: var(--cr-ink-3); font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.fs-cruise-seg-b.is-on { background: rgba(255, 255, 255, 0.08); color: var(--cr-ink); }
.fs-cruise-c4-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.fs-cruise-decksel { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(212, 168, 83, 0.4); border-radius: 10px; margin: 0; }
.fs-cruise-decksel select { background: transparent; color: var(--cr-ink); border: 0; font-size: 14px; padding: 2px 4px; cursor: pointer; }
.fs-cruise-decksel select option { background: #141c24; color: var(--cr-ink); }
.fs-cruise-filter { display: flex; align-items: center; gap: 10px; }
.fs-cruise-lost { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(232, 130, 110, 0.45); background: rgba(232, 130, 110, 0.08); font-size: 13px; color: var(--cr-ink-2); }
.fs-cruise-lost b { color: var(--cr-ink); }
.fs-cruise-dkw { margin-top: 16px; padding: 18px 18px 14px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-deck { width: 100%; display: block; }
.fs-cruise-deck-park { fill: rgba(111, 207, 142, 0.08); stroke: rgba(111, 207, 142, 0.35); }
.fs-cruise-deck-park-text { fill: rgba(150, 220, 170, 0.85); font-size: 11px; letter-spacing: 3px; }
.fs-cruise-deck-text { fill: rgba(255, 255, 255, 0.45); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; }
.fs-cruise-deck-focus { fill: #d4a853; font-size: 12px; font-weight: 600; }
.fs-cruise-cb { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.1); }
.fs-cruise-cb.is-available { fill: rgba(212, 168, 83, 0.16); stroke: rgba(212, 168, 83, 0.75); cursor: pointer; }
.fs-cruise-cb.is-available:hover { fill: rgba(212, 168, 83, 0.32); }
.fs-cruise-cb.is-selected { fill: #d4a853; stroke: #f0cf88; cursor: pointer; }
.fs-cruise-lg { display: flex; gap: 20px; align-items: center; font-size: 11.5px; color: var(--cr-ink-3); margin-top: 10px; }
.fs-cruise-lg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.fs-cruise-lg i.is-selected { background: #d4a853; }
.fs-cruise-lg i.is-available { background: rgba(212, 168, 83, 0.16); border: 1px solid rgba(212, 168, 83, 0.75); }
.fs-cruise-lg i.is-unavailable { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.14); }
.fs-cruise-cablist { width: 100%; border-collapse: collapse; font-size: 14px; }
.fs-cruise-cablist th { text-align: left; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-ink-4); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--cr-line); }
.fs-cruise-cablist td { padding: 10px; border-bottom: 1px solid var(--cr-line); color: var(--cr-ink); }
.fs-cruise-cablist tr.is-on td { color: var(--cr-gold); }
.fs-cruise-cablist td:last-child { text-align: right; }
.fs-cruise-src.is-flo { color: #d4a853; border-color: rgba(212, 168, 83, 0.5); }
.fs-cruise-src.is-faq { color: #8fc3e8; border-color: rgba(143, 195, 232, 0.45); }
.fs-cruise-src.is-demo { color: #b9b4ff; border-color: rgba(185, 180, 255, 0.5); }
.fs-cruise-src.is-secondary { color: #e8c46a; border-color: rgba(232, 196, 106, 0.5); border-style: dashed; }
.fs-cruise-others-label { margin-top: 18px; }
.fs-cruise-others-label + .fs-cruise-chips { margin-top: 10px; }
.fs-cruise-cabc { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); overflow: hidden; align-self: start; }
.fs-cruise-cabc-img { height: 210px; background: #111 center / cover no-repeat; }
.fs-cruise-cabc-in { padding: 18px 20px; }
.fs-cruise-cabc-n { font-family: var(--cr-serif); font-weight: 600; font-size: 28px; line-height: 1.1; }
.fs-cruise-kv { display: grid; grid-template-columns: 130px 1fr; gap: 12px 0; align-items: baseline; margin: 18px 0 0; font-size: 14px; }
.fs-cruise-kv dt { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-ink-4); }
.fs-cruise-kv dd { margin: 0; color: var(--cr-ink); }
.fs-cruise-acts { display: flex; gap: 10px; margin-top: 22px; }
.fs-cruise-btn.is-quiet { background: transparent; color: var(--cr-ink) !important; border-color: var(--cr-line); }
.fs-cruise-cabc-tip { margin-top: 16px; }
.fs-cruise-c4 .fs-cruise-cabc-img { height: 150px; }
.fs-cruise-c4 .fs-cruise-chips .fs-cruise-src { align-self: center; }
.fs-cruise-c4 .fs-cruise-kv { grid-template-columns: 96px 1fr; gap: 8px 0; margin-top: 12px; }
.fs-cruise-cabc-tip b { white-space: normal; }
/* Cruise S6, C5 who's sailing and the extras (mockup .c5, .g, .rt, .xo, .sw, .note). */
.fs-cruise-c5 { display: grid; grid-template-columns: 1fr 420px; gap: 30px; }
.fs-cruise-guests { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.fs-cruise-g { padding: 18px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-g-nm { font-family: var(--cr-serif); font-weight: 600; font-size: 24px; line-height: 1.1; }
.fs-cruise-g-q { margin-top: 14px; }
.fs-cruise-g-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.fs-cruise-dining-label { margin-top: 22px; }
.fs-cruise-rt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; padding: 18px 20px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-rv { font-family: var(--cr-serif); font-size: 28px; font-weight: 600; margin-top: 4px; }
.fs-cruise-rv.is-gold { color: var(--cr-gold); }
.fs-cruise-rtt { border-left: 1px solid var(--cr-line); padding-left: 16px; }
.fs-cruise-ext { display: flex; flex-direction: column; gap: 12px; }
.fs-cruise-xo { display: grid; grid-template-columns: 1fr auto 46px; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); width: 100%; }
.fs-cruise-xo.is-on { border-color: var(--cr-gold-40); background: var(--cr-gold-08); }
.fs-cruise-xo-t, .fs-cruise-xo-p { display: flex; flex-direction: column; }
.fs-cruise-xo-p { align-items: flex-end; }
.fs-cruise-xo-w { font-family: var(--cr-serif); font-size: 23px; font-weight: 600; line-height: 1.15; }
.fs-cruise-xo-d { font-size: 12.5px; color: var(--cr-ink-3); margin-top: 3px; }
.fs-cruise-xo-price { font-family: var(--cr-serif); font-size: 24px; font-weight: 600; color: var(--cr-gold); }
.fs-cruise-xo-pp { font-size: 11px; color: var(--cr-ink-3); }
.fs-cruise-sw { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.fs-cruise-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #bbb; transition: left 0.15s ease; }
.fs-cruise-sw.is-on { background: var(--cr-gold); }
.fs-cruise-sw.is-on::after { left: 21px; background: #1a1408; }
.fs-cruise-note { display: flex; gap: 10px; padding: 12px 14px; border: 1px dashed rgba(212, 168, 83, 0.35); border-radius: 10px; font-size: 12.5px; color: var(--cr-ink-2); line-height: 1.5; }
.fs-cruise-note > span:first-child { color: var(--cr-gold); }
.fs-cruise-note b { color: var(--cr-gold); font-weight: 600; }
@media (max-width: 900px) {
  .fs-cruise-c5 { grid-template-columns: 1fr; }
  .fs-cruise-rt { grid-template-columns: repeat(2, 1fr); }
}
.fs-cruise-c5-acts { justify-content: flex-end; margin-top: 4px; }
/* Cruise v4 V5, C5 Royal's guest fields with the Demo personas, Flo's notes. */
.fs-cruise-c5-sub { margin-top: 6px; }
.fs-cruise-g-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fs-cruise-g-role { font-size: 11.5px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--cr-line); color: var(--cr-ink-2); }
.fs-cruise-g-role.is-lead { color: var(--cr-gold); border-color: var(--cr-gold-40); }
.fs-cruise-g-hd .fs-cruise-src { margin-right: auto; }
.fs-cruise-g-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fs-cruise-gf { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border: 1px solid var(--cr-line); border-radius: 9px; min-width: 0; }
.fs-cruise-gf.is-wide { grid-column: 1 / 3; }
.fs-cruise-gf-l { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-cruise-gf-v { font-size: 14px; color: var(--cr-ink); }
.fs-cruise-gf.is-empty .fs-cruise-gf-v { color: var(--cr-ink-4); }
.fs-cruise-g-fcc { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; color: var(--cr-ink-2); }
.fs-cruise-c5-notes { padding: 20px; border: 1px dashed rgba(212, 168, 83, 0.35); border-radius: 14px; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.fs-cruise-c5-notes-e { color: var(--cr-ink-3); }
.fs-cruise-c5-note { padding: 12px 0; border-bottom: 1px solid var(--cr-line-2); }
.fs-cruise-c5-note-t { font-family: var(--cr-serif); font-size: 20px; font-weight: 600; }
.fs-cruise-c5-notes .fs-cruise-tip { margin-top: 10px; }
.fs-cruise-c5-notes .fs-cruise-tip b { white-space: normal; }
/* Cruise v4 V5, C5x the add-ons, dining and the estimated total. */
.fs-cruise-c5x .fs-cruise-ext { margin-top: 14px; }
.fs-cruise-c5x-side { display: flex; flex-direction: column; gap: 14px; }
.fs-cruise-card { padding: 18px 20px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-card > .fs-cruise-sml { margin-top: 10px; line-height: 1.5; }
.fs-cruise-xo-price.is-later { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--cr-ink-2); white-space: nowrap; }
/* Cruise S6b, C6 review and hold (mockup .s5, .itin, .it, .sum, .ln, .pay, .policy, .simnote). */
.fs-cruise-c6 { display: grid; grid-template-columns: 1fr 410px; gap: 30px; }
.fs-cruise-itin, .fs-cruise-sum { padding: 22px 24px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); align-self: start; }
.fs-cruise-it { display: grid; grid-template-columns: 78px 18px 1fr auto; gap: 14px; align-items: start; padding: 11px 0; }
.fs-cruise-it-t { font-size: 13px; color: var(--cr-ink-3); font-variant-numeric: tabular-nums; padding-top: 3px; text-align: right; }
.fs-cruise-it-rail { position: relative; height: 100%; }
.fs-cruise-it-rail::before { content: ""; position: absolute; left: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--cr-ink-4); background: var(--cr-card); transform: translateX(-50%); }
.fs-cruise-it.is-key .fs-cruise-it-rail::before { border-color: var(--cr-gold); background: var(--cr-gold); }
.fs-cruise-it-rail::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: -22px; width: 1px; background: var(--cr-line); }
.fs-cruise-it:last-of-type .fs-cruise-it-rail::after { display: none; }
.fs-cruise-it-w { font-family: var(--cr-serif); font-weight: 600; font-size: 22px; line-height: 1.15; }
.fs-cruise-it.is-key .fs-cruise-it-w { color: var(--cr-gold); }
.fs-cruise-it-d { font-size: 12.5px; color: var(--cr-ink-3); margin-top: 3px; }
.fs-cruise-it-thumb { width: 84px; height: 56px; border-radius: 8px; background: #111 center / cover no-repeat; }
.fs-cruise-ln { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--cr-ink-2); padding: 9px 0; border-bottom: 1px solid var(--cr-line-2); }
.fs-cruise-ln.is-total { border: 0; align-items: baseline; padding-top: 14px; }
.fs-cruise-ln.is-total .fs-cruise-price { font-size: 34px; }
.fs-cruise-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-cruise-perday { margin-top: 4px; color: var(--cr-ink-3); }
.fs-cruise-pay { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.fs-cruise-pay-o { height: 48px; border-radius: 11px; border: 1px solid var(--cr-line); background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; font-size: 14px; font-weight: 600; width: 100%; }
.fs-cruise-pay-o:not(.is-off):hover { border-color: var(--cr-gold-40); }
.fs-cruise-pay-o.is-on { border-color: var(--cr-gold-40); background: var(--cr-gold-08); }
.fs-cruise-pay-o small { font-weight: 400; color: var(--cr-ink-3); font-size: 12px; white-space: nowrap; }
.fs-cruise-pay-o.is-off { cursor: not-allowed; color: var(--cr-ink-3); }
.fs-cruise-policy { font-size: 12px; color: var(--cr-ink-3); margin: 12px 0 0; line-height: 1.5; }
.fs-cruise-policy b { color: var(--cr-ink-2); font-weight: 600; }
.fs-cruise-hold-btn { width: 100%; margin-top: 14px; }
.fs-cruise-ln.is-due { border: 0; padding-top: 2px; font-weight: 600; color: var(--cr-ink); }
.fs-cruise-policy .is-lead { color: var(--cr-ink-2); font-weight: 600; }
.fs-cruise-cxl { margin-top: 14px; }
.fs-cruise-simnote { margin: 12px 0 0; font-size: 10.5px; letter-spacing: 0.12em; color: var(--cr-ink-4); border-top: 1px dashed var(--cr-line); padding-top: 10px; }
/* Cruise S6b, C7 on hold and what's next (mockup .s6, .ok, .ref, .held, .hold, .tm2, .cd, .lad, .nx, .next). */
.fs-cruise-c7 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.fs-cruise-ok { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--cr-gold); display: grid; place-items: center; color: var(--cr-gold); font-size: 24px; }
.fs-cruise-c7-h { margin-top: 18px; }
.fs-cruise-ref { font-family: var(--cr-serif); font-size: 20px; color: var(--cr-ink-2); margin-top: 10px; }
.fs-cruise-ref b { color: var(--cr-gold); letter-spacing: 0.06em; }
.fs-cruise-hold { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-held { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: #5fd17a; text-transform: uppercase; }
.fs-cruise-held i { width: 7px; height: 7px; border-radius: 50%; background: #5fd17a; box-shadow: 0 0 0 4px rgba(95, 209, 122, 0.15); }
.fs-cruise-held.is-lapsed { color: #e8a34a; }
.fs-cruise-held.is-lapsed i { background: #e8a34a; box-shadow: 0 0 0 4px rgba(232, 163, 74, 0.15); }
.fs-cruise-tm2 { font-family: var(--cr-serif); font-size: 40px; font-weight: 600; color: #5fd17a; margin: 4px 0; font-variant-numeric: lining-nums tabular-nums; }
.fs-cruise-cd { margin-top: 22px; }
.fs-cruise-cdn { font-family: var(--cr-serif); font-size: 64px; font-weight: 600; color: var(--cr-gold); line-height: 1; }
.fs-cruise-cdn span { font-size: 24px; color: var(--cr-ink-3); }
.fs-cruise-cd .fs-cruise-sml { margin-top: 10px; }
.fs-cruise-lad-label { margin-top: 24px; }
.fs-cruise-lad { margin-top: 8px; }
.fs-cruise-li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cr-line); font-size: 13.5px; color: var(--cr-ink); }
.fs-cruise-li i { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-gold); flex: none; }
.fs-cruise-li em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--cr-ink-3); }
.fs-cruise-nx { display: grid; grid-template-rows: 1.4fr 1fr; grid-template-columns: 1fr 1fr; gap: 14px; height: 600px; }
.fs-cruise-next { display: block; width: 100%; padding: 0; background: none; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--cr-line); min-height: 160px; }
.fs-cruise-next:not(:disabled):hover { border-color: var(--cr-gold-40); }
.fs-cruise-next:disabled { cursor: default; }
.fs-cruise-next:first-child { grid-column: 1 / 3; }
.fs-cruise-next::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(6, 8, 12, 0.72) 68%, rgba(6, 8, 12, 0.95)); }
.fs-cruise-next-img { display: block; position: absolute; inset: 0; background: #111 center / cover no-repeat; }
.fs-cruise-next-t { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; }
.fs-cruise-next-w { display: block; font-family: var(--cr-serif); font-weight: 600; font-size: 28px; line-height: 1.1; margin-top: 4px; }
.fs-cruise-next.is-small .fs-cruise-next-w { font-size: 22px; }
.fs-cruise-next .fs-cruise-sml { display: block; color: var(--cr-ink-2); }
@media (max-width: 900px) {
  .fs-cruise-c6, .fs-cruise-c7 { grid-template-columns: 1fr; }
  .fs-cruise-nx { height: auto; grid-template-rows: none; grid-auto-rows: 220px; }
  .fs-cruise-it { grid-template-columns: 64px 18px 1fr; }
  .fs-cruise-it > div:last-child { display: none; }
  .fs-cruise-c6 .fs-cruise-st3 { grid-template-columns: 1fr; }
}
/* Cruise voyage planner (S8): C8 planner home, C9 port day. Values follow
   the v3 mockup (build.py C8/C9, base.css .tl/.blk/.held/.alert). */
.fs-cruise-c8 { display: grid; grid-template-columns: 400px 1fr; gap: 34px; min-height: 100%; }
.fs-cruise-c8e { max-width: 520px; padding-top: 40px; }
.fs-cruise-c8e-btn { margin-top: 20px; }
.fs-cruise-prog2 { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin-top: 18px; overflow: hidden; }
.fs-cruise-prog2 div { height: 100%; background: var(--cr-gold); }
.fs-cruise-cks { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.fs-cruise-ck { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; width: 100%; padding: 11px 14px; border: 1px solid var(--cr-line-2); border-radius: 11px; background: var(--cr-card); }
button.fs-cruise-ck:hover { border-color: var(--cr-gold-40); }
.fs-cruise-ck i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cr-ink-4); }
.fs-cruise-ck.is-done i { background: #5fd17a; border-color: #5fd17a; box-shadow: 0 0 0 3px rgba(95, 209, 122, 0.15); }
.fs-cruise-ck-w { display: block; font-size: 14px; font-weight: 600; }
.fs-cruise-ck-d { display: block; font-size: 12px; color: var(--cr-ink-3); }
.fs-cruise-ck.is-done .fs-cruise-ck-w { color: var(--cr-ink-2); }
.fs-cruise-wk-label { font-size: 10.5px; letter-spacing: 0.14em; color: var(--cr-ink-3); font-weight: 600; }
.fs-cruise-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 12px; }
.fs-cruise-wd { border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); padding: 0 10px 12px; height: 420px; overflow: hidden; }
.fs-cruise-wim { height: 150px; margin: 0 -10px 12px; background: #111 center / cover no-repeat; }
.fs-cruise-wh { font-size: 10.5px; letter-spacing: 0.16em; color: var(--cr-gold); font-weight: 700; }
.fs-cruise-wp { font-family: var(--cr-serif); font-size: 19px; font-weight: 600; margin: 4px 0 12px; line-height: 1.1; }
.fs-cruise-wi { display: block; width: 100%; font-size: 11.5px; padding: 8px 9px; border-radius: 8px; background: var(--cr-gold-08); border: 1px solid rgba(212, 168, 83, 0.25); margin-top: 6px; }
.fs-cruise-wi.is-open { background: transparent; border-style: dashed; border-color: var(--cr-line); color: var(--cr-ink-3); }
button.fs-cruise-wi:hover { border-color: var(--cr-gold-40); }
.fs-cruise-heart { color: var(--cr-gold); }
.fs-cruise-c8-tip { margin-top: 16px; }
.fs-cruise-c8-tip span { margin-left: 4px; }
.fs-cruise-c9-day { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-tl { position: relative; height: 60px; margin: 12px 14px 0; }
.fs-cruise-axis { position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: var(--cr-line); }
.fs-cruise-tick { position: absolute; top: 36px; font-size: 10px; color: var(--cr-ink-4); transform: translateX(-50%); white-space: nowrap; }
.fs-cruise-blk { position: absolute; top: 8px; height: 24px; border-radius: 6px; font-size: 11px; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.fs-cruise-blk.is-th { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cr-line); color: var(--cr-ink-2); }
.fs-cruise-blk.is-tr { background: var(--cr-gold); color: #1a1408; font-weight: 700; }
.fs-cruise-blk.is-lo { background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--cr-line); color: var(--cr-ink-3); }
.fs-cruise-blk.is-dn { background: rgba(120, 160, 255, 0.12); border: 1px solid rgba(120, 160, 255, 0.3); color: #b9cbff; }
.fs-cruise-blk.is-dn { left: auto !important; right: 0; min-width: max-content; }
.fs-cruise-buf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.fs-cruise-buf .fs-cruise-sml { margin: 0; color: var(--cr-ink-3); }
.fs-cruise-held.is-warn { color: #e8a34a; }
.fs-cruise-held.is-warn i { background: #e8a34a; box-shadow: 0 0 0 4px rgba(232, 163, 74, 0.15); }
.fs-cruise-held.is-open { color: var(--cr-ink-3); }
.fs-cruise-held.is-open i { background: var(--cr-ink-4); box-shadow: none; }
.fs-cruise-exs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.fs-cruise-ex { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); }
.fs-cruise-ex:hover { border-color: var(--cr-gold-40); }
.fs-cruise-ex.is-on { border-color: var(--cr-gold-40); background: var(--cr-gold-08); }
.fs-cruise-ex.is-late { opacity: 0.6; cursor: not-allowed; }
.fs-cruise-ex-img { position: relative; display: block; height: 180px; background: #111 center / cover no-repeat; }
.fs-cruise-ex-cap { position: absolute; left: 10px; bottom: 10px; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.85); }
.fs-cruise-ex-in { display: block; padding: 14px 16px; }
.fs-cruise-ex-k { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cr-gold); font-weight: 700; }
.fs-cruise-ex-w { display: block; font-family: var(--cr-serif); font-size: 19px; font-weight: 600; margin-top: 3px; }
.fs-cruise-ex-m { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--cr-ink-3); margin-top: 8px; }
.fs-cruise-ex-price { font-family: var(--cr-serif); font-weight: 600; color: var(--cr-gold); font-size: 18px; white-space: nowrap; }
.fs-cruise-tag.is-warn { color: #e8a34a; border-color: rgba(232, 163, 74, 0.28); background: rgba(232, 163, 74, 0.07); margin-bottom: 0; white-space: nowrap; }
.fs-cruise-ex { display: flex; flex-direction: column; justify-content: flex-start; text-align: left; }
.fs-cruise-ex-img { flex: none; }
.fs-cruise-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fs-cruise-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cr-ink-2); padding: 6px 10px; border: 1px solid var(--cr-line); border-radius: 8px; background: var(--cr-card); }
.fs-cruise-c9f { display: flex; gap: 8px; margin-top: 14px; }
/* C10 evenings: dinner and a show (S8b) */
.fs-cruise-c10 { display: grid; grid-template-columns: 1fr 400px; gap: 30px; min-height: 100%; }
.fs-cruise-ng { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 22px; }
.fs-cruise-nt { height: 330px; overflow: hidden; position: relative; border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); padding: 14px 12px; display: flex; flex-direction: column; text-align: left; color: var(--cr-ink); }
button.fs-cruise-nt:hover { border-color: var(--cr-gold-40); }
.fs-cruise-nim { display: block; flex: 1 1 auto; min-height: 150px; margin: -14px -12px 12px; background: #111 center / cover no-repeat; filter: saturate(0.5) brightness(0.55); }
.fs-cruise-nt.is-sp .fs-cruise-nim { filter: none; }
.fs-cruise-nh { display: block; font-size: 10.5px; letter-spacing: 0.16em; color: var(--cr-ink-3); font-weight: 700; text-transform: uppercase; }
.fs-cruise-nw { display: block; font-family: var(--cr-serif); font-size: 20px; font-weight: 600; margin-top: 2px; line-height: 1.1; }
.fs-cruise-nd { display: block; font-size: 12px; color: var(--cr-ink-3); margin-top: 4px; }
.fs-cruise-nt.is-sp { border-color: var(--cr-gold-40); background: var(--cr-gold-08); }
.fs-cruise-nt.is-sp .fs-cruise-nh { color: var(--cr-gold); }
.fs-cruise-nt.is-key { box-shadow: 0 0 0 1px var(--cr-gold); }
.fs-cruise-nt.is-warn { border-color: rgba(232, 163, 74, 0.4); }
.fs-cruise-nt.is-warn .fs-cruise-nd { color: #e8a34a; }
.fs-cruise-alert { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--cr-gold-40); background: var(--cr-gold-08); font-size: 15px; color: var(--cr-ink); }
.fs-cruise-alert b { color: var(--cr-ink); }
.fs-cruise-alert-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--cr-gold); color: var(--cr-gold); font-weight: 600; font-size: 15px; }
.fs-cruise-dnc, .fs-cruise-pass { overflow: hidden; border: 1px solid var(--cr-line); border-radius: 16px; background: var(--cr-card); align-self: start; }
.fs-cruise-dnc-img, .fs-cruise-pass-img { height: 240px; background: #111 center / cover no-repeat; }
.fs-cruise-dnc-in, .fs-cruise-pass-in { padding: 18px 20px 20px; }
.fs-cruise-k2 { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cr-gold); font-weight: 700; }
.fs-cruise-dnc-n { font-family: var(--cr-serif); font-size: 28px; font-weight: 600; line-height: 1.1; margin: 4px 0 4px; color: var(--cr-ink); }
.fs-cruise-dnc .fs-cruise-acts, .fs-cruise-pass .fs-cruise-acts { margin-top: 16px; }
.fs-cruise-btn.is-done { background: var(--cr-gold-08); color: var(--cr-gold) !important; border-color: var(--cr-gold-40); }
.fs-cruise-btn.is-quiet.is-on { border-color: var(--cr-gold-40); }
.fs-cruise-btn:disabled { opacity: 0.8; cursor: not-allowed; }
.fs-cruise-seats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fs-cruise-chip.is-warn { color: #e8a34a; border-color: rgba(232, 163, 74, 0.35); }
.fs-cruise-chip.is-alt { border-style: dashed; color: var(--cr-ink-3); }
.fs-cruise-dnc .fs-cruise-tip, .fs-cruise-pass .fs-cruise-tip, .fs-cruise-tip[data-part="shows"] { margin-top: 14px; }
.fs-cruise-dnc .fs-cruise-tip span, .fs-cruise-pass .fs-cruise-tip span, .fs-cruise-c11-tip span { margin-left: 4px; }
/* C11 arrival: boarding slot and pass (S8b) */
.fs-cruise-c11 { display: grid; grid-template-columns: 1fr 360px; gap: 30px; min-height: 100%; align-items: start; }
.fs-cruise-asg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
.fs-cruise-as { display: block; padding: 10px 4px; text-align: center; border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); color: var(--cr-ink); }
button.fs-cruise-as:hover { border-color: var(--cr-gold-40); }
.fs-cruise-as.is-on { border-color: var(--cr-gold); background: var(--cr-gold-08); }
.fs-cruise-as.is-rec { border-style: dashed; border-color: var(--cr-gold-40); }
.fs-cruise-as-tm { display: block; font-family: var(--cr-serif); font-size: 21px; font-weight: 600; }
.fs-cruise-as .fs-cruise-sml { display: block; margin: 2px 0 0; }
.fs-cruise-c11-cks { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fs-cruise-c11-tip { margin-top: 14px; }
.fs-cruise-c11-label { margin-top: 18px; }
.fs-cruise-c11 .fs-cruise-st3 { margin-top: 10px; }
.fs-cruise-qr { width: 118px; height: 118px; padding: 8px; background: #e9e9e9; border-radius: 8px; margin: 14px 0 0; }
.fs-cruise-qr svg { display: block; width: 100%; height: 100%; }
.fs-cruise-qr rect { fill: #111; }
.fs-cruise-qr figcaption { width: 220px; margin-top: 12px; font-size: 11px; color: var(--cr-ink-4); }
.fs-cruise-qr + .fs-cruise-acts { margin-top: 34px; }
@media (max-width: 900px) {
  .fs-cruise-c8 { grid-template-columns: 1fr; }
  .fs-cruise-c10, .fs-cruise-c11 { grid-template-columns: 1fr; }
  .fs-cruise-ng { grid-template-columns: repeat(4, 1fr); }
  .fs-cruise-nt { height: auto; min-height: 220px; }
  .fs-cruise-asg { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .fs-cruise-c11-cks { grid-template-columns: 1fr; }
  .fs-cruise-wk { grid-template-columns: repeat(4, 1fr); }
  .fs-cruise-wd { height: auto; min-height: 220px; }
  .fs-cruise-exs { grid-auto-flow: row; grid-template-columns: 1fr; }
}
/* On board (S9): C12 today, C13 wayfinding, C14 all-aboard watch */
.fs-cruise-c12 { display: grid; grid-template-columns: 1fr 420px; gap: 28px; min-height: 100%; }
.fs-cruise-c12-day, .fs-cruise-wx, .fs-cruise-clk, .fs-cruise-prof, .fs-cruise-wstp, .fs-cruise-aa { border: 1px solid var(--cr-line); border-radius: 16px; background: var(--cr-card); }
.fs-cruise-c12-day { padding: 22px 26px; }
.fs-cruise-c12-day .fs-cruise-h2 { font-size: 30px; }
.fs-cruise-c12-rows { margin: 10px 0 14px; }
.fs-cruise-c12-rows > .fs-cruise-it { width: 100%; padding: 6px 0; background: none; border: 0; }
.fs-cruise-c12-rows > button.fs-cruise-it:hover .fs-cruise-it-w { text-decoration: underline; text-decoration-color: var(--cr-gold-40); text-underline-offset: 4px; }
.fs-cruise-c12-rows > .fs-cruise-it .fs-cruise-it-w { display: block; font-size: 21px; }
.fs-cruise-c12-rows > .fs-cruise-it .fs-cruise-it-d { display: block; }
.fs-cruise-c12-rows > .fs-cruise-it:not(:last-child) .fs-cruise-it-rail::after { display: block; }
.fs-cruise-c12-rows > .fs-cruise-it:last-child .fs-cruise-it-rail::after { display: none; }
.fs-cruise-it.is-warn .fs-cruise-it-w { color: #e8a34a; }
.fs-cruise-it.is-warn .fs-cruise-it-rail::before { border-color: #e8a34a; background: #e8a34a; }
.fs-cruise-c12-side { display: flex; flex-direction: column; gap: 14px; }
.fs-cruise-wx { display: flex; gap: 16px; align-items: center; padding: 16px 18px; }
.fs-cruise-wxn { font-family: var(--cr-serif); font-size: 44px; font-weight: 600; color: var(--cr-gold); font-variant-numeric: tabular-nums lining-nums; }
.fs-cruise-wx-w { font-family: var(--cr-serif); font-size: 22px; font-weight: 600; }
.fs-cruise-clk { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 18px; }
.fs-cruise-cl2 { font-family: var(--cr-serif); font-size: 34px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums lining-nums; }
.fs-cruise-cl2.is-dim { color: var(--cr-ink-3); }
.fs-cruise-cl2.is-warn { color: #e8a34a; }
.fs-cruise-c12-next { height: 250px; flex: none; }
.fs-cruise-ob-label { margin-top: 22px; }
.fs-cruise-ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fs-cruise-ob-chips button.fs-cruise-chip:hover { border-color: var(--cr-gold-40); }
.fs-cruise-ob-nav { flex-wrap: wrap; margin-top: 18px; }
.fs-cruise-c13 { display: grid; grid-template-columns: 1fr 380px; gap: 28px; min-height: 100%; }
.fs-cruise-c13 > .fs-cruise-dnc { align-self: stretch; }
.fs-cruise-prof { margin-top: 16px; padding: 10px 16px; }
.fs-cruise-pf { width: 100%; display: block; font-family: var(--flow-font-ui, 'DM Sans', sans-serif); }
.fs-cruise-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.fs-cruise-wstp { display: flex; gap: 12px; padding: 14px 16px; align-items: center; }
.fs-cruise-wstp > b { width: 28px; height: 28px; border-radius: 50%; background: var(--cr-gold); color: #1a1408; display: grid; place-items: center; font-size: 13px; flex: none; }
.fs-cruise-wstp-w { display: block; font-weight: 600; font-size: 14px; }
.fs-cruise-wstp .fs-cruise-sml { display: block; margin: 2px 0 0; }
.fs-cruise-c14 { display: grid; grid-template-columns: 1fr 440px; gap: 28px; min-height: 100%; }
.fs-cruise-aa { padding: 28px 30px; border-color: rgba(232, 163, 74, 0.35); }
.fs-cruise-aah { display: flex; gap: 18px; align-items: center; }
.fs-cruise-ic2 { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #e8a34a; color: #e8a34a; display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; }
.fs-cruise-eyebrow.fs-cruise-warn { color: #e8a34a; }
.fs-cruise-tl2 { display: flex; height: 46px; border-radius: 10px; overflow: hidden; margin-top: 34px; font-size: 12px; font-weight: 600; }
.fs-cruise-seg { display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-cruise-seg.is-a { background: rgba(255, 255, 255, 0.06); color: var(--cr-ink-2); }
.fs-cruise-seg.is-b { background: var(--cr-gold); color: #1a1408; }
.fs-cruise-seg.is-c { background: rgba(232, 163, 74, 0.25); color: #e8a34a; }
.fs-cruise-seg.is-d { background: rgba(232, 100, 74, 0.35); color: #ffd2c6; }
.fs-cruise-tlx { display: flex; justify-content: space-between; font-size: 12px; color: var(--cr-ink-3); margin-top: 8px; font-variant-numeric: tabular-nums lining-nums; }
.fs-cruise-c14-sim { display: inline-block; margin-top: 12px; white-space: normal; }
.fs-cruise-c14-why { margin-top: 14px; }
.fs-cruise-aa .fs-cruise-ob-label { margin-top: 30px; }
.fs-cruise-c14clk { margin-top: 10px; background: rgba(255, 255, 255, 0.02); }
.fs-cruise-aa > .fs-cruise-tip { margin-top: 14px; }
.fs-cruise-aa > .fs-cruise-tip span, .fs-cruise-c12 .fs-cruise-tip span { margin-left: 4px; }
.fs-cruise-c14-next { height: 100%; min-height: 420px; }
@media (max-width: 900px) {
  .fs-cruise-c12, .fs-cruise-c13, .fs-cruise-c14 { grid-template-columns: 1fr; }
  .fs-cruise-steps { grid-template-columns: 1fr; }
  .fs-cruise-c12-rows > .fs-cruise-it > span:last-child { display: none; }
  .fs-cruise-c14-next { min-height: 240px; }
}
/* On board (S9b): C15 onboard account, C16 going home */
.fs-cruise-c15 { display: grid; grid-template-columns: 1fr 420px; gap: 28px; min-height: 100%; }
.fs-cruise-fo .fs-cruise-h2 { font-size: 30px; }
.fs-cruise-fd { display: inline-block; min-width: 72px; margin-right: 8px; color: var(--cr-ink-4); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.fs-cruise-ln.is-inc > span:last-child { color: #5fd17a; }
.fs-cruise-ln.is-inc .fs-cruise-fd { color: #5fd17a; }
.fs-cruise-ln.is-flag { color: #e8a34a; }
.fs-cruise-c15-side { display: flex; flex-direction: column; gap: 14px; }
.fs-cruise-sv, .fs-cruise-dsc, .fs-cruise-vn { border: 1px solid var(--cr-line); border-radius: 16px; background: var(--cr-card); padding: 20px 22px; }
.fs-cruise-dsc .fs-cruise-sml { display: block; line-height: 1.35; }
.fs-cruise-dsc.is-on { border-color: rgba(214, 170, 92, 0.75); background: rgba(214, 170, 92, 0.07); }
.fs-cruise-dsc.is-dim { opacity: 0.45; border-style: dashed; }
.fs-cruise-svn { font-family: var(--cr-serif); font-size: 30px; font-weight: 600; margin-top: 6px; font-variant-numeric: lining-nums; }
.fs-cruise-svn.is-dim { color: var(--cr-ink-3); }
.fs-cruise-svn span { font-family: var(--flow-font-ui, 'DM Sans', sans-serif); font-size: 12px; color: var(--cr-ink-3); font-weight: 500; }
.fs-cruise-svb { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin: 10px 0; }
.fs-cruise-svb div { height: 100%; border-radius: 99px; background: var(--cr-gold); }
.fs-cruise-sv-saved { margin-top: 12px; }
.fs-cruise-sv-note { margin-top: 8px; }
.fs-cruise-c15-alert { margin-top: 0; font-size: 14px; line-height: 1.5; }
.fs-cruise-c15-side .fs-cruise-tip[data-part="service-charge"] { border-color: rgba(214, 170, 92, 0.55); background: rgba(214, 170, 92, 0.07); padding: 18px 20px; font-size: 16px; line-height: 1.4; }
.fs-cruise-c16 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; min-height: 100%; }
.fs-cruise-dsg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.fs-cruise-dsn { font-family: var(--cr-serif); font-size: 34px; font-weight: 600; margin: 4px 0; display: flex; align-items: center; gap: 10px; font-variant-numeric: lining-nums; }
.fs-cruise-lt { width: 22px; height: 30px; border-radius: 4px; display: inline-block; flex: none; }
.fs-cruise-vn { margin-top: 12px; padding: 18px 20px; }
.fs-cruise-vng { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.fs-cruise-vng b { display: block; font-family: var(--cr-serif); font-size: 36px; font-weight: 600; color: var(--cr-gold); font-variant-numeric: lining-nums; }
.fs-cruise-vng span { font-size: 12px; color: var(--cr-ink-3); }
.fs-cruise-c16-nx { grid-template-rows: 1fr; height: auto; min-height: 520px; }
.fs-cruise-c16-next .fs-cruise-acts { margin-top: 14px; }
@media (max-width: 900px) {
  .fs-cruise-c15, .fs-cruise-c16 { grid-template-columns: 1fr; }
  .fs-cruise-vng { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .fs-cruise-c16-nx { min-height: 320px; }
}
/* ---------------------------------------------------------------------------
   Cruise v4 V6: source marks on the planner and the day aboard (C8 to C16).
   A mark says where a figure comes from: live (captured), FAQ (Royal's own
   page), secondary (a blog or press), Flo ✦ (Flo's own help, never Royal's)
   or Demo (sample state). Rendered by Scenes.CruiseMark.mk/1.
   --------------------------------------------------------------------------- */
.fs-cruise-mk { display: inline-block; font-family: var(--flow-font-ui, 'DM Sans', sans-serif); font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; vertical-align: 2px; margin-left: 4px; line-height: 1.3; white-space: nowrap; text-shadow: none; }
.fs-cruise-mk.is-lv { color: #5fd17a; border: 1px solid rgba(95, 209, 122, 0.4); background: rgba(95, 209, 122, 0.07); }
.fs-cruise-mk.is-fq { color: #8fd3c4; border: 1px solid rgba(110, 200, 180, 0.45); background: rgba(110, 200, 180, 0.07); }
.fs-cruise-mk.is-sc { color: #e3c27a; border: 1px dashed rgba(227, 194, 122, 0.5); }
.fs-cruise-mk.is-fl { color: var(--cr-gold); border: 1px solid var(--cr-gold-40); background: var(--cr-gold-08); text-transform: none; letter-spacing: 0.04em; }
.fs-cruise-mk.is-dm { color: #b9cbff; border: 1px solid rgba(120, 160, 255, 0.4); }
.fs-cruise-h2 .fs-cruise-mk, .fs-cruise-dnc-n .fs-cruise-mk { vertical-align: 6px; }