/* =============================================================
ORN Holidays — customer-facing design system
Mobile-first. Two breakpoints (768, 1280). No third-party CSS.
============================================================= */
/* Marketing fonts — hoisted from ornholidays-marketing.css (@import must lead the file). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
:root {
/* ---- Colours (ORN red brand v2) ----------------------------- */
/* Semantic name kept as --orn-navy for backward compat — values
repointed to the red brand palette. Every downstream rule that
used var(--orn-navy) now paints in brand red. */
--orn-navy: rgb(242, 13, 22); /* brand red — hero top + header */
--orn-navy-2: rgb(201, 10, 18); /* brand red mid — gradient stop */
--orn-navy-3: rgb(158, 8, 16); /* brand red deep — gradient end */
--orn-navy-ink: rgb(14, 26, 43); /* actual navy — used by marketing surfaces (.orn-mh, .orn-mk-*) */
--orn-gold: rgb(20, 20, 20); /* dark CTA pill fill (black on white bg) */
--orn-gold-2: rgb(0, 0, 0); /* CTA hover */
--orn-gold-3: rgb(242, 13, 22); /* accent/eyebrow — HIGHLIGHTS in red */
--orn-cream: rgb(244, 244, 244); /* page background (light gray) */
--orn-cream-2: rgb(255, 255, 255); /* card paper — white */
--orn-cream-3: rgb(232, 232, 232); /* subtle borders */
--orn-paper: #ffffff;
--orn-ink: rgb(20, 35, 59); /* primary text */
--orn-ink-2: rgb(58, 70, 84); /* secondary text on cream */
/* Canonical body-text token — use this in place of hard-coded #000 /
raw rgb() blacks whenever a component needs the primary reading colour.
Aliased to --orn-ink so any future re-tint changes both together. */
--orn-text: rgb(21, 21, 21);
--orn-text-muted: rgb(107, 114, 128); /* secondary meta text (used in TM meta line etc.) */
--orn-mute: rgb(110, 110, 110); /* warm muted (on cream) */
--orn-mute-2: rgba(255, 255, 255, 0.72); /* cool muted (on navy) */
--orn-mute-3: rgb(195, 204, 214); /* light cool muted (nav links / lede) */
--orn-text-light: rgba(255, 255, 255, 0.9); /* warm light text on red */
--orn-line: rgba(20, 35, 59, 0.10);
--orn-line-2: rgba(20, 35, 59, 0.18);
/* accent palette — colour-coded tiers, families, results */
--orn-blue: rgb(47, 128, 237); /* Early-bird */
--orn-amber: rgb(199, 122, 43); /* Filling fast */
--orn-red: rgb(190, 63, 57); /* Final seats / Italy */
--orn-green: rgb(22, 160, 133);
--orn-purple: #6a4ba6;
--orn-orange: #c2682a;
--orn-teal: #2c8d8a;
/* ---- Typography (fluid) -------------------------------------- */
--orn-font-body: Archivo, sans-serif;
--orn-font-display: Archivo, sans-serif;
--orn-font-heading: Anton, sans-serif;
--orn-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Type scale (aligned to ORN Booking Home reference) */
--orn-fs-hero: 62px; /* hero title */
--orn-fs-pass-city: 40px; /* boarding-pass city */
--orn-fs-h1: 32px; /* section title (Departures filling / All Europe / ORN Specials / Beyond Europe heads) */
--orn-fs-h2: 22px; /* sub section title */
--orn-fs-h3: 18px; /* card / rung title */
--orn-fs-lede: 16px; /* hero lede */
--orn-fs-body: 15px; /* main body / nav */
--orn-fs-stat: 28px; /* big stat number */
--orn-fs-small: 13px; /* small body / pass meta value */
--orn-fs-tiny: 12px; /* fine print, pass tag */
--orn-fs-eyebrow: 11px; /* eyebrow mono labels */
/* ---- Spacing (4-pt grid) ------------------------------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 80px;
--sp-10: 112px;
/* ---- Radius / shadow ---------------------------------------- */
--r-card: 18px;
--r-soft: 12px;
--r-pill: 999px;
--r-tile: 14px;
--sh-card: 0 1px 2px rgba(10, 24, 55, 0.04), 0 4px 16px rgba(10, 24, 55, 0.06);
--sh-raised: 0 8px 32px rgba(10, 24, 55, 0.14);
--sh-sheet: -8px -8px 32px rgba(10, 24, 55, 0.18);
/* ---- Container ---------------------------------------------- */
--orn-container: 1250px;
--orn-gutter: 28px;
}
/* =============================================================
Red-brand overrides — variable repoint alone leaves some dark
CTAs with red text (because color: var(--orn-navy) is now red).
Force them back to white here. Kept small + selector-list so
later additions can be tacked on without touching the palette.
============================================================= */
.orn-btn--primary,
.orn-depcard__cta,
.orn-jrycard__view,
.orn-sum__cta,
.orn-sum__cta:hover:not(:disabled),
.orn-promo__strip-card-cta,
.orn-filhead__cta,
.orn-mk-btn--gold,
.trpPymtActCtr .ui-button { color: #fff !important; }
.orn-btn--primary:hover, .orn-depcard__cta:hover, .orn-promo__strip-card-cta:hover, .orn-mk-btn--gold:hover { color: #fff !important; }
/* Hero surfaces: gradient across the three brand stops instead of
a flat brand-red fill (which is what would happen after the
variable swap in isolation). */
body:not(.orn-hero-immersive) .orn-hero,
.orn-promo__hero { background: linear-gradient(160deg, var(--orn-navy) 0%, var(--orn-navy-2) 58%, var(--orn-navy-3) 100%) !important; }
.orn-mk-hero { background: linear-gradient(160deg, var(--orn-text) 0%, var(--orn-navy-ink) 100%) !important; }
.orn-pay-hero,
.orn-wallet-hero { background: transparent !important; }
/* Footer stays near-black on the red brand. Upper linkband slightly
darker (#0B0B0B), lower legal strip a hair lighter (#0F0F0F) for
soft separation. Overrides the navy-turned-red background that
would otherwise inherit from the variable swap. */
.orn-footer { background: rgb(11, 11, 11) !important; color: rgba(255, 255, 255, 0.72) !important; }
.orn-footer-linkband { background: rgb(11, 11, 11) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; }
.orn-footer__legalstrip { background: rgb(15, 15, 15) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.5) !important; }
/* Logo image (new markup) — sized to match the old wordmark height. */
.orn-header__logo-img { display: block; height: 40px; width: auto; }
.orn-mh__brand-img { display: block; height: 40px; width: auto; }
/* =============================================================
Reset / base
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--orn-font-body); font-size: var(--orn-fs-body); line-height: 1.55; color: var(--orn-ink); background: var(--orn-cream); text-align: left; /* override b2c-v*.css default body { text-align: center } */ -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7BFAE; border-radius: 8px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--orn-font-display); font-weight: 800; line-height: 1.1; color: rgb(15, 15, 15); text-align: left; }
/* Defensive override — tf-main's global styles.css ships rules that
center text inside section containers for some legacy partner
themes. The ornholidays skin is always left-aligned by default;
opt back into centering explicitly via .orn-text-center. */
.orn-page, .orn-page p, .orn-page h1, .orn-page h2, .orn-page h3, .orn-page h4, .orn-page h5, .orn-page h6 { text-align: left; }
.orn-eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orn-navy); }
.orn-container { max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); }
.orn-section { padding-block: 40px; }
.orn-section--cream { background: var(--orn-cream); }
.orn-section--paper { background: var(--orn-paper); }
.orn-section--navy { background: var(--orn-navy); color: #f0e6c8; }
/* =============================================================
Header
============================================================= */
.orn-header { background: var(--orn-navy); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--orn-text-light); position: relative; z-index: 50; border-bottom: 0; }
/* Immersive hero — transparent header floats over a full-bleed photo hero.
Pages opt in via body.orn-hero-immersive and set --orn-hero-image on body. */
body.orn-hero-immersive .orn-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; position: absolute; left: 0; right: 0; top: 0; }
body.orn-hero-immersive .orn-hero { position: relative; background: rgb(15, 15, 15) var(--orn-hero-image) center/cover no-repeat !important; color: #fff; margin-top: 0; padding-top: 100px; overflow: hidden; }
body.orn-hero-immersive .orn-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 15, 0.75) 0%, rgba(15, 15, 15, 0.55) 30%, rgba(15, 15, 15, 0.15) 60%, rgba(15, 15, 15, 0) 100%); pointer-events: none; z-index: 1; }
body.orn-hero-immersive .orn-hero__inner { position: relative; z-index: 2; padding-top: 20px; padding-bottom: 90px; }
body.orn-hero-immersive .orn-hero__eyebrow { color: #fff; }
body.orn-hero-immersive .orn-hero__title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); font-size: clamp(48px, 5vw, 168px); font-family: var(--orn-font-heading); }
body.orn-hero-immersive .orn-hero__lede { color: rgba(255, 255, 255, 0.9); }
body.orn-hero-immersive .orn-hero__stats { color: #fff; }
body.orn-hero-immersive .orn-hero__stat-n { color: #fff; }
body.orn-hero-immersive .orn-hero__stat-l { color: rgba(255, 255, 255, 0.7); }
.orn-hero__badges { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 0; margin-top: 34px; padding: 12px 8px; background: rgba(15, 15, 15, 0.55); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
.orn-hero__badges::-webkit-scrollbar { display: none; }
.orn-hero__badge-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.15; white-space: normal; max-width: 125px; flex: 0 0 auto; }
.orn-hero__badge-pill + .orn-hero__badge-pill { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.orn-hero__badge-ic { color: #fff; flex-shrink: 0; }
@media (max-width: 900px) {
.orn-hero__badges { padding: 10px 6px; }
.orn-hero__badge-pill { padding: 4px 14px; font-size: 12.5px; }
}
body.orn-hero-immersive .orn-pass { max-width: 440px; transform: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
body.orn-hero-immersive .orn-hero__pass { align-self: flex-start; justify-self: end; margin-bottom: 40px; }
.orn-header__inner { max-width: var(--orn-container); margin-inline: auto; padding: 10px var(--orn-gutter); display: flex; align-items: center; gap: 20px; }
.orn-header__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--orn-text-light); cursor: pointer; }
.orn-header__logo { height: 36px; width: auto; }
/* Gold disc with the ORN leaf glyph — matches the mockup's circular brand
mark. Sized to align with the wordmark + eyebrow at 36px tall. */
.orn-header__logo-disc { width: 36px; height: 36px; border-radius: 50%; background: var(--orn-gold); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.orn-header__logo-disc svg { display: block; }
.orn-header__logo-mark { display: inline-block; color: #fff; font-family: var(--orn-font-display); font-weight: 800; font-size: 21px; letter-spacing: 0.04em; }
/* Brand eyebrow ("EUROPE JOURNEYS") shown next to the wordmark on
desktop — adopted from the mockup. Hidden on mobile to keep the
header height tight. */
.orn-header__brand-eyebrow { display: none; font-family: var(--orn-font-body); font-size: 13.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #fff; font-weight: 700; padding-left: 14px; margin-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.4); align-self: center; height: 42px; line-height: 42px; }
.orn-header__eyebrow { display: none; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 230, 200, 0.65); }
.orn-header__nav { display: none; justify-content: flex-end; align-items: center; gap: 26px; margin-left: auto; font-weight: 600; }
.orn-header__nav-link { font-size: 15px; color: #fff; padding-block: var(--sp-2); position: relative; }
.orn-header__nav-link:hover { color: #fff; }
.orn-header__actions { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
.orn-header__currency { display: none; align-items: center; gap: 7px; padding: 5px 14px; border: 1px solid #fff; border-radius: var(--r-pill); color: #fff; font-size: 13.5px; cursor: pointer; }
.orn-header__currency-globe { color: var(--orn-gold-3); font-size: 1rem; }
.orn-header__currency-icon { display: inline-block; vertical-align: middle; }
.orn-header__currency-label { font-size: 14px; font-weight: bold}
.orn-header__currency-caret { color: var(--orn-mute-2); font-size: 11px; }
.orn-header__region { position: relative; display: inline-block; }
.orn-header__region-popover { position: absolute; top: calc(100% + 10px); right: 0; min-width: 380px; max-width: 440px; background: #ffffff; border-radius: 18px; padding: 20px 22px 18px; box-shadow: 0 24px 60px rgba(10, 24, 55, 0.28), 0 6px 18px rgba(10, 24, 55, 0.14); z-index: 60; }
.orn-header__region-popover[hidden] { display: none; }
.orn-header__region-eyebrow { color: var(--orn-navy); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; margin-bottom: 12px; }
.orn-header__region-eyebrow + .orn-header__region-eyebrow, .orn-header__region-grid + .orn-header__region-eyebrow { margin-top: 18px; }
.orn-header__region-grid { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.orn-header__region-chip { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #14233B; border-radius: 12px; background: #ffffff; color: #14233B; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.orn-header__region-chip:hover { background: #14233B; color: #ffffff; }
.orn-header__region-chip.is-active { background: #14233B; color: #ffffff; }
.orn-header__region-note { margin-top: 16px; color: #6b6455; font-size: 13px; line-height: 1.5; }
@media screen and (max-width: 640px) {
.orn-header__region-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: 0; max-width: none; border-radius: 18px 18px 0 0; padding: 20px 18px 24px; }
}
.orn-header__profile { position: relative; display: inline-block; }
.orn-header__rewards { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-right: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--orn-text); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; text-decoration: none; box-shadow: 0 2px 6px rgba(10, 24, 55, 0.14); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.orn-header__rewards:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 24, 55, 0.22); color: var(--orn-text); }
.orn-header__rewards-label { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--orn-navy); }
.orn-header__rewards-value { font-weight: 800; font-size: 14px; }
.orn-header__avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; color: var(--orn-navy, rgb(14, 26, 43)); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 2px 6px rgba(10, 24, 55, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.orn-header__avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 24, 55, 0.24); }
.orn-header__avatar-letter { line-height: 1; }
.orn-header__profile-popover { position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; max-width: 320px; background: #ffffff; border-radius: 16px; padding: 14px 12px; box-shadow: 0 24px 60px rgba(10, 24, 55, 0.28), 0 6px 18px rgba(10, 24, 55, 0.14); z-index: 60; }
.orn-header__profile-popover[hidden] { display: none; }
.orn-header__profile-user { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
.orn-header__profile-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orn-gold, rgb(193, 142, 69)); color: var(--orn-navy, rgb(14, 26, 43)); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; }
.orn-header__profile-user-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--orn-text); }
.orn-header__profile-divider { height: 1px; background: rgba(20, 35, 59, 0.10); margin: 4px 6px; }
.orn-header__profile-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--orn-text); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 0.12s ease; }
.orn-header__profile-item:hover { background: rgba(20, 35, 59, 0.06); }
.orn-header__profile-icon { color: var(--orn-gold-2, rgb(169, 124, 60)); flex-shrink: 0; }
.orn-header__profile-item--logout { color: #B4432B; }
.orn-header__profile-item--logout .orn-header__profile-icon { color: #B4432B; }
@media screen and (max-width: 640px) {
.orn-header__profile-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: 0; max-width: none; border-radius: 18px 18px 0 0; padding: 20px 14px 24px; }
}
.orn-header__login, .orn-header__signup, .orn-header__cta, .orn-header__user-pill, .orn-header__talk { display: inline-flex; align-items: center; padding: 7px 20px 9px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--orn-fs-body); white-space: nowrap; text-decoration: none; cursor: pointer; border: none; font-family: inherit; font-size:14px}
.orn-header__talk { background: #fff; color: var(--orn-navy); margin-left: 8px; }
.orn-header__talk:hover { background: rgba(255, 255, 255, 0.9); color: var(--orn-navy); }
.orn-header__signup { background: var(--orn-gold, rgb(193, 142, 69)); color: #ffffff; margin-right: 6px; }
.orn-header__signup:hover { background: var(--orn-gold-2, rgb(169, 124, 60)); color: #ffffff; }
.orn-header__login { font-family: Anton, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0.04em; color: #E4002B; background: #fff; padding: 7px 20px; text-decoration: none; white-space: nowrap; border-radius: 0; }
.orn-header__login:hover { background: #F7F4EF; color: #E4002B; }
.orn-header__user-pill { background: rgba(193, 142, 69, 0.15); color: var(--orn-gold-3); border: 1px solid rgba(193, 142, 69, 0.35); font-weight: 500; }
.orn-header__cta { background: var(--orn-gold); color: var(--orn-navy); }
.orn-header__cta:hover { background: var(--orn-gold-2); }
.orn-header__nav-mobile { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--orn-gutter) var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-header__nav-mobile::-webkit-scrollbar { display: none; }
.orn-header__nav-mobile .orn-header__nav-link { scroll-snap-align: start; white-space: nowrap; font-size: 0.92rem; }
@media (min-width: 768px) {
.orn-header__eyebrow { display: inline; }
.orn-header__brand-eyebrow { display: inline-flex; align-items: center; }
.orn-header__nav { display: flex; }
.orn-header__currency { display: inline-flex; }
.orn-header__nav-mobile { display: none; }
.orn-header__login { background: var(--orn-text); color: #ffffff; border: none; }
.orn-header__login:hover { color: #ffffff; background: var(--orn-text); }
}
/* Utility (secondary) nav row inside the header — sits to the right of
the brand on the top row. Uses a subtler size + colour than the
primary nav below. */
.orn-header__utility { display: none; align-items: center; gap: 22px; margin-left: auto; font-size: 14px; color: rgb(195, 204, 214); }
.orn-header__util-link { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; }
.orn-header__util-link:hover { color: #fff; }
.orn-header__util-icon { display: inline-block; vertical-align: middle; }
.orn-header__util-cta { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--orn-fs-body); white-space: nowrap; text-decoration: none; background: var(--orn-gold); color: var(--orn-navy); }
.orn-header__util-cta:hover { background: var(--orn-gold-2); }
/* Primary nav row — the second header tier that carries Journeys /
Departures / Van Tours / Worldwide / Promotions / Specials + My
bookings. On desktop it's a horizontal row under the brand row; on
mobile it becomes a horizontally-scrollable strip. */
.orn-header__nav-primary { display: none; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; align-items: center; }
.orn-header__nav-primary::-webkit-scrollbar { display: none; }
.orn-header__nav-primary .orn-header__nav-link { scroll-snap-align: start; white-space: nowrap; font-weight: 600; font-size: 15px; }
.orn-header__nav-link.is-active { color: #fff; }
.orn-header__nav-find.is-active { color: var(--orn-gold-2); }
.orn-header__nav-find { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--orn-gold); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.orn-header__nav-find:hover { color: var(--orn-gold-2); }
/* Mobile hamburger + slide-in nav drawer. Burger + drawer show below
768px; the desktop utility row and primary nav are hidden there and
restored (with the burger/drawer hidden) at >=768 further below. */
.orn-header__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 9px; border-radius: 10px; background: transparent; border: 1px solid rgba(240, 230, 200, 0.22); cursor: pointer; flex: 0 0 auto; }
.orn-header__burger span { display: block; height: 2px; width: 100%; background: var(--orn-text-light); border-radius: 2px; }
.orn-drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 18, 33, 0.55); z-index: 1200; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.orn-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
/* Drawer body is near-black with a red ORN header strip on top — the brand
pops at the top and the light nav/menu text reads cleanly on black. */
.orn-drawer { position: fixed; top: 0; left: 0; height: 100%; width: min(84vw, 340px); background: #0F0F0F; color: var(--orn-text-light); z-index: 1210; transform: translateX(-100%); transition: transform 0.28s ease; display: flex; flex-direction: column; box-shadow: var(--sh-raised); overflow-y: auto; }
.orn-drawer.is-open { transform: translateX(0); }
.orn-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--orn-navy); border-bottom: 0; }
.orn-drawer__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--orn-font-display); font-weight: 800; font-size: 20px; color: #fff; letter-spacing: 0.04em; text-decoration: none; }
.orn-drawer__logo-img { display: block; height: 32px; width: auto; }
.orn-drawer__close { font-size: 28px; line-height: 1; color: var(--orn-text-light); background: transparent; border: 0; cursor: pointer; padding: 0 4px; }
.orn-drawer__nav { display: flex; flex-direction: column; padding: 8px 0; }
/* Typography mirrors the marketing drawer (.orn-mh__drawer-link): uppercase
mono, letter-spaced, light text with a thin divider under each row. */
.orn-drawer__link { display: flex; align-items: center; gap: 10px; padding: 15px 22px; font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #C9CDD3; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.orn-drawer__link:hover { color: #F3EFE6; }
.orn-drawer__link.is-active { color: var(--orn-gold); }
.orn-drawer__section { padding: 10px 0; border-top: 1px solid rgba(240, 230, 200, 0.12); display: flex; flex-direction: column; }
.orn-drawer__section a { padding: 11px 22px; font-size: 14px; color: rgb(195, 204, 214); }
.orn-drawer__section a:hover { color: var(--orn-gold); }
.orn-drawer__foot { margin-top: auto; padding: 18px 22px; border-top: 1px solid rgba(240, 230, 200, 0.12); display: flex; flex-direction: column; gap: 12px; }
.orn-drawer__foot .orn-header__signup, .orn-drawer__foot .orn-header__login { justify-content: center; width: 100%; margin: 0; }
/* Logged-in account block in the mobile drawer — mirrors the desktop profile
popover (rewards balance + account links). Light text on the red drawer,
matching the drawer nav links; the desktop popover's dark-on-white styling
would be invisible here. */
.orn-drawer__profile-top { padding: 14px 0 6px; border-bottom: 1px solid rgba(240, 230, 200, 0.12); }
.orn-drawer__account { gap: 2px; }
.orn-drawer__user { display: flex; align-items: center; gap: 12px; padding: 4px 22px 12px; }
.orn-drawer__user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--orn-navy); font-weight: 800; font-size: 17px; flex: 0 0 auto; }
.orn-drawer__user-name { font-size: 17px; font-weight: 700; color: #fff; }
/* Gold rewards pill — gold-tinted fill + gold border, with the drawer's mono
uppercase typography. */
.orn-drawer__rewards { display: flex; align-items: center; justify-content: space-between; margin: 0 22px 12px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(193, 142, 69, 0.18), rgba(193, 142, 69, 0.10)); border: 1px solid rgba(193, 142, 69, 0.55); text-decoration: none; }
.orn-drawer__rewards-label { font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #E4C88C; }
.orn-drawer__rewards-value { font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: #F6E7C1; }
.orn-drawer__link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.orn-drawer__link--logout { border-bottom: 0; }
@media (min-width: 768px) {
.orn-header__utility { display: flex; }
.orn-header__nav-primary { display: flex; justify-content: flex-end; }
.orn-header__burger { display: none; }
.orn-drawer, .orn-drawer-backdrop { display: none; }
}
/* =============================================================
Hero — boarding pass
============================================================= */
.orn-hero { background: linear-gradient(165deg, var(--orn-navy) 0%, var(--orn-navy-2) 60%, var(--orn-navy-3) 100%); color: var(--orn-text-light); }
.orn-hero__inner { max-width: var(--orn-container); margin-inline: auto; padding: 70px var(--orn-gutter) 78px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 1024px) {
.orn-hero__inner { grid-template-columns: minmax(340px, 520px) 1fr; }
}
.orn-hero__copy { max-width: 820px; }
.orn-hero__crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: rgba(244, 239, 227, 0.72); text-decoration: none; margin-bottom: 22px; }
.orn-hero__crumb:hover { color: var(--orn-white, rgb(201, 164, 92)); }
.orn-hero__crumb-arrow { font-size: 15px; line-height: 1; }
.orn-hero__eyebrow { font-family: var(--orn-body); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--orn-white); font-weight: 600; margin-bottom: 18px; }
.orn-hero__badge { display: inline-flex; align-items: center; gap: 11px; background: linear-gradient(100deg, rgb(228, 0, 43) 0%, rgb(255, 61, 46) 100%); padding: 9px 18px 9px 14px; border-radius: var(--r-pill); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; margin-bottom: 16px; box-shadow: rgba(228, 0, 43, 0.34) 0 10px 26px; }
.orn-hero__badge strong { font-family: var(--orn-font-mono); letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--orn-fs-eyebrow); font-weight: 700; background: rgba(255, 255, 255, 0.2); border-radius: var(--r-pill); padding: 4px 9px; }
.orn-hero__title { font-family: var(--orn-font-display); font-size: var(--orn-fs-hero); font-weight: 800; color: #fff; line-height: 1.02; margin-top: 16px; margin-bottom: 22px; }
.orn-hero__lede { color: #fff; max-width: 480px; margin-bottom: 30px; font-size: var(--orn-fs-lede); line-height: 1.5; }
.orn-hero__pillars { font-family: Anton, sans-serif; font-weight: 400; color: #fff; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: 0.01em; margin: 18px 0 22px; }
.orn-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.orn-hero__ctas .orn-btn--primary { background: var(--orn-navy) !important; color: #fff !important; }
.orn-hero__ctas .orn-btn--primary:hover { background: var(--orn-navy-2) !important; color: #fff !important; }
.orn-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 25px; border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.orn-btn:hover { text-decoration: none; }
.orn-btn--primary { background: var(--orn-gold); color: var(--orn-navy); }
.orn-btn--primary:hover { background: var(--orn-gold-2); }
.orn-btn--ghost { background: var(--orn-text); color: var(--orn-text-light); border: 1px solid var(--orn-text); }
.orn-btn--ghost:hover { background: var(--orn-text); }
.orn-btn--dark { background: var(--orn-text); color: #fff; }
.orn-btn--dark:hover { background: var(--orn-text); }
.orn-btn--block { width: 100%; }
.orn-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: var(--sp-6); font-family: var(--orn-font-mono); }
.orn-hero__stat-n { font-family: var(--orn-font-body); font-weight: 800; font-size: 32px; color: #fff; }
.orn-hero__stat-l { font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-mute-2); margin-top: 2px; }
/* Boarding pass card */
.orn-pass { background: var(--orn-cream-2); color: var(--orn-navy); border-radius: 18px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.34) 0 30px 70px; width: 100%; max-width: 464px; margin-inline: auto; transform: rotate(1.3deg); }
.orn-pass__top { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; background: var(--orn-navy); color: var(--orn-text-light); }
.orn-pass__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--orn-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: #fff; }
.orn-pass__brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.orn-pass__brand-mark img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.orn-pass__brand-name { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
.orn-pass__brand-divider { color: rgba(255, 255, 255, 0.3); font-weight: 400; margin: 0 2px; }
.orn-pass__brand-label { color: rgba(255, 255, 255, 0.65); font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; }
.orn-pass__badge { color: var(--orn-navy); font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.orn-pass__route { position: relative; display: grid; grid-template-columns: 1fr; align-items: end; padding: 10px 24px 6px; gap: 2px; overflow: hidden; }
.orn-pass__route-cities { display: flex; justify-content: flex-start; gap: 18px; margin-top: 5px; grid-column: 1 / -1; }
.orn-pass__route::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; background-image: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 0.4) 55%), url('https://cdn.yourholiday.me/static/img/backgrounds/orn-coach.jpg'); background-position: right center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.orn-pass__route > * { position: relative; z-index: 1; }
.orn-pass__route-label { font-family: var(--orn-font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--orn-navy); font-weight: 700; grid-column: 1 / -1; }
.orn-pass__city { font-family: var(--orn-font-display); font-weight: 800; font-size: var(--orn-fs-pass-city); line-height: 0.9; }
.orn-pass__arrow { color: var(--orn-gold); font-size: 1.5rem; padding-bottom: 0.3rem; }
.orn-pass__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding: 14px 24px 8px; }
.orn-pass__meta-label { font-family: var(--orn-font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orn-mute); font-weight: 600; margin-bottom: var(--sp-1); }
.orn-pass__meta-value { font-family: var(--orn-font-body); font-weight: 700; font-size: 13px; }
.orn-pass__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0px 18px 4px; }
.orn-tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid rgb(238, 201, 198); color: var(--orn-ink-2); font-size: 11px; }
.orn-pass__bottom { border-top: 2px dashed rgb(218, 206, 180); margin-top: 10px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.orn-pass__barcode { height: 36px; flex: 1; background: repeating-linear-gradient(90deg, var(--orn-navy) 0 2px, transparent 2px 4px, var(--orn-navy) 4px 5px, transparent 5px 9px); border-radius: 2px; }
.orn-pass__board { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--orn-navy); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); font-weight: 600; font-size: var(--orn-fs-small); }
/* Boarding pass — black override (hero card only) */
.orn-pass { color: rgb(15, 15, 15); }
.orn-pass__top { background: rgb(15, 15, 15); }
.orn-pass__city { color: rgb(15, 15, 15); }
.orn-pass__arrow { color: var(--orn-navy); }
.orn-pass__meta-value { color: rgb(15, 15, 15); }
.orn-pass__barcode { background: repeating-linear-gradient(90deg, rgb(15, 15, 15) 0 2px, transparent 2px 4px, rgb(15, 15, 15) 4px 5px, transparent 5px 9px); }
.orn-pass__board { background: rgb(15, 15, 15); }
/* =============================================================
Mobile — home hero + boarding pass (<= 640px)
The stacked hero column uses minmax(0,1fr) so it can shrink below
the boarding pass's intrinsic min-content width; without this the
pass (route cities + 3-col meta) props the whole page open and
every section reads clipped on a phone. Here we also scale the
title and pass to the viewport and let the pass fill the column.
============================================================= */
@media (max-width: 640px) {
/* Guard against phantom horizontal scroll on phones: the fixed drawer
backdrop (position:fixed; inset:0) stretches to any residual overflow
area, so clip the root on x. Inner scroll strips (.orn-depstrip,
.orn-jrygrid) keep their own overflow-x:auto and are unaffected. */
html, body { overflow-x: clip; }
/* Compact the header on phones — the 30px block padding + 50px logo made
it oversized. Tighten padding, shrink the logo, and align the burger. */
.orn-header__inner { padding: 14px 16px; gap: 12px; }
.orn-header__logo-img { height: 35px; }
.orn-hero__inner { padding-top: 36px; padding-bottom: 48px; gap: 32px; }
.orn-hero__copy, .orn-hero__pass { min-width: 0; }
.orn-hero__title { font-size: clamp(34px, 11vw, 46px); }
.orn-hero__lede { font-size: 15px; margin-bottom: 24px; }
.orn-hero__ctas .orn-btn { flex: 1 1 auto; }
/* Keep the year range ("2026–27") on one line in its 3-col cell so it
doesn't break to "2026–" / "27"; scale the stat number to fit. */
.orn-hero__stats { gap: 14px; }
.orn-hero__stat-n { font-size: clamp(21px, 6.4vw, 30px); white-space: nowrap; }
.orn-hero__pass { justify-self: stretch; width: 100%; margin-bottom: 8px; }
.orn-pass { max-width: 100%; transform: none; }
.orn-pass__city { font-size: clamp(26px, 9vw, 40px); }
/* Badges: the single horizontal capsule overflows on phones and each
pill wraps to three lines. Reflow into a 2-column chip grid so all
four badges are visible without horizontal scroll; drop the vertical
row dividers and give each chip a subtle fill instead. */
.orn-hero__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 100%; margin-top: 24px; padding: 10px; border-radius: 18px; overflow: visible; }
.orn-hero__badge-pill { max-width: none; padding: 9px 10px; gap: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; font-size: 12px; }
.orn-hero__badge-pill + .orn-hero__badge-pill { border-left: 0; }
.orn-hero__badge-ic { width: 16px; height: 16px; }
}
/* =============================================================
Section heads
============================================================= */
.orn-secthead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; text-align: left; }
.orn-secthead__title { font-family: var(--orn-font-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-align: left; }
.orn-secthead__lede { color: rgb(92, 92, 92); flex: 1 1 320px; font-size: 16px; line-height: 1.5; text-align: left; margin-bottom: 0; }
.orn-secthead__eyebrow { font-family: var(--orn-font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--orn-navy); font-size: var(--orn-fs-tiny); font-weight: 700; display: block; margin-bottom: var(--sp-3); }
/* Small compact section head — used by the "Offers move with the seats"
strip that sits above the bigger "Departures filling now" grid. */
.orn-secthead--compact { margin-bottom: 18px; }
.orn-secthead--compact .orn-secthead__title { font-size: 22px; line-height: 1.2; }
.orn-secthead--compact .orn-secthead__lede { font-size: 14px; }
/* Stacked section head — title on its own line, lede beneath with
8px gap. Used for "All Europe journeys" / "Departures filling now"
where the lede is long. Reference data-dc-tpl="175"/"176":
16px lede, 8px margin-top, full width. */
.orn-secthead--stack { display: block; }
.orn-secthead--stack .orn-secthead__lede { margin-top: 8px; font-size: 16px; line-height: 1.5; flex: none; max-width: 680px; }
/* Horizontal-scroll nudge arrows for card strips (Departures / Journeys /
Specials). Right-aligned circular buttons on a white ground with a soft
shadow. Wired to their target grid via data-orn-scroll-target + JS. */
.orn-scroll-nav { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 12px; }
.orn-scroll-nav__btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: rgb(20, 35, 59); font-family: Archivo, sans-serif; font-size: 18px; line-height: 1; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10, 24, 55, 0.10), 0 1px 2px rgba(10, 24, 55, 0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.orn-scroll-nav__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 24, 55, 0.14), 0 2px 4px rgba(10, 24, 55, 0.08); }
.orn-scroll-nav__btn:active:not(:disabled) { transform: translateY(0); }
.orn-scroll-nav__btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
/* =============================================================
Card grid — auto-fit reflow
============================================================= */
.orn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.orn-grid--2 { --orn-min: 320px; grid-template-columns: repeat(auto-fit, minmax(min(var(--orn-min), 100%), 1fr)); }
.orn-grid--3 { --orn-min: 260px; grid-template-columns: repeat(auto-fit, minmax(min(var(--orn-min), 100%), 1fr)); }
.orn-grid--4 { --orn-min: 240px; grid-template-columns: repeat(auto-fit, minmax(min(var(--orn-min), 100%), 1fr)); }
/* Generic card */
.orn-card { background: var(--orn-paper); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; border-top: 4px solid transparent; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.orn-card:hover { transform: translateY(-2px); box-shadow: var(--sh-raised); }
.orn-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.orn-card__eyebrow { font-family: var(--orn-font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--orn-fs-tiny); font-weight: 700; }
.orn-card__title { font-size: var(--orn-fs-h3); font-weight: 800; }
.orn-card__lede { color: var(--orn-ink-2); font-size: var(--orn-fs-small); }
.orn-card__footer { padding: var(--sp-5); padding-top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.orn-card--accent-red { border-top-color: var(--orn-red); }
.orn-card--accent-amber { border-top-color: var(--orn-amber); }
.orn-card--accent-green { border-top-color: var(--orn-green); }
.orn-card--accent-blue { border-top-color: var(--orn-blue); }
.orn-card--accent-purple { border-top-color: var(--orn-purple); }
.orn-card--accent-orange { border-top-color: var(--orn-orange); }
.orn-card--accent-teal { border-top-color: var(--orn-teal); }
.orn-card-save-chip { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: #E9F5EE; color: #1F7A3D; font-family: var(--orn-font-body); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
.orn-price { display: flex; flex-direction: column; }
.orn-price__label { font-family: var(--orn-font-mono); font-size: var(--orn-fs-tiny); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute); }
.orn-price__amount { font-family: var(--orn-font-display); font-weight: 800; font-size: 26px; color: var(--orn-text); }
/* Tier counter cards — Offers move with the seats. Matches reference
data-dc-tpl="124" exactly: white paper, thick top border in the
tier's tone colour, thin cream side+bottom borders, 14px corners,
18x20 padding, flex column with 8px gap between rows. */
.orn-tier { background: var(--orn-paper); border-radius: 14px; padding: 18px 20px; border: 1px solid rgb(228, 221, 205); display: flex; flex-direction: column; gap: 8px; }
/* The eyebrow + count sit on one row, space-between. */
.orn-tier__topline { display: flex; align-items: center; justify-content: space-between; }
.orn-tier__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--orn-navy); }
.orn-tier--amber .orn-tier__eyebrow, .orn-tier--amber .orn-tier__count { color: var(--orn-navy); }
.orn-tier--red .orn-tier__eyebrow, .orn-tier--red .orn-tier__count { color: var(--orn-red); }
.orn-tier__count { font-family: var(--orn-font-mono); font-weight: 600; font-size: 24px; line-height: 1; color: var(--orn-blue); }
.orn-tier__title { font-family: var(--orn-font-display); font-weight: 700; font-size: 18px; color: var(--orn-text); line-height: 1.2; margin: 0; }
.orn-tier__lede { color: rgb(90, 101, 115); font-size: 13.5px; line-height: 1.5; margin: 0; }
/* =============================================================
Sell-through bar
============================================================= */
.orn-bar { height: 8px; background: var(--orn-cream-2); border-radius: var(--r-pill); overflow: hidden; }
.orn-bar__fill { height: 100%; background: var(--orn-blue); border-radius: var(--r-pill); transition: width 0.4s ease; }
.orn-bar--green .orn-bar__fill { background: var(--orn-green); }
.orn-bar--amber .orn-bar__fill { background: var(--orn-amber); }
.orn-bar--red .orn-bar__fill { background: var(--orn-red); }
.orn-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 10px 0; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute); }
.orn-legend__sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--sp-2); vertical-align: middle; }
/* Section header for "Departures filling now" — title/lede on the left,
"View all promotions →" on the right. Same shape as .orn-rgnhead but
without the eyebrow line. */
.orn-filhead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.orn-filhead__copy { flex: 1 1 320px; max-width: 640px; }
.orn-filhead__cta { color: var(--orn-red); font-family: var(--orn-font-body); font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; }
.orn-filhead__cta:hover { color: var(--orn-navy); }
/* Horizontal scroll strip — ~3.5 cards visible per viewport width, scrolls
horizontally with snap. Cards shrink to fit; nights suffix stripped so
the route label reads "Munich → Vienna" not "Munich 1N → Vienna 2N". */
.orn-depstrip { display: flex; gap: 16px; margin-top: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; }
.orn-depstrip::-webkit-scrollbar { height: 8px; }
.orn-depstrip::-webkit-scrollbar-thumb { background: rgba(20, 35, 59, 0.18); border-radius: 6px; }
.orn-depstrip::-webkit-scrollbar-track { background: transparent; }
.orn-depstrip > .orn-depcard { flex: 0 0 calc((100% - 3 * 16px) / 3.5); min-width: 240px; max-width: 340px; scroll-snap-align: start; }
@media (max-width: 768px) {
.orn-depstrip > .orn-depcard { flex: 0 0 calc((100% - 16px) / 1.4); }
}
/* Phones: show one big departure card (plus a peek of the next) instead of
~1.4 cramped cards, so the price + "Select seats" footer has room. The
strip goes full-bleed past the container gutter with a small inset so the
card can grow wider than the gutter-boxed width. Placed after the <=768
rule so it wins the cascade at narrow widths. */
@media (max-width: 640px) {
.orn-depstrip { margin-inline: calc(var(--orn-gutter) * -1); padding-inline: 16px; scroll-padding-left: 16px; }
.orn-depstrip > .orn-depcard { flex: 0 0 90%; max-width: none; }
}
/* Shrink card typography slightly since cards are narrower in the strip. */
.orn-depstrip .orn-depcard__route { font-size: 22px; }
.orn-depstrip .orn-depcard__body { padding: 0px 18px 20px; }
.orn-depstrip .orn-depcard__price-amount { font-size: 22px; }
/* =============================================================
Departure card — "Departures filling now" grid.
Matches reference data-dc-tpl="146"–"173" exactly:
white paper, 1px cream border, 18px radius, soft shadow,
7px tier-tone strip at top, 20×22 padding, internal flex column.
============================================================= */
.orn-depcard { background: var(--orn-paper); border: 1px solid rgb(228, 221, 205); border-radius: 18px; overflow: hidden; box-shadow: rgba(20, 35, 59, 0.06) 0 10px 28px; display: flex; flex-direction: column; }
.orn-depcard__media { position: relative; aspect-ratio: 16 / 6; background: rgb(230, 226, 216) center/cover no-repeat; }
.orn-depcard__media--placeholder { background: linear-gradient(135deg, rgb(230, 226, 216), rgb(210, 204, 190)); }
.orn-depcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.orn-depcard__code { position: absolute; top: 12px; left: 12px; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.16em; font-weight: 700; color: rgb(15, 15, 15); background: rgba(255, 255, 255, 0.94); text-transform: uppercase; border-radius: 6px; padding: 5px 10px; box-shadow: rgba(15, 15, 15, 0.15) 0 2px 6px; }
.orn-flight-pill,
.orn-jrycard > .orn-flight-pill { position: absolute; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--orn-navy); color: white; font-family: var(--orn-font-body); font-size: 10.5px; font-weight: 700; text-transform: uppercase; box-shadow: 0 2px 6px rgba(15, 15, 15, 0.18); z-index: 3; }
.orn-flight-pill--top-left { top: 12px; left: 12px; }
.orn-flight-pill--top-right { top: 12px; right: 12px; }
.orn-depcard__chip { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; color: rgb(190, 63, 57); background: rgba(253, 233, 231, 0.96); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; box-shadow: rgba(15, 15, 15, 0.12) 0 2px 6px; }
.orn-depcard--amber .orn-depcard__chip { color: rgb(199, 122, 43); background: rgba(252, 240, 224, 0.96); }
.orn-depcard--green .orn-depcard__chip { color: rgb(14, 124, 134); background: rgba(224, 240, 242, 0.96); }
.orn-depcard--red .orn-depcard__chip { color: rgb(190, 63, 57); background: rgba(252, 232, 230, 0.96); }
.orn-depcard__route { display: flex; align-items: center; gap: 11px; margin-top: 14px; font-family: var(--orn-font-display); font-weight: 800; font-size: 24px; color: rgb(15, 15, 15); line-height: 1.1; }
.orn-depcard__route-arrow { color: var(--orn-gold); }
.orn-depcard__sub { font-size: 13px; color: rgb(90, 101, 115); margin-top: 3px; }
.orn-depcard__date { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--orn-font-mono); font-size: 13px; font-weight: 600; color: rgb(15, 15, 15); }
.orn-depcard__date-icon { color: rgb(242, 13, 22); }
.orn-depcard__bar-wrap { margin-top: 12px; }
.orn-depcard__bar { height: 9px; border-radius: 6px; background: rgb(237, 231, 218); overflow: hidden; }
.orn-depcard__bar-fill { height: 100%; border-radius: 6px; background: rgb(245, 138, 130); transition: width 0.4s ease; }
.orn-depcard--amber .orn-depcard__bar-fill { background: rgb(199, 122, 43); }
.orn-depcard--green .orn-depcard__bar-fill { background: rgb(14, 124, 134); }
.orn-depcard--red .orn-depcard__bar-fill { background: rgb(190, 63, 57); }
.orn-depcard__seats { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12.5px; color: rgb(122, 133, 147); font-family: var(--orn-font-mono); }
.orn-depcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-top: auto; padding-top: 10px; }
.orn-depcard__price-label { font-size: 12px; color: rgb(154, 138, 110); text-transform: none; letter-spacing: 0; }
.orn-depcard__price-amount { font-family: var(--orn-font-mono); font-size: 28px; font-weight: 600; color: rgb(15, 15, 15); line-height: 1.1; }
.orn-depcard__savings-text { color: #1F7A3D; font-family: var(--orn-font-body); font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.2; }
.orn-depcard__cta { display: inline-flex; align-items: center; background: rgb(15, 15, 15); color: var(--orn-text-light); font-weight: 700; font-size: 14px; border-radius: 10px; padding: 12px 18px; white-space: nowrap; }
.orn-depcard__cta:hover { background: rgb(0, 0, 0); color: #fff; }
/* =============================================================
Journey card — "All Europe journeys" grid (8 master routes).
Matches reference data-dc-tpl="179"–"189" exactly:
white paper, 1px cream border + 5px LEFT accent in family colour,
16px radius, soft shadow, 20×20 padding, min-height 188, flex
column with price + family-coloured "View →" at the bottom.
============================================================= */
.orn-jrygrid { display: flex; gap: 20px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.orn-jrygrid::-webkit-scrollbar { display: none; }
.orn-jrycard { position: relative; flex: 0 0 340px; scroll-snap-align: start; cursor: pointer; background: rgb(15, 15, 15) center/cover no-repeat; padding: 26px; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 0 12px 28px; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.orn-jrycard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%); pointer-events: none; }
.orn-jrycard > * { position: relative; z-index: 1; }
.orn-jrycard--image { background-color: rgb(15, 15, 15); }
.orn-jrycard:hover { transform: translateY(-2px); box-shadow: rgba(20, 35, 59, 0.1) 0 14px 28px; }
.orn-jrycard--blue { border-left-color: rgb(47, 128, 237); }
.orn-jrycard--blue2 { border-left-color: rgb(31, 111, 178); }
.orn-jrycard--red { border-left-color: rgb(192, 57, 43); }
.orn-jrycard--amber { border-left-color: var(--orn-amber); }
.orn-jrycard--green { border-left-color: var(--orn-green); }
.orn-jrycard--orange { border-left-color: var(--orn-orange); }
.orn-jrycard--purple { border-left-color: var(--orn-purple); }
.orn-jrycard--teal { border-left-color: var(--orn-teal); }
.orn-jrycard__chip { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--orn-navy); color: #fff; font-family: var(--orn-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.orn-jrycard__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 26px; line-height: 1.1; color: #fff; margin: 0 0 8px; }
.orn-jrycard__sub { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: 0 0 14px; line-height: 1.4; }
.orn-jrycard__pricerow { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 4px; color: rgba(255, 255, 255, 0.8); }
.orn-jrycard__price-label { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.orn-jrycard__price-amount { font-family: var(--orn-font-display); font-size: 20px; font-weight: 800; color: #fff; }
.orn-jrycard__view { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 700; color: #fff; }
.orn-jrycard--blue .orn-jrycard__view { color: rgb(47, 128, 237); }
.orn-jrycard--blue2 .orn-jrycard__view { color: rgb(31, 111, 178); }
.orn-jrycard--red .orn-jrycard__view { color: rgb(192, 57, 43); }
.orn-jrycard--amber .orn-jrycard__view { color: var(--orn-amber); }
.orn-jrycard--green .orn-jrycard__view { color: var(--orn-green); }
.orn-jrycard--orange .orn-jrycard__view { color: var(--orn-orange); }
.orn-jrycard--purple .orn-jrycard__view { color: var(--orn-purple); }
.orn-jrycard--teal .orn-jrycard__view { color: var(--orn-teal); }
/* =============================================================
Wizard
============================================================= */
/* =============================================================
Wizard column — focused narrow column per ORN Find Your Trip mockup.
Container is 880px (not the 1200px site-wide container) so the
wizard reads as a guided flow, not a marketing page.
============================================================= */
.orn-wizard { background: var(--orn-cream); min-height: 100dvh; padding: var(--sp-6) 0 var(--sp-9); position: relative; }
/* Full-viewport wait overlay while narrow / must-see / results calls are in
flight. Keeps the flow honest — no "0 products" flash between commit and
response. */
.orn-wizard__wait { position: fixed; inset: 0; background: rgba(15, 15, 15, 0.35); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.orn-wizard__wait[hidden] { display: none; }
.orn-wizard__wait-inner { background: #fff; border-radius: 20px; padding: 28px 32px; box-shadow: 0 24px 60px rgba(15, 15, 15, 0.25); display: flex; align-items: center; gap: 16px; max-width: 320px; }
.orn-wizard__wait-spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(20, 35, 59, 0.15); border-top-color: var(--orn-red, #F20D16); animation: orn-wizard-spin 0.7s linear infinite; flex: 0 0 auto; }
.orn-wizard__wait-text { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; color: var(--orn-ink, rgb(20, 35, 59)); line-height: 1.4; }
@keyframes orn-wizard-spin { to { transform: rotate(360deg); } }
.orn-wizard__top { display: flex; align-items: center; justify-content: space-between; max-width: 1175px; margin-inline: auto; padding: 0 28px; font-size: 14px; }
.orn-wizard__back { color: var(--orn-ink-2); font-weight: 600; display: inline-flex; gap: var(--sp-2); }
.orn-wizard__counter { font-family: var(--orn-font-mono); font-size: 13px; color: rgb(122, 133, 147); letter-spacing: 0.08em; }
.orn-wizard__progress { height: 5px; background: rgb(224, 217, 201); /* warm-cream track — matches mockup */ max-width: 1175px; margin: 14px auto 0; border-radius: 4px; overflow: hidden; }
.orn-wizard__progress-fill { height: 100%; background: var(--orn-gold); border-radius: 4px; transition: width 0.25s ease; }
.orn-wizard__pillrow { max-width: 1175px; margin: 22px auto 0; padding: 0 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orn-wizard__matchpill { background: rgb(251, 238, 237); color: rgb(201, 10, 18); border-radius: var(--r-pill); padding: 6px 14px; font-family: var(--orn-font-mono); font-size: 15px; font-weight: 600; }
.orn-wizard__hint { color: var(--orn-mute); font-size: 13.5px; }
.orn-wizard__card { max-width: 1175px; margin: 18px auto 0; border-radius: 20px; min-height: 300px; display: flex; flex-direction: column; }
/* CRITICAL: the wizard JS toggles steps via `el.hidden = true/false`. The
user-agent stylesheet applies `[hidden] { display: none }` at the lowest
specificity (0,0,0,1), and the rule above sets `display: flex` at class
specificity (0,0,1,0) — which wins, leaving every step rendered. Without
this override every step card stacks vertically and Continue appears to
do nothing. Scope to wizstep so it can't accidentally affect any
non-wizard element that happens to be hidden + .orn-wizard__card. */
.orn-wizstep[hidden] { display: none !important; }
@media (max-width: 640px) {
/* The card carried no horizontal padding, so step content (eyebrow,
question, lede, options) sat flush against the screen edge and the
sticky nav — whose negative margins already assume a var(--sp-5)
gutter — overflowed. Give the card that gutter and align the top /
progress / pill rows to the same 24px so everything lines up. */
.orn-wizard__card { border-radius: 16px; padding-inline: var(--sp-5); }
.orn-wizard__top, .orn-wizard__pillrow { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.orn-wizard__progress { margin-inline: var(--sp-5); }
}
.orn-wizard__step-eyebrow { font-family: var(--orn-font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(242, 13, 22); /* darker gold — mockup */ font-weight: 600; margin-bottom: 0; }
.orn-wizard__question { font-family: var(--orn-font-display); font-weight: 800; font-size: 34px; line-height: 1.1; margin: 10px 0 8px; }
.orn-wizard__lede { color: rgb(90, 101, 115); font-size: 15.5px; margin-bottom: 0; }
/* Options are a chip-wrap (flex), not a column grid — matches mockup */
.orn-wizard__options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.orn-wizard__option { text-align: left; cursor: pointer; background: var(--orn-paper); border: 2px solid rgb(243, 243, 243); color: var(--orn-text); border-radius: 14px; padding: 16px 22px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 17px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.orn-wizard__option:hover { border-color: var(--orn-gold); }
.orn-wizard__option[aria-pressed="true"], .orn-wizard__option.is-selected { border-color: var(--orn-navy); }
.orn-wizard__option-title { font-family: var(--orn-font-body); font-weight: 600; font-size: 17px; color: var(--orn-text); }
.orn-wizard__option-sub { color: rgb(154, 138, 110); font-size: 12.5px; font-weight: 500; }
.orn-wizard__option--coming { opacity: 0.6; cursor: not-allowed; }
.orn-wizard__option--coming:hover { border-color: rgb(243, 243, 243); }
.orn-wizard__option-badge { display: inline-block; margin-top: 6px; font-family: var(--orn-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orn-navy); background: rgb(253, 240, 239); border: 1px solid rgb(246, 203, 199); padding: 3px 8px; border-radius: 999px; align-self: flex-start; }
.orn-wizard__nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 30px; }
.orn-wizard__nav .orn-btn { min-height: 48px; border-radius: 11px; font-size: 15px; font-weight: 700; padding: 13px 30px; }
/* Disabled Continue — warm-stone fill with white text, per mockup. Scoped
to wizard nav so site-wide .orn-btn--dark[disabled] isn't affected. */
.orn-wizard__nav .orn-btn--dark[disabled], .orn-wizard__nav .orn-btn--dark:disabled { background: rgb(201, 194, 178); color: #ffffff; cursor: not-allowed; border-color: rgb(201, 194, 178); box-shadow: none; }
.orn-wizard__skip { color: var(--orn-mute); text-decoration: none; font-size: 13px; }
.orn-wizard__counter { margin-left: auto; color: var(--orn-mute); font-family: var(--orn-font-mono); font-size: 13px; }
/* Mobile step-content overrides. Placed AFTER the base .orn-wizard__question /
__options / __option rules above so they win on equal specificity: scale the
heading down for phones and let options fill the column instead of holding a
190px min-width. */
@media (max-width: 640px) {
.orn-wizard__question { font-size: clamp(24px, 6.8vw, 30px); }
.orn-wizard__options { margin-top: 20px; gap: 10px; }
.orn-wizard__option { min-width: 0; width: 100%; padding: 14px 16px; }
}
@media (max-width: 767px) {
.orn-wizard__nav { position: sticky; bottom: 0; background: var(--orn-paper); margin: var(--sp-6) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--orn-line); z-index: 5; }
.orn-wizard__nav .orn-btn--primary { flex: 1; }
}
/* Result cards (wizard step 4 results + departures-filling-now).
Numbers pin to ~/Downloads/Results Listing.html so the live render
matches the design mockup exactly. Card is a wrapping flex row (not
grid) so columns stack cleanly at narrow widths; the 5px LEFT border
carries the tone accent while the other sides stay warm-cream. */
.orn-result { background: var(--orn-paper); border: 1px solid rgb(243, 243, 243); border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; box-shadow: none; }
.orn-result--green { border-left-color: rgb(30, 122, 78); }
.orn-result--amber { border-left-color: var(--orn-amber); }
.orn-result--red { border-left-color: var(--orn-red); }
/* Left column — route + sub + Includes pill */
.orn-result > div:first-child { min-width: 190px; flex: 1 1 0; }
.orn-result__route { display: flex; align-items: center; gap: 10px; font-family: var(--orn-font-display); font-weight: 800; font-size: 21px; color: var(--orn-text); line-height: 1; }
.orn-result__route-arrow { display: inline-block; vertical-align: middle; color: #F20D16; }
.orn-result__sub { font-size: 13.5px; color: rgb(90, 101, 115); /* slate, NOT warm-mute */ margin-top: 4px; }
.orn-result__tag { display: inline-flex; align-items: center; gap: 7px; background: rgb(251, 238, 237); color: rgb(27, 94, 60); padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; margin-top: 10px; }
/* Middle column — date + fill bar + sell label */
.orn-result__date { font-family: var(--orn-font-mono); font-size: 15px; font-weight: 600; color: var(--orn-text); }
.orn-result__sell { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; margin-top: 5px; color: var(--orn-mute); /* mockup uses Hanken-cased "Selling well" — NOT uppercase */ text-transform: none; letter-spacing: 0; }
.orn-result__sell--green { color: rgb(30, 122, 78); }
.orn-result__sell--amber { color: var(--orn-amber); }
.orn-result__sell--red { color: var(--orn-red); }
.orn-result__sell--blue { color: rgb(224, 106, 97); }
/* Right column — price + Select seats CTA */
.orn-price { text-align: right; min-width: 100px; display: flex; flex-direction: column; }
.orn-price__label { font-family: var(--orn-font-body); /* NOT mono caps */ font-size: 11px; color: rgb(154, 138, 110); letter-spacing: 0; text-transform: none; /* lowercase "per person" */ }
.orn-price__amount { font-family: var(--orn-font-mono); font-size: 22px; font-weight: 600; color: var(--orn-text); }
.orn-result .orn-btn--dark { background: rgb(20, 35, 59); color: rgb(244, 239, 227); border-radius: 10px; padding: 13px 22px; font-weight: 700; font-size: 14px; white-space: nowrap; }
/* Scoped fill-bar override for the result card — match Results Listing.html
exactly (8px tall, warmer track, fixed 160px width on the middle column). */
.orn-result .orn-bar { height: 8px; width: 160px; background: rgb(237, 231, 218); border-radius: 6px; margin-top: 8px; }
.orn-result .orn-bar__fill { background: rgb(37, 99, 168); border-radius: 6px; }
.orn-result .orn-bar--green .orn-bar__fill { background: rgb(30, 122, 78); }
/* =============================================================
Journey detail — header card + rung cards + tabs
============================================================= */
.orn-journey-hero { background: var(--orn-navy); color: #f0e6c8; border-radius: var(--r-card); padding: clamp(1.5rem, 4vw, 3rem); border-left: 5px solid var(--orn-red); margin-block: clamp(1.5rem, 4vw, 2.5rem); }
.orn-journey-hero__title { font-size: var(--orn-fs-hero); color: #fff; margin-bottom: var(--sp-3); }
.orn-journey-hero__sub { color: rgb(195, 204, 214); margin-bottom: var(--sp-5); }
.orn-journey-hero__copy { color: rgba(240, 230, 200, 0.72); margin-bottom: var(--sp-5); max-width: 56ch; }
.orn-journey-hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.orn-journey-hero__chip { padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); font-family: var(--orn-font-mono); font-size: var(--orn-fs-small); color: rgba(240, 230, 200, 0.85); }
.orn-journey-hero__strip { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); background: rgba(255, 255, 255, 0.05); border-radius: var(--r-soft); padding: var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.10); }
@media (min-width: 768px) {
.orn-journey-hero__strip { grid-template-columns: auto 1fr; align-items: center; }
}
.orn-journey-hero__strip-eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-blue); }
/* Rung cards */
.orn-rungs { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-block: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 768px) {
.orn-rungs { grid-template-columns: repeat(3, 1fr); }
}
.orn-rung { position: relative; background: var(--orn-paper); border-radius: var(--r-card); padding: var(--sp-6); box-shadow: var(--sh-card); border: 2px solid transparent; display: flex; flex-direction: column; gap: var(--sp-3); cursor: pointer; }
.orn-rung--selected { border-color: var(--orn-red); }
.orn-rung--recommended { box-shadow: var(--sh-raised); }
.orn-rung__recommended-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orn-gold); color: var(--orn-navy); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.orn-rung__topline { display: flex; align-items: center; justify-content: space-between; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; }
.orn-rung__tier { color: var(--orn-red); }
.orn-rung__code { color: var(--orn-mute); }
.orn-rung__title { font-family: var(--orn-font-display); font-weight: 800; font-size: var(--orn-fs-h2); color: var(--orn-navy); }
.orn-rung__route { color: var(--orn-ink-2); font-size: var(--orn-fs-body); }
.orn-rung__lede { color: var(--orn-ink-2); flex: 1; }
.orn-rung__price-row { display: flex; align-items: end; justify-content: space-between; margin-top: var(--sp-4); }
.orn-rung__price-row .orn-price__amount { font-size: 1.75rem; }
.orn-rung__select-link { font-family: var(--orn-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orn-gold); font-size: var(--orn-fs-small); }
.orn-rung--selected .orn-rung__select-link { color: var(--orn-red); }
/* Tabs */
.orn-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-3); }
.orn-tabs::-webkit-scrollbar { display: none; }
.orn-tab { padding: var(--sp-3) var(--sp-5); border: 1px solid var(--orn-line); background: var(--orn-paper); border-radius: var(--r-pill); font-weight: 500; white-space: nowrap; color: var(--orn-ink); }
.orn-tab--active { background: rgb(15, 15, 15); color: #fff; border-color: rgb(15, 15, 15); }
.orn-tabpanel { display: none; }
.orn-tabpanel--active { display: block; }
/* Detail blocks */
.orn-info-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 768px) {
.orn-info-grid { grid-template-columns: repeat(2, 1fr); }
}
.orn-info-row { padding: var(--sp-4) 0; border-top: 1px solid var(--orn-line); }
.orn-info-row__label { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-gold); margin-bottom: var(--sp-1); }
.orn-info-row__value { font-weight: 600; }
/* Itinerary timeline */
.orn-itinerary { padding-left: var(--sp-5); position: relative; margin-top: var(--sp-5); }
.orn-itinerary::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1px; background: var(--orn-line-2); }
.orn-itinerary__day { position: relative; padding-block: var(--sp-4); padding-left: var(--sp-5); }
.orn-itinerary__day::before { content: ""; position: absolute; left: -2px; top: var(--sp-5); width: 14px; height: 14px; border-radius: 50%; background: var(--orn-gold); border: 3px solid var(--orn-cream); }
.orn-itinerary__day-eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--orn-gold); }
.orn-itinerary__day-title { font-size: var(--orn-fs-h3); margin-block: var(--sp-2); }
.orn-itinerary__day-desc { color: var(--orn-ink-2); font-size: var(--orn-fs-small); }
.orn-itinerary__meals { display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.orn-itinerary__meal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(47, 122, 79, 0.12); color: var(--orn-green); font-size: 0.7rem; font-weight: 700; font-family: var(--orn-font-mono); }
/* Calendar (dates tab) */
.orn-cal { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 768px) {
.orn-cal { grid-template-columns: repeat(2, 1fr); }
}
.orn-cal__month { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: var(--r-card); padding: var(--sp-5); }
.orn-cal__month-title { font-family: var(--orn-font-display); font-size: 1.2rem; margin-bottom: var(--sp-3); }
.orn-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-family: var(--orn-font-mono); font-size: 0.78rem; }
.orn-cal__dow { text-align: center; color: var(--orn-mute); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; padding-block: var(--sp-2); }
.orn-cal__cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-tile); background: var(--orn-cream-2); color: var(--orn-mute); }
.orn-cal__cell--best { background: var(--orn-green); color: #fff; }
.orn-cal__cell--good { background: var(--orn-amber); color: #fff; }
.orn-cal__cell--rising { background: var(--orn-orange); color: #fff; }
.orn-cal__cell--last { background: var(--orn-red); color: #fff; }
/* Included tiles */
.orn-incl { background: var(--orn-paper); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: var(--sp-2); }
.orn-incl__check { color: var(--orn-green); font-weight: 700; display: inline-flex; gap: var(--sp-2); align-items: center; }
.orn-incl__title { font-family: var(--orn-font-display); font-size: 1.05rem; color: var(--orn-navy); }
.orn-incl__lede { color: var(--orn-ink-2); font-size: var(--orn-fs-small); }
/* Tour manager card */
.orn-tm { background: var(--orn-navy); color: #f0e6c8; border-radius: var(--r-card); padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: start; }
.orn-tm__avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--orn-gold); color: var(--orn-navy); display: grid; place-items: center; font-family: var(--orn-font-display); font-weight: 900; font-size: 1.5rem; }
.orn-tm__eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-gold); }
.orn-tm__name { color: #fff; font-size: var(--orn-fs-h2); margin: var(--sp-2) 0; }
.orn-tm__role { color: rgba(240, 230, 200, 0.72); margin-bottom: var(--sp-4); }
.orn-tm__bio { color: rgba(240, 230, 200, 0.82); margin-bottom: var(--sp-4); max-width: 64ch; }
.orn-tm__quote { border-left: 3px solid var(--orn-gold); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: #f0e6c8; font-style: italic; }
.orn-tm__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-tm__stat-n { font-family: var(--orn-font-display); font-size: 1.6rem; color: #fff; }
.orn-tm__stat-l { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 230, 200, 0.55); margin-top: var(--sp-1); }
@media (max-width: 640px) {
.orn-tm { grid-template-columns: 1fr; text-align: center; }
.orn-tm__avatar { margin-inline: auto; }
.orn-tm__quote { text-align: left; }
}
/* Floating WhatsApp / Co-pilot CTAs */
.orn-wa { position: fixed; bottom: var(--sp-5); right: var(--sp-5); width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: var(--sh-raised); z-index: 30; }
.orn-copilot-fab { position: fixed; bottom: calc(var(--sp-5) + 64px); right: var(--sp-5); background: var(--orn-navy); color: var(--orn-gold); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); box-shadow: var(--sh-raised); z-index: 30; display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--orn-font-mono); font-size: var(--orn-fs-small); letter-spacing: 0.12em; text-transform: uppercase; }
@media (min-width: 1024px) {
.orn-copilot-fab { display: none; } /* desktop uses the panel below */
}
/* Hide the floating co-pilot pill on phones — it overlaps page content. The
co-pilot is still reachable via the inline .orn-jd__copilot-card, which
opens the same panel. */
@media (max-width: 767px) {
.orn-copilot-fab { display: none; }
}
/* Co-pilot side panel (desktop) */
.orn-copilot-panel { display: none; background: var(--orn-navy); color: #f0e6c8; border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-raised); }
@media (min-width: 1024px) {
.orn-copilot-panel { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 100px; }
}
.orn-copilot-panel__eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-gold); }
.orn-copilot-panel__title { color: #fff; font-size: var(--orn-fs-h3); }
.orn-copilot-panel__lede { color: rgb(195, 204, 214); font-size: 0.95rem; }
.orn-copilot-panel__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.orn-copilot-panel__chip { padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); font-size: var(--orn-fs-small); color: rgba(240, 230, 200, 0.85); }
.orn-copilot-panel__cta { background: var(--orn-gold); color: var(--orn-navy); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-pill); font-weight: 700; text-align: center; margin-top: var(--sp-3); }
/* =============================================================
Co-pilot modal / bottom-sheet
============================================================= */
.orn-copilot { position: fixed; inset: 0; background: rgba(10, 24, 55, 0.55); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: end; }
.orn-copilot.is-open { display: flex; }
@media (min-width: 1024px) {
.orn-copilot { align-items: center; justify-content: center; }
}
.orn-copilot__panel { background: #0a0f1f; color: #f0e6c8; width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; box-shadow: var(--sh-sheet); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 1024px) {
.orn-copilot__panel { max-width: 720px; max-height: 80vh; border-radius: var(--r-card); }
}
.orn-copilot__handle { width: 36px; height: 4px; background: rgba(240, 230, 200, 0.25); border-radius: 2px; margin: var(--sp-3) auto var(--sp-2); }
@media (min-width: 1024px) {
.orn-copilot__handle { display: none; }
}
.orn-copilot__top { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__title { color: #fff; font-size: var(--orn-fs-h3); }
.orn-copilot__price { font-family: var(--orn-font-display); color: var(--orn-gold); font-size: 1.4rem; text-align: right; line-height: 1.1; }
.orn-copilot__price-meta { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 230, 200, 0.55); }
.orn-copilot__close { color: rgba(240, 230, 200, 0.7); font-size: 1.5rem; padding: var(--sp-2); }
.orn-copilot__topics { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__topics::-webkit-scrollbar { display: none; }
.orn-copilot__topic { padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); color: rgb(195, 204, 214); white-space: nowrap; font-size: var(--orn-fs-small); }
.orn-copilot__topic--active { background: rgba(200, 156, 80, 0.16); color: var(--orn-gold); border-color: rgba(200, 156, 80, 0.4); }
.orn-copilot__stream { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.orn-copilot__msg { color: rgba(240, 230, 200, 0.85); }
.orn-copilot__chips { padding: var(--sp-3) var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__chip { padding: var(--sp-3) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); color: rgba(240, 230, 200, 0.92); font-size: var(--orn-fs-small); }
.orn-copilot__inputbar { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-5); border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__input { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(240, 230, 200, 0.10); border-radius: var(--r-pill); color: #f0e6c8; padding: var(--sp-3) var(--sp-5); font-family: var(--orn-font-body); font-size: var(--orn-fs-small); }
.orn-copilot__input::placeholder { color: rgba(240, 230, 200, 0.4); font-style: italic; }
.orn-copilot__send { width: 44px; height: 44px; border-radius: 50%; background: rgba(200, 156, 80, 0.16); color: var(--orn-gold); display: grid; place-items: center; border: 1px solid rgba(200, 156, 80, 0.4); font-size: 1.2rem; }
/* Lock body scroll when sheet is open */
body.orn-no-scroll { overflow: hidden; touch-action: none; }
/* =============================================================
Specials / Beyond Europe / Van tours promo
============================================================= */
/* ORN Specials — small cards: 4px tone top + 1px cream sides+bottom,
16px radius, 20×20×18 padding, 190 min-height, soft shadow.
Reference data-dc-tpl="195"–"199". */
.orn-spcl-grid { display: flex; gap: 20px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.orn-spcl-grid::-webkit-scrollbar { display: none; }
.orn-spcl { position: relative; flex: 0 0 340px; scroll-snap-align: start; cursor: pointer; background: rgb(15, 15, 15) center/cover no-repeat; border: none; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 0 12px 28px; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.orn-spcl::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%); pointer-events: none; }
.orn-spcl > * { position: relative; z-index: 1; }
.orn-spcl:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.4) 0 18px 36px; }
.orn-spcl__chip { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--orn-navy); color: #fff; font-family: var(--orn-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.orn-spcl__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 26px; line-height: 1.1; color: #fff; margin: 0 0 8px; }
.orn-spcl__lede { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: 0 0 14px; line-height: 1.4; }
.orn-spcl__view { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; color: #fff; }
/* Legacy alias for older markup emitted by cached JS */
.orn-spcl__eyebrow { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #fff; }
.orn-spcl__explore { font-size: 14px; font-weight: 700; margin-top: auto; padding-top: 12px; color: #fff; }
/* ============================================================
Beyond Europe (worldwide) section
Reference: data-dc-tpl="200"–"216". Section head is a flex row
with "ORN Worldwide · Launching 2026–27" eyebrow + "Beyond Europe"
title + lede on the left, and a navy "Find your region →" CTA on
the right (flex-end aligned). Card grid is 3-col.
============================================================ */
.orn-rgnhead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.orn-rgnhead__copy { flex: 1 1 320px; }
.orn-rgnhead__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--orn-navy); font-weight: 600; text-transform: uppercase; }
.orn-rgnhead__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 34px; color: rgb(15, 15, 15); line-height: 1.05; margin: 10px 0 0; }
.orn-rgnhead__lede { font-size: 16px; color: rgb(90, 101, 115); margin: 8px 0 0; max-width: 640px; line-height: 1.5; }
.orn-rgnhead__cta { display: inline-flex; align-items: center; background: rgb(15, 15, 15); color: #fff; font-weight: 700; font-size: 15px; border-radius: 12px; padding: 13px 22px; white-space: nowrap; }
.orn-rgnhead__cta:hover { background: rgb(0, 0, 0); color: #fff; }
.orn-rgngrid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
@media (min-width: 768px) {
.orn-rgngrid { grid-template-columns: repeat(3, 1fr); }
}
.orn-rgn { cursor: pointer; background: var(--orn-paper); border: 1px solid rgb(228, 221, 205); border-radius: 0; padding: 20px 20px 18px; display: flex; flex-direction: column; min-height: 166px; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.orn-rgn:hover { transform: translateY(-2px); box-shadow: rgba(20, 35, 59, 0.1) 0 14px 28px; }
.orn-rgn__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.orn-rgn__title { font-family: var(--orn-font-display); font-weight: 700; font-size: 21px; color: rgb(15, 15, 15); line-height: 1.15; margin: 0; }
.orn-rgn__soon { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.1em; border: 1px solid rgb(211, 84, 0); color: rgb(211, 84, 0); border-radius: var(--r-pill); padding: 4px 9px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.orn-rgn--green .orn-rgn__soon { border-color: rgb(39, 174, 96); color: rgb(39, 174, 96); }
.orn-rgn--purple .orn-rgn__soon { border-color: rgb(142, 68, 173); color: rgb(142, 68, 173); }
.orn-rgn--red .orn-rgn__soon { border-color: var(--orn-red); color: var(--orn-red); }
.orn-rgn--teal .orn-rgn__soon { border-color: var(--orn-teal); color: var(--orn-teal); }
.orn-rgn__lede { font-size: 14px; color: rgb(90, 101, 115); margin: 6px 0 0; line-height: 1.45; }
.orn-rgn__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; }
.orn-rgn__tag { font-size: 12px; color: rgb(58, 70, 84); background: rgb(243, 243, 243); border-radius: var(--r-pill); padding: 5px 11px; }
/* Van Tours promo — reference data-dc-tpl="217"–"235":
2-col flex card on navy with rounded 22px corners; image on the
left (no padding, object-fit cover), body on the right with 42×46
padding. Title 40px Archivo 800; gold CTA pill; 3 mono stats below. */
.orn-van { background: #fff; color: var(--orn-text-light); border-radius: 22px; overflow: hidden; display: flex; flex-wrap: wrap; }
.orn-van__image { flex: 1 1 300px; position: relative; min-height: 360px; background-size: cover; background-position: 50% 42%; background-repeat: no-repeat; background-color: var(--orn-navy); }
.orn-van__body { flex: 2 1 440px; padding: 42px 46px; display: flex; flex-direction: column; justify-content: center; gap: 0; }
/* Immersive private-vans card — dark bg with full-bleed van photo on the right,
left copy pane with red-outline chip, big title, small "FROM · PP" price, red CTA. */
.orn-van--immersive { position: relative; background: rgb(15, 15, 15) var(--orn-van-image) center right / cover no-repeat; border-radius: 22px; overflow: hidden; min-height: 440px; padding: 48px 52px; display: block; }
.orn-van--immersive::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(15, 15, 15) 0%, rgba(15, 15, 15, 0.9) 32%, rgba(15, 15, 15, 0.35) 55%, rgba(15, 15, 15, 0) 78%); pointer-events: none; z-index: 1; }
.orn-van--immersive .orn-van__body { position: relative; z-index: 2; max-width: 52%; padding: 0; flex: none; gap: 0; }
.orn-van--immersive .orn-van__chip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid rgba(242, 13, 22, 0.7); border-radius: 999px; color: #fff; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 22px; }
.orn-van--immersive .orn-van__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orn-navy); flex-shrink: 0; }
.orn-van--immersive .orn-van__eyebrow { color: var(--orn-navy); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin: 0 0 12px; }
.orn-van--immersive .orn-van__title { color: #fff; font-family: var(--orn-font-display); font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 20px; }
.orn-van--immersive .orn-van__title-line { display: block; font-family: var(--orn-font-heading); }
.orn-van--immersive .orn-van__lede { color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.6; max-width: 460px; margin: 0 0 28px; }
.orn-van--immersive .orn-van__price { margin-bottom: 24px; }
.orn-van--immersive .orn-van__price-k { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--orn-navy); margin-bottom: 4px; }
.orn-van--immersive .orn-van__price-v { font-family: var(--orn-font-display); font-size: 20px; font-weight: 800; color: #fff; }
.orn-van--immersive .orn-van__cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; background: var(--orn-navy); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; margin: 0; box-shadow: 0 10px 26px rgba(242, 13, 22, 0.28); }
.orn-van--immersive .orn-van__cta:hover { background: var(--orn-navy-2); }
.orn-van__stats--hidden { display: none !important; }
@media (max-width: 900px) {
.orn-van--immersive { padding: 36px 28px; min-height: 380px; }
.orn-van--immersive .orn-van__body { max-width: 100%; }
.orn-van--immersive .orn-van__title { font-size: 40px; }
.orn-van--immersive::before { background: linear-gradient(to bottom, rgba(15, 15, 15, 0.4) 0%, rgba(15, 15, 15, 0.9) 65%); }
}
.orn-van__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; text-transform: uppercase; }
.orn-van__title { font-family: var(--orn-font-display); font-weight: 800; color: rgb(15, 15, 15); font-size: 40px; line-height: 1.04; margin: 12px 0 0; }
.orn-van__lede { color: rgb(92, 92, 92); font-size: 17px; line-height: 1.55; max-width: 520px; margin: 12px 0 0; }
.orn-van__cta { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 22px; background: #fff; color: var(--orn-navy); border: 1px solid var(--orn-navy); font-weight: 700; font-size: 16px; border-radius: 12px; padding: 14px 26px; }
.orn-van__cta:hover { background: var(--orn-cream); }
.orn-van__stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 30px; font-family: var(--orn-font-mono); }
.orn-van__stat-n { font-size: 32px; font-weight: 600; color: #111; line-height: 1; }
.orn-van__stat-l { font-size: 12px; color: rgb(92, 92, 92); letter-spacing: 0.06em; margin-top: 3px; text-transform: uppercase; }
/* =============================================================
Why ORN — "Europe on ORN wheels" section.
Reference data-dc-tpl="236"–"295": deeper navy bg, 74px/80px
padding, gold-mono eyebrow, 46px Archivo title, 18px lede with
inline white-bold emphasis span. Below: 2-col grid where LEFT is
a 2×2 grid of small navy pillar cards (gold left-border) and
RIGHT is a tall photo with a bottom-anchored stat strip on a
gradient overlay.
============================================================= */
/* ORN coach gallery — panoramic auto-advancing slideshow above WHY ORN.
* One image at a time fills the frame; each slide crossfades to the next
* every 4.5s via a JS-driven .is-active class swap. */
.orn-bus-slideshow { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: rgb(220, 216, 205); box-shadow: 0 12px 28px rgba(20, 35, 59, 0.14); }
.orn-bus-slideshow__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; }
.orn-bus-slideshow__img.is-active { opacity: 1; }
@media (max-width: 640px) {
.orn-bus-slideshow { aspect-ratio: 4 / 3; }
}
.orn-why { background: var(--orn-cream); color: rgb(15, 15, 15); padding: 74px 0 80px; }
.orn-why__inner { max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); }
.orn-why__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; text-transform: uppercase; }
.orn-why__title { font-family: var(--orn-font-heading); font-weight: 400; color: rgb(15, 15, 15); font-size: 46px; line-height: 1.04; margin: 12px 0 0; max-width: 760px; }
.orn-why__lede { font-size: 18px; color: rgb(92, 92, 92); line-height: 1.55; margin: 14px 0 0; max-width: 720px; }
.orn-why__lede strong { color: rgb(15, 15, 15); font-weight: 600; }
.orn-why__split { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 38px; align-items: stretch; }
@media (min-width: 1024px) {
.orn-why__split { grid-template-columns: 1.05fr 0.95fr; }
}
.orn-why__pillars { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) {
.orn-why__pillars { grid-template-columns: 1fr 1fr; }
}
.orn-why__pillar { background: #fff; border: 1px solid rgb(228, 221, 205); border-radius: 16px; padding: 22px; }
.orn-why__pillar-icon { color: var(--orn-navy); width: 26px; height: 26px; display: inline-block; }
.orn-why__pillar-title { font-family: var(--orn-font-display); font-weight: 700; font-size: 19px; color: rgb(15, 15, 15); margin: 14px 0 0; line-height: 1.2; }
.orn-why__pillar-lede { font-size: 14px; color: rgb(92, 92, 92); line-height: 1.5; margin: 7px 0 0; }
.orn-why__photo { position: relative; border-radius: 18px; overflow: hidden; min-height: 340px; box-shadow: rgba(0, 0, 0, 0.34) 0 24px 50px; background-size: cover; background-position: 46% 52%; background-repeat: no-repeat; background-color: var(--orn-navy); }
.orn-why__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 26, 43, 0.86) 0%, rgba(14, 26, 43, 0.1) 50%, transparent 72%); pointer-events: none; }
.orn-why__photo-stats { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; z-index: 1; }
.orn-why__photo-stat-n { font-family: var(--orn-font-display); font-weight: 800; font-size: 34px; line-height: 1; color: #fff; }
.orn-why__photo-stat-l { font-size: 13px; color: var(--orn-mute-3); margin-top: 3px; }
.orn-why__photo-divider { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.22); }
.orn-why__promises { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
@media (min-width: 900px) {
.orn-why__promises { grid-template-columns: 1fr 1fr 1fr; }
}
.orn-why__promise { background: #F20D16; color: #fff; border-radius: 14px; padding: 24px 26px 26px; box-shadow: 0 10px 24px rgba(242, 13, 22, 0.18); }
.orn-why__promise-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 21px; line-height: 1.15; margin: 0; color: #fff; }
.orn-why__promise-lede { font-size: 14.5px; color: rgba(255, 255, 255, 0.94); line-height: 1.5; margin: 10px 0 0; }
/* =============================================================
Footer
============================================================= */
.orn-footer { background: var(--orn-navy); color: rgb(195, 204, 214); padding-bottom: 0; margin-top: clamp(3rem, 7vw, 5rem); }
/* ─── Brand + EXPLORE / COMPANY link band ────────────────────── */
.orn-footer-linkband { background: rgb(12, 20, 32); color: rgb(143, 160, 180); border-top: 1px solid rgb(27, 40, 56); }
.orn-footer-linkband__inner { max-width: var(--orn-container); margin: 0 auto; padding: 34px var(--orn-gutter) 40px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; }
.orn-footer-linkband__brand { max-width: 320px; }
.orn-footer-linkband__brand-mark { display: flex; align-items: center; gap: 11px; }
.orn-footer-linkband__brand-logo { display: block; height: 36px; width: auto; filter: brightness(0) invert(1); }
.orn-footer-linkband__brand-disc { width: 30px; height: 30px; border-radius: 50%; background: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.orn-footer-linkband__brand-wordmark { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 19px; letter-spacing: 0.03em; color: rgb(244, 239, 227); }
.orn-footer-linkband__brand-eyebrow { font-size: 11px; letter-spacing: 0.24em; color: rgb(110, 130, 152); font-weight: 600; padding-left: 4px; }
.orn-footer-linkband__brand-lede { font-size: 13.5px; line-height: 1.6; margin-top: 14px; color: rgb(138, 138, 138); }
.orn-footer-linkband__cols { display: flex; gap: 52px; flex-wrap: wrap; }
.orn-footer-linkband__col { display: flex; flex-direction: column; gap: 11px; }
.orn-footer-linkband__col-title { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.2em; color: var(--orn-navy); font-weight: 700; text-transform: uppercase; }
.orn-footer-linkband__col-title--sub { margin-top: 18px; }
.orn-footer-linkband__link { font-size: 14px; font-weight: 600; color: rgb(199, 210, 223); text-decoration: none; }
.orn-footer-linkband__talk { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 18px 10px 14px; background: var(--orn-navy); color: #fff; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 8px 22px rgba(242, 13, 22, 0.24); }
.orn-footer-linkband__talk:hover { background: var(--orn-navy-2); }
.orn-footer-linkband__col--region { max-width: 300px; }
.orn-footer-linkband__region-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-footer-linkband__region-chip { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: rgb(199, 210, 223); border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.orn-footer-linkband__region-chip:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.orn-footer-linkband__region-chip.is-active { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
/* Thin legal strip under the peace band — Terms + Privacy only. */
.orn-footer__legalstrip { max-width: var(--orn-container); margin: 0 auto; padding: 14px var(--orn-gutter); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: rgba(240, 230, 200, 0.55); border-top: 1px solid rgba(240, 230, 200, 0.08); }
.orn-footer__legalstrip-links a { color: rgb(138, 138, 138); text-decoration: none; margin: 0 4px; }
.orn-footer__legalstrip-links span { margin: 0 4px; opacity: 0.5; }
/* ─── Peace-of-mind band ─────────────────────────────────────── */
.orn-footer-peace { background: rgb(11, 11, 11); color: rgb(245, 245, 245); border-top: 1px solid rgb(38, 38, 38); }
.orn-footer-peace__inner { max-width: 1200px; margin: 0 auto; padding: 56px 28px 60px; }
.orn-footer-peace__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 52px; align-items: center; }
@media (max-width: 900px) {
.orn-footer-peace__grid { grid-template-columns: 1fr; gap: 40px; }
.orn-footer-peace__inner { padding: 44px 20px 48px; }
}
.orn-footer-peace__eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; }
.orn-footer-peace__title { margin: 13px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.06; color: rgb(244, 239, 227); }
@media (max-width: 700px) {
.orn-footer-peace__title { font-size: 26px; }
}
.orn-footer-peace__lede { margin-top: 15px; max-width: 440px; font-size: 16px; color: rgb(175, 192, 210); line-height: 1.6; }
.orn-footer-peace__stats { display: flex; gap: 30px; margin-top: 26px; font-family: 'JetBrains Mono', ui-monospace, monospace; flex-wrap: wrap; }
.orn-footer-peace__stat-v { font-size: 26px; font-weight: 600; color: rgb(244, 239, 227); }
.orn-footer-peace__stat-k { margin-top: 3px; font-size: 11.5px; color: rgb(159, 176, 196); letter-spacing: 0.06em; }
/* Photo cluster — main hero + inset */
.orn-footer-peace__photo { position: relative; height: 360px; }
@media (max-width: 900px) {
.orn-footer-peace__photo { height: 300px; }
}
.orn-footer-peace__photo-main { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%); mask-image: linear-gradient(to right, transparent 0%, #000 18%); }
.orn-footer-peace__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 58%; display: block; }
.orn-footer-peace__photo-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(14, 26, 43, 0.92) 0%, rgba(14, 26, 43, 0.28) 32%, rgba(14, 26, 43, 0) 62%), linear-gradient(to top, rgba(14, 26, 43, 0.72) 0%, rgba(14, 26, 43, 0) 42%); }
.orn-footer-peace__photo-caption { position: absolute; left: 24px; bottom: 20px; }
.orn-footer-peace__photo-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.20em; color: rgb(201, 164, 92); font-weight: 600; }
.orn-footer-peace__photo-headline { margin-top: 5px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; color: rgb(244, 239, 227); line-height: 1.2; }
.orn-footer-peace__photo-inset { position: absolute; right: 20px; bottom: -20px; width: 150px; height: 198px; border-radius: 14px; overflow: hidden; border: 4px solid rgb(14, 26, 43); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.orn-footer-peace__photo-inset .orn-footer-peace__photo-img { object-position: 60% 40%; }
.orn-footer-peace__photo-inset .orn-footer-peace__photo-scrim { background: linear-gradient(to top, rgba(14, 26, 43, 0.60), rgba(14, 26, 43, 0) 55%); }
.orn-footer-peace__photo-inset-label { position: absolute; left: 11px; bottom: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.12em; color: rgb(228, 218, 198); font-weight: 600; }
@media (max-width: 700px) {
.orn-footer-peace__photo-inset { width: 120px; height: 158px; right: 12px; bottom: -14px; }
}
/* Bases chip list */
.orn-footer-peace__bases { margin-top: 48px; }
.orn-footer-peace__bases-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: rgb(138, 138, 138); font-weight: 600; }
.orn-footer-peace__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.orn-footer-peace__chip { display: inline-flex; align-items: center; gap: 9px; background: rgb(21,21,21); border: 1px solid rgb(43, 43, 43); border-radius: 11px; padding: 11px 16px; font-size: 14.5px; font-weight: 600; color: rgb(244, 239, 227); }
.orn-footer-peace__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orn-navy); flex-shrink: 0; }
.orn-footer-peace__chip--soon { background: transparent; border: 1px dashed rgb(70, 88, 111); color: rgb(159, 176, 196); }
.orn-footer-peace__chip-soon { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.10em; font-weight: 700; color: var(--orn-navy); background: rgba(201, 164, 92, 0.14); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
.orn-footer-peace__bases-note { margin-top: 16px; font-size: 12.5px; color: rgb(138, 138, 138); line-height: 1.5; }
.orn-footer__inner { max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 768px) {
.orn-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.orn-footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.orn-footer__logo-mark { display: inline-block; color: #fff; font-family: var(--orn-font-display); font-weight: 900; font-size: 1.8rem; letter-spacing: 0.04em; }
.orn-footer__tagline { max-width: 32ch; }
.orn-footer__col-title { color: #fff; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.orn-footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.orn-footer__link { color: rgba(240, 230, 200, 0.72); cursor: pointer; }
.orn-footer__link:hover { color: var(--orn-gold); }
.orn-footer__user { color: var(--orn-gold); font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.08em; }
.orn-footer__base { max-width: var(--orn-container); margin: var(--sp-7) auto 0; padding: var(--sp-5) var(--orn-gutter) 0; border-top: 1px solid rgba(240, 230, 200, 0.10); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--orn-fs-small); color: rgba(240, 230, 200, 0.5); }
/* =============================================================
Utility
============================================================= */
.orn-hide { display: none !important; }
.orn-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.orn-mt-6 { margin-top: var(--sp-6); }
.orn-mt-7 { margin-top: var(--sp-7); }
.orn-text-mute { color: var(--orn-mute); }
.orn-text-center { text-align: center; }
/* =============================================================
Journey-detail customer skin — overlay applied to the cockpit
DOM when selling_room.jsp is rendered with `orn.skin == customer`.
Body class chain: body.srBody.orn-jd.orn-skin-customer.
Strategy: hide the agent-facing chrome (region picker, inputs
column, agent-only controls), keep the cockpit's data DOM
(#srBrainPanel, #srCockpit, rungs, calendar, itinerary), and
restyle the visible surfaces to match the ORN customer mockup.
============================================================= */
body.orn-jd { background: var(--orn-cream); color: var(--orn-ink); font-family: var(--orn-font-body); }
/* Agent-only chrome — hide on the customer skin */
body.orn-skin-customer .srTopBar, /* region picker strip */ body.orn-skin-customer .srRegionsBar, body.orn-skin-customer .srRegionTopBtn, body.orn-skin-customer .srInputsCol, /* left inputs column */ body.orn-skin-customer .srInputsReopen, body.orn-skin-customer .srAgentInput, body.orn-skin-customer .srBrainLang, /* output-language dropdown */ body.orn-skin-customer #srBrainLang, body.orn-skin-customer .srWhatsAppPreview, body.orn-skin-customer #srCopyWhatsApp, body.orn-skin-customer #srDownloadFlyer, body.orn-skin-customer #srDownloadBrochure, body.orn-skin-customer #srDownloadReel, body.orn-skin-customer .srFamilyList-wrapper, /* family picker (customer arrives pre-selected) */ body.orn-skin-customer #srFamilyList, body.orn-skin-customer .srObjectionChips, body.orn-skin-customer .srWizard, body.orn-skin-customer .srFoldBtn { display: none !important; }
/* Cockpit container — drop the cockpit's own padding/border so the
customer skin chrome (navy hero, container max-width) drives the
layout. */
body.orn-skin-customer #srCockpit { background: transparent; box-shadow: none; border: 0; padding: 0; max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); }
/* Brain panel — re-skin to match the ORN customer co-pilot card.
Cockpit defaults to a tall sidebar; on customer we keep the
sidebar position on desktop but restyle the background to the
navy-on-gold ORN mockup palette. */
body.orn-skin-customer #srBrainPanel { background: var(--orn-navy); border-radius: var(--r-card); color: var(--orn-text-light); box-shadow: var(--sh-raised); }
body.orn-skin-customer #srBrainPanel #srBrainEyebrow { color: var(--orn-gold-3); font-family: var(--orn-font-mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--orn-fs-eyebrow); }
body.orn-skin-customer #srBrainPanel #srBrainBody { background: transparent; }
body.orn-skin-customer #srBrainPanel .srBrainMsg { color: rgb(195, 204, 214); }
/* Family card — visible to agents only; customer skin already hid
#srFamilyList above. No styling needed for customer. */
/* Rung cards — cockpit's ladder renders into #srLadder. Restyle each
rung card to the ORN customer rung mockup: white paper, 16px
radius, tone-coloured top border to match the family palette,
"RECOMMENDED" badge absolute-positioned. The cockpit DOM marks the
recommended rung with .is-recommended; we leverage that. */
body.orn-skin-customer #srLadder .srRungCard { background: var(--orn-paper); border: 2px solid rgb(228, 221, 205); border-radius: 16px; padding: 20px; position: relative; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; }
body.orn-skin-customer #srLadder .srRungCard .srRung__tier,
body.orn-skin-customer #srLadder .srRungCard .srRung__lane,
body.orn-skin-customer #srLadder .srRungCard .srRung__eyebrow { color: var(--orn-navy) !important; }
body.orn-skin-customer #srLadder .srRungCard.is-recommended { border-color: var(--orn-navy); box-shadow: rgba(0, 0, 0, 0.12) 0 14px 32px; }
body.orn-skin-customer #srLadder .srRungCard.is-recommended::before { content: "RECOMMENDED"; position: absolute; top: -11px; left: 20px; background: var(--orn-navy); color: #fff; font-family: var(--orn-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; border-radius: var(--r-pill); padding: 4px 12px; }
/* Tabs row (Map / Detail / Itinerary / Dates / Included) — cockpit
uses .srTab buttons inside a tab bar. Restyle to the ORN customer
pill row: cream pill bar with navy active tab. */
body.orn-skin-customer .srTab { padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); background: var(--orn-paper); border: 1px solid var(--orn-line); font-size: 14px; font-weight: 600; color: var(--orn-ink); white-space: nowrap; }
body.orn-skin-customer .srTab.is-active { background: rgb(15, 15, 15); color: #fff; border-color: rgb(15, 15, 15); }
/* Page wrapper around the cockpit — give the customer skin a top
hero strip without rewriting the cockpit DOM. The ORN customer
header already lands above #srCockpit (via the body-level
header.jsp include in selling_room.jsp when orn.skin == customer). */
body.orn-skin-customer .srCenterEmpty { background: transparent; color: var(--orn-ink-2); }
/* =============================================================
Journey-detail page (Results.html layout). Uses
ornholidays-journey.js for data; this section is purely the
customer skin styling that wraps the rendered content.
Page body class is `orn-page orn-page--journey orn-jd` and the
JS sets familyId/slug attributes on body. Sections render under
the standard .orn-container max-width.
============================================================= */
.orn-jd__main { padding-block: clamp(1.5rem, 4vw, 2rem); }
.orn-jd__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgb(90, 101, 115); margin-bottom: 16px; }
.orn-jd__back:hover { color: var(--orn-navy); }
/* ---------------- Hero card ---------------- */
.orn-jd__hero { background: var(--orn-navy); color: var(--orn-text-light); border-radius: 20px; padding: 34px 38px; }
.orn-jd__hero--image { position: relative; overflow: hidden; padding: 0; min-height: 340px; background-color: rgb(21, 21, 21); background-image: var(--orn-jd-hero-image); background-position: center right; background-size: cover; background-repeat: no-repeat; }
.orn-jd__hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(21, 21, 21) 0%, rgba(21, 21, 21, 0.85) 30%, rgba(21, 21, 21, 0.4) 55%, rgba(21, 21, 21, 0) 80%); pointer-events: none; z-index: 1; }
.orn-jd__hero--image .orn-jd__hero-body { position: relative; z-index: 2; padding: 40px 44px; max-width: 55%; }
@media (max-width: 720px) {
.orn-jd__hero--image .orn-jd__hero-body { max-width: 100%; padding: 32px 24px; }
.orn-jd__hero--image::before { background: linear-gradient(to bottom, rgba(21, 21, 21, 0.3) 0%, rgba(21, 21, 21, 0.85) 100%); }
}
.orn-jd__hero-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 38px; line-height: 1.05; color: #fff; margin: 0; }
.orn-jd__hero-sub { font-size: 16px; color: var(--orn-mute-3); margin: 8px 0 0; }
.orn-jd__hero-copy { font-size: 16px; color: var(--orn-mute-2); line-height: 1.5; margin: 16px 0 0; max-width: 820px; }
.orn-jd__hero-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.orn-jd__hero-chip { font-family: var(--orn-font-mono); font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-pill); padding: 7px 14px; color: rgb(230, 236, 242); }
.orn-jd__hero-strip { display: flex; align-items: center; gap: 14px; margin-top: 22px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 13px; padding: 15px 18px; }
.orn-jd__hero-strip-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.14em; font-weight: 700; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.orn-jd__hero-strip-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.16); }
.orn-jd__hero-strip-text { font-size: 15px; color: rgb(230, 236, 242); line-height: 1.4; }
/* ---------------- Section heads ---------------- */
.orn-jd__sec-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 24px; color: rgb(15, 15, 15); margin: 36px 0 0; }
.orn-jd__sec-sub { font-size: 15px; color: rgb(90, 101, 115); margin: 6px 0 0; }
/* ---------------- Idea mode: hero eyebrow + represents/why sections ---------------- */
.orn-jd__hero-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; color: var(--orn-navy); text-transform: uppercase; margin: 0 0 12px; }
.orn-jd__section { margin-top: 32px; }
.orn-jd__represents { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 720px) {
.orn-jd__represents { grid-template-columns: 1fr; }
}
.orn-jd__represents-item { background: var(--orn-paper); border-radius: 12px; padding: 14px 18px 14px 42px; font-size: 15px; color: var(--orn-text); box-shadow: rgba(20, 35, 59, 0.04) 0 4px 12px; position: relative; line-height: 1.4; }
.orn-jd__represents-item::before { content: "✓"; position: absolute; left: 18px; top: 14px; color: var(--orn-navy); font-weight: 800; font-size: 15px; }
/* Why travellers choose this — big rounded card + icon column + prose */
.orn-jd__why { background: var(--orn-paper); border-radius: 20px; padding: 28px; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
@media (max-width: 720px) {
.orn-jd__why { grid-template-columns: 1fr; }
}
.orn-jd__why::before { content: ""; display: block; background: var(--orn-idea-accent, var(--orn-gold)); border-radius: 14px; aspect-ratio: 1 / 1; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 46%; }
.orn-jd__why-copy { min-width: 0; }
.orn-jd__why-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; color: var(--orn-idea-accent, var(--orn-gold)); text-transform: uppercase; margin: 0 0 10px; }
.orn-jd__why .orn-jd__sec-title { margin: 0 0 12px; }
.orn-jd__why-list { list-style: none; padding: 0; margin: 0; font-size: 15px; color: rgb(74, 84, 100); line-height: 1.6; }
.orn-jd__why-list li { display: inline; }
.orn-jd__why-list li:not(:last-child)::after { content: " "; }
/* ---------------- Rungs ---------------- */
/* Rung ladder — horizontal scroll strip, ~3.5 cards visible per row.
Same scroll-snap idiom as the departures/promotions strips. */
.orn-jd__rungs { display: flex; flex-wrap: nowrap; gap: 16px; margin-top: 20px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: 4px; padding: 22px 4px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.orn-jd__rungs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.orn-jd__rungs > .orn-jd__rung { flex: 0 0 calc((100% - 3 * 16px) / 3.2); min-width: 260px; max-width: 400px; scroll-snap-align: start; }
@media (max-width: 768px) {
.orn-jd__rungs > .orn-jd__rung { flex: 0 0 calc((100% - 16px) / 1.05); }
}
.orn-jd__rung-placeholder { flex: 1 1 100%; background: var(--orn-paper); border: 1px dashed var(--orn-line-2); border-radius: 16px; padding: 24px; color: var(--orn-ink-2); text-align: center; }
.orn-jd__rung { cursor: pointer; background: var(--orn-paper); border: 2px solid rgb(243, 243, 243); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; position: relative; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; text-align: left; font: inherit; color: inherit; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.orn-jd__rung:hover { transform: translateY(-2px); box-shadow: rgba(20, 35, 59, 0.12) 0 14px 32px; }
.orn-jd__rung--recommended { box-shadow: rgba(20, 35, 59, 0.12) 0 14px 32px; }
.orn-jd__rung--selected { border-color: var(--orn-green); }
.orn-jd__rung-badge { position: absolute; top: -11px; left: 20px; background: var(--orn-gold); color: var(--orn-navy); font-family: var(--orn-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; border-radius: var(--r-pill); padding: 4px 12px; }
.orn-jd__rung-flightpill {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--orn-navy);
color: #ffffff;
font-family: var(--orn-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--r-pill);
padding: 5px 14px;
box-shadow: 0 4px 10px rgba(20, 35, 59, 0.18);
white-space: nowrap;
}
.orn-jd__rung-topline { display: flex; align-items: center; justify-content: space-between; }
.orn-jd__rung-tier { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orn-green); }
.orn-jd__rung-tier--grand { color: var(--orn-red); }
.orn-jd__rung-tier--starter { color: rgb(90, 101, 115); }
.orn-jd__rung-tier--classic { color: var(--orn-blue); }
.orn-jd__rung-tier--highlights { color: var(--orn-blue); }
.orn-jd__rung-code { font-family: var(--orn-font-mono); font-size: 13px; color: rgb(154, 138, 110); }
.orn-jd__rung-name { font-family: var(--orn-font-display); font-weight: 700; font-size: 20px; color: rgb(15, 15, 15); margin-top: 4px; line-height: 1.15; }
.orn-jd__rung-meta { font-size: 14px; color: rgb(90, 101, 115); margin-top: 4px; }
.orn-jd__rung-blurb { font-size: 13.5px; color: rgb(110, 117, 133); line-height: 1.4; margin: 5px 0 0; }
.orn-jd__rung-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.orn-jd__rung-price-label { font-size: 11px; color: rgb(154, 138, 110); }
.orn-jd__rung-price { font-family: var(--orn-font-mono); font-size: 23px; font-weight: 600; color: var(--orn-text); line-height: 1.1; }
.orn-jd__rung-savings { color: #1F7A3D; font-family: var(--orn-font-body); font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.2; }
.orn-jd__rung-select { font-size: 13px; font-weight: 700; color: rgb(154, 138, 110); }
.orn-jd__rung--selected .orn-jd__rung-select { color: var(--orn-green); }
/* ---------------- Tabs ---------------- */
/* Tabs — separated pills (Results.html shape). White card with cream
border for the inactive state; solid navy fill for the active.
Margin-top=0 because the new orn-jd__body wrapper sets the gap from
the rungs grid. Doubling it produced a yawning gap. */
/* Single row that scrolls horizontally when it can't fit (mobile) instead of
wrapping to multiple lines. Scrollbar hidden for a clean look; pills don't
shrink. On desktop the row fits so no scroll appears. */
.orn-jd__tabs { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 0; padding: 0; background: transparent; width: auto; }
.orn-jd__tabs::-webkit-scrollbar { display: none; }
.orn-jd__tab { flex: 0 0 auto; padding: 10px 22px; border-radius: var(--r-pill); background: #fff; border: 1px solid #E4DDCD; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; color: #3A4654; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.orn-jd__tab:hover { border-color: #c9a45c; }
.orn-jd__tab--active { background: #14233B; color: #F4EFE3; border-color: #14233B; }
.orn-jd__panels { margin-top: 20px; }
.orn-jd__panel { display: none; }
.orn-jd__panel--active { display: block; }
.orn-jd__panel-empty { background: var(--orn-paper); border: 1px dashed var(--orn-line-2); border-radius: 16px; padding: 36px 24px; color: var(--orn-ink-2); text-align: left; font-size: 15px; }
/* ============================================================================
MOBILE: continuous-scroll + scrollspy tour-detail tabs (design parity).
On mobile the tabs stop being a one-panel-at-a-time switcher and become a
sticky pill bar over a SINGLE continuous page: every content section is
stacked & visible, tapping a pill smooth-scrolls to that section, and the
active pill follows scroll position (scrollspy, driven by JS). Desktop keeps
the classic switcher untouched. Applies to BOTH van & FD flows.
NOTE: this block MUST come AFTER the base .orn-jd__panel rules above — media
queries add no specificity, so equal-specificity selectors resolve by source
order; the continuous-scroll display:block only wins if it's declared later.
============================================================================ */
@media (max-width: 640px) {
/* The Pricing (Dates) tab is redundant on mobile — the booking flow is
reached via the sticky "Check dates & prices" button, the only
full-screen entry point. Hide the pill AND keep its panel out of the
continuous scroll (but NOT while the full-screen overlay is open, when
body.orn-jd-dates-open promotes it to a fixed layer). */
.orn-jd__tab[data-orn-tab="dates"] { display: none; }
body:not(.orn-jd-dates-open) .orn-jd__panel[data-orn-panel="dates"] { display: none; }
/* The sticky pill bar itself is the .orn-jd__tabbar wrapper (see the
max-width:900px block below); the inner .orn-jd__tabs stays a plain
horizontal-scroll track (base rule: flex-nowrap + overflow-x:auto). */
/* All content sections stacked & visible — override the switcher's
display:none so the page becomes one continuous scroll. scroll-margin-top
lets pill taps land just below the pinned bar. */
.orn-jd__panels { margin-top: 14px; }
.orn-jd__panel { display: block; scroll-margin-top: 64px; margin-bottom: 26px; }
/* Visa & Terms are conditional — their panels stay hidden until the server
confirms the product has them. JS stamps orn-has-visa / orn-has-terms on
, mirroring the pill's hidden state. */
.orn-jd__panel[data-orn-panel="visa"],
.orn-jd__panel[data-orn-panel="terms"] { display: none; }
body.orn-has-visa .orn-jd__panel[data-orn-panel="visa"] { display: block; }
body.orn-has-terms .orn-jd__panel[data-orn-panel="terms"] { display: block; }
}
/* ---------------- Detail tab ----------------
Two-card layout matching the design mockup:
LEFT — "Why this journey" (white card, 6 info-meta tiles in 2-col grid)
RIGHT — "Good to know" (cream-tinted card with + bullet list from
the inclusions' whatToExpect[] roll-up)
------------------------------------------- */
.orn-jd__detail { display: flex; flex-direction: column; gap: 20px; }
.orn-jd__detail-card { border-radius: 20px; padding: 32px; }
.orn-jd__detail-card--why { background: #fff; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 24px; }
.orn-jd__detail-card--gtk { background: rgb(255, 251, 251); border: 1px solid rgb(231, 231, 231); padding: 26px 28px; }
/* "Why this journey" (21px) on the left, "Good to know" (19px) on the right
— per the Results.html reference. */
.orn-jd__detail-card--why .orn-jd__detail-title { font-family: Archivo, sans-serif; font-weight: 700; font-size: 21px; color: rgb(20, 35, 59); margin: 0; line-height: 1.2; }
.orn-jd__detail-card--gtk .orn-jd__detail-title { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; color: rgb(20, 35, 59); margin: 0; line-height: 1.2; }
.orn-jd__detail-lede { color: rgb(90, 101, 115); font-size: 15.5px; line-height: 1.55; margin: 12px 0 0; }
/* 6 info meta tiles — 2-col grid, hairline bottom border under each tile */
.orn-jd__detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 22px; }
.orn-jd__detail-meta { border-bottom: 1px solid rgb(237, 231, 218); padding-bottom: 10px; }
.orn-jd__detail-meta-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; font-weight: 600; color: rgb(154, 138, 110); text-transform: none; /* labels are mixed-case in ref ("Group size") */ }
.orn-jd__detail-meta-value { font-family: Archivo, sans-serif; font-size: 15px; font-weight: 500; color: rgb(20, 35, 59); margin-top: 4px; line-height: 1.3; }
@media (max-width: 640px) {
/* Stack the "Why this journey" facts one per line on phones — the 2-col
grid squeezed long values (Itinerary, Meals) into awkward multi-line
wraps. Full-width rows with hairline dividers read cleanly. */
.orn-jd__detail-card { padding: 24px 20px; }
.orn-jd__detail-grid { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
.orn-jd__detail-meta { padding: 14px 0; }
.orn-jd__detail-meta:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* Social-proof strip inside the "Why this journey" card. */
.orn-jd__proof { display: flex; gap: 22px; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 14px 0 4px 0; padding: 14px 16px; background: rgb(255, 251, 251); border: 1px solid rgb(231, 231, 231); border-radius: 14px; }
.orn-jd__proof-item { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.orn-jd__proof-stars { color: var(--orn-navy, #b32232); font-size: 15px; letter-spacing: 1px; }
.orn-jd__proof-value { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; color: rgb(20, 35, 59); }
.orn-jd__proof-label { font-size: 12px; color: rgb(120, 128, 140); margin-top: 2px; }
.orn-jd__proof-line { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; color: rgb(20, 35, 59); line-height: 1.2; }
/* Traveller reviews grid — 2 cols desktop, 1 col mobile. */
.orn-jd__reviews { margin-top: 28px; }
.orn-jd__reviews-title { font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px; color: rgb(20, 35, 59); margin: 0 0 16px; }
.orn-jd__reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.orn-jd__review { border: 1px solid rgba(179, 34, 50, 0.35); border-radius: 16px; padding: 18px 20px; background: #fff; }
.orn-jd__review-head { display: flex; align-items: center; gap: 12px; }
.orn-jd__review-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--orn-navy, #b32232); color: #fff; display: flex; align-items: center; justify-content: center; font-family: Archivo, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; }
.orn-jd__review-meta { flex: 1 1 auto; min-width: 0; }
.orn-jd__review-name { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; color: rgb(20, 35, 59); line-height: 1.2; }
.orn-jd__review-sub { font-size: 12.5px; color: rgb(120, 128, 140); margin-top: 2px; }
.orn-jd__review-rating { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-family: Archivo, sans-serif; font-weight: 700; font-size: 14px; color: rgb(20, 35, 59); }
.orn-jd__review-star { color: var(--orn-navy, #b32232); font-size: 15px; }
.orn-jd__review-body { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: rgb(60, 68, 80); font-style: italic; }
@media (max-width: 900px) {
.orn-jd__reviews-grid { grid-template-columns: 1fr; gap: 12px; }
.orn-jd__proof { gap: 16px; padding: 12px 14px; }
}
/* Good to know list — + bullets in dark gold, body text 13.5px in warm grey */
.orn-jd__gtk-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.orn-jd__gtk-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgb(90, 101, 115); line-height: 1.45; }
.orn-jd__gtk-plus { color: rgb(201, 10, 18); font-weight: 800; font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.orn-jd__gtk-empty { color: var(--orn-ink-2); font-style: italic; margin: 14px 0 0; font-size: 13.5px; }
/* ---------------- Itinerary tab ----------------
Vertical timeline (Itinerary.html reference). No white cards — items
sit directly on the page bg, connected by a 2px cream line, each
anchored by a gold dot. Eyebrow shows day-range + city; title is
the city in Archivo 700; description below in ink-2; meal badges
(B/L/D) float right on the eyebrow line. First node's dot is blue
(arrival), last is green (departure).
----------------------------------------------- */
.orn-jd__itin-timeline { padding-top: 4px; }
.orn-jd__day-item { position: relative; padding-left: 34px; padding-bottom: 24px; border-left: 2px solid rgb(231, 231, 231); margin-left: 6px; margin-right: 20px; }
.orn-jd__day-item--last { border-left-color: transparent; padding-bottom: 0; }
.orn-jd__day-dot { position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: rgb(242, 13, 22); border: 3px solid rgb(237, 234, 225); }
.orn-jd__day-dot--start { background: rgb(47, 128, 237); }
.orn-jd__day-dot--end { background: rgb(30, 122, 78); }
.orn-jd__day-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.orn-jd__day-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; color: var(--orn-text); font-weight: 600; white-space: nowrap; }
.orn-jd__day-meals { display: flex; gap: 5px; margin-left: auto; }
.orn-jd__day-meal { width: 20px; height: 20px; border-radius: 5px; background: rgb(234, 244, 237); color: rgb(30, 122, 78); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.orn-jd__day-title { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; color: rgb(20, 35, 59); margin-top: 8px; line-height: 1.25; }
.orn-jd__day-desc { font-size: 14.5px; color: rgb(90, 101, 115); line-height: 1.5; margin-top: 5px; max-width: 760px; }
/* Mobile itinerary "Read more / Read less" toggle. The collapse markup is only
emitted on small screens (JS-gated), so this styling is inherently mobile. */
.orn-jd__day-desc-toggle {
display: inline;
margin-left: 4px;
padding: 0;
background: none;
border: 0;
font: inherit;
font-weight: 700;
color: var(--orn-navy, rgb(242, 13, 22));
cursor: pointer;
white-space: nowrap;
}
.orn-jd__day-desc-toggle:hover { text-decoration: underline; }
/* ---------------- Dates tab ----------------
Selectors (ex-city + travellers + agent on-behalf), promoted-dates
list, month pills and per-departure pricing rows. Each row shows
date range, availability label (Launch/Selling well/Scarcity), price
per person and Select-seats CTA.
--------------------------------------- */
/* Step navigator — sits above every dates-tab step (Travellers / Date /
Price summary). Green (done) → gold (current) → grey (pending). */
/* Single row that scrolls horizontally on narrow screens rather than wrapping
the numbered steps onto multiple lines. */
.orn-jd__dt-stepnav { display: flex; align-items: center; gap: 12px; padding: 5px 4px 16px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.orn-jd__dt-stepnav::-webkit-scrollbar { display: none; }
.orn-jd__dt-stepnav-item { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--orn-mute, #9a8a6e); font-size: 13px; font-weight: 500; white-space: nowrap; }
.orn-jd__dt-stepnav-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #d9d2c1; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; flex-shrink: 0; }
.orn-jd__dt-stepnav-item.is-done { color: var(--orn-text); }
.orn-jd__dt-stepnav-item.is-done .orn-jd__dt-stepnav-dot { background: var(--orn-text); }
.orn-jd__dt-stepnav-item.is-current { color: var(--orn-navy); font-weight: 600; }
.orn-jd__dt-stepnav-item.is-current .orn-jd__dt-stepnav-dot { background: var(--orn-navy, rgb(20, 35, 59)); }
.orn-jd__dt-stepnav-sep { flex: 0 0 48px; width: 48px; height: 1px; background: #cfc7b3; }
@media (max-width: 640px) {
/* Only 3 steps, so make them FIT the width instead of scrolling (which cut
off "3 Price summary"). Shrink the dots/labels slightly and let the
connector lines flex to absorb the leftover space. */
.orn-jd__dt-stepnav { gap: 8px; overflow-x: visible; }
.orn-jd__dt-stepnav-item { font-size: 12px; gap: 6px; }
.orn-jd__dt-stepnav-dot { width: 22px; height: 22px; font-size: 12px; }
.orn-jd__dt-stepnav-sep { flex: 1 1 auto; width: auto; min-width: 10px; }
}
/* Controls wrapper (Step 1) — restructured with a header block. */
.orn-jd__dt-controls { background: #fff; border: 1px solid var(--orn-line); border-radius: 16px; padding: 28px 32px 24px; margin-bottom: 14px; }
.orn-jd__dt-controls-head { margin-bottom: 20px; }
.orn-jd__dt-controls-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--orn-gold, #b18a4a); margin-bottom: 6px; text-transform: uppercase; }
.orn-jd__dt-controls-title { font-family: 'Archivo', sans-serif; font-size: 30px; font-weight: 800; color: var(--orn-text); line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.3px; }
@media (max-width: 640px) {
.orn-jd__dt-controls-title { font-size: 28px; }
}
.orn-jd__dt-controls-lede { font-size: 14px; color: var(--orn-ink-2, #4a4a4a); line-height: 1.5; margin: 0; max-width: 640px; }
.orn-jd__dt-controls-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
@media (min-width: 720px) {
.orn-jd__dt-controls-grid { grid-template-columns: 1fr 1fr; }
}
.orn-jd__dt-ctrl--agent { grid-column: 1 / -1; }
/* "Select dates →" CTA — full-width navy button under the controls. */
.orn-jd__dt-select-cta { display: block; width: 100%; background: #000; color: #fff; border: none; border-radius: 8px; padding: 14px 18px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s ease; }
.orn-jd__dt-select-cta:hover { background: #222; }
/* Change-buttons group in the price summary head (Change date + Change travellers). */
.orn-jd__dt-price-change-group { display: flex; gap: 8px; flex-wrap: wrap; }
.orn-jd__dt-ctrl-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: rgb(75, 75, 75); margin-bottom: 6px; }
.orn-jd__dt-select, .orn-jd__dt-input { width: 100%; background: var(--orn-cream-2); border: 1px solid var(--orn-line); border-radius: 10px; padding: 10px 12px; font-family: Archivo, sans-serif; font-size: 14px; color: var(--orn-ink); outline: none; }
.orn-jd__dt-select:focus, .orn-jd__dt-input:focus { border-color: var(--orn-gold); }
/* Change-buttons group in the price summary head (Change date + Change travellers). */
.orn-jd__dt-price-change-group { display: flex; gap: 8px; flex-wrap: wrap; }
.orn-jd__dt-ctrl-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: rgb(75, 75, 75); margin-bottom: 6px; }
.orn-jd__dt-select, .orn-jd__dt-input { width: 100%; background: var(--orn-cream-2); border: 1px solid var(--orn-line); border-radius: 10px; padding: 10px 12px; font-family: Archivo, sans-serif; font-size: 14px; color: var(--orn-ink); outline: none; }
.orn-jd__dt-select:focus, .orn-jd__dt-input:focus { border-color: var(--orn-gold); }
/* Rooms-and-pax pill — trigger element that TFRoomPax binds the qtip to */
.orn-jd__dt-roomspax { position: relative; }
.orn-jd__dt-roomspax-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--orn-cream-2); border: 1px solid var(--orn-line); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; color: var(--orn-text); user-select: none; }
.orn-jd__dt-roomspax-trigger:hover { border-color: var(--orn-gold); }
.orn-jd__dt-roomspax-caret { color: var(--orn-mute); font-size: 14px; }
/* ── TFRoomPax popover (scoped) ─────────────────────────────────────
The cockpit-shape widget renders into a qtip-managed popover with
the classes below. We don't load travel_styles.css just for these
~10 selectors; instead we style them here in ORN's vocabulary. The
selectors are global by necessity (qtip mounts the popover at
root, not inside our scoped container) but they're niche
enough that there's no overlap with other tf-main pages.
─────────────────────────────────────────────────────────────────── */
/* Popover chrome — qtip mounts at root; we force position +
z-index across all .qtip variants so other tf-main page rules
(some legacy pages set qtip { position: static } on print media)
can't flatten it. qtip itself only flips aria-hidden on close — it
relies on the host CSS to map that to display:none, so we map it
here. Without this the popover stays visible even after Done. */
.qtip, .qtip-sunav3 { position: absolute !important; z-index: 100000 !important; }
.qtip[aria-hidden="true"] { display: none !important; }
.qtip-sunav3 { background: #fff; border: 1px solid var(--orn-line); border-radius: 14px; box-shadow: rgba(20, 35, 59, 0.16) 0 12px 36px; padding: 0; font-family: Archivo, sans-serif; color: var(--orn-ink); max-width: none; }
.qtip-sunav3 .qtip-content { padding: 0; }
.qtip-sunav3 .qtip-tip { display: none; }
/* Root container of rooms-and-pax content */
.rms-pax-inp-ctr { width: 300px; padding: 16px 18px 12px; box-sizing: border-box; background: #fff; border-radius: 14px; }
/* Each labelled row */
.rms-pax-inp-ctr .lbl { font-family: Archivo, sans-serif; font-weight: 600; font-size: 13px; color: var(--orn-ink); line-height: 1.3; }
/* Rooms row at the top — label left, compact counter right, same line */
.rms-inp-ctr { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 12px; border-bottom: 1px solid var(--orn-line); margin-bottom: 12px; }
.rms-inp-ctr .lbl { font-weight: 700; font-size: 14px; color: var(--orn-text); }
.rms-inp-ctr .inp { flex: 0 0 auto; }
/* Per-room block stack */
.rms-inp-lst { display: flex; flex-direction: column; gap: 12px; }
.rms-inp-itm { padding-top: 12px; border-top: 1px dashed var(--orn-line); }
.rms-inp-itm:first-child { padding-top: 0; border-top: 0; }
/* Pax row inside each room — Adults | Children stacked label-over-counter */
.rm-pax { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.rm-pax-inp { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rm-pax-inp .lbl { font-size: 12px; font-weight: 600; color: var(--orn-ink-2); }
.rm-pax-inp .inp { flex: 0 0 auto; }
/* Child age dropdowns */
.rm-ch-ages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rm-ch-age select { background: var(--orn-cream-2); border: 1px solid var(--orn-line); border-radius: 8px; padding: 6px 10px; font-family: Archivo, sans-serif; font-size: 13px; color: var(--orn-ink); }
/* inputCounter widget — wraps the readonly with - / + buttons */
.icounter-group, .icounter-group--sm { display: inline-flex; align-items: center; background: var(--orn-cream-2); border: 1px solid var(--orn-line); border-radius: 999px; overflow: hidden; height: 32px; }
.icounter-group input, .icounter-group--sm input { border: 0; background: transparent; width: 32px; height: 32px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--orn-text); outline: none; padding: 0; box-sizing: border-box; }
.icounter-btn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--orn-navy); font-weight: 700; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icounter-btn:hover { color: var(--orn-gold); }
.icounter-btn-dsb, .icounter-btn-dsb:hover { color: var(--orn-mute); cursor: not-allowed; opacity: 0.4; }
/* Done row at the bottom */
.rms-close { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--orn-line); text-align: right; }
.rms-close a.ui-button { background: var(--orn-navy); color: #fff; border: 0; border-radius: 999px; padding: 8px 18px; font-family: Archivo, sans-serif; font-weight: 600; font-size: 13px; text-decoration: none; display: inline-block; }
.rms-close a.ui-button:hover { background: #1d3055; }
/* Validation message slot used by TFRoomPax.isValid */
.rms-err--msg { color: #b8392f; font-size: 12px; margin-top: 6px; text-align: left; }
.orn-jd__dt-agent-row { display: flex; gap: 8px; align-items: center; }
.orn-jd__dt-chip-clear { background: var(--orn-cream-2); border: 1px solid var(--orn-line); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--orn-ink); font-size: 18px; }
/* Promoted dates eyebrow + list */
.orn-jd__dt-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; font-weight: 600; color: rgb(154, 138, 110); margin: 18px 0 12px; }
/* Month pills */
.orn-jd__dt-mnths { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.orn-jd__dt-mnth { background: #fff; border: 1px solid #E4DDCD; border-radius: 999px; padding: 7px 14px; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 600; color: #3A4654; cursor: pointer; user-select: none; }
.orn-jd__dt-mnth.is-active { background: #14233B; color: #F4EFE3; border-color: #14233B; }
/* Rows + empty / loading */
.orn-jd__dt-loading, .orn-jd__dt-empty { background: #fff; border: 1px solid var(--orn-line); border-radius: 14px; padding: 24px; text-align: center; color: var(--orn-ink-2); font-size: 14px; font-style: italic; }
.orn-jd__dt-empty-cta { display: block; margin: 10px auto 0; background: none; border: none; padding: 4px 8px; font-family: var(--orn-font-body); font-size: 13px; font-weight: 600; color: var(--orn-gold-3, #c9a45c); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-style: normal; }
.orn-jd__dt-empty-cta:hover { color: var(--orn-navy); }
.orn-jd__dt-rows { display: flex; flex-direction: column; gap: 10px; }
.orn-jd__dt-row { background: #fff; border: 1px solid var(--orn-line); border-radius: 14px; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.orn-jd__dt-row.is-disabled { opacity: 0.5; }
.orn-jd__dt-row-range { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; color: rgb(20, 35, 59); line-height: 1.2; }
.orn-jd__dt-row-ttl { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; font-weight: 700; color: rgb(90, 101, 115); background: rgb(245, 242, 235); border: 1px solid rgb(228, 222, 210); padding: 4px 10px 4px 8px; border-radius: 999px; text-transform: uppercase; line-height: 1; }
.orn-jd__dt-row-ttl::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.75; flex: 0 0 auto; }
/* Status pill tones — colour-coded by the cockpit's `cls` field.
ornholidays-journey.js normalizes the value (lowercase + collapse
spaces/underscores to hyphen) before applying, so the cockpit's
"FAST FILLING" / "selling_well" / "Sold Out" all land on the
correct selector below.
----------------------------------------------------------- */
/* ORN brand status colours — locked values:
available rgb(46, 158, 99) green
fast filling rgb(235, 185, 74) amber
last few seats rgb(212, 90, 71) red
Selling-well + launch derived from the same family; sold-out / waitlist
stay neutral so they read as terminal states. */
.orn-jd__dt-row-cls--launch, .orn-jd__dt-row-cls--early, .orn-jd__dt-row-cls--early-seats, .orn-jd__dt-row-cls--launch-layer { background: rgba(46, 158, 99, 0.10); border-color: rgba(46, 158, 99, 0.30); color: rgb(46, 158, 99); }
.orn-jd__dt-row-cls--available, .orn-jd__dt-row-cls--avl, .orn-jd__dt-row-cls--avail, .orn-jd__dt-row-cls--open, .orn-jd__dt-row-cls--selling, .orn-jd__dt-row-cls--selling-well, .orn-jd__dt-row-cls--selling-fast { background: rgba(46, 158, 99, 0.12); border-color: rgba(46, 158, 99, 0.32); color: rgb(46, 158, 99); }
.orn-jd__dt-row-cls--fast-filling, .orn-jd__dt-row-cls--filling-fast, .orn-jd__dt-row-cls--filling, .orn-jd__dt-row-cls--few, .orn-jd__dt-row-cls--few-seats, .orn-jd__dt-row-cls--few-left, .orn-jd__dt-row-cls--scarcity, .orn-jd__dt-row-cls--scarcity-layer { background: rgba(235, 185, 74, 0.16); border-color: rgba(235, 185, 74, 0.40); color: rgb(184, 138, 32); }
.orn-jd__dt-row-cls--low, .orn-jd__dt-row-cls--low-seats, .orn-jd__dt-row-cls--last, .orn-jd__dt-row-cls--final, .orn-jd__dt-row-cls--final-seats, .orn-jd__dt-row-cls--last-seats, .orn-jd__dt-row-cls--almost-full { background: rgba(212, 90, 71, 0.10); border-color: rgba(212, 90, 71, 0.36); color: rgb(190, 63, 57); }
.orn-jd__dt-row-cls--low::before, .orn-jd__dt-row-cls--low-seats::before, .orn-jd__dt-row-cls--last::before, .orn-jd__dt-row-cls--final::before, .orn-jd__dt-row-cls--final-seats::before, .orn-jd__dt-row-cls--last-seats::before, .orn-jd__dt-row-cls--almost-full::before { animation: orn-jd-dot-pulse 1.6s ease-in-out infinite; opacity: 1; }
@keyframes orn-jd-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.55; }
}
.orn-jd__dt-row-cls--sld, .orn-jd__dt-row-cls--sold-out, .orn-jd__dt-row-cls--soldout, .orn-jd__dt-row-cls--closed { background: rgb(232, 232, 232); border-color: rgb(208, 208, 208); color: rgb(95, 95, 95); }
.orn-jd__dt-row-cls--waitlist { background: rgb(237, 230, 245); border-color: rgba(106, 75, 158, 0.32); color: rgb(106, 75, 158); }
.orn-jd__dt-row-price { text-align: right; }
.orn-jd__dt-row-strike { color: var(--orn-mute); text-decoration: line-through; font-size: 12px; min-height: 14px; }
.orn-jd__dt-row-final { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 23px; color: rgb(20, 35, 59); line-height: 1.1; }
.orn-jd__dt-row-cap { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; color: rgb(154, 138, 110); margin-bottom: 4px; }
.orn-jd__dt-row-cta { background: var(--orn-text); color: #fff; border: 0; border-radius: 12px; padding: 12px 18px; font-family: Archivo, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.orn-jd__dt-row-cta:hover { background: rgb(0, 0, 0); }
.orn-jd__dt-row-cta:disabled { background: #c9c2af; color: #6f6b5e; cursor: not-allowed; }
.orn-jd__dt-more { align-self: center; color: var(--orn-gold-3); font-family: Archivo, sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 6px; }
.orn-jd__dt-more:hover { text-decoration: underline; }
@media (max-width: 720px) {
.orn-jd__dt-row { grid-template-columns: 1fr; gap: 12px; }
.orn-jd__dt-row-price { text-align: left; }
.orn-jd__dt-row-cta { width: 100%; }
}
.orn-jd__dt-row.is-selected { border-color: var(--orn-gold); box-shadow: rgba(201, 164, 92, 0.2) 0 0 0 2px inset; }
/* Price summary panel — paper-white card on the customer surface,
matching the rest of the ORN journey detail. Gold eyebrow, navy
display type, hairline cream dividers, navy total in JetBrains
Mono, gold-pill Save-as-Quote CTA. */
.orn-jd__dt-price { margin-top: 16px; }
.orn-jd__dt-price-loading { background: var(--orn-paper); color: var(--orn-ink-2); border: 1px solid var(--orn-line); border-radius: 16px; padding: 18px; text-align: center; font-style: italic; }
.orn-jd__dt-price-card { background: #fff; border: 1px solid var(--orn-line); border-radius: 20px; padding: 26px 28px; color: var(--orn-ink); box-shadow: rgba(20, 35, 59, 0.06) 0 8px 24px; }
.orn-jd__dt-price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.orn-jd__dt-price-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; font-weight: 600; color: var(--orn-navy); margin-bottom: 6px; }
.orn-jd__dt-price-meta { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; color: var(--orn-text); line-height: 1.25; }
.orn-jd__dt-price-cal { font-size: 14px; margin-right: 4px; }
.orn-jd__dt-price-change { background: rgb(245, 245, 245); color: var(--orn-text); border: 1px solid var(--orn-line); border-radius: 999px; padding: 8px 16px; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.orn-jd__dt-price-change:hover { border-color: var(--orn-gold); background: rgba(201, 164, 92, 0.08); }
@media (max-width: 640px) {
/* Stack the price-summary header on phones. It was a space-between flex
row, so the date/room/pax summary got squeezed into the left half and
wrapped to 3 lines beside the Change buttons. Give the summary full
width, then put the two Change buttons in a row below it. */
.orn-jd__dt-price-head { flex-direction: column; align-items: stretch; gap: 12px; }
.orn-jd__dt-price-change-group { width: 100%; }
.orn-jd__dt-price-change { flex: 1 1 0; text-align: center; }
}
.orn-jd__dt-price-lines { border-top: 1px solid var(--orn-line); padding-top: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.orn-jd__dt-price-line { display: flex; justify-content: space-between; gap: 12px; }
.orn-jd__dt-price-line-l { color: var(--orn-ink-2); font-size: 14.5px; }
.orn-jd__dt-price-line-v { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14.5px; color: var(--orn-text); }
.orn-jd__dt-price-total { border-top: 1px dashed var(--orn-line); padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.orn-jd__dt-price-terms-row { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.orn-jd__dt-price-terms-link { font-family: Inter, sans-serif; font-size: 13px; color: var(--orn-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.orn-jd__dt-price-terms-link:hover { color: var(--orn-accent, #1f4e8c); }
.orn-jd__dt-price-total-l { font-family: Archivo, sans-serif; font-weight: 800; font-size: 18px; color: var(--orn-text); }
.orn-jd__dt-price-total-v { font-family: Inter, sans-serif; font-weight: 800; font-size: 26px; color: var(--orn-text); line-height: 1.1; }
.orn-jd__dt-price-cashrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
/* Redeem/earn are info callouts, not actions — subtle tinted badges (not solid
pills) so they don't read as CTAs next to the Select-seats button. Red tint =
redeem, green tint = earn. */
.orn-jd__dt-price-redeem, .orn-jd__dt-price-earn { display: inline-block; width: fit-content; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.25; border: 1px solid transparent; }
.orn-jd__dt-price-cashrow > .orn-jd__dt-price-redeem, .orn-jd__dt-price-cashrow > .orn-jd__dt-price-earn { margin: 0; }
.orn-jd__dt-price-redeem { background: rgba(242, 13, 22, 0.09); color: rgb(201, 10, 18); border-color: rgba(242, 13, 22, 0.28); }
.orn-jd__dt-price-earn { background: var(--orn-navy); color: #fff; border-color: var(--orn-navy); }
.orn-jd__dt-price-line--rewards .orn-jd__dt-price-line-l,
.orn-jd__dt-price-line--rewards .orn-jd__dt-price-line-v { color: var(--orn-green); }
/* CTA row beneath the price total — right-aligned Select-seats button
using the same .orn-jd__dt-row-cta class as the per-row CTAs so the
pill chrome stays consistent across the panel. When the user is an
agent we also render a "Save as Quote" secondary CTA to the left. */
.orn-jd__dt-price-cta-row { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.orn-jd__dt-price-cta-note { font-family: Archivo, sans-serif; font-size: 15px; line-height: 1.45; color: var(--orn-navy); text-align: center; max-width: 640px; }
.orn-jd__dt-price-cta-actions { display: flex; justify-content: center; align-items: center; gap: 10px; }
.orn-jd__dt-price-cta--secondary { background: transparent !important; color: var(--orn-text) !important; border: 1px solid var(--orn-line) !important; }
.orn-jd__dt-price-cta--secondary:hover { border-color: var(--orn-gold) !important; background: rgba(201, 164, 92, 0.08) !important; }
@media (max-width: 640px) {
/* Tone down the oversized price-summary type on phones. */
.orn-jd__dt-price-meta { font-size: 15px; }
.orn-jd__dt-price-lines { gap: 15px; }
.orn-jd__dt-price-line-l, .orn-jd__dt-price-line-v { font-size: 13.5px; }
.orn-jd__dt-price-total-l { font-size: 16px; }
.orn-jd__dt-price-total-v { font-size: 22px; }
/* Tidy the action row: two equal-width buttons filling the width instead
of uneven right-aligned ones. The redeem/earn chips (in .cashrow) become
an even pair above them. */
.orn-jd__dt-price-cta-row { align-items: stretch; gap: 10px; }
.orn-jd__dt-price-cta-note { font-size: 13px; }
.orn-jd__dt-price-cta-actions { display: flex; gap: 10px; }
.orn-jd__dt-price-cta-actions > * { flex: 1 1 0; }
/* Stack the redeem/earn chips full-width so they align to the card edges
(like the rows above/below) and never wrap — natural width left them
compact with an unbalanced gap on the right, and equal-width forced long
labels like "Redeem upto ₹ 2,131" to wrap. */
/* Compact info badges side by side, left-aligned, with clear gaps above and
below (separating them from the total and the CTA buttons). Tinted (not
solid) so they read as info, not actions. */
.orn-jd__dt-price-cashrow { gap: 8px; margin-top: 18px; margin-bottom: 18px; }
.orn-jd__dt-price-cashrow > .orn-jd__dt-price-redeem,
.orn-jd__dt-price-cashrow > .orn-jd__dt-price-earn { flex: 0 0 auto; width: auto; white-space: nowrap; }
}
/* ── ORN Save-Proposal modal (clean, native) ─────────────────────
Replaces the legacy /package/load-package-quote-save fragment.
Our own DOM + form, posts straight to REPRICE_FIXED_DATE_PACKAGE
with saveAndEmail=true. No tf-main globals required.
──────────────────────────────────────────────────────────────── */
.orn-jd__sq { position: fixed; inset: 0; z-index: 50000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.orn-jd__sq-backdrop { position: absolute; inset: 0; background: rgba(10, 20, 35, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.orn-jd__sq-card { position: relative; z-index: 1; width: 800px; max-width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border: 1px solid var(--orn-line); border-radius: 20px; padding: 32px 36px; box-shadow: 0 24px 60px rgba(20, 35, 59, 0.25); }
.orn-jd__sq-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--orn-cream-2); color: var(--orn-ink); border: 1px solid var(--orn-line); font-size: 18px; cursor: pointer; line-height: 1; }
.orn-jd__sq-close:hover { background: rgba(201, 164, 92, 0.12); }
.orn-jd__sq-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--orn-text); margin-bottom: 6px; }
.orn-jd__sq-title { font-family: Archivo, sans-serif; font-weight: 800; font-size: 24px; color: var(--orn-text); margin: 0 0 6px; line-height: 1.2; }
.orn-jd__sq-lede { color: var(--orn-ink-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }
.orn-jd__sq-form { display: flex; flex-direction: column; gap: 18px; }
.orn-jd__sq-fs { border: 1px solid var(--orn-line); border-radius: 14px; background: var(--orn-cream-2); padding: 22px 22px 18px; position: relative; margin: 0; }
.orn-jd__sq-legend { position: absolute; top: -10px; left: 16px; padding: 2px 10px; background: #fff; border: 1px solid var(--orn-line); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-gold-3); font-weight: 600; }
.orn-jd__sq-row { display: grid; grid-template-columns: 200px 1fr; gap: 14px 22px; align-items: center; padding: 10px 0; }
.orn-jd__sq-row + .orn-jd__sq-row { border-top: 1px dashed var(--orn-line); }
.orn-jd__sq-label { color: var(--orn-ink); font-size: 14px; font-weight: 600; }
.orn-jd__sq-label em { color: #b8392f; font-style: normal; margin-left: 2px; }
.orn-jd__sq-input { background: #fff; border: 1px solid var(--orn-line); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--orn-ink); outline: none; width: 100%; box-sizing: border-box; }
.orn-jd__sq-input:focus { border-color: var(--orn-gold); }
.orn-jd__sq-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-jd__sq-pill { background: #fff; border: 1px solid var(--orn-line); border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--orn-ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.orn-jd__sq-pill:hover { border-color: var(--orn-gold); }
.orn-jd__sq-pill.is-active { background: var(--orn-navy); color: #fff; border-color: var(--orn-navy); }
.orn-jd__sq-err { background: rgba(184, 57, 47, 0.08); border: 1px solid rgba(184, 57, 47, 0.30); color: #b8392f; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }
.orn-jd__sq-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 8px; }
.orn-jd__sq-cancel { background: transparent; border: 0; color: var(--orn-ink-2); font-family: Archivo, sans-serif; font-weight: 600; font-size: 14px; padding: 12px 18px; cursor: pointer; text-decoration: none; }
.orn-jd__sq-cancel:hover { color: var(--orn-navy); }
.orn-jd__sq-submit { background: var(--orn-text); color: #fff; border: 0; border-radius: 999px; padding: 12px 24px; font-family: Archivo, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.orn-jd__sq-submit:hover { background: #1d3055; }
.orn-jd__sq-submit:disabled { background: #c9c2af; cursor: progress; }
/* Saved confirmation panel inside the modal — everything centered. */
.orn-jd__sq-saved { text-align: center; padding: 24px 0 4px; display: flex; flex-direction: column; align-items: center; }
.orn-jd__sq-saved-icon { width: 64px; height: 64px; border-radius: 50%; background: rgb(46, 158, 99); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; margin: 0 auto 16px; }
.orn-jd__sq-saved .orn-jd__sq-eyebrow { margin-bottom: 8px; text-align: center; }
.orn-jd__sq-saved .orn-jd__sq-title { text-align: center; margin: 0 0 14px; }
.orn-jd__sq-saved-lede { color: var(--orn-ink-2); font-size: 15px; line-height: 1.55; max-width: 520px; margin: 0 auto 24px; text-align: center; }
.orn-jd__sq-saved .orn-jd__sq-actions { justify-content: center; padding-top: 4px; }
@media (max-width: 640px) {
/* Full-screen Save Proposal modal on phones — fill the viewport like the
rest of the mobile booking flow (no centred card, no backdrop gap). */
.orn-jd__sq { padding: 0; }
.orn-jd__sq-card {
width: 100%;
max-width: 100%;
height: 100vh;
height: 100dvh;
max-height: none;
border: none;
border-radius: 0;
padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
}
.orn-jd__sq-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
}
.orn-jd__dt-price-card--unavl { border-color: #f5c6c6; background: #fff5f5; }
.orn-jd__dt-price-card--unavl .orn-jd__dt-price-eyebrow { color: #b03030; }
.orn-jd__dt-price-card--unavl .orn-jd__dt-price-unavl { color: #8b1e1e; font-style: normal; font-weight: 500; line-height: 1.4; margin-top: 6px; }
.orn-jd__dt-price-unavl-ctas { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.orn-jd__dt-price-unavl-cta { background: none; border: none; padding: 4px 0; font-family: var(--orn-font-body); font-size: 13px; font-weight: 700; color: #b03030; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.orn-jd__dt-price-unavl-cta:hover { color: #7a1e1e; }
.orn-jd__dt-price-unavl-cta + .orn-jd__dt-price-unavl-cta { border-left: 1px solid #e3b3b3; padding-left: 16px; }
.orn-jd__dt-price-unavl-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0d3d3; font-size: 13px; }
.orn-jd__dt-price-unavl-link { color: #b03030; font-weight: 600; text-decoration: underline; cursor: pointer; }
.orn-jd__dt-price-unavl-link:hover { color: #8b1e1e; }
.orn-jd__dt-price-unavl-sep { color: #b98484; }
/* When a date is picked + repriced, hide the controls / promoted-dates
eyebrow / dates list so the price summary owns the top of the panel.
The "Change date" button on the summary removes this class. */
.orn-jd__dt-controls, .orn-jd__dt-eyebrow, .orn-jd__dt-list { transition: opacity 0.15s ease; }
#ornJdDatesBody.is-priced .orn-jd__dt-controls, #ornJdDatesBody.is-priced .orn-jd__dt-eyebrow, #ornJdDatesBody.is-priced .orn-jd__dt-list { display: none; }
#ornJdDatesBody.is-priced .orn-jd__dt-price { margin-top: 0; }
/* Optional add-ons block — 3-across grid of pickable optional cards */
.orn-jd__dt-addons { margin-top: 28px; }
.orn-jd__dt-addons-head { margin-bottom: 18px; }
.orn-jd__dt-addons-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 24px; color: var(--orn-text); margin: 0 0 6px; line-height: 1.2; }
.orn-jd__dt-addons-lede { color: var(--orn-ink-2); font-size: 14.5px; line-height: 1.5; margin: 0; max-width: 720px; }
.orn-jd__dt-addons-daygroup { margin-bottom: 22px; }
.orn-jd__dt-addons-daygroup:last-child { margin-bottom: 0; }
.orn-jd__dt-addons-dayhead { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-text); margin: 0 0 12px; }
.orn-jd__dt-addons-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.orn-jd__dt-addon { position: relative; display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--orn-cream-3, #e6dfc9); border-radius: 14px; padding: 16px 20px; margin-bottom: 10px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.orn-jd__dt-addon:hover { border-color: rgba(201, 164, 92, 0.55); box-shadow: rgba(20, 35, 59, 0.06) 0 6px 18px; }
.orn-jd__dt-addon.is-checked { background: rgb(253, 243, 242); border: 1.5px solid rgb(242, 13, 22); }
.orn-jd__dt-addon-chk { position: absolute; opacity: 0; pointer-events: none; }
/* Left-side icon mark: white "+" on a filled brand-red square when
unselected (matches the add-on design); white tick on the same red
square when selected. Both nested inside .orn-jd__dt-addon-mark;
visibility toggles via .is-checked on the parent. */
.orn-jd__dt-addon-mark { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary, rgb(242, 13, 22)); color: #fff; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; line-height: 1; transition: background 0.15s ease, color 0.15s ease; }
.orn-jd__dt-addon-mark-tick { display: none; font-size: 20px; }
.orn-jd__dt-addon.is-checked .orn-jd__dt-addon-mark-plus { display: none; }
.orn-jd__dt-addon.is-checked .orn-jd__dt-addon-mark-tick { display: inline; }
.orn-jd__dt-addon-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.orn-jd__dt-addon-priceblock { flex: 0 0 auto; align-self: center; text-align: right; }
.orn-jd__dt-addon-chip { display: inline-flex; align-self: flex-start; align-items: center; background: rgba(20, 35, 59, 0.08); color: var(--orn-navy); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.orn-jd__dt-addon-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.orn-jd__dt-addon-title { flex: 1 1 0; min-width: 0; font-family: Archivo, sans-serif; font-weight: 700; color: var(--orn-text); font-size: 15px; line-height: 1.25; }
.orn-jd__dt-addon-unittype { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; background: rgba(20, 35, 59, 0.08); color: var(--orn-navy); }
.orn-jd__dt-addon-unittype--visa { background: #E7EEF9; color: #1E4C8A; }
.orn-jd__dt-addon-unittype--sightseeing { background: #E9F5EE; color: #1F7A3D; }
.orn-jd__dt-addon-unittype--transfers { background: #FFF4E0; color: #B36A00; }
.orn-jd__dt-addon-unittype--travel_insurance { background: #F3E9F8; color: #6B2E8E; }
.orn-jd__dt-addon-unittype--travel_pass { background: #E7EEF9; color: #1E4C8A; }
.orn-jd__dt-addon-unittype--attraction_ticket { background: #FFE9E6; color: #B4432B; }
.orn-jd__dt-addon-unittype--event_ticket { background: #FFE9E6; color: #B4432B; }
.orn-jd__dt-addon-unittype--shopping_coupons { background: #FFF7D6; color: #8A6C1A; }
.orn-jd__dt-addon-unittype--stay_extra_service { background: #E9F0FF; color: #2A4A9E; }
.orn-jd__dt-addon-metarow { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1F7A3D; }
.orn-jd__dt-addon-duration { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: rgb(110, 110, 110); background: transparent; padding: 0; border-radius: 0; white-space: nowrap; text-transform: uppercase; }
.orn-jd__dt-addon-desc { color: var(--orn-ink-2); font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.orn-jd__dt-addon-desc-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.orn-jd__dt-addon-desc[data-collapsed="true"] .orn-jd__dt-addon-desc-text { -webkit-line-clamp: 3; line-clamp: 3; }
.orn-jd__dt-addon-desc[data-collapsed="false"] .orn-jd__dt-addon-desc-text { -webkit-line-clamp: unset; line-clamp: unset; }
.orn-jd__dt-addon-desc-toggle { background: none; border: none; padding: 0; margin-top: 4px; color: var(--orn-navy); font-family: var(--orn-font-body); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.orn-jd__dt-addon-desc-toggle:hover { color: var(--orn-gold-3); }
.orn-jd__dt-addon-priceblock { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.orn-jd__dt-addon-price { display: inline-flex; align-items: baseline; gap: 2px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--orn-text); font-size: 15.5px; line-height: 1.1; white-space: nowrap; }
.orn-jd__dt-addon-price-plus { color: inherit; margin-right: 2px; }
.orn-jd__dt-addon-price-val { color: inherit; }
.orn-jd__dt-addon-price-note { color: var(--orn-mute, #9a8a6e); font-family: var(--orn-font-body); font-weight: 400; font-size: 12px; letter-spacing: normal; white-space: nowrap; }
@media (max-width: 640px) {
/* On phones the nowrap price column ("+ ₹43,050" / "total for group") held
its full width and squeezed the long inclusion title. Wrap the card so the
price drops below as a footer. The body needs flex-basis 0 (not auto) or
its long-title max-content basis pushes it under the +icon instead of
sitting beside it. Price footer is right-aligned + separated by a rule. */
.orn-jd__dt-addon { flex-wrap: wrap; }
.orn-jd__dt-addon-body { flex: 1 1 0; }
.orn-jd__dt-addon-priceblock { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 8px; text-align: right; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--orn-cream-3, #e6dfc9); }
}
/* ---------------- Included tab ---------------- */
.orn-jd__incl-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
.orn-jd__incl-grid { grid-template-columns: repeat(3, 1fr); }
}
.orn-jd__incl-tile { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: 16px; padding: 22px; }
.orn-jd__incl-tile-title { font-family: var(--orn-font-display); font-weight: 700; font-size: 16px; color: var(--orn-navy); margin: 0; }
.orn-jd__incl-tile-lede { color: var(--orn-ink-2); font-size: 14px; margin: 6px 0 0; line-height: 1.5; }
/* ---------------- Body 2-col layout ----------------
Left: tabs + active panel (the cockpit-shape content). Right:
sticky Trip co-pilot column. On <1100px the co-pilot stacks
below the main panel; on mobile (<768px) it collapses to the
floating FAB.
--------------------------------------------------- */
.orn-jd__body { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1100px) {
.orn-jd__body { grid-template-columns: minmax(0, 1fr) 360px; }
}
.orn-jd__main { min-width: 0; }
/* Align the co-pilot's top with the panels row (tabs + 20px gap),
not with the tabs row itself. Visually anchors the card to the
content the customer is reading, not to the secondary tab strip. */
.orn-jd__copilot { position: sticky; top: 24px; margin-top: calc(44px + 20px); /* tab pill ~44px + .orn-jd__panels margin-top 20px */ }
@media (max-width: 1099px) {
.orn-jd__copilot { position: static; margin-top: 0; }
}
/* Co-pilot card — dark coffee bg with subtle gold radial glow top-right,
cream type, Spectral serif title, gold CTA. Whole card is the click
target (role="button"); matches Results.html data-dc-tpl="918". */
.orn-jd__copilot-card { position: relative; background: rgb(15, 15, 15); border: 1px solid rgb(40, 40, 40); border-radius: 20px; padding: 26px 24px; color: rgb(242, 242, 242); box-shadow: rgba(0, 0, 0, 0.3) 0 16px 40px; overflow: hidden; cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease; }
.orn-jd__copilot-card:hover { border-color: rgba(242, 13, 22, 0.55); transform: translateY(-1px); }
.orn-jd__copilot-card:focus { outline: none; }
.orn-jd__copilot-card:focus-visible { outline: 2px solid var(--orn-navy); outline-offset: 3px; }
.orn-jd__copilot-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(242, 13, 22, 0.14), transparent 60%); pointer-events: none; }
.orn-jd__copilot-card > * { position: relative; }
/* Head row — gold-circle moon icon + eyebrow/title stack */
.orn-jd__copilot-head { display: flex; align-items: center; gap: 13px; }
.orn-jd__copilot-disc { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--orn-navy); background: rgba(242, 13, 22, 0.12); display: flex; align-items: center; justify-content: center; color: var(--orn-navy); }
.orn-jd__copilot-disc svg { stroke: var(--orn-navy) !important; }
.orn-jd__copilot-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--orn-navy); margin: 0 0 3px; text-transform: uppercase; font-weight: 600; }
.orn-jd__copilot-title { font-family: Spectral, serif; font-weight: 600; font-size: 23px; line-height: 1.1; margin: 0; color: #fff; }
.orn-jd__copilot-lede { font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.5; margin: 16px 0 0; }
/* Chips row — outlined pill chips (display-only; the whole card opens
the panel, but the visual matches the mockup exactly). */
.orn-jd__copilot-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.orn-jd__copilot-chip { display: inline-block; border: 1px solid rgb(60, 60, 60); color: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-family: inherit; background: transparent; }
/* Full-width gold "Open co-pilot →" CTA */
.orn-jd__copilot-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; background: var(--orn-navy); color: #fff; border-radius: 12px; padding: 13px 18px; font-weight: 700; font-size: 15px; font-family: inherit; }
.orn-jd__copilot-cta svg { stroke: #fff !important; }
.orn-jd__copilot-card:hover .orn-jd__copilot-cta { background: var(--orn-navy-2); }
/* ---------------- Map tab (SVG route map) ----------------
Dark-navy card with grid backdrop. Country outlines render as
muted polygons behind the route line; gold dashed line connects
stops; gold anchor pins for START/END, blue mid-stops; white
bold labels with START / END eyebrows under the anchors.
---------------------------------------------------------- */
.orn-jd__map-card { background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%), rgb(15, 15, 15); border-radius: 20px; padding: 28px 32px 24px; color: rgba(255, 255, 255, 0.94); }
.orn-jd__map-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orn-navy); margin-bottom: 16px; }
.orn-jd__map-eyebrow::before { content: 'ROUTE MAP'; color: var(--orn-navy); }
.orn-jd__map-eyebrow:has(span:not(:empty))::before { content: 'ROUTE MAP \00B7 '; }
.orn-jd__map-svg-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; }
.orn-jd__map-svg { width: 100%; height: 100%; display: block; }
.orn-jd__map-country { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.12); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.orn-jd__map-line { fill: none; stroke: var(--orn-navy); stroke-width: 2.6; stroke-dasharray: 8 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.95; }
.orn-jd__map-pin { fill: #9fb1c8; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.orn-jd__map-pin--anchor { fill: var(--orn-navy); stroke: rgba(255, 255, 255, 0.95); }
.orn-jd__map-label { fill: #fff; font-family: var(--orn-font-display); font-weight: 800; paint-order: stroke; stroke: rgba(0, 0, 0, 0.85); stroke-width: 3.5; stroke-linejoin: round; }
.orn-jd__map-anchor-label { fill: var(--orn-navy); font-family: var(--orn-font-mono); font-weight: 600; letter-spacing: 0.16em; }
.orn-jd__map-anchor-label--end { fill: var(--orn-navy); }
.orn-jd__map-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.4; }
.orn-jd__map-foot-icon { color: var(--orn-navy); font-size: 18px; }
@media (max-width: 640px) {
/* The map was tiny on phones: a 16/9 box inside 32px side padding left it
~156px tall. Trim the side padding and make it near-square so the route
map reads much larger. */
.orn-jd__map-card { padding: 22px 16px 20px; }
.orn-jd__map-svg-wrap { aspect-ratio: 1 / 1; }
}
/* ---------------- Inclusions tab ----------------
The renderer in ornholidays-journey.js uses the cockpit's exact class
names so the DOM structure is the single source of truth. The rules
below restyle those cockpit classes to the ORN theme — paper card
chrome, contained hero images, navy display titles, gold count pill,
tidy city rows with proper night-pill spacing.
----------------------------------------------- */
/* Section header ("Hotels that make the route…" eyebrow + lede above stays grid) */
.srSectionHeader { margin: 8px 0 16px; }
.srSectionHeader .tourHero.is-hero { background: transparent; border: 0; padding: 0; }
.srSectionHeader .eyebrow, .srSectionHeader .sr-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; font-weight: 600; color: rgb(154, 138, 110); margin-bottom: 8px; text-transform: none; }
.srSectionHeader h2 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 21px; color: rgb(20, 35, 59); line-height: 1.2; margin: 0 0 8px; }
.srSectionHeader .lede { color: rgb(90, 101, 115); font-size: 15.5px; line-height: 1.55; margin: 0; }
/* Flights inclusion card — shows the ops-authored flight line as the first
item in the Inclusions tab when the customer picked a real ex-city. */
.orn-jd__incl-flights-card {
background: #fff;
border: 1px solid rgba(20, 35, 59, 0.10);
border-radius: 16px;
padding: 22px 26px;
margin: 0 0 28px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 6px 18px rgba(20, 35, 59, 0.05);
}
.orn-jd__incl-flights-icon {
flex: 0 0 38px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--orn-red, #F20D16);
color: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(242, 13, 22, 0.25);
}
.orn-jd__incl-flights-list { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.orn-jd__incl-flights-list li { color: var(--orn-ink, rgb(20, 35, 59)); font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; }
@media (max-width: 640px) {
.orn-jd__incl-flights-card { padding: 18px 20px; gap: 12px; }
.orn-jd__incl-flights-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; }
.orn-jd__incl-flights-list li { font-size: 14.5px; }
}
/* Stay grid — 3-col on desktop, 2-col on tablet, 1-col on mobile */
.srStayGrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 14px; }
@media (min-width: 640px) {
.srStayGrid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.srStayGrid { grid-template-columns: 1fr 1fr 1fr; }
}
.srStayTile { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: rgba(20, 35, 59, 0.04) 0 4px 12px; }
.srStayHero { position: relative; width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--orn-cream-2); background-repeat: no-repeat; /* fix the tiled stretched image */ }
.srStayHero.is-placeholder { background: linear-gradient(135deg, rgba(201,164,92,0.18), rgba(20,35,59,0.10)); }
.srStayBadge { position: absolute; top: 10px; left: 10px; background: rgba(10, 24, 55, 0.78); color: #fff; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.srStayStars { position: absolute; bottom: 10px; left: 12px; color: var(--orn-gold); font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.srStayCity { position: absolute; bottom: 10px; right: 12px; color: #fff; font-family: var(--orn-font-display); font-weight: 700; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.srStayBody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.srStayName { font-family: var(--orn-font-display); font-weight: 700; font-size: 16px; color: var(--orn-text); line-height: 1.3; }
.srStayTag { align-self: flex-start; display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--orn-navy); color: var(--orn-paper); font-family: var(--orn-font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; margin-top: 2px; }
.srStayMeta { color: var(--orn-ink-2); font-size: 13.5px; }
.srStayFoot { color: var(--orn-text); font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
/* Detail cards — used for "City by city" + "What's included" + "What's not included" */
.detailGrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
.detailGrid { grid-template-columns: 1fr 1fr; }
.detailGridFull { grid-template-columns: 1fr; }
}
.detailCard { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: 16px; padding: 24px 28px; }
.detailCard h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; color: rgb(20, 35, 59); margin: 0 0 14px; line-height: 1.2; }
.detailCard h3 .count { display: inline-block; color: rgb(154, 138, 110); font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; letter-spacing: 0.05em; margin-left: 6px; }
.detailCard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.detailCard ul li { color: var(--orn-ink-2); font-size: 14.5px; line-height: 1.5; padding-left: 22px; position: relative; }
.detailCard ul li::before { content: '\2713'; position: absolute; left: 0; top: 1px; color: var(--orn-green, #2f7a4f); font-weight: 700; }
.detailCard ul li.miss::before { content: '\2715'; color: #b8392f; }
.detailCard ul li b { color: var(--orn-navy); font-weight: 700; }
.srInclEmpty { color: var(--orn-ink-2); font-style: italic; margin: 0; }
/* City-by-city rows inside the detailCard */
.cityRow { padding: 14px 0; border-top: 1px solid var(--orn-line); }
.cityRow:first-of-type { border-top: 0; padding-top: 0; }
.cityHead { font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px; color: rgb(20, 35, 59); margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.cityHead .nights { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--orn-text); font-weight: 600; background: rgb(243, 243, 243); padding: 2px 8px; border-radius: 999px; text-transform: none; }
.cityRow ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cityRow ul li { color: var(--orn-ink-2); font-size: 14.5px; line-height: 1.5; padding-left: 18px; position: relative; }
.cityRow ul li::before { content: '\2022'; position: absolute; left: 4px; top: 0; color: var(--orn-gold); font-size: 16px; line-height: 1.4; }
/* ---------------- Not found ---------------- */
.orn-jd__notfound { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: 16px; padding: 48px 32px; text-align: center; margin-block: 24px; }
.orn-jd__notfound-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 28px; color: var(--orn-navy); margin: 0 0 12px; }
.orn-jd__notfound-lede { color: var(--orn-ink-2); font-size: 15px; margin: 0 0 24px; line-height: 1.5; }
/* ---------------- Tour manager section ----------------
Navy card, gold avatar disc with initials, gold eyebrow, Archivo 700
white name, slate role, light-ink-blue bio, gold-bordered italic
quote, mono stat grid, green WhatsApp disc.
Ported verbatim from the Itinerary.html reference (data-dc-tpl="936"
through "951") — exact rgb / px / family values preserved so the
section reads identically to the design source.
------------------------------------------------------ */
.orn-jd__tm { background: #fff; color: var(--orn-text); border: 1px solid rgb(231, 231, 231); border-radius: 20px; padding: 44px 48px; margin-top: 30px; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; box-shadow: 0 4px 18px rgba(0,0,0,0.03); position: relative; }
.orn-jd__tm-avatar { width: 140px; height: 140px; border-radius: 50%; background: rgb(242, 13, 22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: Archivo, sans-serif; font-weight: 800; font-size: 48px; color: #fff; letter-spacing: 0.02em; }
.orn-jd__tm-body { flex: 1 1 0%; min-width: 280px; }
.orn-jd__tm-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.22em; color: rgb(242, 13, 22); font-weight: 600; text-transform: uppercase; }
.orn-jd__tm-name { font-family: Archivo, sans-serif; font-weight: 800; font-size: 34px; color: var(--orn-text); margin-top: 8px; letter-spacing: -0.01em; }
.orn-jd__tm-role { font-size: 15px; color: var(--orn-text-muted); margin-top: 6px; }
.orn-jd__tm-bio { font-size: 15px; color: rgb(51, 65, 85); line-height: 1.6; margin-top: 20px; max-width: 720px; }
.orn-jd__tm-quote { border-left: 3px solid rgb(242, 13, 22); padding-left: 18px; margin: 22px 0 0; font-style: italic; font-weight: 600; font-size: 17px; color: var(--orn-text); line-height: 1.5; max-width: 720px; }
.orn-jd__tm-stats { display: flex; gap: 48px; margin-top: 32px; flex-wrap: wrap; align-items: flex-start; }
.orn-jd__tm-stat-v { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; color: var(--orn-text); letter-spacing: 0.01em; }
.orn-jd__tm-stat-k { font-size: 12px; color: var(--orn-text-muted); letter-spacing: 0.03em; margin-top: 4px; }
.orn-jd__tm-wa { text-decoration: none; position: absolute; right: 32px; bottom: 32px; width: 56px; height: 56px; border-radius: 50%; background: rgb(37, 211, 102); display: flex; align-items: center; justify-content: center; box-shadow: rgba(37, 211, 102, 0.32) 0 10px 24px, 0 0 0 6px rgba(37, 211, 102, 0.15); flex-shrink: 0; }
.orn-jd__tm-wa:hover { background: rgb(50, 220, 113); }
@media (max-width: 640px) {
.orn-jd__tm { padding: 28px 24px; gap: 22px; }
.orn-jd__tm-avatar { width: 96px; height: 96px; font-size: 34px; }
.orn-jd__tm-name { font-size: 26px; }
.orn-jd__tm-stats { gap: 24px; margin-top: 22px; }
.orn-jd__tm-wa { position: static; margin-top: 20px; }
}
/* ---------------- Visa tab ----------------
Two-card layout: cream card on the left with the numbered process
timeline; navy card on the right with the documents checklist. The
data comes from SellingRoomBean.loadJourneyVisa which stamps a
VisaInformationDetail on the request; the partial at
_includes/visa.jsp renders these classes. */
.orn-jd__visa-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.orn-jd__visa-main { background: #fff; border: 1px solid var(--orn-line); border-radius: 20px; padding: 36px 40px; }
.orn-jd__visa-eyebrow { font-family: var(--orn-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--orn-gold-2); margin-bottom: 16px; }
.orn-jd__visa-title { font-family: var(--orn-font-display); font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--orn-text); margin: 0 0 14px; }
.orn-jd__visa-lede { font-size: 15px; line-height: 1.55; color: var(--orn-ink-2); margin: 0 0 28px; max-width: 56ch; }
.orn-jd__visa-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.orn-jd__visa-steps::before { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 2px; background: var(--orn-cream-3); }
.orn-jd__visa-step { display: flex; align-items: flex-start; gap: 18px; padding: 10px 0 18px; position: relative; }
.orn-jd__visa-step:last-child { padding-bottom: 0; }
.orn-jd__visa-step-num { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--orn-text); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--orn-font-mono); font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.orn-jd__visa-step-body { flex: 1; padding-top: 4px; }
.orn-jd__visa-step-title { font-family: var(--orn-font-display); font-size: 18px; font-weight: 700; color: var(--orn-text); margin-bottom: 4px; }
.orn-jd__visa-step-desc { font-size: 14px; line-height: 1.55; color: var(--orn-ink-2); }
.orn-jd__visa-footer { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--orn-cream-3); font-size: 13px; line-height: 1.55; color: var(--orn-ink-2); font-style: italic; }
.orn-jd__visa-checklist { background: var(--orn-text); border-radius: 20px; padding: 32px 30px; color: #f0e6c8; }
.orn-jd__visa-checklist-eyebrow { font-family: var(--orn-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--orn-gold-3); margin-bottom: 20px; }
.orn-jd__visa-checklist-list { list-style: none; margin: 0; padding: 0; }
.orn-jd__visa-checklist-list li { position: relative; padding: 10px 0 10px 28px; font-size: 14px; line-height: 1.5; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.orn-jd__visa-checklist-list li:last-child { border-bottom: 0; }
.orn-jd__visa-checklist-list li::before { content: "\2713"; position: absolute; left: 0; top: 10px; color: var(--orn-gold-3); font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {
.orn-jd__visa-grid { grid-template-columns: 1fr; }
.orn-jd__visa-main { padding: 28px 22px; }
.orn-jd__visa-title { font-size: 26px; }
.orn-jd__visa-checklist { position: static; padding: 26px 22px; }
}
/* =========================================================
Coach seat map modal
-------------------
Opens over the journey-detail Dates tab when the customer
clicks "Select seats" on the price-summary panel. Driven by
ornholidays-seatmap.js against the DOM shell in
_includes/seat_map_modal.jsp.
========================================================= */
.orn-body--lock { overflow: hidden; }
.orn-seatmap { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; }
.orn-seatmap--open { display: flex; }
.orn-seatmap__backdrop { position: absolute; inset: 0; background: rgba(11, 18, 32, 0.55); backdrop-filter: blur(4px); }
.orn-seatmap__panel { position: relative; width: 100%; max-width: 520px; max-height: 92vh; background: var(--orn-cream-2); border-radius: 24px; padding: 28px 24px 20px; box-shadow: 0 30px 80px rgba(11, 18, 32, 0.25); display: flex; flex-direction: column; overflow: hidden; }
.orn-seatmap__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(11, 18, 32, 0.08); color: var(--orn-navy); font-size: 22px; cursor: pointer; line-height: 1; }
.orn-seatmap__close:hover { background: rgba(11, 18, 32, 0.14); }
.orn-seatmap__header { padding-right: 40px; margin-bottom: 12px; }
.orn-seatmap__eyebrow { display: flex; gap: 10px; align-items: center; font-family: var(--orn-font-mono, monospace); font-size: 11px; letter-spacing: 0.14em; color: var(--orn-ink-2); text-transform: uppercase; margin-bottom: 4px; }
.orn-seatmap__front-chip { background: var(--orn-navy); color: #f0e6c8; padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.orn-seatmap__coach-chip { background: rgba(11, 18, 32, 0.06); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.orn-seatmap__title { font-family: var(--orn-font-display); font-size: 22px; font-weight: 800; color: var(--orn-navy); margin: 6px 0 4px; }
.orn-seatmap__lede { font-size: 13px; line-height: 1.4; color: var(--orn-ink-2); margin: 0; }
.orn-seatmap__body { flex: 1; overflow: auto; padding: 12px 6px 12px; background: #fff; border-radius: 16px; border: 1px solid var(--orn-line, rgba(11, 18, 32, 0.08)); margin: 12px 0; }
.orn-seatmap__loading, .orn-seatmap__empty { padding: 24px; text-align: center; color: var(--orn-ink-2); font-size: 13px; }
.orn-seatmap__front { text-align: center; padding: 6px 0 14px; border-bottom: 1px dashed var(--orn-cream-3); margin-bottom: 10px; }
.orn-seatmap__front-label { font-family: var(--orn-font-mono, monospace); font-size: 10px; letter-spacing: 0.2em; color: var(--orn-ink-2); text-transform: uppercase; }
.orn-seatmap__grid { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 8px; }
.orn-seatmap__row { display: flex; align-items: center; gap: 10px; }
.orn-seatmap__row-num { flex: 0 0 24px; font-family: var(--orn-font-mono, monospace); font-size: 11px; color: var(--orn-ink-2); text-align: right; }
.orn-seatmap__row-items { display: flex; gap: 6px; flex: 1; justify-content: center; align-items: center; }
.orn-seatmap__tile { width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid var(--orn-cream-3); background: #fff; color: var(--orn-navy); font-family: var(--orn-font-mono, monospace); font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.06s ease-out, box-shadow 0.15s ease; }
.orn-seatmap__tile:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(11, 18, 32, 0.1); transform: translateY(-1px); }
.orn-seatmap__tile--available { background: #fff; }
.orn-seatmap__tile--selected { background: var(--orn-navy); color: #f0e6c8; border-color: var(--orn-navy); }
.orn-seatmap__tile--reserved, .orn-seatmap__tile--booked, .orn-seatmap__tile--taken { background: var(--orn-cream-3); color: rgba(11, 18, 32, 0.42); cursor: not-allowed; border-color: var(--orn-cream-3); }
.orn-seatmap__tile--blocked { background: repeating-linear-gradient(45deg, var(--orn-cream-3), var(--orn-cream-3) 6px, rgba(255,255,255,0.6) 6px, rgba(255,255,255,0.6) 10px); color: rgba(11, 18, 32, 0.36); cursor: not-allowed; border-color: var(--orn-cream-3); }
.orn-seatmap__tile--blank { background: transparent; border-color: transparent; visibility: hidden; }
.orn-seatmap__aisle { flex: 0 0 20px; height: 42px; }
.orn-seatmap__footer { border-top: 1px solid var(--orn-line, rgba(11, 18, 32, 0.08)); padding-top: 14px; }
.orn-seatmap__legend { display: flex; gap: 18px; font-size: 11px; color: var(--orn-ink-2); flex-wrap: wrap; margin-bottom: 12px; }
.orn-seatmap__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.orn-seatmap__tile--legend { width: 16px; height: 16px; border-radius: 4px; display: inline-block; padding: 0; cursor: default; border-width: 1px; }
.orn-seatmap__actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.orn-seatmap__status { font-size: 12px; color: var(--orn-gold-2); font-weight: 600; }
.orn-seatmap__status--ready { color: #2f7a4f; }
.orn-seatmap__status--warn { color: var(--orn-red, #b8392f); }
.orn-seatmap__actions { display: flex; gap: 10px; }
.orn-seatmap__cancel { background: transparent; color: var(--orn-navy); border: 1px solid var(--orn-navy); border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; }
.orn-seatmap__save { background: var(--orn-navy); color: #fff; border: 0; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
.orn-seatmap__save:disabled { background: rgba(11, 18, 32, 0.24); cursor: not-allowed; }
/* Price-summary panel: seats chip rendered by ornholidays-journey.js */
.orn-jd__dt-price-seats { background: var(--orn-cream-2); border: 1px solid var(--orn-cream-3); border-radius: 12px; padding: 10px 14px; margin: 10px 0 12px; font-size: 13px; color: var(--orn-text); font-weight: 600; }
.orn-jd__dt-price-seats-coach { color: var(--orn-ink-2); font-weight: 400; margin-left: 4px; }
/* Book page: seats strip + expiry countdown */
.orn-book__seats { background: var(--orn-cream-2); border: 1px solid var(--orn-cream-3); border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; }
.orn-book__seats-eyebrow { font-family: var(--orn-font-mono, monospace); font-size: 10px; letter-spacing: 0.16em; color: var(--orn-gold-2); text-transform: uppercase; margin-bottom: 6px; }
.orn-book__seats-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.orn-book__seats-codes { font-family: var(--orn-font-mono, monospace); font-size: 16px; font-weight: 700; color: var(--orn-navy); letter-spacing: 0.05em; }
.orn-book__seats-coach { color: var(--orn-ink-2); font-size: 13px; }
.orn-book__seats-countdown { margin-left: auto; font-size: 12px; color: var(--orn-ink-2); font-family: var(--orn-font-mono, monospace); }
.orn-book__seats-expired { margin-top: 8px; color: var(--orn-red, #b8392f); font-size: 13px; font-weight: 600; }
.orn-book__seats-expired a { color: inherit; text-decoration: underline; }
.orn-book__care { margin: 0 0 18px; padding: 2px 4px; font-size: 13px; color: var(--orn-ink-2); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.orn-book__care-text { color: var(--orn-ink-2); }
.orn-book__care-link { color: var(--orn-red, #b8392f); text-decoration: none; font-weight: 600; }
.orn-book__care-link:hover, .orn-book__care-link:focus { text-decoration: underline; }
.orn-book__care-thanks { color: var(--orn-ink-2); font-style: italic; }
@media (max-width: 640px) {
.orn-seatmap__panel { padding: 20px 16px 14px; max-height: 96vh; border-radius: 20px; }
.orn-seatmap__tile { width: 36px; height: 36px; font-size: 10px; }
.orn-seatmap__aisle { flex: 0 0 14px; }
.orn-seatmap__title { font-size: 20px; }
}
/* =========================================================
Full-page seat picker (/trip/orn-holidays-seat-map)
---------------------------------------------------
Two-column layout matching the design mockup:
- Left : white coach card with FRONT chip + coach code
chip, seat grid, legend at the bottom
- Right : sticky navy booking-summary card with the
journey title, party, fare, live seats-selected
chip strip, total, and a big gold Continue CTA
========================================================= */
.orn-seatpage { padding: 32px 0 64px; background: var(--orn-cream); }
.orn-seatpage__back { display: inline-block; font-family: var(--orn-font-display); font-size: 15px; color: var(--orn-text); text-decoration: none; margin-bottom: 18px; }
.orn-seatpage__back:hover { text-decoration: underline; }
.orn-seatpage__title { font-family: var(--orn-font-display); font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--orn-text); margin: 0 0 24px; }
.orn-seatpage__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
/* Coach card (left) */
.orn-seatpage__coach { background: #fff; border-radius: 24px; padding: 24px 20px 20px; box-shadow: 0 4px 12px rgba(11, 18, 32, 0.05); }
.orn-seatpage__coach-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 16px; border-bottom: 1px dashed var(--orn-cream-3); margin-bottom: 16px; font-family: var(--orn-font-mono, monospace); font-size: 11px; letter-spacing: 0.16em; color: var(--orn-ink-2); text-transform: uppercase; }
.orn-seatpage__front-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(11, 18, 32, 0.06); border-radius: 999px; color: var(--orn-navy); font-weight: 700; }
.orn-seatpage__coach-chip { color: var(--orn-ink-2); font-weight: 600; }
.orn-seatpage__coach-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.orn-seatpage__row { display: flex; justify-content: center; }
.orn-seatpage__row-items { display: flex; gap: 8px; align-items: center; justify-content: center; }
/* Seat tile */
.orn-seatpage__tile { width: 62px; height: 54px; border-radius: 10px; border: 1.5px solid rgb(212, 212, 212); background: rgb(235, 220, 218); color: var(--orn-text); font-family: var(--orn-font-mono, monospace); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.06s ease-out, box-shadow 0.15s ease, background 0.15s ease; }
.orn-seatpage__tile:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(11, 18, 32, 0.12); transform: translateY(-1px); background: rgb(222, 213, 196); }
.orn-seatpage__tile--available { background: #fff; }
.orn-seatpage__tile--available:hover:not(:disabled) { background: #fff; }
.orn-seatpage__tile--selected { background: var(--orn-text); color: #fff; }
.orn-seatpage__tile--selected:hover { background: var(--orn-text); }
.orn-seatpage__tile--booked, .orn-seatpage__tile--reserved, .orn-seatpage__tile--taken { background: rgb(210, 200, 184); color: rgba(11, 18, 32, 0.42); cursor: not-allowed; }
.orn-seatpage__tile--blocked { background: repeating-linear-gradient(45deg, rgb(210, 200, 184), rgb(210, 200, 184) 6px, rgba(255,255,255,0.5) 6px, rgba(255,255,255,0.5) 10px); color: rgba(11, 18, 32, 0.36); cursor: not-allowed; }
.orn-seatpage__tile--blank { width: 62px; height: 54px; display: inline-block; background: transparent; border-color: transparent; visibility: hidden; }
.orn-seatpage__aisle { flex: 0 0 24px; height: 54px; }
.orn-seatpage__legend { display: flex; gap: 24px; justify-content: center; align-items: center; padding: 16px 0 4px; border-top: 1px dashed var(--orn-cream-3); margin-top: 8px; font-size: 12px; color: var(--orn-ink-2); }
.orn-seatpage__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.orn-seatpage__tile--legend { width: 18px; height: 18px; border-radius: 4px; display: inline-block; padding: 0; cursor: default; border-width: 1.5px; }
/* Summary card (right) */
.orn-seatpage__summary { background: var(--orn-text); color: #f0e6c8; border-radius: 24px; padding: 32px 30px; position: sticky; top: 100px; }
.orn-seatpage__summary-eyebrow { font-family: var(--orn-font-mono, monospace); font-size: 11px; letter-spacing: 0.2em; color: rgba(240, 230, 200, 0.6); text-transform: uppercase; margin-bottom: 12px; }
.orn-seatpage__summary-title { font-family: var(--orn-font-display); font-size: 28px; font-weight: 800; line-height: 1.15; color: #fff; margin: 0 0 8px; }
.orn-seatpage__summary-meta { font-size: 14px; color: rgb(195, 204, 214); margin: 0 0 4px; }
.orn-seatpage__summary-party { font-size: 14px; color: rgb(195, 204, 214); margin: 0; }
.orn-seatpage__summary-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 22px 0; }
.orn-seatpage__summary-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.orn-seatpage__summary-line--redeem .orn-seatpage__summary-k,
.orn-seatpage__summary-line--redeem .orn-seatpage__summary-v { color: #4dc089; font-weight: 600; }
.orn-seatpage__summary-k { font-size: 14px; color: rgb(195, 204, 214); }
.orn-seatpage__summary-v { font-family: var(--orn-font-mono, monospace); font-size: 15px; font-weight: 700; color: #fff; }
.orn-seatpage__summary-seats { font-family: var(--orn-font-mono, monospace); font-size: 13px; color: rgba(240, 230, 200, 0.6); margin: 4px 0 0; min-height: 18px; }
.orn-seatpage__summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.orn-seatpage__summary-total-k { font-size: 16px; color: rgb(195, 204, 214); font-weight: 600; }
.orn-seatpage__summary-total-v { font-family: var(--orn-font-mono, monospace); font-size: 32px; font-weight: 800; color: var(--orn-navy);letter-spacing: 0.02em; }
.orn-seatpage__cta { width: 100%; padding: 16px 24px; background: var(--orn-navy); color: var(--orn-text); border: 0; border-radius: 12px; font-family: var(--orn-font-display); font-size: 16px; font-weight: 800; cursor: pointer; transition: background 0.15s ease, transform 0.06s ease-out; }
.orn-seatpage__cta:hover:not(:disabled) { transform: translateY(-1px); }
.orn-seatpage__cta:disabled { background: rgb(128 121 111 / 35%); color: rgba(11, 18, 32, 0.55); cursor: not-allowed; }
.orn-seatpage__cta-note { font-size: 12px; color: rgb(195, 204, 214); margin: 10px 0 0; text-align: center; }
.orn-seatpage__cta-note--warn { color: #ffb4a2; }
@media (max-width: 900px) {
/* minmax(0,1fr) instead of 1fr: a 1fr track = minmax(auto,1fr), which grows
to the widest grid item's min-content (the summary card's 32px total),
forcing the whole column to ~402px and clipping both cards off-screen.
minmax(0,1fr) lets the track shrink to the viewport so both cards fit. */
.orn-seatpage__grid { grid-template-columns: minmax(0, 1fr); }
.orn-seatpage__title { font-size: 30px; }
.orn-seatpage__summary { position: static; }
.orn-seatpage__tile { width: 52px; height: 46px; font-size: 12px; }
.orn-seatpage__tile--blank { width: 52px; height: 46px; }
.orn-seatpage__aisle { flex: 0 0 18px; height: 46px; }
/* Keep the legend swatches small — the mobile .orn-seatpage__tile size above
otherwise blows them up to full seat size (52x46). */
.orn-seatpage__tile--legend { width: 18px; height: 18px; }
}
/* Desktop keeps the topbar as a plain block (back link above title); the
info icon + mobile seat-count chips only exist for the phone bottom bar. */
.orn-seatpage__info,
.orn-seatpage__mob-count { display: none; }
@media (max-width: 640px) {
/* ---- Mobile: top bar (circular back + inline title) ---------------- */
.orn-seatpage { padding: 0 0 232px; } /* clear the fixed bottom bar */
.orn-seatpage__topbar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 12px;
margin: 0 -16px 12px; padding: 12px 16px;
background: var(--orn-cream-2, #fff);
border-bottom: 1px solid var(--orn-cream-3);
}
.orn-seatpage__back {
flex: 0 0 auto; width: 40px; height: 40px; margin: 0; font-size: 0;
border-radius: 50%; background: var(--orn-cream); border: 1px solid var(--orn-cream-3);
display: inline-flex; align-items: center; justify-content: center;
}
.orn-seatpage__back::before { content: "\2190"; font-size: 20px; line-height: 1; color: var(--orn-text); }
.orn-seatpage__title { font-size: 22px; margin: 0; }
.orn-seatpage__coach { border-radius: 18px; }
.orn-seatpage__tile { width: 52px; height: 46px; font-size: 12px; }
.orn-seatpage__tile--blank { width: 52px; height: 46px; }
.orn-seatpage__aisle { flex: 0 0 18px; height: 46px; }
.orn-seatpage__tile--legend { width: 18px; height: 18px; }
/* ---- Mobile: summary becomes a light, fixed bottom action bar ------
Collapsed = compact light bar (total + seat count + CTAs). Tapping the
(i) adds .orn-seatpage__summary--expanded, which turns this same element
into a dark bottom sheet revealing the full booking breakdown that the
compact bar hides — no duplicated DOM, #ornSmPriceBreak stays live. */
.orn-seatpage__summary {
position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40;
background: var(--orn-cream-2, #fff); color: var(--orn-text);
border-radius: 16px 16px 0 0;
padding: 8px 16px calc(7px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -6px 24px rgba(11, 18, 32, 0.14);
max-height: 88vh; overflow-y: auto;
transition: background 0.2s ease;
}
/* Collapsed bar hides everything but total + seat count + CTAs. */
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-eyebrow,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-title,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-meta,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-party,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-divider,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) #ornSmPriceBreak,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-seats,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) > .orn-seatpage__summary-line,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__vanup,
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__cta-note { display: none !important; }
/* Collapsed total row: label + price on the left, seat progress on the right. */
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-total {
display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
align-items: center; column-gap: 12px; margin: 0 0 6px;
}
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-total-k {
grid-column: 1; grid-row: 1; align-self: end;
font-size: 11px; font-weight: 500; color: var(--orn-text-muted); letter-spacing: 0;
}
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-total-note { font-size: 11px; color: var(--orn-text-muted); }
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__total-price { grid-column: 1; grid-row: 2; align-self: start; display: inline-flex; align-items: center; gap: 6px; }
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__summary-total-v { font-size: 20px; color: var(--orn-text); }
.orn-seatpage__info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--orn-text-muted); cursor: pointer; }
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__mob-count {
display: inline-block; grid-column: 2; grid-row: 1 / span 2;
align-self: center; justify-self: end;
font-family: var(--orn-font-mono, monospace); font-size: 12px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--orn-text-muted);
}
/* ---- Mobile: expanded dark bottom sheet (booking breakdown) --------- */
.orn-seatpage__summary--expanded {
background: var(--orn-text); color: #f0e6c8;
padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.4);
}
.orn-seatpage__summary--expanded .orn-seatpage__info,
.orn-seatpage__summary--expanded .orn-seatpage__mob-count { display: none; }
.orn-seatpage__sheet-handle { display: none; }
.orn-seatpage__summary--expanded .orn-seatpage__sheet-handle {
display: block; width: 44px; height: 5px; border-radius: 3px;
background: rgba(255, 255, 255, 0.28); margin: 0 auto 18px;
}
.orn-seatpage__sheet-backdrop {
position: fixed; inset: 0; z-index: 39; background: rgba(6, 10, 16, 0.55);
opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
}
.orn-seatpage__sheet-backdrop.is-open { opacity: 1; visibility: visible; }
/* CTAs: full width, stacked, light-gray disabled look per the mockup. */
.orn-seatpage__cta { border-radius: 11px; padding: 10px 18px; font-size: 14px; color: #fff; }
.orn-seatpage__summary:not(.orn-seatpage__summary--expanded) .orn-seatpage__cta:disabled { background: rgb(214, 217, 222); color: rgb(107, 114, 128); }
.orn-seatpage__cta--hold {
margin-top: 6px !important;
background: rgb(243, 244, 246) !important; color: rgb(140, 146, 154) !important;
border: 0 !important;
}
.orn-seatpage__cta--hold:not(:disabled) { color: var(--orn-text) !important; }
}
/* =============================================================
My bookings — customer account landing
Cream page background, navy booking cards with a cream tile
action strip below each — matches the mockup.
============================================================= */
.orn-page--my-bookings { background: var(--orn-cream, rgb(240, 235, 220)); }
.orn-mybookings { padding-block: 16px 96px; }
.orn-mybookings__hello { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.orn-mybookings__hello-left { display: flex; align-items: center; gap: 20px; }
.orn-mybookings__avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--orn-navy, rgb(20, 35, 59)); color: var(--orn-gold, rgb(193, 142, 69)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.orn-mybookings__hello-name { font-family: var(--orn-font-display); font-weight: 800; font-size: 32px; color: var(--orn-navy); margin: 0; line-height: 1.15; }
.orn-mybookings__hello-phone { margin: 4px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.04em; color: var(--orn-gold, rgb(193, 142, 69)); }
.orn-mybookings__signout { padding: 10px 22px; border-radius: var(--r-pill, 24px); border: 1px solid var(--orn-navy, rgb(20, 35, 59)); background: transparent; color: var(--orn-navy); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.orn-mybookings__signout:hover { background: var(--orn-navy); color: var(--orn-cream, rgb(240, 235, 220)); }
.orn-mybookings__section { margin-top: 24px; }
.orn-mybookings__section-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 26px; color: var(--orn-text); margin: 0 auto 20px; max-width: 840px; }
.orn-mybookings__list { display: flex; flex-direction: column; gap: 24px; max-width: 840px; margin-left: auto; margin-right: auto; }
.orn-booking-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 12px rgba(20, 35, 59, 0.04); overflow: hidden; border: 1px solid rgba(20, 35, 59, 0.08); }
/* Navy hero band — compact: meta + title + route on the left, departs
+ travellers on the right, no oversized display font. */
.orn-booking-card__hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--orn-text); color: var(--orn-text-light, rgb(240, 235, 220)); padding: 16px 20px; text-decoration: none; }
.orn-booking-card__hero:hover { background: rgb(26, 44, 71); }
.orn-booking-card__hero-main { min-width: 0; flex: 1 1 auto; }
.orn-booking-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orn-booking-card__ref { font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 17px; letter-spacing: 0.06em; color: rgb(244, 239, 227); }
.orn-booking-card__status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-family: var(--orn-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.orn-booking-card__status--ok { background: rgb(224, 242, 232); color: rgb(24, 82, 51); box-shadow: inset 0 0 0 1px rgba(24, 82, 51, 0.28); }
.orn-booking-card__status--warn { background: rgb(253, 226, 220); color: rgb(139, 34, 22); box-shadow: inset 0 0 0 1px rgba(139, 34, 22, 0.28); }
.orn-booking-card__status--pending { background: rgb(253, 236, 205); color: rgb(129, 71, 12); box-shadow: inset 0 0 0 1px rgba(129, 71, 12, 0.32); }
.orn-booking-card__code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 230, 200, 0.55); }
.orn-booking-card__title { font-family: var(--orn-font-display); font-weight: 700; font-size: 17px; line-height: 1.25; margin: 4px 0 2px; color: #fff; }
.orn-booking-card__route { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.03em; color: rgb(159, 176, 196); margin: 0; }
.orn-booking-card__aside { text-align: right; flex-shrink: 0; }
.orn-booking-card__aside-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: rgba(240, 230, 200, 0.55); text-transform: uppercase; }
.orn-booking-card__aside-v { font-family: var(--orn-font-display); font-weight: 700; font-size: 15px; color: #fff; margin-top: 2px; }
.orn-booking-card__aside-muted { font-size: 12px; color: rgb(159, 176, 196); font-family: 'JetBrains Mono', monospace; margin-top: 4px; }
/* Action tiles below the hero — three bordered, icon-on-top cards
with a title and a small subtitle. Compact, cream-and-gold, sits
inside the same card container as the hero (no separate strip). */
.orn-booking-card__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px; background: #fff; border-top: 1px solid rgba(20, 35, 59, 0.06); }
.orn-booking-card__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 14px; border-radius: 12px; border: 1px solid rgba(193, 142, 69, 0.32); background: #fff; text-decoration: none; color: var(--orn-text); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; text-align: center; }
.orn-booking-card__tile:hover { border-color: rgba(193, 142, 69, 0.7); background: rgba(193, 142, 69, 0.04); }
.orn-booking-card__tile-icon { color: var(--orn-gold, rgb(193, 142, 69)); margin-bottom: 2px; }
.orn-booking-card__tile-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; }
.orn-booking-card__tile-sub { font-size: 12.5px; color: rgba(20, 35, 59, 0.55); letter-spacing: 0.01em; }
@media (max-width: 600px) {
.orn-booking-card__tiles { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
.orn-booking-card__tile { padding: 18px 14px; }
}
/* Empty state */
.orn-mybookings__empty { background: #fff; border-radius: 22px; padding: 48px 40px; text-align: center; border: 1px solid rgba(20, 35, 59, 0.08); }
.orn-mybookings__empty-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 24px; color: var(--orn-navy); margin-bottom: 10px; }
.orn-mybookings__empty-body { font-size: 15px; color: rgba(20, 35, 59, 0.7); max-width: 520px; margin: 0 auto 20px; }
.orn-mybookings__empty-cta { display: inline-block; padding: 12px 26px; background: var(--orn-gold, rgb(193, 142, 69)); color: var(--orn-navy); border-radius: var(--r-pill, 24px); font-weight: 700; text-decoration: none; }
@media (max-width: 900px) {
.orn-mybookings__hello { flex-direction: column; align-items: flex-start; gap: 16px; }
.orn-booking-card__hero { padding: 22px 22px 26px; }
.orn-booking-card__code { font-size: 32px; }
.orn-booking-card__aside { position: static; align-items: flex-start; text-align: left; margin-top: 18px; }
.orn-booking-card__tiles { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
}
/* ─────────────────────────────────────────────────────────────
* How-it-works page — components
* .orn-hiw-rule — numbered section rule ("01 · WHY IT'S DIFFERENT")
* .orn-steps — numbered 5-step booking flow
* .orn-inclusions — "one fare, everything in" checklist
* .orn-hiw-cta — closing CTA row alignment
* ───────────────────────────────────────────────────────────── */
.orn-hiw-rule { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; color: rgb(242, 13, 22); }
.orn-hiw-rule__num, .orn-hiw-rule__label { flex-shrink: 0; }
.orn-hiw-rule__line { flex: 1; height: 1px; background: rgb(224, 216, 199); }
/* Why ORN · The Campaign Enemy — X-list vs tick-list two-column card grid */
.orn-hiw-enemy__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orn-navy); margin: 40px 0 12px; }
.orn-hiw-enemy__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 32px; line-height: 1.1; color: var(--orn-text); margin: 0 0 16px; max-width: 900px; }
.orn-hiw-enemy__title-hi { color: var(--orn-navy); }
.orn-hiw-enemy__lede { font-size: 16px; line-height: 1.5; color: var(--orn-ink-2); max-width: 720px; margin: 0 0 36px; }
.orn-hiw-enemy__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .orn-hiw-enemy__grid { grid-template-columns: 1fr 1fr; } }
.orn-hiw-enemy__col { border-radius: 20px; padding: 34px 36px; }
.orn-hiw-enemy__col--old { background: #fff; box-shadow: 0 8px 24px rgba(20, 35, 59, 0.06); }
.orn-hiw-enemy__col--new { background: var(--orn-text); color: #fff; }
.orn-hiw-enemy__col-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 20px; }
.orn-hiw-enemy__col--old .orn-hiw-enemy__col-eyebrow { color: var(--orn-navy); }
.orn-hiw-enemy__col--new .orn-hiw-enemy__col-eyebrow { color: #7ed6a6; }
.orn-hiw-enemy__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; font-weight: 400; line-height: 1.1; }
.orn-hiw-enemy__col--new .orn-hiw-enemy__list { color: #fff; }
.orn-hiw-enemy__list li { display: flex; align-items: baseline; gap: 14px; }
.orn-hiw-enemy__list--x li::before { content: "\2715"; color: var(--orn-navy); font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.orn-hiw-enemy__list--tick li::before { content: "\2713"; color: #7ed6a6; font-weight: 800; font-size: 17px; flex: 0 0 auto; }
/* The Benchmark — IndiGo/Emirates comparison, single dark rounded card */
.orn-hiw-benchmark { background: var(--orn-text); border-radius: 24px; padding: 38px 34px; color: #fff; margin-top: 20px; }
.orn-hiw-benchmark__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #f5c9c1; margin: 0 0 18px; }
.orn-hiw-benchmark__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 30px; line-height: 1.15; color: #fff; margin: 0 0 40px; max-width: 900px; }
.orn-hiw-benchmark__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) { .orn-hiw-benchmark__grid { grid-template-columns: 1fr 1fr; } }
.orn-hiw-benchmark__card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 20px 22px; }
.orn-hiw-benchmark__card-title { color: #f5c9c1; font-family: var(--orn-font-body); font-weight: 700; font-size: 16px; margin: 0 0 14px; }
.orn-hiw-benchmark__card-body { color: rgba(255, 255, 255, 0.86); font-family: var(--orn-font-body); font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 640px) {
.orn-hiw-enemy__title { font-size: 30px; }
.orn-hiw-enemy__col { padding: 24px 22px; }
.orn-hiw-benchmark { padding: 34px 26px; border-radius: 18px; }
.orn-hiw-benchmark__title { font-size: 26px; }
.orn-hiw-benchmark__card { padding: 22px 22px; }
}
.orn-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: 1fr; gap: 22px; }
.orn-step { display: grid; grid-template-columns: 60px 1fr; gap: 0; padding: 22px 24px; background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(20, 35, 59, 0.06); }
.orn-step__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(20, 35, 59); color: rgb(244, 239, 227); font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 16px; line-height: 1; }
.orn-step__body { display: flex; flex-direction: column; gap: 6px; }
.orn-step__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 700; font-size: 17px; color: rgb(20, 35, 59); margin: 0; }
.orn-step__lede { font-size: 14px; line-height: 1.6; color: rgb(58, 70, 84); margin: 0; }
.orn-inclusions { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 22px; }
.orn-inclusions li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(20, 35, 59, 0.05); font-size: 15px; color: rgb(20, 35, 59); font-weight: 600; }
.orn-inclusions li::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(201, 164, 92); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.orn-hiw-cta { text-align: center; }
.orn-hiw-cta__row { display: inline-flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
.orn-step { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 20px; }
.orn-step__num { width: 40px; height: 40px; font-size: 18px; }
.orn-step__title { font-size: 17px; }
}
/* ─── How-it-works page — section rhythm & type constraints ─── */
/* ─── Shared rhythm for how-it-works · about-orn · investors · van-tours
* Opt-in via `.orn-page--content` on . Per-page overrides live in
* each page's own block below. */
.orn-page--content .orn-secthead__title { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--orn-text); max-width: 900px; margin: 0; }
.orn-page--content .orn-secthead__lede { font-size: 16px; line-height: 1.65; color: rgb(58, 70, 84); max-width: 780px; margin: 14px 0 0; }
.orn-page--content .orn-section { padding-block: clamp(40px, 4vw, 56px); }
.orn-page--content .orn-container { padding-inline: clamp(28px, 8vw, 140px); }
.orn-page--van-tour-detail .orn-container { padding-inline: 0; }
.orn-page--content .orn-hero__inner { padding-block: clamp(36px, 4vw, 60px); }
.orn-page--content .orn-hero__title { font-size: 42px; line-height: 1.15; max-width: 900px; }
.orn-page--content .orn-hero__lede { max-width: 640px; }
.orn-page--content .orn-hiw-cta__row .orn-btn--ghost { color: var(--orn-navy); border-color: rgba(20, 35, 59, 0.28); background: transparent; }
.orn-page--content .orn-hiw-cta__row .orn-btn--ghost:hover { background: rgba(20, 35, 59, 0.04); }
/* how-it-works — small local extras (rule margin + rule→title tightening) */
.orn-page--how-it-works .orn-hiw-rule { margin: 0 0 22px; }
.orn-page--how-it-works .orn-hiw-rule + .orn-secthead__title { margin-top: 4px; }
/* Collapse vertical spacing when two same-tone cream sections stack. */
.orn-page--how-it-works .orn-section--cream + .orn-section--cream { padding-block-start: 8px; margin-top: -8px; }
/* Cards on the "From booking to boarding" grid — icon tile + variant. */
.orn-page--how-it-works .orn-tier { position: relative; padding: 30px 26px 26px; background: #fff; border-radius: 14px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.orn-page--how-it-works .orn-tier__topline { margin-bottom: 22px; }
.orn-page--how-it-works .orn-tier__eyebrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(201, 164, 92, 0.14); color: rgb(140, 100, 40); font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; padding: 6px; text-align: center; line-height: 1.1; }
.orn-page--how-it-works .orn-tier__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-size: 19px; font-weight: 700; color: var(--orn-navy); margin: 0; }
.orn-page--how-it-works .orn-tier__lede { font-size: 14.5px; line-height: 1.6; color: rgb(58, 70, 84); margin: 0; }
/* Second rule inside a merged section gets top space above it. */
.orn-page--how-it-works .orn-hiw-rule--spaced { margin-top: 76px; }
/* Navy accent tier — used for the "On the road" card. */
.orn-page--how-it-works .orn-tier--navy { background: var(--orn-navy); color: rgb(233, 239, 246); }
.orn-page--how-it-works .orn-tier--navy .orn-tier__title { color: #fff; }
.orn-page--how-it-works .orn-tier--navy .orn-tier__lede { color: rgba(233, 239, 246, 0.86); }
.orn-page--how-it-works .orn-tier__eyebrow--check { background: rgb(31, 128, 68); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: 0; padding: 0; }
/* ─── How-it-works — rebuilt section components ───────────────── */
/* 03 · From booking to boarding — plain white cards, small eyebrow */
.orn-hiw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.orn-hiw-card { background: #fff; border-radius: 14px; padding: 28px 26px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); display: flex; flex-direction: column; gap: 12px; }
.orn-hiw-card__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; font-weight: 700; color: rgb(242, 13, 22); }
.orn-hiw-card__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-size: 20px; font-weight: 700; color: var(--orn-text); margin: 4px 0 0; }
.orn-hiw-card__lede { font-size: 14.5px; line-height: 1.6; color: rgb(58, 70, 84); margin: 0; }
@media (max-width: 900px) {
.orn-hiw-cards { grid-template-columns: 1fr; }
}
/* 04 · One fare — single white pill, 2 col × 4 row, green checks */
.orn-hiw-inclusions { list-style: none; padding: 26px 32px; margin: 34px 0 22px; background: #fff; border-radius: 18px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 0; }
.orn-hiw-inclusions li { display: flex; align-items: center; gap: 14px; padding: 16px 4px; font-size: 15.5px; color: var(--orn-text); font-weight: 500; border-top: 1px solid rgb(230, 224, 210); }
.orn-hiw-inclusions li:first-child, .orn-hiw-inclusions li:nth-child(2) { border-top: 0; }
.orn-hiw-inclusions li::before { content: "\2713"; color: rgb(31, 128, 68); font-size: 18px; font-weight: 800; flex-shrink: 0; width: 22px; }
.orn-hiw-fare-foot { font-size: 13.5px; color: rgb(122, 133, 147); line-height: 1.6; margin: 8px 0 0; }
@media (max-width: 720px) {
.orn-hiw-inclusions { grid-template-columns: 1fr; }
.orn-hiw-inclusions li:nth-child(2) { border-top: 1px solid rgb(230, 224, 210); }
}
/* 05 · Priced like an airline — bar chart */
.orn-hiw-fares { background: #fff; border-radius: 18px; padding: 40px 36px 32px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); margin-top: 34px; }
.orn-hiw-fares__chart { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 30px; height: 260px; padding: 0 12px 12px; border-bottom: 1px solid rgb(230, 224, 210); }
.orn-hiw-fare { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.orn-hiw-fare__cap { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 13px; font-weight: 700; color: rgb(242, 13, 22); }
.orn-hiw-fare__cap--low { color: rgb(31, 128, 68); }
.orn-hiw-fare__cap--high { color: rgb(140, 100, 40); }
.orn-hiw-fare__bar { width: 78%; max-width: 130px; background: linear-gradient(rgb(237, 184, 179), rgb(242, 13, 22)); border-radius: 8px 8px 0 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08); }
.orn-hiw-fare__bar--low { background: linear-gradient(rgb(62, 154, 106), rgb(201, 10, 18)); }
.orn-hiw-fare__bar--high { background: linear-gradient(rgb(242, 13, 22), rgb(158, 8, 16)); }
.orn-hiw-fares__labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 18px; padding: 0 12px; }
.orn-hiw-fare-label { text-align: center; }
.orn-hiw-fare-label__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 700; font-size: 16px; color: var(--orn-text); }
.orn-hiw-fare-label__sub { font-size: 13.5px; color: rgb(242, 13, 22); margin-top: 4px; }
.orn-hiw-fares__note { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: rgb(58, 70, 84); text-align: center; }
@media (max-width: 720px) {
.orn-hiw-fares__chart { height: 200px; gap: 14px; }
.orn-hiw-fares__labels { gap: 14px; }
.orn-hiw-fare-label__title { font-size: 14px; }
.orn-hiw-fare-label__sub { font-size: 12px; }
}
/* 07 · Why ORN — pillar cards + navy stat bar */
.orn-hiw-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.orn-hiw-pillar { background: #fff; border-radius: 14px; padding: 30px 28px 26px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); display: flex; flex-direction: column; gap: 12px; }
.orn-hiw-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(201, 201, 201, 0.18); color: var(--orn-navy); margin-bottom: 22px; }
.orn-hiw-pillar__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-size: 19px; font-weight: 700; color: var(--orn-text); margin: 0; }
.orn-hiw-pillar__lede { font-size: 14.5px; line-height: 1.6; color: rgb(58, 70, 84); margin: 0; }
@media (max-width: 900px) {
.orn-hiw-pillars { grid-template-columns: 1fr; }
}
.orn-hiw-statbar { background: var(--orn-text); color: rgb(233, 239, 246); border-radius: 18px; padding: 34px 40px; margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.orn-hiw-statbar__stat { text-align: left; }
.orn-hiw-statbar__n { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 40px; line-height: 1; color: #fff; }
.orn-hiw-statbar__l { margin-top: 6px; font-size: 13.5px; color: rgba(233, 239, 246, 0.72); }
@media (max-width: 900px) {
.orn-hiw-statbar { grid-template-columns: repeat(2, 1fr); padding: 24px 28px; }
.orn-hiw-statbar__n { font-size: 32px; }
}
/* Ghost button on cream — visible navy outline instead of the white one
which .orn-btn--ghost uses for the dark hero band. */
.orn-hiw-cta__row .orn-btn--ghost { color: var(--orn-navy); border-color: rgba(20, 35, 59, 0.28); background: transparent; }
.orn-hiw-cta__row .orn-btn--ghost:hover { background: rgba(20, 35, 59, 0.04); }
/* Merged section 01 — subtitles for the four inner topics. */
.orn-page--how-it-works .orn-hiw-subtitle { font-size: 24px; line-height: 1.25; margin-top: 40px; }
.orn-page--how-it-works .orn-hiw-subtitle + .orn-secthead__lede { margin-top: 8px; }
/* ─── How-it-works — From-the-road gallery ────────────────────── */
.orn-hiw-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.orn-hiw-gallery__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11.5px; letter-spacing: 0.24em; color: rgb(242, 13, 22); font-weight: 700; margin: 0 0 8px; }
.orn-hiw-gallery__title { font-size: 28px; margin: 0; }
.orn-hiw-gallery__follow { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid rgba(20, 35, 59, 0.16); border-radius: 999px; background: transparent; color: var(--orn-text); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.orn-hiw-gallery__follow:hover { background: rgba(20, 35, 59, 0.04); }
.orn-hiw-gallery__grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.orn-hiw-gallery__reel { position: relative; display: block; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; min-height: 460px; text-decoration: none; color: #fff; }
.orn-hiw-gallery__reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 35, 59, 0.05) 45%, rgba(20, 35, 59, 0.85) 100%); }
.orn-hiw-gallery__reel-tag { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(20, 35, 59, 0.6); color: rgb(201, 164, 92); font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; font-weight: 700; }
.orn-hiw-gallery__reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; }
.orn-hiw-gallery__reel-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; color: #fff; }
.orn-hiw-gallery__reel-title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 700; font-size: 20px; line-height: 1.2; }
.orn-hiw-gallery__reel-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin-top: 4px; }
.orn-hiw-gallery__tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.orn-hiw-gallery__tile { display: block; border-radius: 16px; background-size: cover; background-position: center; background-color: rgb(230, 224, 210); text-decoration: none; position: relative; overflow: hidden; }
.orn-hiw-gallery__tile--reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 35, 59, 0) 55%, rgba(20, 35, 59, 0.5) 100%); }
.orn-hiw-gallery__tile-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px; }
.orn-hiw-gallery__note { font-size: 13.5px; color: rgb(122, 133, 147); line-height: 1.6; margin: 22px 0 0; }
@media (max-width: 1024px) {
.orn-hiw-gallery__grid { grid-template-columns: 1fr; }
.orn-hiw-gallery__reel { min-height: 340px; }
}
@media (max-width: 720px) {
.orn-hiw-gallery__tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
.orn-hiw-gallery__title { font-size: 22px; }
}
/* ─── About ORN — 4×3 tile grid, country chips, audience split ─── */
.orn-about-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.orn-about-tile { background: #fff; border-radius: 14px; padding: 26px 24px 24px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); border: 1px solid rgb(231, 231, 231); display: flex; flex-direction: column; gap: 10px; }
.orn-about-tile__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 700; font-size: 16px; color: var(--orn-text); margin: 0; }
.orn-about-tile__lede { font-size: 13px; line-height: 1.6; color: rgb(58, 70, 84); margin: 0; }
@media (max-width: 1024px) {
.orn-about-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.orn-about-tiles { grid-template-columns: 1fr; }
}
/* Country chip cloud (section 03) */
.orn-about-countries { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.orn-about-country { display: inline-flex; align-items: center; padding: 10px 16px; background: #fff; border: 1px solid rgb(230, 224, 210); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--orn-navy); }
/* Audience split (section 04) — For travellers + For agents */
.orn-about-audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
.orn-about-audience__card { background: #fff; border-radius: 18px; padding: 34px 32px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); display: flex; flex-direction: column; gap: 12px; }
.orn-about-audience__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11.5px; letter-spacing: 0.22em; font-weight: 700; color: rgb(242, 13, 22); }
.orn-about-audience__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 24px; color: var(--orn-text); margin: 4px 0 0; }
.orn-about-audience__lede { font-size: 15.5px; line-height: 1.65; color: rgb(58, 70, 84); margin: 0; }
@media (max-width: 900px) {
.orn-about-audience { grid-template-columns: 1fr; }
}
/* Section 05 · centered rule (both sides) */
.orn-hiw-rule--center { justify-content: center; }
.orn-hiw-rule--center .orn-hiw-rule__line { max-width: 220px; }
/* About-orn page rhythm — mirrors how-it-works constraints. */
/* about-orn — rule margin only (rest inherited from .orn-page--content) */
.orn-page--about-orn .orn-hiw-rule { margin: 0 0 22px; }
/* ─── About ORN — navy statement + navy end-to-end ─────────────── */
/* Navy statement band: THE ORN IDEA */
.orn-about-idea { background: var(--orn-text); color: #fff; padding-block: clamp(60px, 6vw, 96px); }
.orn-about-idea__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.28em; color: var(--orn-navy); font-weight: 600; margin: 0; }
.orn-about-idea__statement { font-family: Spectral, Georgia, serif; font-size: 30px; line-height: 1.42; margin: 18px 0 0; max-width: 900px; color: rgb(244, 239, 227); }
.orn-about-idea__mark { color: var(--orn-navy); }
@media (max-width: 720px) {
.orn-about-idea__statement { font-size: 22px; line-height: 1.4; }
}
.orn-about-film { background: rgb(243, 243, 243); padding-block: clamp(48px, 5vw, 80px); }
.orn-about-film__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--orn-navy); font-weight: 600; margin: 0; }
.orn-about-film__title { font-family: var(--orn-font-display); font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--orn-text); margin: 14px 0 0; max-width: 900px; }
.orn-about-film__lede { color: rgb(90, 101, 115); font-size: 17px; line-height: 1.5; margin: 14px 0 0; max-width: 720px; }
.orn-about-film__video { margin-top: 32px; border-radius: 20px; overflow: hidden; background: rgb(15, 15, 15); box-shadow: rgba(20, 35, 59, 0.14) 0 20px 48px; }
.orn-about-film__video video { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
.orn-about-film__title { font-size: 30px; }
}
/* Navy end-to-end band + gold-tab stat cards */
.orn-about-end2end { background: var(--orn-text); color: #fff; padding-block: clamp(56px, 6vw, 90px); }
.orn-about-end2end__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.28em; color: var(--orn-navy); font-weight: 600; margin: 0 0 22px; }
.orn-about-end2end__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; color: rgb(244, 239, 227); margin: 0; max-width: 900px; }
.orn-about-end2end__lede { font-size: 16px; line-height: 1.65; color: rgba(233, 239, 246, 0.72); max-width: 780px; margin: 18px 0 0; }
.orn-about-stats { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.orn-about-stat { background: rgb(21, 21, 21); border: 1px solid rgb(38, 38, 38); border-radius: 14px; padding: 18px 20px; }
.orn-about-stat__n { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 40px; line-height: 1; color: rgb(244, 239, 227); }
.orn-about-stat__l { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.12em; color: rgba(233, 239, 246, 0.55); margin-top: 10px; font-weight: 600; }
@media (max-width: 900px) {
.orn-about-stats { grid-template-columns: repeat(2, 1fr); }
.orn-about-end2end__title { font-size: 32px; }
}
/* ─── About ORN — Trusted-by-travellers world map ──────────────── */
.orn-about-world { background: #000; color: rgb(233, 239, 246); padding-block: clamp(56px, 7vw, 96px); }
.orn-about-world__inner { text-align: center; }
.orn-about-world__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.28em; color: var(--orn-navy); font-weight: 600; margin: 0 0 14px; }
.orn-about-world__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; color: #fff; margin: 0 0 44px; }
.orn-about-world__map { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 60 / 30; margin: 0 auto; }
.orn-about-world__grid { position: absolute; inset: 0; }
.orn-about-world__dot-land, .orn-about-world__dot-origin { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; transform: translate(-50%, -50%); }
.orn-about-world__dot-land { width: 0.34%; background: rgb(36, 59, 84); }
.orn-about-world__dot-origin { width: 0.64%; background: radial-gradient(circle, rgba(228, 196, 137, 0.34) 0%, rgba(228, 196, 137, 0) 70%), rgb(243, 180, 175); box-shadow: 0 0 8px 2px rgba(243, 180, 175, 0.55); animation: 3.4s ease-in-out 0s infinite normal none running ornpulse; }
@keyframes ornpulse {
0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
}
.orn-about-world__ocean { position: absolute; font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.26em; color: rgba(120, 145, 175, 0.6); pointer-events: none; z-index: 1; }
.orn-about-world__ocean--pacific { top: 42%; left: 14%; }
.orn-about-world__ocean--atlantic { top: 46%; left: 40%; }
.orn-about-world__ocean--indian { top: 74%; left: 64%; }
.orn-about-world__legend { display: flex; justify-content: space-between; gap: 2px; max-width: 900px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; }
.orn-about-world__region { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 180px; min-width: 180px; }
.orn-about-world__dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(243, 180, 175); box-shadow: rgba(228, 196, 137, 0.55) 0px 0px 7px 1px; flex-shrink: 0; }
.orn-about-world__region-label { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12.5px; letter-spacing: 0.2em; color: var(--orn-navy); font-weight: 600; }
.orn-about-world__region-n { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; color: rgb(110, 130, 152); margin-left: auto; }
@media (max-width: 720px) {
.orn-about-world__title { font-size: 24px; }
.orn-about-world__ocean { font-size: 9px; letter-spacing: 0.2em; }
}
/* About-ORN — world-map legend country lists */
.orn-about-world__legend { align-items: flex-start !important; }
.orn-about-world__region-col { flex: 1 1 220px; min-width: 220px; text-align: left; }
.orn-about-world__region-col .orn-about-world__region { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 14px; }
.orn-about-world__country-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 22px; }
.orn-about-world__country-list--single { columns: 1; }
.orn-about-world__country-list li { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-size: 14.5px; color: rgb(195, 204, 214); break-inside: avoid; }
.orn-about-world__country-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(78, 99, 119); flex-shrink: 0; margin-top: 8px; }
.orn-page--about-orn .orn-about-world__foot, .orn-about-world__foot { margin: 44px auto 0; text-align: center !important; font-size: 19px; color: rgb(159, 176, 196); width: 100%; max-width: 900px; }
.orn-about-world__foot strong { font-size: 22px; font-weight: 700; color: var(--orn-navy); }
@media (max-width: 900px) {
.orn-about-world__country-list { columns: 1; }
}
/* ─── Investors page ───────────────────────────────────────────── */
/* Page rhythm — mirrors how-it-works / about-orn */
/* investors — rule margin only (rest inherited from .orn-page--content) */
.orn-page--investors .orn-hiw-rule { margin: 0 0 22px; }
/* Board & backers — split-column person cards */
.orn-inv-board { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 34px; }
.orn-inv-person { position: relative; background: #fff; border-radius: 16px; padding: 26px 28px 26px 32px; box-shadow: 0 8px 22px rgba(20, 35, 59, 0.06); display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: start; overflow: hidden; }
.orn-inv-person::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orn-inv-accent, rgb(201, 164, 92)); }
.orn-inv-person__avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--orn-inv-accent, rgb(201, 164, 92)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 18px; letter-spacing: 0.06em; }
.orn-inv-person__body { display: flex; flex-direction: column; gap: 10px; }
.orn-inv-person__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.orn-inv-person__name { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 22px; color: var(--orn-text); margin: 0; line-height: 1.15; }
.orn-inv-person__pill { display: inline-flex; align-items: center; padding: 5px 14px; background: var(--orn-navy-2); color: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
.orn-inv-person__role { font-size: 14.5px; color: var(--orn-text); line-height: 1.55; margin: 0; font-weight: 600; }
.orn-inv-person__bio { font-size: 15px; line-height: 1.65; color: rgb(58, 70, 84); margin: 4px 0 0; }
@media (max-width: 720px) {
.orn-inv-person { grid-template-columns: 1fr; gap: 18px; padding: 22px 22px 22px 26px; }
.orn-inv-person__name { font-size: 20px; }
}
/* Governance pillars — 3-column variant with mono eyebrow */
.orn-hiw-pillars--3 { grid-template-columns: repeat(3, 1fr); }
.orn-inv-pillar__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; font-weight: 700; color: rgb(242, 13, 22); margin-bottom: 14px; }
@media (max-width: 900px) {
.orn-hiw-pillars--3 { grid-template-columns: 1fr; }
}
/* Investors — THE ORN IDEA rounded navy card */
.orn-inv-idea { background: var(--orn-navy); color: #fff; border: 1px solid var(--orn-navy); border-radius: 22px; padding: 48px 52px; max-width: 1100px; margin: 0 auto; box-shadow: rgba(20, 20, 20, 0.04) 0px 1px 2px, rgba(20, 20, 20, 0.06) 0px 14px 34px; }
/* On the home page the card sits inside the same container as the journey grid;
let it fill the container so the left/right edges line up with the neighbouring sections. */
.orn-page--home .orn-inv-idea { max-width: none; }
.orn-page--investors .orn-inv-idea { background: var(--orn-text); border-color: var(--orn-text); color: #fff; }
.orn-page--investors .orn-inv-idea__eyebrow { color: var(--orn-navy); }
.orn-page--investors .orn-inv-idea__tagline { color: var(--orn-navy); }
.orn-inv-idea__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.28em; color: #fff; font-weight: 600; margin: 0 0 22px; }
.orn-inv-idea__statement { font-family: "Spectral", Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1.28; margin: 0; max-width: 880px; color: #fff; }
.orn-inv-idea__tagline { font-family: "Spectral", Georgia, serif; font-weight: 500; font-size: 26px; color: #fff; margin: 22px 0 0; line-height: 1.2; }
.orn-inv-idea__tagline em { font-style: italic; }
.orn-inv-idea__lede { font-size: 16.5px; line-height: 1.65; color: #fff; margin: 26px 0 0; max-width: 780px; }
@media (max-width: 720px) {
.orn-inv-idea__statement { font-size: 24px; }
.orn-inv-idea__tagline { font-size: 20px; }
}
/* Investors — hero stat strip below the lede */
.orn-inv-hero-stats { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: clamp(20px, 3vw, 40px); row-gap: 22px; margin-top: 56px; }
.orn-page--investors .orn-hero__copy { max-width: none; }
.orn-page--investors .orn-inv-hero-stats { flex-wrap: nowrap; width: max-content; max-width: 100%; }
.orn-inv-hero-stat { flex: 0 0 auto; }
.orn-inv-hero-stat__n { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 26px; font-weight: 500; color: rgb(244, 239, 227); line-height: 1.1; white-space: nowrap; }
.orn-inv-hero-stat__l { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(233, 239, 246, 0.55); margin-top: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) {
/* Let the 3 stats wrap instead of overflowing off the right edge — the
desktop override forces flex-wrap:nowrap + width:max-content. */
.orn-page--investors .orn-inv-hero-stats,
.orn-inv-hero-stats { flex-wrap: wrap; width: 100%; max-width: 100%; column-gap: 32px; row-gap: 20px; margin-top: 40px; }
.orn-inv-hero-stat { flex: 0 0 auto; }
.orn-inv-hero-stat__n { font-size: 24px; }
}
/* Investors — HCL Group navy band with 3 stat tiles */
.orn-inv-hcl { background: var(--orn-text); color: rgb(233, 239, 246); padding-block: clamp(52px, 6vw, 78px); }
.orn-inv-hcl__eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; margin: 0; }
.orn-inv-hcl__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 40px; color: rgb(244, 239, 227); margin: 12px 0 0; line-height: 1.1; }
.orn-inv-hcl__lede { font-size: 18px; color: rgb(175, 192, 210); line-height: 1.55; max-width: 820px; margin: 14px 0 0; }
.orn-inv-hcl__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.orn-inv-hcl__stat { background: var(--orn-text); border: 1px solid rgb(35, 51, 71); border-radius: 14px; padding: 22px 24px; }
.orn-inv-hcl__stat-n { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 30px; color: rgb(244, 239, 227); line-height: 1; }
.orn-inv-hcl__stat-l { font-size: 14px; color: rgb(159, 176, 196); margin-top: 8px; }
@media (max-width: 720px) {
.orn-inv-hcl__stats { grid-template-columns: 1fr; }
.orn-inv-hcl__title { font-size: 30px; }
}
/* "How our backers think" — crisp title + 3 tight cards */
.orn-inv-think-section { padding-block: clamp(48px, 5vw, 68px) !important; }
.orn-inv-think-title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 30px; color: var(--orn-text); margin: 0 0 24px; letter-spacing: -0.01em; }
.orn-inv-think { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.orn-inv-think__card { background: #fff; border: 1px solid rgb(228, 221, 205); border-radius: 16px; padding: 24px; box-shadow: none; }
.orn-inv-think__card-title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 700; font-size: 20px; color: var(--orn-text); margin: 0; line-height: 1.2; }
.orn-inv-think__card-lede { font-size: 14.5px; color: rgb(90, 101, 115); line-height: 1.5; margin: 8px 0 0; }
@media (max-width: 900px) {
.orn-inv-think { grid-template-columns: 1fr; }
}
/* Investor relations — beige pill bar with CTA on the right */
.orn-inv-ir { margin-top: 28px; background: rgb(253, 240, 239); border: 1px solid rgb(246, 203, 199); border-radius: 18px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.orn-inv-ir__copy { flex: 1 1 280px; }
.orn-inv-ir__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 22px; color: var(--orn-text); margin: 0; }
.orn-inv-ir__lede { font-size: 14.5px; color: rgb(90, 101, 115); margin: 4px 0 0; line-height: 1.55; }
.orn-inv-ir__cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 10px; background: var(--orn-text); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.orn-inv-ir__cta:hover { background: var(--orn-text); }
/* ─── Van tours page — matches how-it-works / about-orn rhythm ─── */
/* van-tours — page-specific overrides on top of .orn-page--content */
.orn-page--van-tours .orn-secthead { display: block; margin-bottom: 22px; }
.orn-page--van-tours .orn-secthead__title { font-size: 32px; }
.orn-page--van-tours .orn-secthead__lede { font-size: 15.5px; line-height: 1.55; color: rgb(90, 101, 115); max-width: 820px; margin: 8px 0 0; flex: none; }
.orn-page--van-tours .orn-container { max-width: 1180px; padding-inline: clamp(28px, 4vw, 40px); }
.orn-page--van-tours .orn-hero__title { font-size: 56px; line-height: 1; max-width: 720px; }
.orn-page--van-tours .orn-hero__lede { max-width: 560px; font-size: 16.5px; }
.orn-page--van-tours .orn-btn--ghost { color: var(--orn-navy); border-color: rgba(20, 35, 59, 0.28); background: transparent; }
.orn-page--van-tours .orn-btn--ghost:hover { background: rgba(20, 35, 59, 0.04); }
/* ─── Van tours — hero split + PRIVATE VAN PASS card ────────────── */
.orn-van-hero { display: grid; grid-template-columns: minmax(360px, 1.2fr) minmax(360px, 440px); gap: 44px; align-items: center; }
.orn-van-hero__copy {}
.orn-van-hero__stats { display: grid; grid-template-columns: repeat(4, auto); column-gap: clamp(20px, 2.6vw, 44px); row-gap: 22px; margin-top: 40px; justify-content: start; }
.orn-van-hero__stat-n { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 28px; font-weight: 500; color: rgb(244, 239, 227); line-height: 1; white-space: nowrap; }
.orn-van-hero__stat-l { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.2em; color: rgba(233, 239, 246, 0.5); margin-top: 8px; font-weight: 600; white-space: nowrap; }
@media (max-width: 1000px) {
.orn-van-hero { grid-template-columns: 1fr; }
.orn-van-hero__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.orn-page--van-tours .orn-hero__title { font-size: 40px; }
}
.orn-van-pass { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34); display: flex; flex-direction: column; width: 100%; max-width: 420px; margin-inline: auto; transform: rotate(1.3deg); }
.orn-van-pass__top { background: rgb(15, 15, 15); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.orn-van-pass__brand { display: inline-flex; align-items: center; gap: 8px; }
.orn-van-pass__brand-disc { width: 30px; height: 30px; border-radius: 50%; background: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.orn-van-pass__brand-disc img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.orn-van-pass__brand-mark { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; letter-spacing: 0.02em; font-size: 20px; color: #fff; }
.orn-van-pass__brand-divider { color: rgba(255, 255, 255, 0.3); }
.orn-van-pass__brand-eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.orn-van-pass__badge { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.22em; color: var(--orn-navy); font-weight: 600; }
.orn-van-pass__image { position: relative; aspect-ratio: 16 / 6; background-size: cover; background-position: center; }
.orn-van-pass__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,35,59,0.05) 40%, rgba(20,35,59,0.72) 100%); }
.orn-van-pass__image-caption { position: absolute; left: 22px; bottom: 20px; z-index: 1; color: rgb(244, 239, 227); }
.orn-van-pass__image-eyebrow { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.24em; color: rgb(243, 180, 175); font-weight: 700; }
.orn-van-pass__image-title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 26px; line-height: 1; margin-top: 6px; }
.orn-van-pass__body { padding: 16px 18px; background: #fff; color: rgb(15, 15, 15); }
.orn-van-pass__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.orn-van-pass__meta-k { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.22em; color: rgb(110, 110, 110); font-weight: 600; }
.orn-van-pass__meta-v { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 700; font-size: 15.5px; color: rgb(15, 15, 15); margin-top: 4px; }
.orn-van-pass__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.orn-van-pass__chip { display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid rgb(243, 180, 175); border-radius: 999px; font-size: 12.5px; color: rgb(15, 15, 15); background: transparent; }
.orn-van-pass__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgb(200, 186, 155); }
.orn-van-pass__barcode { display: inline-flex; align-items: stretch; gap: 2px; height: 32px; padding: 4px 2px; flex: 1; max-width: 260px; }
.orn-van-pass__barcode-bar { display: block; height: 100%; background: rgb(15, 15, 15); border-radius: 0.5px; }
.orn-van-pass__barcode-bar--gap { background: transparent; }
.orn-van-pass__cta { display: inline-flex; align-items: center; padding: 12px 20px; background: rgb(15, 15, 15); color: #fff; font-weight: 700; font-size: 14px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.orn-van-pass__cta:hover { background: rgb(0, 0, 0); }
/* ─── Van tours — Private van itinerary route cards ─────────────── */
.orn-van-usp { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 22px; }
.orn-van-usp__item { display: flex; align-items: flex-start; gap: 14px; }
.orn-van-usp__ic { color: var(--orn-text); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--orn-text); border-radius: 50%; flex-shrink: 0; }
.orn-van-usp__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 15px; line-height: 1; color: var(--orn-text); }
.orn-van-usp__sub { font-size: 13px; color: rgb(110, 110, 110); margin-top: 2px; }
.orn-van-routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.orn-van-route { position: relative; background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 4px 14px rgba(20, 35, 59, 0.05); display: flex; flex-direction: column; }
.orn-van-route__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.orn-van-route__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 22px; color: var(--orn-text); margin: 0; line-height: 1.1; }
.orn-van-route__seq { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 13px; color: rgb(58, 70, 84); margin: 6px 0 0; letter-spacing: 0.02em; line-height: 1.35; }
.orn-van-route__nights { background: rgb(243, 243, 243); color: var(--orn-text); font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.orn-van-route__cities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.orn-van-route__city { display: inline-flex; align-items: center; padding: 5px 12px; background: rgb(243, 243, 243); color: var(--orn-text); border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.orn-van-route__desc { margin: 14px 0 0; color: var(--orn-ink-2, rgb(58, 70, 84)); font-family: var(--orn-font-body); font-size: 13.5px; line-height: 1.5; }
.orn-van-route__hi-label { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.22em; color: rgb(242, 13, 22); font-weight: 700; margin-top: 14px; }
.orn-van-route__highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.orn-van-route__hi { display: inline-flex; padding: 4px 10px; border: 1px solid rgb(220, 203, 166); border-radius: 999px; font-size: 11.5px; color: rgb(58, 70, 84); background: transparent; }
.orn-van-route__hi-more { font-size: 11.5px; color: rgb(242, 13, 22); font-weight: 600; padding-left: 4px; }
.orn-van-route__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; }
.orn-van-route__price-label { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0; color: rgb(110, 110, 110); font-weight: 500; }
.orn-van-route__price-amount { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 22px; color: var(--orn-text); margin-top: 4px; line-height: 1; }
.orn-van-route__cta { display: inline-flex; align-items: center; padding: 10px 18px; background: var(--orn-text); color: #fff; font-weight: 700; font-size: 13.5px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.orn-van-route__cta:hover { background: rgb(0, 0, 0); }
@media (max-width: 900px) {
.orn-van-routes { grid-template-columns: 1fr; }
.orn-van-route__title { font-size: 20px; }
}
/* ─── Van tours — Hero (first tour) + grid of tiles ───────────── */
/* Container overrides the old 2-col route grid — the JS injects one
* .orn-vhero + one .orn-van-grid inside #ornVanTourList. */
.orn-van-routes { display: block; margin-top: 28px; }
.orn-vhero {
position: relative;
display: block;
border-radius: 20px;
overflow: hidden;
background: var(--orn-navy, #14233b) center/cover no-repeat;
color: #fff;
text-decoration: none;
box-shadow: 0 20px 42px rgba(20, 35, 59, 0.16);
margin-bottom: 32px;
}
.orn-vhero::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.05) 78%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
.orn-vhero__inner {
position: relative;
padding: 30px 42px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
justify-content: flex-start;
}
.orn-vhero__badge {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 7px;
background: #fff; color: var(--orn-text, #14233b);
font-family: var(--orn-font-mono, monospace);
font-weight: 800; font-size: 11.5px; letter-spacing: 0.12em;
padding: 8px 16px; border-radius: 999px;
margin-bottom: 4px;
}
.orn-vhero__badge-star { color: #F20D16; font-size: 12px; }
.orn-vhero__title {
font-family: var(--orn-font-display, Archivo, sans-serif);
font-weight: 800; font-size: 42px; line-height: 1.05;
color: #fff; margin: 4px 0 0;
text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.orn-vhero__meta { display: flex; flex-direction: column; gap: 8px; }
.orn-vhero__meta-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.9); font-family: var(--orn-font-body); }
.orn-vhero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.orn-vhero__chip { display: inline-flex; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); color: #fff; font-size: 12.5px; font-weight: 600; background: transparent; }
.orn-vhero__lede { margin-top: 10px; }
.orn-vhero__lede-label { font-family: var(--orn-font-mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 700; }
.orn-vhero__lede-text { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.94); margin: 6px 0 0; max-width: 575px; }
.orn-vhero__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; margin-top: 0; padding-top: 22px;
}
.orn-vhero__price { display: flex; flex-direction: column; }
.orn-vhero__price-label { font-family: var(--orn-font-mono, monospace); font-size: 12px; letter-spacing: 0.05em; color: rgba(255,255,255,0.78); font-weight: 500; }
.orn-vhero__price-amount { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 32px; color: #fff; line-height: 1; margin-top: 4px; }
.orn-vhero__price-suffix { font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 4px; }
.orn-vhero__arrow {
flex-shrink: 0;
width: 56px; height: 56px; border-radius: 50%;
background: #fff; color: var(--orn-text, #14233b);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 8px 22px rgba(0,0,0,0.24);
transition: transform 0.15s ease-out;
}
.orn-vhero:hover .orn-vhero__arrow { transform: translateX(4px); }
@media (max-width: 900px) {
.orn-vhero::before { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.85) 100%); }
.orn-vhero__inner { padding: 32px 24px; }
.orn-vhero__title { font-size: 30px; }
}
/* Grid of tiles below the hero — 3 columns on desktop */
.orn-van-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1080px) { .orn-van-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .orn-van-grid { grid-template-columns: 1fr; } }
/* Horizontal-scroll variant used on JD "Book Your Private Tour" strip */
.orn-van-scroll {
display: flex;
flex-wrap: nowrap;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
}
.orn-van-scroll > .orn-vtile {
flex: 0 0 340px;
width: 340px;
max-width: 340px;
min-width: 340px;
scroll-snap-align: start;
}
.orn-van-scroll::-webkit-scrollbar { height: 8px; }
.orn-van-scroll::-webkit-scrollbar-thumb { background: rgba(20, 35, 59, 0.15); border-radius: 4px; }
@media (max-width: 700px) {
/* Full-bleed the strip to the screen edges, then near-full-width cards with
a small peek of the next — instead of a fixed 280px that left a large gap. */
.orn-van-scroll { margin-inline: calc(var(--orn-gutter, 28px) * -1); padding-inline: 16px; scroll-padding-left: 16px; gap: 14px; }
.orn-van-scroll > .orn-vtile { flex: 0 0 95%; width: 95%; max-width: 95%; min-width: 0; }
.orn-vtile__image { height: 180px; }
.orn-page--van-tour-detail .orn-container { padding: 20px; }
}
.orn-vtile {
display: flex; flex-direction: column;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(20, 35, 59, 0.08);
text-decoration: none;
color: inherit;
transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}
.orn-vtile:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(20, 35, 59, 0.14); }
.orn-vtile__image {
position: relative;
height: 220px;
background: var(--orn-navy, #14233b) center/cover no-repeat;
}
.orn-vtile__tag {
position: absolute; top: 14px; left: 14px;
display: inline-flex; align-items: center; gap: 7px;
background: #fff; color: var(--orn-text, #14233b);
font-family: var(--orn-font-mono, monospace);
font-weight: 800; font-size: 10.5px; letter-spacing: 0.12em;
padding: 7px 14px; border-radius: 999px;
box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}
.orn-vtile__tag-star { color: #F20D16; font-size: 11px; }
.orn-vtile__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 22px; flex: 1; }
.orn-vtile__title { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0; color: var(--orn-text); }
.orn-vtile__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(80, 92, 108); font-family: var(--orn-font-body); }
.orn-vtile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.orn-vtile__chip { display: inline-flex; padding: 5px 12px; background: #fff; border: 1px solid rgb(228, 228, 228); color: var(--orn-text); border-radius: 999px; font-size: 12px; font-weight: 600; }
.orn-vtile__chip--more { background: transparent; border-style: dashed; border-color: rgb(200, 200, 200); color: var(--orn-mute, rgb(120, 120, 120)); font-weight: 500; }
.orn-vtile__lede { margin-top: 4px; }
.orn-vtile__lede-label { font-family: var(--orn-font-mono, monospace); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(110, 110, 110); font-weight: 700; }
.orn-vtile__lede-text { font-size: 13.5px; line-height: 1.5; color: rgb(58, 70, 84); margin: 6px 0 0; }
.orn-vtile__foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.orn-vtile__price { display: flex; flex-direction: column; }
.orn-vtile__price-label { font-family: var(--orn-font-mono, monospace); font-size: 11px; letter-spacing: 0.05em; color: rgb(110, 110, 110); font-weight: 500; }
.orn-vtile__price-amount { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 22px; color: var(--orn-text); line-height: 1; margin-top: 4px; }
.orn-vtile__redeem { color: #1F7A3D; font-family: var(--orn-font-body); font-size: 12.5px; font-weight: 600; margin-top: 6px; line-height: 1.2; }
.orn-vtile__arrow {
width: 40px; height: 40px; border-radius: 50%;
background: #000;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform 0.15s ease-out;
}
.orn-vtile:hover .orn-vtile__arrow { transform: translateX(3px); }
/* ─── Van Tour Detail page ─────────────────────────────────── */
.orn-vtd__hero { height: 340px; display: flex; align-items: flex-end; padding: 44px 0 20px; color: #fff; background-size: cover; background-position: center right; }
/* New product-image hero — reuses .orn-vhero from the listing page */
.orn-vtd__herowrap { padding: 24px 0 20px; background: transparent; }
.orn-vtd__herowrap-inner { max-width: var(--orn-container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.orn-vtd__crumb-outer { display: inline-flex; align-items: center; gap: 8px; color: var(--orn-text, #14233b); text-decoration: none; font-family: var(--orn-font-body); font-size: 14px; margin: 0 0 16px; font-weight: 500; }
.orn-vtd__crumb-outer:hover { color: var(--orn-red, #F20D16); }
.orn-vtd__crumb-outer .orn-vtd__crumb-arrow { font-size: 16px; }
.orn-vtd__vhero { margin-bottom: 0; min-height: 420px; }
.orn-page--content .orn-container.orn-vtd__hero-inner, .orn-vtd__hero-inner { width: 100%; max-width: var(--orn-container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.orn-vtd__hero-inner > * { max-width: 620px; }
.orn-vtd__crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--orn-cream-1, #f5efe0); text-decoration: none; font-family: var(--orn-font-body); font-size: 13.5px; margin: 0 0 30px; }
.orn-vtd__crumb:hover { color: #fff; }
.orn-vtd__eyebrow { font-family: var(--orn-font-mono, monospace); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(243, 180, 175); margin: 0 0 10px; }
.orn-vtd__title { font-family: var(--orn-font-display, "Recoleta", serif); font-size: 48px; line-height: 1.05; margin: 0; color: var(--orn-cream-1, #f5efe0); letter-spacing: -0.5px; text-shadow: 0 2px 20px rgba(20,35,59,0.35); }
.orn-vtd__cityline { font-family: var(--orn-font-mono, monospace); font-size: 15px; color: rgba(255,255,255,0.9); margin: 0; }
@media (max-width: 700px) {
.orn-vtd__title { font-size: 30px; }
}
.orn-vtd__main { padding: 32px 20px 60px; max-width: var(--orn-container); margin: 0 auto; }
.orn-page--van-tour-detail .orn-jd__main { padding-top: 0; }
/* =============================================================
* Right-rail sticky booking summary card (van-tour detail).
* Filled by ornholidays-summary-card.js from reprice + roomspax
* events dispatched by ornholidays-journey.js.
* ============================================================= */
.orn-sum { position: sticky; top: 24px; align-self: start; }
@media (max-width: 1099px) {
.orn-sum { position: static; }
}
.orn-sum__inner { background: #fff; border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 12px 36px rgba(20,35,59,0.08); font-family: var(--orn-font-body); }
.orn-sum__title { font-family: var(--orn-font-display); font-size: 22px; font-weight: 800; color: var(--orn-text); margin: 0 0 18px; }
.orn-sum__section { margin-bottom: 16px; }
.orn-sum__section--flat { margin-bottom: 8px; }
.orn-sum__eyebrow { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-text); font-weight: 600; margin-bottom: 8px; }
.orn-sum__eyebrow--inline { margin-bottom: 0; }
.orn-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.orn-sum__pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: var(--orn-cream-2, #f4ece0); border: 1px solid var(--orn-text); border-radius: 12px; padding: 12px 16px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--orn-text); cursor: pointer; text-align: left; }
.orn-sum__pill:hover { background: var(--orn-cream-3, #ece2d0); }
.orn-sum__pill-text { flex: 1; min-width: 0; }
.orn-sum__pill-edit { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgb(75, 75, 75); text-transform: uppercase; }
.orn-sum__vehicle { font-size: 15px; font-weight: 600; color: var(--orn-navy); }
.orn-sum__vehicle-note { font-size: 12.5px; color: rgb(122, 133, 147); margin-top: 4px; }
.orn-sum__date-pill { background: none; border: none; padding: 4px 0; font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(122, 133, 147); cursor: pointer; }
.orn-sum__date-pill:hover { color: var(--orn-navy); }
.orn-sum__rule { height: 1px; background: var(--orn-cream-3, #e6dfc9); margin: 12px 0 14px; }
.orn-sum__breakup { margin-bottom: 14px; }
.orn-sum__breakup:empty { display: none; }
/* Reuse existing .orn-vtd__breakup-row shape — declared below at line ~2370. */
.orn-sum__breakup .orn-vtd__breakup-row { font-size: 13.5px; margin: 10px 0; }
.orn-sum__totals { margin-bottom: 16px; }
.orn-sum__perperson-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.orn-sum__perperson-label { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-gold-3, #c9a45c); font-weight: 600; }
.orn-sum__perperson-val { font-family: var(--orn-font-mono); font-size: 24px; font-weight: 800; color: var(--orn-navy); line-height: 1.1; }
.orn-sum__grouptotal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.orn-sum__grouptotal-label { font-size: 13px; color: rgb(122, 133, 147); flex: 1 1 auto; min-width: 0; }
.orn-sum__grouptotal-val { font-family: var(--orn-font-mono); font-size: 28px; font-weight: 700; color: var(--orn-text); white-space: nowrap; }
.orn-sum__rewards { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.orn-sum__rewards[hidden] { display: none; }
.orn-sum__name { margin-bottom: 12px; }
.orn-sum__name-input { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--orn-cream-3, #e6dfc9); border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--orn-navy); background: #fff; }
.orn-sum__name-input:focus { outline: none; border-color: var(--orn-gold-3, #c9a45c); }
.orn-sum__cta { display: block; width: 100%; padding: 14px 18px; border: none; border-radius: 14px; background: var(--orn-text); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; margin-bottom: 10px; }
.orn-sum__cta:hover:not(:disabled) { background: rgb(0, 0, 0); }
.orn-sum__cta--disabled, .orn-sum__cta:disabled { background: var(--orn-cream-3, #d8ceb4); color: rgba(20,35,59,0.55); cursor: not-allowed; }
.orn-sum__note { font-size: 12px; color: rgb(122, 133, 147); text-align: center; margin: 0; }
.orn-sum__addon-hint { display: block; width: 100%; background: none; border: none; padding: 4px 0 8px; font-family: var(--orn-font-body); font-size: 13px; font-weight: 600; color: var(--orn-gold-3, #c9a45c); text-align: center; cursor: pointer; }
.orn-sum__addon-hint:hover { color: var(--orn-navy); text-decoration: underline; text-underline-offset: 3px; }
.orn-sum__addon-hint[hidden] { display: none; }
.orn-sum__unavl { display: block; margin-bottom: 12px; padding: 14px 16px; border-radius: 14px; background: rgb(253, 240, 239); border: 1px solid rgb(246, 203, 199); text-align: center; }
.orn-sum__unavl[hidden] { display: none; }
.orn-sum__unavl-msg { font-family: var(--orn-font-body); font-size: 13px; font-weight: 600; color: var(--orn-text); margin-bottom: 8px; }
.orn-sum__unavl-cta { display: inline-block; font-family: var(--orn-font-body); font-size: 13px; font-weight: 700; color: var(--orn-navy); text-decoration: none; }
.orn-sum__unavl-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.orn-sum__cta[hidden] { display: none; }
/* =============================================================
* Floating bottom-right copilot chip. Keeps .orn-jd__copilot-card
* class so ornChatPanel.init's triggerSelector still binds.
* ============================================================= */
.orn-jd__copilot-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: var(--orn-gold, #c9a45c); color: #fff; border: none; border-radius: 999px; padding: 12px 20px 12px 14px; box-shadow: 0 10px 28px rgba(20,35,59,0.28); cursor: pointer; font-family: var(--orn-font-body); font-size: 14px; font-weight: 700; }
.orn-jd__copilot-fab:hover { background: var(--orn-gold-2, #d4b06b); box-shadow: 0 14px 32px rgba(20,35,59,0.34); }
.orn-jd__copilot-fab-label { line-height: 1; }
@media (max-width: 640px) {
.orn-jd__copilot-fab { padding: 12px; }
.orn-jd__copilot-fab-label { display: none; }
}
/* =============================================================
* Inline day-optionals inside the Itinerary panel timeline.
* ornholidays-summary-card.js fills these slots from the addons
* dispatched via orn:addons-ready.
* ============================================================= */
.orn-jd__day-addons { margin-top: 14px; }
.orn-jd__day-addons:empty { display: none; }
/* =============================================================
* Custom-styled wait modal for orn-holidays surfaces.
* Invoked via MODAL_PANEL.show(html, { blockClass: 'orn-wait-block' })
* from srAsyncCall(url, params, cb, { waitMsg: '...' }).
*
* blockUI DOM shape after invocation:
* .blockUI.blockDialog.blockPage.orn-wait-block (outer)
* .blockMsg
* .blockBd
* .orn-wait__spinner (our SVG-less circular spinner)
* .orn-wait__msg (localized status text)
*
* blockUI stamps inline styles for z-index/position/left/top —
* we don't override those. Width/padding/typography live here.
* ============================================================= */
.orn-wait-block { width: 320px !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
.orn-wait-block .blockMsg { background: var(--orn-paper, #ffffff) !important; border: 1px solid var(--orn-cream-3, #e6dfc9) !important; border-radius: 18px !important; padding: 28px 28px 24px !important; box-shadow: 0 24px 60px rgba(20, 35, 59, 0.20) !important; }
.orn-wait-block .blockBd { padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.orn-wait__spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--orn-cream-3, #e6dfc9); border-top-color: var(--orn-gold, #c9a45c); animation: orn-wait-spin 0.85s linear infinite; }
.orn-wait__msg { font-family: var(--orn-font-body); font-size: 15px; font-weight: 600; color: var(--orn-navy); line-height: 1.35; letter-spacing: 0.01em; text-align: center; }
@keyframes orn-wait-spin { to { transform: rotate(360deg); } }
/* Slightly darker overlay so the cream card pops. blockUI applies
opacity:0.3 via inline style — we tint the background beyond that. */
.orn-wait-block ~ .blockUIOverlay, .blockUIOverlay:has(+ .orn-wait-block) { background: rgba(20, 35, 59, 0.35) !important; opacity: 1 !important; }
.orn-jd__day-addons-head { font-family: var(--orn-font-mono); font-size: 11.5px; text-transform: uppercase; color: var(--orn-text); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 10px; }
.orn-jd__day-addons-grid { display: flex; flex-direction: column; gap: 10px; }
/* When the summary card is present the flat addons block below the
* Dates panel is redundant on DESKTOP — the right-rail summary card owns
* the price and the add-ons surface inside the Itinerary tab, so hide the
* inline block there. .orn-jd__body:has() gates so we don't hide it on
* pages without the summary card.
* On MOBILE (<=640px, isMobileBookingFlow) the Dates step is the primary
* booking surface and the summary card is below the fold, so the inline
* add-ons section MUST stay visible — matching the FD flow. Hence the
* hide is scoped above the mobile booking-flow breakpoint. */
@media (min-width: 641px) {
.orn-jd__body:has(#ornSumCard) .orn-jd__dt-addons { display: none; }
}
.orn-vtd__grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
.orn-vtd__grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
.orn-vtd__col-left { min-width: 0; }
.orn-vtd__col-right { min-width: 0; }
.orn-vtd__pricing { position: sticky; top: 20px; background: #fff; border-radius: 20px; padding: 24px 22px; box-shadow: 0 12px 36px rgba(20,35,59,0.08); font-family: var(--orn-font-body); }
.orn-vtd__pricing-title { font-family: var(--orn-font-display, "Recoleta", serif); font-size: 24px; margin: 0 0 16px; color: var(--orn-navy); }
.orn-vtd__cities { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.orn-vtd__city { display: inline-flex; align-items: center; padding: 4px 10px; background: rgb(244,239,227); color: var(--orn-navy); border-radius: 999px; font-size: 12px; font-weight: 600; }
.orn-vtd__field { margin: 0 0 18px; }
.orn-vtd__label { display: block; font-family: var(--orn-font-mono, monospace); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orn-gold-2); margin: 0 0 6px; }
.orn-vtd__select, .orn-vtd__input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--orn-cream-3, #e6dfc9); border-radius: 8px; font-size: 14px; color: var(--orn-ink-1, #14233b); background: #fff; font-family: inherit; }
.orn-vtd__roomspax { position: relative; }
.orn-vtd__roomspax-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--orn-cream-3, #e6dfc9); border-radius: 8px; padding: 10px 14px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--orn-ink-1, #14233b); user-select: none; }
.orn-vtd__roomspax-trigger:hover { border-color: var(--orn-gold-2); }
.orn-vtd__roomspax-caret { color: var(--orn-ink-2, rgb(58,70,84)); font-size: 12px; }
.orn-vtd__field-help { margin: 6px 0 0; font-size: 12px; color: var(--orn-ink-2, rgb(58,70,84)); }
.orn-vtd__price-block { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--orn-cream-3, #e6dfc9); border-bottom: 1px solid var(--orn-cream-3, #e6dfc9); }
.orn-vtd__price-row { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0; font-size: 14px; color: var(--orn-ink-2, rgb(58,70,84)); }
.orn-vtd__price-row--total { margin-top: 12px; }
.orn-vtd__price-row--total .orn-vtd__price-v { font-size: 26px; font-weight: 700; color: var(--orn-navy); letter-spacing: -0.5px; }
.orn-vtd__price-v { font-weight: 600; color: var(--orn-navy); }
.orn-vtd__price-status { margin: 12px 0 0; font-size: 12px; color: var(--orn-ink-2, rgb(58,70,84)); font-style: italic; }
.orn-vtd__cta { display: block; width: 100%; padding: 14px 18px; border: none; border-radius: 10px; background: var(--orn-navy); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; }
.orn-vtd__cta:disabled { background: var(--orn-cream-3, #d6cdb2); color: rgba(20,35,59,0.55); cursor: not-allowed; }
.orn-vtd__cta:not(:disabled):hover { background: rgb(30,45,68); }
.orn-vtd__cta-note { margin: 10px 0 0; font-size: 11.5px; color: var(--orn-ink-2, rgb(58,70,84)); text-align: center; }
.orn-vtd__breakup { margin: 10px 0 16px; padding: 12px 0 4px; border-top: 1px dashed var(--orn-cream-3, #e6dfc9); }
.orn-vtd__breakup:empty { display: none; }
.orn-vtd__breakup-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0; font-size: 12.5px; color: var(--orn-ink-2, rgb(58,70,84)); }
.orn-vtd__breakup-k { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.orn-vtd__breakup-sub { font-size: 11px; color: rgba(58,70,84,0.7); margin-top: 2px; }
.orn-vtd__breakup-v { font-weight: 600; color: var(--orn-text); white-space: nowrap; }
.orn-vtd__breakup-row--sub { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--orn-cream-3, #e6dfc9); font-weight: 600; color: var(--orn-navy); }
.orn-vtd__breakup-row--voucher .orn-vtd__breakup-v { color: #1f7a3a; }
.orn-vtd__breakup-row--rewards { padding-top: 6px; margin-top: 6px; border-top: 1px dashed var(--orn-cream-3, #e6dfc9); }
.orn-vtd__breakup-row--rewards .orn-vtd__breakup-k,
.orn-vtd__breakup-row--rewards .orn-vtd__breakup-v { color: var(--orn-green); font-weight: 600; }
/* ─────────────────────────────────────────────────────────────────────
Promotions page — /tours/promotions
──────────────────────────────────────────────────────────────────── */
/* Hero band */
.orn-page--promotions { background: var(--orn-cream, #f5efe0); }
.orn-promo__hero { background: var(--orn-navy, #14233b); color: var(--orn-cream-1, #f4efe3); padding: 32px 0; }
.orn-page--promotions .orn-container { max-width: 1200px; padding-inline: clamp(20px, 3vw, 48px); margin: 0 auto; }
.orn-promo__hero-inner { position: relative; }
.orn-promo__crumb { display: inline-flex; align-items: center; gap: 6px; color: rgba(244, 239, 227, 0.7); font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.14em; text-decoration: none; margin-bottom: 10px; }
.orn-promo__crumb-arrow { font-size: 14px; }
.orn-promo__eyebrow { color: var(--orn-gold-3, #c9a45c); font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.22em; font-weight: 600; margin: 0 0 11px; }
.orn-promo__title { font-family: Anton, sans-serif; font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 20px; max-width: 900px; }
.orn-promo__lede { font-size: 17px; line-height: 1.55; color: rgba(244, 239, 227, 0.78); max-width: 780px; margin: 0; }
@media (max-width: 700px) {
.orn-promo__hero { padding: 40px 0 48px; }
.orn-promo__title { font-size: 32px; }
.orn-promo__lede { font-size: 15px; }
}
/* Strip container */
.orn-promo__main { padding: 32px 0 80px; }
.orn-promo__strips { display: flex; flex-direction: column; gap: 36px; }
/* One strip = header band + horizontal card scroller */
.orn-promo__strip {}
/* Colored header band — the "Lowest launch fares" blue block from the mockup.
Colour driven by data-tone; defaults to the LOWEST_LAUNCH blue. */
.orn-promo__strip-header { border-radius: 20px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: #3a6ea9; color: #fff; }
.orn-promo__strip-header[data-tone="BLUE"] { background: rgb(15, 15, 15); }
.orn-promo__strip-header[data-tone="AMBER"] { background: rgb(209, 75, 119); }
.orn-promo__strip-header[data-tone="GOLD"] { background: rgb(30, 122, 107); }
.orn-promo__strip-header[data-tone="RED"] { background: rgb(109, 90, 166); }
.orn-promo__strip-title-wrap { min-width: 0; }
.orn-promo__strip-title { margin: 0 0 6px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: inherit; }
.orn-promo__strip-subtitle { margin: 0; color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.4; }
.orn-promo__strip-count { flex-shrink: 0; background: rgba(255,255,255,0.18); color: #fff; border-radius: 999px; padding: 6px 14px; font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.12em; font-weight: 600; }
/* Horizontal card scroller */
.orn-promo__strip-cards { display: flex; gap: 20px; margin-top: 24px; overflow-x: auto; padding: 6px 2px 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.orn-promo__strip-cards::-webkit-scrollbar { height: 8px; }
.orn-promo__strip-cards::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
/* Cards */
.orn-promo__strip-card { flex: 0 0 295px; scroll-snap-align: start; background: #fff; border-radius: 18px; padding: 20px 22px 18px; text-decoration: none; color: var(--orn-text); box-shadow: 0 8px 24px rgba(20,35,59,0.06); border: 1px solid rgb(231, 231, 231); display: flex; flex-direction: column; gap: 2px; transition: box-shadow .18s ease, transform .18s ease; }
.orn-promo__strip-card:hover { box-shadow: 0 14px 32px rgba(20,35,59,0.12); transform: translateY(-2px); }
.orn-promo__strip-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.orn-promo__strip-card-family { font-family: var(--orn-font-mono); color: var(--orn-text-muted); font-size: 12px; letter-spacing: 0.16em; font-weight: 600; }
.orn-promo__strip-card-savings-text { color: #1F7A3D; font-family: var(--orn-font-body); font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.2; }
.orn-promo__strip-card-route { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.orn-promo__strip-card-city { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.05; letter-spacing: -0.01em; color: var(--orn-text); }
.orn-promo__strip-card-arrow { color: var(--orn-text); font-size: 22px; font-weight: 600; }
.orn-promo__strip-card-date { color: var(--orn-text); font-size: 14px; letter-spacing: 0.02em; font-weight: 500; }
/* Fill bar — unified red across every tone (matches the sample). */
.orn-promo__strip-card-bar { height: 6px; background: rgba(20, 35, 59, 0.08); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.orn-promo__strip-card-bar-fill { height: 100%; background: rgb(210, 100, 78); border-radius: 3px; transition: width .3s ease; }
.orn-promo__strip-card-status { color: rgb(210, 100, 78); font-size: 13px; font-weight: 500; letter-spacing: 0; margin-top: 6px; }
.orn-promo__strip-card-price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; gap: 12px; padding-top: 12px; }
.orn-promo__strip-card-price-meta { font-family: var(--orn-font-mono); color: var(--orn-text-muted); font-size: 11.5px; text-transform: lowercase; margin: 0 0 2px; }
.orn-promo__strip-card-price-val { font-family: var(--orn-font-mono); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--orn-text); }
.orn-promo__strip-card-price-strike { font-family: var(--orn-font-mono); color: var(--orn-text-muted); font-size: 13px; text-decoration: line-through; margin-top: 6px; }
.orn-promo__strip-card-price-save { color: #1F7A3D; font-size: 13px; font-weight: 700; margin-left: 6px; }
.orn-promo__strip-card-cta { background: var(--orn-text); color: #fff; border-radius: 12px; padding: 12px 22px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; }
/* Savings pill top-right of the card */
.orn-promo__strip-card-savings-pill { background: #E9F5EE; color: #1F7A3D; font-family: var(--orn-font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; border-radius: 999px; padding: 4px 10px; }
/* Skeleton (shown until brain returns) */
.orn-promo__strip-header--skeleton { height: 96px; background: rgba(20,35,59,0.06); }
.orn-promo__strip-cards--skeleton { pointer-events: none; }
.orn-promo__strip-card--skeleton { background: rgba(20,35,59,0.05); box-shadow: none; border-top-color: rgba(20,35,59,0.08); height: 240px; animation: ornPromoPulse 1.6s ease-in-out infinite; }
@keyframes ornPromoPulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.85; }
}
/* =============================================================
* Header utility "NEW" badge — small pill next to What's New link
* ============================================================= */
.orn-header__util-badge { display: inline-block; background: var(--orn-gold); color: var(--orn-navy); font-family: var(--orn-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; padding: 2px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; text-transform: uppercase; }
/* =============================================================
* What's New page — navy hero + 4 colored top-border cards
* ============================================================= */
.orn-page--whats-new .orn-hero__title { font-size: 56px; line-height: 1.1; max-width: 900px; font-weight: 700; }
.orn-page--whats-new .orn-wn-hi { color: var(--orn-gold); }
.orn-page--whats-new .orn-wn-back { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14px; margin-bottom: 24px; display: inline-block; }
.orn-page--whats-new .orn-wn-back:hover { color: var(--orn-gold); }
.orn-page--whats-new .orn-wn-dot { color: var(--orn-gold); margin-right: 4px; }
.orn-page--whats-new .orn-hero__eyebrow { display: inline-block; border: 1px solid rgba(255,255,255,0.16); padding: 6px 14px; border-radius: 20px; color: rgba(255,255,255,0.9); font-size: 12px; letter-spacing: 0.16em; }
.orn-wn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.orn-wn-card { background: var(--orn-paper); border-radius: 14px; padding: 24px 26px 22px; border-width: 4px 1px 1px; border-style: solid; border-color: var(--orn-blue) rgb(228, 221, 205) rgb(228, 221, 205); display: flex; flex-direction: column; gap: 12px; min-height: 340px; }
.orn-wn-card--red { border-top-color: var(--orn-red); }
.orn-wn-card--amber { border-top-color: var(--orn-amber); }
.orn-wn-card--blue { border-top-color: var(--orn-blue); }
.orn-wn-card--green { border-top-color: var(--orn-green); }
.orn-wn-card__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--orn-blue); margin: 0; }
.orn-wn-card--red .orn-wn-card__eyebrow, .orn-wn-card--red .orn-wn-card__cta { color: var(--orn-red); }
.orn-wn-card--amber .orn-wn-card__eyebrow, .orn-wn-card--amber .orn-wn-card__cta { color: var(--orn-amber); }
.orn-wn-card--blue .orn-wn-card__eyebrow, .orn-wn-card--blue .orn-wn-card__cta { color: var(--orn-blue); }
.orn-wn-card--green .orn-wn-card__eyebrow, .orn-wn-card--green .orn-wn-card__cta { color: var(--orn-green); }
.orn-wn-card__title { font-family: var(--orn-font-display); font-weight: 700; font-size: 22px; color: var(--orn-navy); line-height: 1.2; margin: 0; }
.orn-wn-card__lede { color: rgb(90, 101, 115); font-size: 14px; line-height: 1.55; margin: 0; flex-grow: 1; }
.orn-wn-card__cta { font-weight: 700; font-size: 14px; text-decoration: none; letter-spacing: 0.01em; margin-top: 6px; align-self: flex-start; }
.orn-wn-card__cta:hover { text-decoration: underline; }
@media (max-width: 900px) {
.orn-wn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.orn-wn-grid { grid-template-columns: 1fr; }
.orn-page--whats-new .orn-hero__title { font-size: 40px; }
}
.orn-visuallyhidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ==========================================================================
Credit / Rewards Dashboard (/tours/credit-dashboard)
Scoped under body.orn-page--credit-dashboard. Built on the --orn-* tokens
above (navy / gold / cream, Archivo + Hanken Grotesk + JetBrains Mono).
========================================================================== */
/* ---- Hero (tighter than the marketing hero) ------------------------------ */
.orn-page--credit-dashboard .orn-hero--tight { padding-block: 0; }
.orn-page--credit-dashboard .orn-hero--tight .orn-hero__inner { padding-block: clamp(24px, 3vw, 40px); gap: 32px; }
.orn-page--credit-dashboard .orn-hero--tight .orn-hero__title { font-size: 42px; line-height: 1.15; margin-top: 12px; margin-bottom: 16px; max-width: 720px; }
.orn-page--credit-dashboard .orn-hero--tight .orn-hero__lede { font-size: 16.5px; max-width: 640px; margin-bottom: 12px; }
.orn-page--credit-dashboard .orn-hero--tight .orn-hero__eyebrow { margin-bottom: 12px; }
/* "← Home" sits on the red hero — muted grey was invisible and its hover
mapped to red-on-red. Use light text with a full-white hover. */
.orn-page--credit-dashboard .orn-cd-back { display: inline-block; font-family: var(--orn-font-mono); font-size: var(--orn-fs-small); color: rgba(255, 255, 255, 0.75); margin-bottom: var(--sp-4); }
.orn-page--credit-dashboard .orn-cd-back:hover { color: #fff; }
/* Hero sits on the red banner: keep the accent dot and the "Dashboard"
highlight white so the title stays readable (the skin's gold token maps
to black, which was unreadable here). */
.orn-page--credit-dashboard .orn-cd-dot { color: #fff; }
.orn-page--credit-dashboard .orn-cd-hi { color: #fff; }
/* ---- Top section spacing ------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-top { padding-block: 24px 40px; }
/* ---- Navy balance card --------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-balance { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); background: linear-gradient(135deg, #1c1c1c 0%, #121212 55%, #000 100%); border-radius: var(--r-card); box-shadow: var(--sh-raised); padding: var(--sp-6) var(--sp-7); color: var(--orn-text-light); }
.orn-page--credit-dashboard .orn-cd-balance__label { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-mute-2); margin: 0 0 var(--sp-3); }
.orn-page--credit-dashboard .orn-cd-balance__amount { display: flex; align-items: flex-end; gap: var(--sp-3); }
.orn-page--credit-dashboard .orn-cd-balance__coin { width: 44px; height: 44px; }
.orn-page--credit-dashboard .orn-cd-balance__value { font-family: var(--orn-font-display); font-weight: 800; font-size: 52px; line-height: 1; color: #fff; }
.orn-page--credit-dashboard .orn-cd-balance__unit { font-family: var(--orn-font-body); font-size: var(--orn-fs-body); color: var(--orn-mute-3); padding-bottom: 6px; }
.orn-page--credit-dashboard .orn-cd-balance__sub { font-family: var(--orn-font-body); font-size: var(--orn-fs-small); color: var(--orn-mute-3); margin: var(--sp-3) 0 0; }
.orn-page--credit-dashboard .orn-cd-balance__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* ---- Buttons ------------------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--orn-font-body); font-weight: 600; font-size: var(--orn-fs-small); padding: 11px 20px; border-radius: var(--r-pill); transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
/* Reward-page CTAs: filled = red bg / white text; secondary = white bg / red text. */
.orn-page--credit-dashboard .orn-cd-btn--gold { background: #F20D16; color: #fff; }
.orn-page--credit-dashboard .orn-cd-btn--gold:hover { background: #C50A12; color: #fff; }
.orn-page--credit-dashboard .orn-cd-btn--ghost { background: #fff; border: 1px solid #fff; color: #F20D16; }
.orn-page--credit-dashboard .orn-cd-btn--ghost:hover { background: #F4F4F4; border-color: #F4F4F4; color: #C50A12; }
/* Ghost button on cream/paper (pager) reads on light bg */
.orn-page--credit-dashboard .orn-cd-pager .orn-cd-btn--ghost { border-color: var(--orn-line-2); color: var(--orn-ink-2); }
.orn-page--credit-dashboard .orn-cd-pager .orn-cd-btn--ghost:hover { border-color: var(--orn-gold); color: var(--orn-navy); }
/* ---- Summary tiles ------------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.orn-page--credit-dashboard .orn-cd-tile { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: var(--r-tile); box-shadow: var(--sh-card); padding: var(--sp-5); }
.orn-page--credit-dashboard .orn-cd-tile--warn { border-color: rgba(199, 122, 43, 0.35); }
.orn-page--credit-dashboard .orn-cd-tile__label { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orn-mute); margin: 0 0 var(--sp-3); }
/* Metric values render black (per reward-page spec), incl. the warn tile. */
.orn-page--credit-dashboard .orn-cd-tile__value { font-family: var(--orn-font-display); font-weight: 700; font-size: var(--orn-fs-stat); color: #0F0F0F; margin: 0; }
.orn-page--credit-dashboard .orn-cd-tile--warn .orn-cd-tile__value { color: #0F0F0F; }
/* ---- Activity ------------------------------------------------------------ */
.orn-page--credit-dashboard .orn-cd-activity__title { font-size: var(--orn-fs-h2); margin-bottom: var(--sp-5); }
.orn-page--credit-dashboard .orn-cd-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; border-bottom: 1px solid var(--orn-line); margin-bottom: var(--sp-5); }
.orn-page--credit-dashboard .orn-cd-tab { font-family: var(--orn-font-body); font-weight: 600; font-size: var(--orn-fs-body); color: var(--orn-mute); padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.orn-page--credit-dashboard .orn-cd-tab:hover { color: var(--orn-navy); }
.orn-page--credit-dashboard .orn-cd-tab.is-active { color: var(--orn-navy); border-bottom-color: var(--orn-gold); }
/* ---- Table --------------------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-tablewrap { overflow-x: auto; }
.orn-page--credit-dashboard .orn-cd-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.orn-page--credit-dashboard .orn-cd-th { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orn-mute); text-align: left; font-weight: 500; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--orn-line-2); white-space: nowrap; }
.orn-page--credit-dashboard .orn-cd-th--num { text-align: right; }
.orn-page--credit-dashboard .orn-cd-td { font-family: var(--orn-font-body); font-size: var(--orn-fs-small); color: var(--orn-ink-2); padding: var(--sp-4); border-bottom: 1px solid var(--orn-line); white-space: nowrap; vertical-align: middle; }
.orn-page--credit-dashboard .orn-cd-td--desc { color: var(--orn-text); font-weight: 500; white-space: normal; min-width: 220px; }
.orn-page--credit-dashboard .orn-cd-td--num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.orn-page--credit-dashboard .orn-cd-amt--pos { color: var(--orn-green); }
.orn-page--credit-dashboard .orn-cd-amt--neg { color: var(--orn-red); }
/* Status pills */
.orn-page--credit-dashboard .orn-cd-pill { display: inline-block; font-family: var(--orn-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); }
.orn-page--credit-dashboard .orn-cd-pill--credit { background: rgba(47, 122, 79, 0.12); color: var(--orn-green); }
.orn-page--credit-dashboard .orn-cd-pill--debit { background: rgba(190, 63, 57, 0.12); color: var(--orn-red); }
/* ---- Empty state --------------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-empty { text-align: center; padding: var(--sp-8) var(--sp-5); background: var(--orn-cream-2); border: 1px solid var(--orn-line); border-radius: var(--r-card); }
.orn-page--credit-dashboard .orn-cd-empty__title { font-family: var(--orn-font-display); font-weight: 700; font-size: var(--orn-fs-h3); color: var(--orn-navy); margin: 0 0 var(--sp-2); }
.orn-page--credit-dashboard .orn-cd-empty__sub { font-family: var(--orn-font-body); font-size: var(--orn-fs-body); color: var(--orn-mute); margin: 0; }
/* ---- Pager --------------------------------------------------------------- */
.orn-page--credit-dashboard .orn-cd-pager { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); }
/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
.orn-page--credit-dashboard .orn-cd-balance { padding: var(--sp-5); }
.orn-page--credit-dashboard .orn-cd-balance__value { font-size: 40px; }
.orn-page--credit-dashboard .orn-cd-balance__actions { width: 100%; }
.orn-page--credit-dashboard .orn-cd-balance__actions .orn-cd-btn { flex: 1; }
.orn-page--credit-dashboard .orn-cd-tiles { grid-template-columns: repeat(2, 1fr); }
}
/* ---------------- Dates tab · calendar grid ----------------
Replaces the earlier row-list. Each month renders a 7-column grid
(Sun→Sat). Days with a matching dtA entry become clickable tiles
colour-coded by availability bucket (avl / fill / last / none).
------------------------------------------------------- */
/* Bounded rectangle around the whole calendar (legend + month grids). */
.orn-jd__dt-cal-wrap { border-radius: 20px; padding: 22px 0; }
.orn-jd__dt-cal-legend { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; font-size: 13px; color: var(--orn-ink-2, #4a4a4a); }
.orn-jd__dt-cal-legend-k { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--orn-gold, #b18a4a); text-transform: uppercase; margin-right: 4px; }
.orn-jd__dt-cal-leg { display: inline-flex; align-items: center; gap: 8px; }
.orn-jd__dt-cal-leg > span { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.orn-jd__dt-cal-leg--avl > span { background: #3e8b62; }
.orn-jd__dt-cal-leg--good > span { background: #e0b64a; }
.orn-jd__dt-cal-leg--fill > span { background: #d68a3f; }
.orn-jd__dt-cal-leg--last > span { background: #c86050; }
.orn-jd__dt-cal-leg--promo > span { background: var(--orn-navy, rgb(20, 35, 59)); position: relative; }
.orn-jd__dt-cal-leg--promo > span::after { content: '\2605'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #f1c86a; font-size: 10px; line-height: 1; }
.orn-jd__dt-cal { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) {
.orn-jd__dt-cal { grid-template-columns: 1fr 1fr; }
}
.orn-jd__dt-cal-mo { background: #fff; border: 1px solid rgba(230, 221, 196, 0.7); border-radius: 12px; padding: 14px 14px 16px; min-width: 0; }
.orn-jd__dt-cal-title { font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 700; color: var(--orn-text); margin-bottom: 10px; letter-spacing: -0.2px; }
.orn-jd__dt-cal-head, .orn-jd__dt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.orn-jd__dt-cal-head { margin-bottom: 4px; }
.orn-jd__dt-cal-dow { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--orn-mute, #9a8a6e); letter-spacing: 0.08em; padding: 2px 0; }
.orn-jd__dt-cal-cell { aspect-ratio: 1 / 1; border: none; border-radius: 6px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 2px 1px; font-family: inherit; color: inherit; position: relative; transition: transform 0.1s ease, box-shadow 0.1s ease; min-width: 0; overflow: hidden; }
.orn-jd__dt-cal-cell--pad, .orn-jd__dt-cal-cell--empty { background: transparent; cursor: default; color: var(--orn-mute, #9a8a6e); opacity: 0.55; }
.orn-jd__dt-cal-cell--pad { visibility: hidden; }
.orn-jd__dt-cal-num { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; line-height: 1; }
.orn-jd__dt-cal-prc { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.01em; opacity: 0.95; white-space: nowrap; }
.orn-jd__dt-cal-star { position: absolute; top: 3px; right: 4px; font-size: 10px; color: #f1c86a; }
/* Fare / availability buckets — 4-band gradient (Best → Good → Rising → Last)
plus a neutral "none" for unavailable. Text stays readable on each fill. */
.orn-jd__dt-cal-cell--avl { background: #3e8b62; color: #ffffff; }
.orn-jd__dt-cal-cell--good { background: #e5c15f; color: #4a3a10; }
.orn-jd__dt-cal-cell--fill { background: #dc964b; color: #ffffff; }
.orn-jd__dt-cal-cell--last { background: #c96a5c; color: #ffffff; }
.orn-jd__dt-cal-cell--none { background: #ebe6da; color: #7a7160; }
.orn-jd__dt-cal-cell:not(.is-disabled):not(.orn-jd__dt-cal-cell--empty):not(.orn-jd__dt-cal-cell--pad):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20, 35, 59, 0.12); }
.orn-jd__dt-cal-cell.is-disabled { cursor: not-allowed; opacity: 0.55; }
.orn-jd__dt-cal-cell.is-promoted { outline: 2px solid var(--orn-navy, rgb(20, 35, 59)); outline-offset: 1px; }
.orn-jd__dt-cal-cell.is-selected { outline: 2px solid var(--orn-gold, #b18a4a); outline-offset: 2px; box-shadow: 0 6px 14px rgba(20, 35, 59, 0.18); }
.orn-visuallyhidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ===== Account / login-register modal (merged from ornholidays-account.css) ===== */
/* =============================================================
* ORN Holidays — account (login / register) styling.
*
* Two responsibilities:
*
* 1) Re-skin the legacy login_register.jsp modal when it opens on
* any ORN page. The modal is rendered by MODAL_PANEL.show() →
* jQuery blockUI; the container carries class `lgnSmBlk u_block`
* and the backdrop is `.blockOverlay`. Inside lives login.jsp +
* register.jsp with legacy classes (.lgnInpCtr / .decInp /
* .lgnButton / .lgnTxtSep / #signupForm / #loginForm).
*
* Every override is scoped under `body.orn-page` so the SAME
* modal looks legacy when opened on non-ORN pages.
*
* 2) Custom .orn-account__* layout for the dedicated /signup page
* landing next turn. Not present yet; placeholder block at the
* bottom marks where those rules will live.
* ============================================================= */
/* ─── ORN modal chrome (blockUI scrim + container) ────────────── */
body.orn-page .blockOverlay { background-color: rgba(10, 8, 4, 0.72) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
/* The legacy `.lgnSmBlk` is 350px — too cramped for the ORN look.
Bump width, switch to dark coffee bg, gold accents, Spectral title. */
body.orn-page .lgnSmBlk, body.orn-page .blockMsg.lgnSmBlk { width: min(440px, 92vw) !important; max-width: 92vw; background: rgb(16, 14, 11) !important; border: 1px solid rgb(58, 51, 37) !important; border-radius: 20px !important; box-shadow: 0 24px 80px rgba(10, 8, 4, 0.55) !important; color: rgb(242, 233, 216); padding: 26px 28px 28px !important; overflow: hidden; }
/* Subtle gold radial glow top-right (matches the chat-panel card) */
body.orn-page .lgnSmBlk::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(201, 164, 92, 0.14), transparent 60%); pointer-events: none; border-radius: inherit; }
body.orn-page .lgnSmBlk > * { position: relative; }
/* blockUI's default close × is a tiny dark image — replace */
body.orn-page .lgnSmBlk .close-block-msg, body.orn-page .lgnSmBlk .modalClose, body.orn-page .lgnSmBlk a.closeAct { background: transparent !important; border: 1px solid rgba(201, 164, 92, 0.4) !important; color: rgb(201, 164, 92) !important; border-radius: 50% !important; width: 30px !important; height: 30px !important; line-height: 28px !important; text-align: center !important; font-size: 18px !important; top: 14px !important; right: 14px !important; }
/* ─── #_loginBox shell ────────────────────────────────────────── */
body.orn-page #_loginBox { color: rgb(242, 233, 216); text-align: left; }
body.orn-page #_loginBox h2 { font-family: 'Spectral', 'Archivo', serif !important; font-weight: 600 !important; font-size: 22px !important; line-height: 1.15 !important; color: rgb(248, 241, 226) !important; margin: 0 0 6px !important; text-align: left !important; }
body.orn-page #_loginBox h2::before { content: 'ORN · ACCOUNT'; display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; color: rgb(201, 164, 92); margin-bottom: 6px; font-weight: 600; }
/* Suppress the legacy ResourcePairKey.SIGNUP_PROMOTION block (often a
blue tagline that clashes); fade it to a muted note. */
body.orn-page #_loginBox > p, body.orn-page #_loginBox > div:not([id]):not([class]) { color: rgba(184, 172, 146, 0.85) !important; font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 0 14px !important; }
/* ─── Inputs (.lgnInpCtr .decInp) ─────────────────────────────── */
body.orn-page .lgnInpCtr { margin-bottom: 10px !important; }
body.orn-page .lgnInpCtr .decInp, body.orn-page #_loginBox .decInp, body.orn-page #_loginBox input[type="text"], body.orn-page #_loginBox input[type="email"], body.orn-page #_loginBox input[type="password"] { background: rgb(22, 19, 13) !important; background-image: none !important; /* kill the icon-sprite */ border: 1px solid rgb(58, 51, 37) !important; border-radius: 12px !important; padding: 12px 16px !important; font-family: 'Archivo', 'Inter', sans-serif !important; font-size: 14.5px !important; color: rgb(232, 222, 200) !important; width: 100% !important; box-sizing: border-box !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
body.orn-page #_loginBox .decInp::placeholder, body.orn-page #_loginBox input::placeholder { color: rgba(184, 172, 146, 0.6) !important; }
body.orn-page #_loginBox .decInp:focus, body.orn-page #_loginBox input:focus { outline: none !important; border-color: rgb(201, 164, 92) !important; box-shadow: 0 0 0 2px rgba(201, 164, 92, 0.18) !important; }
/* Select boxes (rare in login but present in some variants) */
body.orn-page .lgnInpCtr select { background: rgb(22, 19, 13) !important; border: 1px solid rgb(58, 51, 37) !important; border-radius: 12px !important; color: rgb(232, 222, 200) !important; padding: 10px 14px !important; height: auto !important; }
/* ─── Primary CTA (.lgnButton) ────────────────────────────────── */
body.orn-page .lgnButton, body.orn-page #_loginBox .lgnButton, body.orn-page #signupForm .lgnButton, body.orn-page #loginForm .lgnButton { background-color: rgb(201, 164, 92) !important; background-image: none !important; color: rgb(20, 14, 6) !important; border: none !important; border-radius: 12px !important; padding: 13px 18px !important; font-family: 'Archivo', 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1 !important; width: 100% !important; cursor: pointer !important; margin: 14px 0 0 !important; box-shadow: none !important; transition: background-color 0.15s ease, transform 0.1s ease; }
body.orn-page .lgnButton:hover { background-color: rgb(217, 180, 110) !important; }
body.orn-page .lgnButton:active { transform: translateY(1px); }
/* ─── Separator ("or") ────────────────────────────────────────── */
body.orn-page .lgnTxtSep { height: 32px !important; margin: 16px 0 !important; }
body.orn-page .lgnTxtSep hr { border-top: 1px solid rgba(201, 164, 92, 0.18) !important; margin: -16px auto 10px !important; }
body.orn-page .lgnTxtSep .sepTxt { background: rgb(16, 14, 11) !important; color: rgba(217, 201, 164, 0.7) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 6px 10px !important; }
/* ─── Social (FB + Google) — outline-gold pills ───────────────── */
body.orn-page #_loginBox a[href*="facebook"], body.orn-page #_loginBox a[href*="google"], body.orn-page #_loginBox #fconnectLogin, body.orn-page #_loginBox #gconnectLogin { display: block !important; background: transparent !important; border: 1px solid rgb(74, 65, 48) !important; border-radius: 12px !important; padding: 11px 16px !important; color: rgb(217, 201, 164) !important; text-align: center !important; text-decoration: none !important; font-family: 'Archivo', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; margin-bottom: 8px !important; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
body.orn-page #_loginBox a[href*="facebook"]:hover, body.orn-page #_loginBox a[href*="google"]:hover, body.orn-page #_loginBox #fconnectLogin:hover, body.orn-page #_loginBox #gconnectLogin:hover { border-color: rgb(201, 164, 92) !important; background: rgba(201, 164, 92, 0.08) !important; }
/* Strip the legacy social brand image inside the link */
body.orn-page #_loginBox #fconnectLogin img, body.orn-page #_loginBox #gconnectLogin img { max-height: 18px; vertical-align: middle; margin-right: 8px; filter: brightness(1.1); }
/* ─── Tab toggles / footer links ("New here? Sign up", "Forgot password?") ── */
body.orn-page #_loginBox a, body.orn-page #_loginBox .toggleLink { color: rgb(201, 164, 92) !important; text-decoration: none !important; transition: color 0.15s ease; }
body.orn-page #_loginBox a:hover { color: rgb(217, 180, 110) !important; text-decoration: underline !important; }
body.orn-page #_loginBox label, body.orn-page #_loginBox .lgnInpCtr label { color: rgb(217, 201, 164) !important; font-family: 'Archivo', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; }
body.orn-page #_loginBox .lgnErrMsg { background: rgba(190, 63, 57, 0.12); color: rgb(248, 196, 188) !important; border: 1px solid rgba(190, 63, 57, 0.32); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px !important; text-align: left !important; font-size: 13.5px !important; }
/* jQuery validate error labels */
body.orn-page #_loginBox label.error { color: rgb(248, 196, 188) !important; font-size: 12.5px !important; margin-top: 4px !important; display: block !important; }
/* The "How Works" decorative line — hide on ORN; it's brand-clash */
body.orn-page #_loginBox .howWorksAct { display: none !important; }
/* =============================================================
* .orn-signup__* — dedicated full-page ORN signup
* (templates/ornholidays/customer/account/signup.jsp).
*
* Two-column layout on ≥900px: navy hero left, paper card right.
* Stacks (hero → card) on smaller screens. All ORN tokens (gold,
* navy, cream, Spectral display, Archivo body, JetBrains Mono
* eyebrow) sourced from ornholidays-customer.css :root.
* ============================================================= */
body.orn-page.orn-signup { background: var(--orn-cream, #EDEAE1); }
.orn-signup__main { padding: 36px 0 64px; }
.orn-signup__container { max-width: 1100px; padding: 0 24px; margin: 0 auto; }
.orn-signup__grid { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--orn-paper, #ffffff); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(20, 35, 59, 0.12); }
@media (min-width: 900px) {
.orn-signup__grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); min-height: 620px; }
}
/* ─── Left: navy hero ─────────────────────────────────────────── */
.orn-signup__hero { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%), var(--orn-navy, rgb(20, 35, 59)); color: var(--orn-text-light, rgb(244, 239, 227)); padding: 44px 40px 40px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.orn-signup__hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(201, 164, 92, 0.18), transparent 60%); pointer-events: none; }
.orn-signup__hero > * { position: relative; }
.orn-signup__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.orn-signup__brand-disc { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--orn-gold-3, rgb(201, 164, 92)); display: flex; align-items: center; justify-content: center; }
.orn-signup__brand-mark { font-family: 'Spectral', var(--orn-font-display), serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: rgb(248, 241, 226); }
.orn-signup__eyebrow { margin: 0; font-family: var(--orn-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orn-gold-3, rgb(201, 164, 92)); font-weight: 600; }
.orn-signup__title { margin: 4px 0 0; font-family: 'Spectral', var(--orn-font-display), serif; font-weight: 600; font-size: 38px; line-height: 1.05; color: rgb(248, 241, 226); }
@media (max-width: 600px) {
.orn-signup__title { font-size: 30px; }
}
.orn-signup__lede { margin: 0; font-family: var(--orn-font-body, 'Hanken Grotesk', sans-serif); font-size: 16px; line-height: 1.55; color: var(--orn-mute-3, rgb(195, 204, 214)); max-width: 38ch; }
.orn-signup__bullets { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.orn-signup__bullets li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--orn-font-body, 'Hanken Grotesk', sans-serif); font-size: 14.5px; line-height: 1.5; color: rgba(244, 239, 227, 0.92); }
.orn-signup__bullet-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(201, 164, 92, 0.16); color: var(--orn-gold-3, rgb(201, 164, 92)); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.orn-signup__hero-footnote { margin: auto 0 0; /* push to bottom of hero */ padding-top: 20px; font-family: var(--orn-font-body); font-size: 13.5px; color: rgba(195, 204, 214, 0.85); border-top: 1px solid rgba(201, 164, 92, 0.18); }
.orn-signup__hero-footnote a { color: var(--orn-gold-3, rgb(201, 164, 92)); font-weight: 600; text-decoration: none; margin-left: 6px; }
.orn-signup__hero-footnote a:hover { color: rgb(217, 180, 110); text-decoration: underline; }
/* ─── Right: paper form card ──────────────────────────────────── */
.orn-signup__card { background: var(--orn-paper, #ffffff); padding: 44px 44px 40px; color: var(--orn-ink, rgb(20, 35, 59)); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 600px) {
.orn-signup__card { padding: 32px 22px 28px; }
}
.orn-signup__card-title { margin: 0; font-family: 'Spectral', var(--orn-font-display), serif; font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--orn-ink); }
.orn-signup__card-lede { margin: -6px 0 6px; font-family: var(--orn-font-body); font-size: 14.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); }
.orn-signup__err { background: rgba(190, 63, 57, 0.08); border: 1px solid rgba(190, 63, 57, 0.32); color: rgb(140, 36, 32); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-family: var(--orn-font-body); line-height: 1.45; }
/* OAuth */
.orn-signup__oauth { display: flex; flex-direction: column; gap: 10px; }
.orn-signup__oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.18)); border-radius: 12px; padding: 12px 16px; font-family: var(--orn-font-body); font-size: 14.5px; font-weight: 600; color: var(--orn-ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.orn-signup__oauth-btn:hover { border-color: var(--orn-gold, rgb(193, 142, 69)); background: rgba(201, 164, 92, 0.06); }
.orn-signup__oauth-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Spectral', serif; font-weight: 800; font-size: 13px; }
.orn-signup__oauth-btn--google .orn-signup__oauth-icon { background: #4285F4; color: #fff; }
.orn-signup__oauth-btn--facebook .orn-signup__oauth-icon { background: #1877F2; color: #fff; }
.orn-signup__sep { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
.orn-signup__sep::before, .orn-signup__sep::after { content: ''; flex: 1 1 0; height: 1px; background: var(--orn-line, rgba(20, 35, 59, 0.10)); }
.orn-signup__sep-txt { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; text-transform: uppercase; }
/* Form */
.orn-signup__form { display: flex; flex-direction: column; gap: 14px; }
.orn-signup__field { display: flex; flex-direction: column; gap: 6px; }
.orn-signup__field-label { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; }
.orn-signup__input { background: var(--orn-cream-2, rgb(246, 241, 230)); border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.18)); border-radius: 12px; padding: 13px 16px; font-family: var(--orn-font-body); font-size: 15px; color: var(--orn-ink); width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.orn-signup__input::placeholder { color: rgba(58, 70, 84, 0.45); }
.orn-signup__input:focus { outline: none; background: var(--orn-paper); border-color: var(--orn-gold, rgb(193, 142, 69)); box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.18); }
.orn-signup__field-hint { font-size: 12px; color: var(--orn-mute); font-family: var(--orn-font-body); margin-top: -2px; }
.orn-signup__field-error { color: rgb(140, 36, 32); font-family: var(--orn-font-body); font-size: 12.5px; font-weight: 500; margin-top: 4px; display: block; }
/* Submit — gold pill, matches journey-detail "Open co-pilot" */
.orn-signup__submit { background-color: var(--orn-gold, rgb(193, 142, 69)); color: rgb(20, 14, 6); border: none; border-radius: 12px; padding: 14px 20px; font-family: var(--orn-font-display, 'Archivo', sans-serif); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; margin-top: 6px; transition: background-color 0.15s ease, transform 0.1s ease; }
.orn-signup__submit:hover { background-color: rgb(217, 180, 110); }
.orn-signup__submit:active { transform: translateY(1px); }
.orn-signup__submit:disabled { opacity: 0.55; cursor: not-allowed; }
/* Privacy-policy consent (EngagementHelper output — usually a checkbox
+ inline text. The wrapper holds whatever HTML the helper renders;
we just tone it down typographically). */
.orn-signup__consent { font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-mute); line-height: 1.5; margin-top: 6px; }
.orn-signup__consent a { color: var(--orn-gold, rgb(193, 142, 69)); text-decoration: none; }
.orn-signup__consent a:hover { text-decoration: underline; }
.orn-signup__consent input[type="checkbox"] { accent-color: var(--orn-gold); margin-right: 8px; vertical-align: middle; }
.orn-signup__alt { margin: 16px 0 0; text-align: center; font-family: var(--orn-font-body); font-size: 13.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); border-top: 1px solid var(--orn-line, rgba(20, 35, 59, 0.10)); padding-top: 16px; }
.orn-signup__alt a { color: var(--orn-gold, rgb(193, 142, 69)); font-weight: 700; text-decoration: none; margin-left: 6px; }
.orn-signup__alt a:hover { text-decoration: underline; color: rgb(169, 124, 60); }
/* =============================================================
* .orn-book__* — ORN booking summary page
* (templates/ornholidays/customer/account/book.jsp).
*
* Two-column layout on ≥1000px: traveller + contact cards left,
* sticky pricing summary right. Stacks on mobile.
* Reuses ORN tokens from ornholidays-customer.css :root.
* ============================================================= */
body.orn-page.orn-book { background: var(--orn-cream, #EDEAE1); }
.orn-book__main { padding: 28px 0 64px; }
.orn-book__container { max-width: 1180px; padding: 0 24px; margin: 0 auto; }
.orn-book__back { display: inline-block; margin: 4px 0 14px; color: var(--orn-ink-2, rgb(58, 70, 84)); font-family: var(--orn-font-body, 'Hanken Grotesk', sans-serif); font-size: 14px; text-decoration: none; }
.orn-book__back:hover { color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-book__step { margin: 0 0 6px; font-family: var(--orn-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orn-gold, rgb(193, 142, 69)); font-weight: 600; }
.orn-book__title { margin: 0; font-family: 'Archivo', var(--orn-font-display), sans-serif; font-weight: 800; font-size: 38px; line-height: 1.05; color: var(--orn-ink, rgb(20, 35, 59)); }
@media (max-width: 700px) {
.orn-book__title { font-size: 28px; }
}
.orn-book__lede { margin: 10px 0 22px; max-width: 64ch; color: var(--orn-ink-2, rgb(58, 70, 84)); font-family: var(--orn-font-body); font-size: 15px; line-height: 1.55; }
/* ─── Fare-guard banners (reprice / sold-out) ─────────────────── */
.orn-book__banner { display: flex; align-items: center; gap: 12px; background: var(--orn-cream-2); border: 1px solid var(--orn-cream-3); border-radius: 12px; padding: 12px 18px; margin: 0 0 18px; width: 100%; font-family: var(--orn-font-body); flex-wrap: wrap; }
.orn-book__banner::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; }
.orn-book__banner-title { font-family: var(--orn-font-mono, monospace); font-size: 10px; letter-spacing: 0.16em; color: var(--orn-gold-2); text-transform: uppercase; }
.orn-book__banner-body { font-size: 13px; line-height: 1.45; color: var(--orn-ink-2, rgb(58, 70, 84)); flex: 1 1 auto; }
.orn-book__banner-prices { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: rgba(20, 35, 59, 0.06); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--orn-navy); letter-spacing: 0.2px; }
.orn-book__banner--reprice::before { background-image: url("data:image/svg+xml;utf8,"); }
.orn-book__banner--soldout::before { background-image: url("data:image/svg+xml;utf8,"); }
.orn-book__banner-cta { display: inline-flex; align-items: center; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--orn-navy); background: #fff; border: 1px solid var(--orn-cream-3); border-radius: 6px; text-decoration: none; transition: background 0.15s ease; }
.orn-book__banner-cta:hover { background: var(--orn-cream-1); }
/* ─── 2-col grid ──────────────────────────────────────────────── */
.orn-book__grid { display: grid; grid-template-columns: 1fr; gap: 22px; /* No `align-items: start` — let grid items stretch to row height so
the right column is as tall as the left, giving the inner summary
card room to stick past the form. */ }
@media (min-width: 1000px) {
.orn-book__grid { grid-template-columns: minmax(0, 1fr) 360px; }
}
.orn-book__col-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.orn-book__col-right { min-width: 0; }
/* ─── Card chrome (traveller details, contact details) ─────────── */
.orn-book__card { background: var(--orn-paper, #ffffff); border-radius: 20px; box-shadow: 0 12px 36px rgba(20, 35, 59, 0.08); padding: 24px 26px 22px; }
.orn-book__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.orn-book__card-title { margin: 0; font-family: 'Archivo', var(--orn-font-display), sans-serif; font-weight: 800; font-size: 19px; color: var(--orn-ink); }
.orn-book__card-meta { font-family: var(--orn-font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 500; }
.orn-book__room-band { margin: 6px 0 12px; font-family: var(--orn-font-display, 'Archivo', sans-serif); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--orn-gold, rgb(193, 142, 69)); font-weight: 700; padding-top: 8px; border-top: 1px dashed var(--orn-line, rgba(20, 35, 59, 0.10)); }
.orn-book__room-band:first-of-type { border-top: none; padding-top: 0; }
/* ─── Per-pax row (full-width; type is inlined in the row title) ── */
.orn-book__pax { padding: 14px 0; border-bottom: 1px solid var(--orn-line, rgba(20, 35, 59, 0.08)); }
.orn-book__pax:last-of-type { border-bottom: none; padding-bottom: 0; }
.orn-book__pax-fields { flex: 1 1 0; min-width: 0; }
.orn-book__pax-rowtitle { font-family: var(--orn-font-display, 'Archivo', sans-serif); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--orn-ink, rgb(20, 35, 59)); font-weight: 700; margin-bottom: 8px; }
.orn-book__pax-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.orn-book__pax-row .orn-book__field--age { grid-column: 1 / -1; max-width: 140px; }
@media (max-width: 720px) {
.orn-book__pax-row { grid-template-columns: 100px minmax(0, 1fr); }
.orn-book__pax-row .orn-book__field--first, .orn-book__pax-row .orn-book__field--last { grid-column: span 2; }
}
/* ─── Field / input chrome ─────────────────────────────────────── */
.orn-book__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.orn-book__field-label { font-family: var(--orn-font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 500; }
.orn-book__req { color: var(--orn-red, rgb(190, 63, 57)); font-weight: 700; }
.orn-book__input { background: var(--orn-cream-2, rgb(246, 241, 230)); border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.18)); border-radius: 5px; padding: 11px 14px; font-family: var(--orn-font-body); font-size: 14.5px; color: var(--orn-ink, rgb(20, 35, 59)); width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.orn-book__input::placeholder { color: rgba(58, 70, 84, 0.4); }
.orn-book__input:focus { outline: none; background: var(--orn-paper); border-color: var(--orn-gold, rgb(193, 142, 69)); box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.18); }
.orn-book__input--select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--orn-mute, rgb(154, 138, 110)) 50%), linear-gradient(135deg, var(--orn-mute, rgb(154, 138, 110)) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
/* ─── Contact card layout ─────────────────────────────────────── */
.orn-book__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
.orn-book__contact { grid-template-columns: 1fr; }
}
.orn-book__contact-note { margin: 12px 0 0; font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-mute, rgb(154, 138, 110)); line-height: 1.5; }
/* ─── Sticky pricing summary (right column) ────────────────────── */
.orn-book__summary { background: var(--orn-paper, #fff); border-radius: 20px; box-shadow: 0 12px 36px rgba(20, 35, 59, 0.10); padding: 26px 26px 24px; position: relative; overflow: hidden; }
@media (min-width: 1000px) {
.orn-book__summary { position: sticky; top: 24px; }
}
.orn-book__summary-eyebrow { margin: 0; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orn-gold, rgb(193, 142, 69)); font-weight: 600; }
.orn-book__summary-title { margin: 6px 0 8px; font-family: 'Archivo', var(--orn-font-display), sans-serif; font-weight: 800; font-size: 20px; line-height: 1.15; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-book__summary-meta { font-family: var(--orn-font-body); font-size: 13.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.orn-book__summary-dot { color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-book__summary-rule { border: none; border-top: 1px solid var(--orn-line, rgba(20, 35, 59, 0.10)); margin: 16px 0; }
.orn-book__summary-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--orn-font-body); font-size: 14px; color: var(--orn-ink-2); }
.orn-book__summary-totalrow { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 2px; }
.orn-book__summary-tlabel { font-family: var(--orn-font-display, 'Archivo', sans-serif); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--orn-ink, rgb(20, 35, 59)); font-weight: 700; }
/* City-by-city nights + meta rows + price-breakdown lines */
.orn-book__summary-cities { margin-top: 4px; font-family: var(--orn-font-body); font-size: 14px; color: var(--orn-ink-2, rgb(58, 70, 84)); line-height: 1.45; }
.orn-book__summary-tripmeta { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.orn-book__summary-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--orn-font-body); font-size: 13.5px; line-height: 1.5; }
.orn-book__summary-meta-k { color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 500; flex: 0 0 auto; }
.orn-book__summary-meta-v { color: var(--orn-ink-2, rgb(58, 70, 84)); font-weight: 600; text-align: right; flex: 1 1 0; min-width: 0; }
.orn-book__summary-meta-ic { font-size: 14px; opacity: 0.85; }
.orn-book__summary-prc { display: flex; flex-direction: column; gap: 8px; }
.orn-book__summary-prc-line { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--orn-font-body); font-size: 14px; color: var(--orn-ink-2, rgb(58, 70, 84)); gap: 12px; }
.orn-book__summary-prc-line > span:last-child { font-family: var(--orn-font-display, 'Archivo', sans-serif); font-weight: 600; color: var(--orn-ink, rgb(20, 35, 59)); white-space: nowrap; }
.orn-book__summary-prc-line--tax { color: var(--orn-mute, rgb(154, 138, 110)); font-size: 13px; }
.orn-book__summary-prc-line--tax > span:last-child { color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 500; }
.orn-book__summary-tvalue { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 28px; color: var(--orn-ink, rgb(20, 35, 59)); letter-spacing: -0.5px; }
.orn-book__summary-perp { font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-mute, rgb(154, 138, 110)); margin: 2px 0 18px; }
.orn-book__summary-redeem, .orn-book__summary-earn { display: inline-block; margin: 0 6px 8px 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.orn-book__summary-redeem { background: var(--orn-navy); color: #fff; }
.orn-book__summary-earn { background: var(--orn-text); color: #fff; }
/* Selected optionals block — grouped by city under the price summary. */
.orn-book__summary-extras { margin-top: 18px; }
.orn-book__summary-extras-eyebrow { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; margin: 0 0 12px; }
.orn-book__summary-extras-group { margin: 0 0 14px; }
.orn-book__summary-extras-group:last-child { margin-bottom: 0; }
.orn-book__summary-extras-city { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: var(--orn-ink, rgb(20, 35, 59)); margin-bottom: 6px; letter-spacing: 0.01em; }
.orn-book__summary-extras-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.orn-book__summary-extras-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--orn-font-body); font-size: 13.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); line-height: 1.35; }
.orn-book__summary-extras-name { flex: 1 1 auto; }
.orn-book__summary-extras-price { flex: 0 0 auto; font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--orn-ink, rgb(20, 35, 59)); font-variant-numeric: tabular-nums; }
.orn-book__summary-extras-kind { flex: 0 0 auto; font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute, rgb(154, 138, 110)); }
/* Expandable payment schedule + cancellation policy block on book.jsp.
Renders below the pay-now card; reads pkgDataJson.terms which is the
same shape as ornJdTermsBody on the journey-detail Terms tab. */
.orn-book__terms { margin-top: 16px; padding: 0; overflow: hidden; }
.orn-book__terms-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 22px;
background: #fff;
border: 0;
cursor: pointer;
font-family: 'Archivo', sans-serif;
text-align: left;
}
.orn-book__terms-toggle:hover { background: rgba(20, 35, 59, 0.02); }
.orn-book__terms-toggle-t { font-weight: 700; font-size: 15px; color: var(--orn-ink, rgb(20, 35, 59)); letter-spacing: -0.01em; }
.orn-book__terms-toggle-i { font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 22px; color: var(--orn-ink, rgb(20, 35, 59)); line-height: 1; width: 24px; text-align: center; }
.orn-book__terms-body { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 22px; }
.orn-book__terms-body[hidden] { display: none !important; }
.orn-book__terms-toggle[aria-expanded="false"] + .orn-book__terms-body { display: none !important; }
.orn-book__terms-block { display: flex; flex-direction: column; gap: 10px; }
.orn-book__terms-block-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orn-mute, rgb(154, 138, 110)); margin: 0 0 4px; }
.orn-book__terms-grid { display: flex; flex-direction: column; border: 1px solid var(--orn-line, rgba(20, 35, 59, 0.10)); border-radius: 8px; overflow: hidden; }
.orn-book__terms-head, .orn-book__terms-row { display: grid; align-items: center; gap: 12px; padding: 10px 14px; }
.orn-book__terms-grid--2col .orn-book__terms-head,
.orn-book__terms-grid--2col .orn-book__terms-row { grid-template-columns: 1fr auto; }
.orn-book__terms-grid--3col .orn-book__terms-head,
.orn-book__terms-grid--3col .orn-book__terms-row { grid-template-columns: 1fr 1fr auto; }
.orn-book__terms-head { background: rgba(20, 35, 59, 0.04); }
.orn-book__terms-row + .orn-book__terms-row,
.orn-book__terms-head + .orn-book__terms-row { border-top: 1px solid var(--orn-line, rgba(20, 35, 59, 0.08)); }
.orn-book__terms-cell { font-family: var(--orn-font-body); font-size: 13.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); line-height: 1.4; }
.orn-book__terms-cell--head { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-book__terms-cell--num { text-align: right; font-weight: 600; color: var(--orn-ink, rgb(20, 35, 59)); white-space: nowrap; }
.orn-book__terms-note { margin: 4px 0 0; font-family: var(--orn-font-body); font-size: 12px; color: var(--orn-mute, rgb(154, 138, 110)); line-height: 1.55; }
@media (max-width: 767px) {
.orn-book__terms-head { display: none; }
.orn-book__terms-grid { border-radius: 10px; }
.orn-book__terms-row { grid-template-columns: 1fr !important; gap: 4px; padding: 10px 14px; }
.orn-book__terms-cell {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 13px;
line-height: 1.4;
}
.orn-book__terms-cell::before {
content: attr(data-label);
font-family: var(--orn-font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--orn-mute, rgb(154, 138, 110));
flex-shrink: 0;
}
.orn-book__terms-cell--num { text-align: right; font-weight: 700; }
.orn-book__terms-cell--num::before { font-weight: 500; color: var(--orn-mute, rgb(154, 138, 110)); }
}
.orn-book__summary-rewardsrow { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; padding: 10px 12px; background: var(--orn-navy); color: #fff; border-radius: 8px; }
.orn-book__summary-rewards-l { font-family: var(--orn-font-body); font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.2px; }
.orn-book__summary-rewards-v { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: #fff; }
.orn-book__summary-netrow { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 12px; padding-top: 10px; border-top: 1px dashed rgba(20, 35, 59, 0.15); }
.orn-book__summary-net-l { font-family: var(--orn-font-body); font-size: 15px; font-weight: 700; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-book__summary-net-v { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--orn-ink, rgb(20, 35, 59)); letter-spacing: -0.3px; }
.orn-book__cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background-color: var(--orn-gold, rgb(193, 142, 69)); color: rgb(20, 14, 6); border: none; border-radius: 12px; padding: 15px 20px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; }
.orn-book__cta:hover { background-color: rgb(217, 180, 110); }
.orn-book__cta:active { transform: translateY(1px); }
.orn-book__cta-foot { margin: 10px 0 0; text-align: center; font-family: var(--orn-font-body); font-size: 12.5px; color: var(--orn-mute, rgb(154, 138, 110)); }
/* =============================================================
* .orn-book__paynow — "How much do you want to pay now" card
* (renders below contact card on the left column; replaces the
* right-rail Continue CTA so the customer takes one action here).
* ============================================================= */
.orn-book__paynow { /* Inherits .orn-book__card chrome (paper card, radius, shadow). */ }
.orn-book__paynow-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) {
.orn-book__paynow-opts { grid-template-columns: 1fr; }
}
.orn-book__paynow-opt { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.18)); border-radius: 12px; background: var(--orn-cream-2, rgb(246, 241, 230)); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.orn-book__paynow-opt:hover { border-color: var(--orn-gold, rgb(193, 142, 69)); }
.orn-book__paynow-opt input[type="radio"] { margin-top: 2px; accent-color: var(--orn-gold, rgb(193, 142, 69)); flex: 0 0 auto; }
.orn-book__paynow-opt:has(input:checked) { border-color: var(--orn-gold, rgb(193, 142, 69)); background: var(--orn-paper, #fff); box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.14); }
.orn-book__paynow-opt-body { flex: 1 1 0; min-width: 0; }
.orn-book__paynow-opt-title { font-family: var(--orn-font-display, 'Archivo', sans-serif); font-size: 14px; font-weight: 700; color: var(--orn-ink, rgb(20, 35, 59)); line-height: 1.35; }
.orn-book__paynow-opt-balance { margin-top: 6px; font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-navy); font-weight: 600; }
.orn-book__paynow-opt-schedule { margin-top: 4px; font-family: var(--orn-font-body); font-size: 13px; color: rgb(122, 133, 147); font-weight: 500; }
.orn-book__paynow-opt-fine { margin-top: 6px; font-family: var(--orn-font-body); font-size: 12px; color: var(--orn-mute, rgb(154, 138, 110)); line-height: 1.4; }
.orn-book__paynow-rows { border-top: 1px solid var(--orn-line, rgba(20, 35, 59, 0.10)); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.orn-book__paynow-row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--orn-font-body); font-size: 14px; color: var(--orn-ink-2, rgb(58, 70, 84)); }
.orn-book__paynow-row-k { color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-book__paynow-row-v { font-family: var(--orn-font-display, 'Archivo', sans-serif); font-weight: 700; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-book__paynow-row--now .orn-book__paynow-row-k { color: var(--orn-ink, rgb(20, 35, 59)); font-weight: 600; }
.orn-book__paynow-row--now .orn-book__paynow-row-v { font-size: 22px; letter-spacing: -0.3px; }
.orn-book__paynow-terms { margin: 14px 0 0; font-family: var(--orn-font-body); font-size: 12.5px; color: var(--orn-mute, rgb(154, 138, 110)); line-height: 1.5; }
.orn-book__paynow-terms a { color: var(--orn-gold, rgb(193, 142, 69)); text-decoration: none; }
.orn-book__paynow-terms a:hover { text-decoration: underline; }
.orn-book__paynow-actions { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.orn-book__paynow-holdwrap { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.orn-book__paynow-holdwrap .orn-book__paynow-btn { width: 100%; }
.orn-book__paynow-holdmeta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--orn-ink-dim, rgba(20, 35, 59, 0.6)); }
.orn-book__paynow-holdmeta-sep { opacity: 0.5; }
.orn-book__paynow-holdmeta-link { color: var(--orn-gold, rgb(193, 142, 69)); text-decoration: none; }
.orn-book__paynow-holdmeta-link:hover { text-decoration: underline; }
.orn-book__paynow-btn { flex: 1 1 0; min-width: 0; border: none; border-radius: 12px; padding: 14px 18px; font-family: var(--orn-font-display, 'Archivo', sans-serif); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease; }
.orn-book__paynow-btn--primary { background-color: var(--orn-gold, rgb(193, 142, 69)); color: #fff; }
.orn-book__paynow-btn--secondary { background: transparent; color: var(--orn-ink, rgb(20, 35, 59)); border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.32)); }
.orn-book__paynow-btn--secondary:hover { border-color: var(--orn-ink, rgb(20, 35, 59)); background: var(--orn-cream-2, rgb(246, 241, 230)); }
.orn-book__paynow-btn:active { transform: translateY(1px); }
.orn-book__paynow-foot { margin: 10px 0 0; text-align: center; font-family: var(--orn-font-body); font-size: 12.5px; color: var(--orn-mute, rgb(154, 138, 110)); }
/* =============================================================
* .orn-summary__* — Post-booking trip summary page
* (templates/ornholidays/customer/account/trip_summary.jsp).
*
* Six-section layout: navy hero · booking-status + payment row ·
* visa & documents · vouchers (day tabs + active day card) ·
* add-to-trip · manage booking · what's included + before-you-travel.
* ============================================================= */
body.orn-page.orn-summary { background: var(--orn-cream, #EDEAE1); }
.orn-summary__main { padding: 24px 0 64px; }
.orn-summary__container { max-width: 1180px; padding: 0 24px; margin: 0 auto; }
.orn-summary__back { display: inline-block; margin: 0 0 14px; color: var(--orn-ink-2, rgb(58, 70, 84)); font-family: var(--orn-font-body); font-size: 14px; text-decoration: none; }
.orn-summary__back:hover { color: var(--orn-ink, rgb(20, 35, 59)); }
/* ─── Navy hero ─── */
.orn-summary__hero { position: relative; background: var(--orn-text); color: #fff; border-radius: 18px; padding: 30px 36px 32px; overflow: hidden; }
.orn-summary__hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(201, 164, 92, 0.16), transparent 60%); pointer-events: none; }
.orn-summary__hero > * { position: relative; }
.orn-summary__hero-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--orn-gold-3, rgb(201, 164, 92)); font-weight: 600; }
.orn-summary__hero-ref { color: rgb(244, 239, 227); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.06em; margin-left: 4px; }
.orn-summary__hero-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: transparent; border: 1px solid #fff; color: #fff; font-size: 10.5px; letter-spacing: 0.24em; font-weight: 700; vertical-align: middle; }
.orn-summary__hero-title { margin: 8px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.04; color: rgb(244, 239, 227); }
@media (max-width: 700px) {
.orn-summary__hero-title { font-size: 28px; }
}
.orn-summary__hero-cities { margin-top: 8px; font-family: var(--orn-font-mono); font-size: 14px; color: var(--orn-mute-3, rgb(195, 204, 214)); }
.orn-summary__hero-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
@media (max-width: 720px) {
.orn-summary__hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.orn-summary__hero-meta-cell { min-width: 0; }
.orn-summary__hero-meta-k { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--orn-mute-2, rgb(159, 176, 196)); font-weight: 600; }
.orn-summary__hero-meta-v { margin-top: 4px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; color: rgb(244, 239, 227); }
/* ─── 2-col rows (booking-status + payment, included + before-travel) ─── */
.orn-summary__row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
@media (min-width: 900px) {
.orn-summary__row { grid-template-columns: 1fr 1fr; }
}
.orn-summary__card { background: var(--orn-paper, #fff); border-radius: 16px; box-shadow: 0 10px 32px rgba(20, 35, 59, 0.08); padding: 24px 26px; }
.orn-summary__card-title { margin: 0 0 14px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 21px; color: var(--orn-ink, rgb(20, 35, 59)); }
/* Booking status card */
.orn-summary__status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.orn-summary__status-head .orn-summary__card-title { margin: 0; }
.orn-summary__status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-family: var(--orn-font-body); font-size: 13px; font-weight: 700; }
.orn-summary__status-pill--ok { background: rgb(234, 244, 237); color: rgb(27, 94, 60); }
.orn-summary__status-pill--warn { background: rgb(251, 231, 227); color: rgb(194, 69, 58); }
.orn-summary__status-pill--hold { background: #FFF4E0; color: #B36A00; box-shadow: inset 0 0 0 1px rgba(179, 106, 0, 0.18); }
.orn-summary__status-lede strong { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; color: var(--orn-ink); margin-bottom: 6px; }
.orn-summary__status-sub { color: var(--orn-ink-2, rgb(58, 70, 84)); font-family: var(--orn-font-body); font-size: 14px; line-height: 1.5; }
/* Payment card */
.orn-summary__pay-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.orn-summary__pay-row { min-width: 0; }
.orn-summary__pay-k { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; }
.orn-summary__pay-v { margin-top: 6px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; color: var(--orn-ink, rgb(20, 35, 59)); letter-spacing: -0.4px; }
.orn-summary__pay-v--paid { color: rgb(30, 122, 78); }
.orn-summary__rule { border: none; border-top: 1px solid var(--orn-line, rgba(20, 35, 59, 0.10)); margin: 18px 0; }
.orn-summary__pay-line { display: flex; align-items: center; gap: 10px; font-family: var(--orn-font-body); font-size: 14.5px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__pay-tick { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgb(30, 122, 78); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.orn-summary__pay-label { flex: 1 1 0; font-weight: 600; }
.orn-summary__pay-amount { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--orn-ink); }
/* Hero: eyebrow + status-pill top row (pill sits on the right) */
.orn-summary__hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.orn-summary__hero-topline .orn-summary__status-pill { background: rgb(244, 239, 227); color: rgb(20, 35, 59); box-shadow: inset 0 0 0 1px rgba(20, 35, 59, 0.15); }
.orn-summary__hero-topline .orn-summary__status-pill--ok { background: rgb(224, 242, 232); color: rgb(24, 82, 51); box-shadow: inset 0 0 0 1px rgba(24, 82, 51, 0.28); }
.orn-summary__hero-topline .orn-summary__status-pill--warn { background: rgb(253, 236, 205); color: rgb(129, 71, 12); box-shadow: inset 0 0 0 1px rgba(129, 71, 12, 0.32); }
.orn-summary__hero-topline .orn-summary__status-pill--hold { background: #FFF4E0; color: #B36A00; box-shadow: inset 0 0 0 1px rgba(179, 106, 0, 0.18); }
/* Payment section — statement-style, condensed */
.orn-summary__payment { margin-top: 24px; padding: 22px 26px; }
/* Top bar: totals + optional CTA on one row, no separate title */
.orn-summary__pay-bar { display: flex; align-items: center; gap: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--orn-line, rgba(20, 35, 59, 0.08)); }
.orn-summary__pay-bar-item { min-width: 0; }
.orn-summary__pay-k { font-family: var(--orn-font-mono); font-size: 10px; letter-spacing: 0.20em; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; text-transform: uppercase; }
.orn-summary__pay-v { margin-top: 2px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: var(--orn-ink, rgb(20, 35, 59)); letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.orn-summary__pay-v--paid { color: rgb(30, 122, 78); }
.orn-summary__pay-v--rewards { color: #1F7A3D; }
.orn-summary__rewards { padding: 20px 22px 20px; margin-top: 20px; }
.orn-summary__rewards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.orn-summary__rewards-tile { padding: 16px 18px; border-radius: 12px; background: #F6F1E3; border: 1px solid rgba(20, 35, 59, 0.08); }
.orn-summary__rewards-tile--redeem { background: #E9F5EE; border-color: rgba(31, 122, 61, 0.18); }
.orn-summary__rewards-tile--earn { background: #FFF4E0; border-color: rgba(179, 106, 0, 0.18); }
.orn-summary__rewards-eyebrow { font-family: var(--orn-font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute, rgb(154, 138, 110)); margin-bottom: 6px; }
.orn-summary__rewards-tile--redeem .orn-summary__rewards-eyebrow { color: #1F7A3D; }
.orn-summary__rewards-tile--earn .orn-summary__rewards-eyebrow { color: #B36A00; }
.orn-summary__rewards-amt { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--orn-ink, rgb(20, 35, 59)); font-variant-numeric: tabular-nums; }
.orn-summary__rewards-note { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-summary__pay-btn { margin-left: auto; display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 8px; background: var(--orn-ink, rgb(20, 35, 59)); color: rgb(244, 239, 227); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; }
.orn-summary__pay-btn:hover { background: rgb(30, 45, 69); color: rgb(244, 239, 227); }
.orn-summary__pay-btn--red { background: var(--orn-navy, rgb(242, 13, 22)); color: #fff; }
.orn-summary__pay-btn--red:hover { background: var(--orn-navy-2, rgb(201, 10, 18)); color: #fff; }
@media (max-width: 640px) {
.orn-summary__hero-eyebrow { font-size: 11px; }
.orn-summary__hero-meta-v { font-size: 16px; }
.orn-jd__rung-blurb { font-size: 11.5px; max-height: 30px; overflow-y: hidden; }
.orn-secthead__title { font-size: 24px; }
.orn-jd__hero--image { min-height: auto; }
.orn-jd__hero-title { font-size: 28px; }
.orn-jd__hero-chip { padding: 5px 10px; }
/* Traveller card on mobile — name stays on one line, seat drops
to a new row under the name, pill + arrow shrink so they don't
squeeze the name into 2-3 wrapped lines. */
.orn-summary__pax { padding: 12px 14px; gap: 10px; }
.orn-summary__pax-row { gap: 10px; }
.orn-summary__pax-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 13px; }
.orn-summary__pax-name { flex-wrap: nowrap; gap: 6px; font-size: 14.5px; min-width: 0; }
.orn-summary__pax-name-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.orn-summary__pax-seat { display: block; margin-left: 0; margin-top: 2px; flex-basis: 100%; font-size: 12.5px; }
.orn-summary__pax-pill { font-size: 10.5px; padding: 3px 9px; white-space: nowrap; }
.orn-summary__pax-pill.orn-summary__pax-pill--warn { display: none !important; }
.orn-summary__pax-arrow { font-size: 15px; }
.orn-summary__pax-status { font-size: 11.5px; }
/* Pay bar on mobile — 2-column grid so 4-5 metric items stack
cleanly instead of overlapping the Pay CTA. Button drops below
full-width so it doesn't fight for space on the metric row. */
.orn-summary__payment { padding: 18px 18px; }
.orn-summary__pay-bar {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 16px;
row-gap: 14px;
align-items: start;
padding-bottom: 14px;
}
.orn-summary__pay-bar-item { min-width: 0; }
.orn-summary__pay-k { font-size: 9.5px; letter-spacing: 0.16em; }
.orn-summary__pay-v { font-size: 18px; line-height: 1.15; word-break: break-word; }
.orn-summary__pay-btn {
grid-column: 1 / -1;
margin-left: 0;
margin-top: 4px;
justify-content: center;
padding: 12px 18px;
font-size: 14px;
}
}
/* Transaction list — one row per PaymentRequest */
.orn-summary__pay-list { list-style: none; margin: 0; padding: 0; }
.orn-summary__pay-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-family: var(--orn-font-body); border-bottom: 1px solid var(--orn-line-soft, rgba(20, 35, 59, 0.05)); }
.orn-summary__pay-row:last-child { border-bottom: none; padding-bottom: 4px; }
.orn-summary__pay-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: rgb(154, 138, 110); }
.orn-summary__pay-row--ok .orn-summary__pay-dot { background: rgb(30, 122, 78); }
.orn-summary__pay-row--pending .orn-summary__pay-dot { background: rgb(214, 130, 26); }
.orn-summary__pay-row-main { flex: 1 1 0; min-width: 0; }
.orn-summary__pay-row-status { font-size: 14px; font-weight: 700; color: var(--orn-ink, rgb(20, 35, 59)); line-height: 1.2; }
.orn-summary__pay-row-when { margin-top: 2px; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-summary__pay-row-amt { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--orn-ink, rgb(20, 35, 59)); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; text-align: right; }
.orn-summary__pay-row-link { display: inline-block; margin-top: 4px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--orn-red, #F20D16); text-decoration: none; letter-spacing: 0.01em; }
.orn-summary__pay-row-link:hover { text-decoration: underline; }
/* ─── Sections (visa & docs, vouchers, add-to-trip, manage) ─── */
.orn-summary__section { margin-top: 30px; }
.orn-summary__section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.orn-summary__section-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__section-meta { font-family: var(--orn-font-body); font-size: 13.5px; color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-summary__section-lede { margin: -6px 0 16px; font-family: var(--orn-font-body); font-size: 14.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); }
/* Visa & documents alert + pax list */
.orn-summary__alert { background: rgb(251, 231, 227); color: rgb(140, 36, 32); border-radius: 12px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 10px; font-family: var(--orn-font-body); font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.orn-summary__alert-ic { flex: 0 0 22px; color: rgb(194, 69, 58); font-size: 18px; }
.orn-summary__pax-list { display: flex; flex-direction: column; gap: 12px; }
.orn-summary__pax { background: var(--orn-paper, #fff); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 24px rgba(20, 35, 59, 0.05); }
.orn-summary__pax-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--orn-text); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; }
.orn-summary__pax-body { flex: 1 1 0; min-width: 0; }
.orn-summary__pax-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__pax-status { margin-top: 2px; font-family: var(--orn-font-body); font-size: 12.5px; }
.orn-summary__pax-status--ok { color: rgb(30, 122, 78); }
.orn-summary__pax-status--warn { color: rgb(194, 97, 82); }
.orn-summary__pax-seat { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--orn-gold, rgb(184, 149, 91)); margin-left: 4px; letter-spacing: 0.02em; }
.orn-summary__pax-pill { flex: 0 0 auto; font-family: var(--orn-font-body); font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.orn-summary__pax-pill--ok { background: rgb(234, 244, 237); color: rgb(27, 94, 60); }
.orn-summary__pax-pill--warn { background: rgb(251, 231, 227); color: rgb(194, 69, 58); }
.orn-summary__pax-arrow { color: rgb(242, 13, 22); font-size: 18px; font-weight: 700; }
/* Vouchers */
/* View switcher: By Day / All hotels */
.orn-summary__view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--orn-paper, #fff); border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.12)); border-radius: 14px; padding: 4px; margin: 6px 0 18px; }
.orn-summary__view-tab { background: transparent; border: none; border-radius: 10px; padding: 13px 18px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--orn-ink-2, rgb(58, 70, 84)); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.orn-summary__view-tab:hover { color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__view-tab.is-active { background: var(--orn-text); color: #fff; }
.orn-summary__hotels-lede { font-family: var(--orn-font-body); font-size: 14px; color: var(--orn-ink-2, rgb(58, 70, 84)); margin: 0 0 14px; }
.orn-summary__day-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.orn-summary__day-tab { flex: 0 0 auto; background: var(--orn-paper, #fff); border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.10)); border-radius: 12px; padding: 10px 16px; text-align: left; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
.orn-summary__day-tab:hover { border-color: var(--orn-gold, rgb(193, 142, 69)); }
.orn-summary__day-tab.is-active { background: var(--orn-text); border-color: var(--orn-text); }
.orn-summary__day-tab-eyebrow { display: block; font-family: var(--orn-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; }
.orn-summary__day-tab.is-active .orn-summary__day-tab-eyebrow { color: var(--orn-gold-3, rgb(201, 164, 92)); }
.orn-summary__day-tab-city { display: block; margin-top: 4px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__day-tab.is-active .orn-summary__day-tab-city { color: rgb(244, 239, 227); }
.orn-summary__day-card { margin-top: 16px; background: var(--orn-paper, #fff); border-radius: 16px; padding: 26px 28px; box-shadow: 0 10px 32px rgba(20, 35, 59, 0.06); }
.orn-summary__day-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.orn-summary__day-card-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--orn-gold, rgb(193, 142, 69)); font-weight: 600; }
.orn-summary__day-card-title { margin: 4px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__day-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.orn-summary__day-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--orn-line-2, rgba(20, 35, 59, 0.18)); background: var(--orn-paper, #fff); color: var(--orn-ink, rgb(20, 35, 59)); cursor: pointer; font-size: 18px; line-height: 1; }
.orn-summary__day-nav-btn:hover { border-color: var(--orn-gold, rgb(193, 142, 69)); }
.orn-summary__voucher-section-head { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; margin: 18px 0 10px; }
.orn-summary__voucher { background: transparent; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgb(228, 221, 205); }
.orn-summary__voucher-head { padding: 10px 14px; border-bottom: 1px dashed rgb(216, 207, 187); display: flex; align-items: center; justify-content: space-between; }
.orn-summary__voucher-eyebrow { font-family: var(--orn-font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: rgb(242, 13, 22); font-weight: 600; }
.orn-summary__voucher-ref { font-family: var(--orn-font-mono); font-size: 11px; color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-summary__voucher-body { padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start; }
.orn-summary__voucher-ic { flex: 0 0 32px; font-size: 22px; line-height: 1; }
/* Hotel image thumb — same role as the .ic glyph, just a real photo. */
.orn-summary__voucher-img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--orn-cream-2, rgb(246, 241, 230)); border: 1px solid rgba(216, 207, 187, 0.7); display: inline-block; }
.orn-summary__voucher-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
.orn-summary__voucher-img { flex: 0 0 64px; width: 64px; height: 64px; }
}
.orn-summary__voucher-main { flex: 1 1 0; min-width: 0; }
.orn-summary__voucher-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__voucher-star { color: var(--orn-gold, rgb(193, 142, 69)); }
.orn-summary__voucher-sub { margin-top: 2px; font-family: var(--orn-font-body); font-size: 12.5px; color: var(--orn-mute, rgb(154, 138, 110)); }
.orn-summary__voucher-dates { display: flex; gap: 24px; margin-top: 10px; }
.orn-summary__voucher-date-cell { display: flex; flex-direction: column; }
.orn-summary__voucher-date-k { font-family: var(--orn-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; }
.orn-summary__voucher-date-v { margin-top: 3px; font-family: var(--orn-font-mono); font-size: 13px; color: var(--orn-ink, rgb(20, 35, 59)); font-weight: 600; }
.orn-summary__voucher-tag { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-family: var(--orn-font-body); font-size: 12px; font-weight: 600; }
.orn-summary__voucher-tag--ok { background: rgb(234, 244, 237); color: rgb(30, 122, 78); }
/* Add to your trip — extras */
.orn-summary__extra { background: var(--orn-paper, #fff); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 10px; box-shadow: 0 6px 20px rgba(20, 35, 59, 0.05); }
.orn-summary__extra-body { flex: 1 1 0; min-width: 0; }
.orn-summary__extra-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__extra-sub { margin-top: 2px; font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-ink-2, rgb(58, 70, 84)); }
.orn-summary__extra-view { flex: 0 0 auto; background: var(--orn-navy, rgb(20, 35, 59)); color: rgb(255, 255, 255); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; border: none; border-radius: 9px; padding: 9px 18px; cursor: pointer; min-width: 62px; }
.orn-summary__extra-view:hover { background: rgb(30, 54, 86); }
/* Manage your booking */
.orn-summary__manage { display: flex; flex-direction: column; gap: 10px; }
.orn-summary__manage-row { background: var(--orn-paper, #fff); border: 1px solid rgb(228, 221, 205); border-radius: 13px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color 0.15s ease; }
.orn-summary__manage-row:hover { border-color: var(--orn-gold, rgb(193, 142, 69)); }
.orn-summary__manage-row--danger { border-color: rgb(237, 211, 206); }
.orn-summary__manage-row--danger:hover { border-color: rgb(194, 97, 82); }
.orn-summary__manage-ic { flex: 0 0 24px; color: var(--orn-gold, rgb(242, 13, 22)); font-size: 18px; }
.orn-summary__manage-row--danger .orn-summary__manage-ic { color: rgb(194, 97, 82); }
.orn-summary__manage-body { flex: 1 1 0; min-width: 0; }
.orn-summary__manage-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--orn-ink, rgb(20, 35, 59)); }
.orn-summary__manage-row--danger .orn-summary__manage-title { color: rgb(194, 97, 82); }
.orn-summary__manage-sub { margin-top: 1px; font-family: var(--orn-font-body); font-size: 12.5px; color: var(--orn-ink-2, rgb(58, 70, 84)); }
.orn-summary__manage-arrow { color: var(--orn-gold, rgb(242, 13, 22)); font-size: 18px; font-weight: 700; }
.orn-summary__manage-row--danger .orn-summary__manage-arrow { color: rgb(194, 97, 82); }
/* Included list */
/* City-wise inclusions: each city is a soft block with an eyebrow
"DUBAI · 4 NIGHTS" header, then the inclusion lines as warm-cream
rows with a green tick. Spacious, scannable, brand-consistent. */
.orn-summary__incl-cities { display: flex; flex-direction: column; gap: 18px; }
.orn-summary__incl-city { display: flex; flex-direction: column; gap: 10px; }
.orn-summary__incl-city-head { display: flex; align-items: center; gap: 10px; margin-top:10px; }
.orn-summary__incl-city-head::after { content: ''; flex: 1 1 0; height: 1px; background: var(--orn-line, rgba(20, 35, 59, 0.10)); }
.orn-summary__incl-city-name { font-family: var(--orn-font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-gold, rgb(193, 142, 69)); font-weight: 700; flex: 0 0 auto; }
.orn-summary__incl-city-nts { font-family: var(--orn-font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute, rgb(154, 138, 110)); font-weight: 600; flex: 0 0 auto; }
.orn-summary__incl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.orn-summary__incl-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--orn-font-body); font-size: 14.5px; line-height: 1.5; color: var(--orn-ink-2, rgb(58, 70, 84)); }
.orn-summary__incl-tick { flex: 0 0 auto; color: rgb(30, 122, 78); font-weight: 700; font-size: 14px; line-height: 1.5; }
.orn-summary__incl-empty { font-family: var(--orn-font-body); font-size: 13.5px; color: var(--orn-mute, rgb(154, 138, 110)); font-style: italic; padding: 14px 0; text-align: center; background: rgb(251, 249, 243); border: 1px dashed rgba(228, 221, 205, 0.9); border-radius: 10px; }
/* Before you travel — navy panel */
.orn-summary__before { background: rgb(14, 26, 43); color: rgb(220, 228, 238); }
.orn-summary__before .orn-summary__card-title { color: rgb(244, 239, 227); }
.orn-summary__before-eyebrow { font-family: var(--orn-font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: rgb(159, 176, 196); font-weight: 600; }
.orn-summary__before-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 11px; font-family: var(--orn-font-body); font-size: 13.5px; line-height: 1.5; }
.orn-summary__before-rule { border: none; border-top: 1px solid rgb(35, 51, 71); margin: 18px 0 14px; }
.orn-summary__before-support { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.orn-summary__wa { display: inline-flex; align-items: center; gap: 8px; background: rgb(37, 211, 102); color: #fff; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; border-radius: 10px; padding: 11px 18px; text-decoration: none; }
.orn-summary__wa:hover { background: rgb(28, 184, 87); color: #fff; }
.orn-summary__wa-num { font-family: var(--orn-font-mono); font-size: 14px; color: rgb(244, 239, 227); }
/* Footer link */
.orn-summary__home-wrap { display: flex; justify-content: center; margin-top: 32px; }
.orn-summary__home-btn { border: 1px solid rgb(199, 191, 174); color: var(--orn-ink, rgb(20, 35, 59)); font-family: var(--orn-font-body); font-weight: 600; font-size: 16px; border-radius: 12px; padding: 14px 28px; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.orn-summary__home-btn:hover { border-color: var(--orn-gold, rgb(193, 142, 69)); background: rgba(201, 164, 92, 0.06); }
/* When used on a