/* CruiseSheet skin for the Odysseus booking engine (swift SPA + legacy
   /web/*.aspx), v3: measured against the live cruise page so the handoff
   reads as the same site. Tokens taken from computed styles on
   cruisesheet.com single pages: body Inter #1f2937 on #f9fafb, headings
   Gabarito 700 #111827, cards white 1px #e5e7eb radius 8px shadow
   0 1px 2px, primary buttons #2563eb radius 6px, links teal #006279. */

/* ---- fonts: identical self-hosted faces ---- */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
    src: url(//static.cruisesheet.com/fonts/inter-v19-latin-regular.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
    src: url(//static.cruisesheet.com/fonts/inter-v19-latin-700.woff2) format("woff2"); }
@font-face { font-family: Gabarito; font-style: normal; font-weight: 700; font-display: swap;
    src: url(//static.cruisesheet.com/fonts/Gabarito-Bold.woff2) format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(//static.cruisesheet.com/fonts/PermanentMarker-Regular.woff2) format("woff2"); }

body, .btn, input, select, textarea, .form-control, .tooltip, .popover {
    font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;
}
body { background: #f9fafb !important; color: #000; }

/* ---- map hero + wave, the exact single-page header ---- */
.cs-hero-map {
    position: relative;
    height: 250px;
    overflow: hidden;
    /* neutral watercolor-ocean blue until sheet-foot swaps in this
       cruise's own map render (poster.jpg is its no-meta fallback) */
    background: #a5cde5 center / cover no-repeat;
}
@media (min-width: 768px) { .cs-hero-map { height: 400px; } }
/* phones: a 250px map pushed everything transactional out of the first
   viewport — nothing bookable was visible without scrolling (audit) */
@media (max-width: 480px) { .cs-hero-map { height: 170px; } }
.cs-hero-topfade {
    position: absolute; top: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .4), transparent);
}
.cs-hero-inner {
    position: relative; z-index: 10;
    max-width: 1280px; margin: 0 auto; padding: 18px 16px 0;
    display: flex; align-items: center; gap: 30px;
}
.cs-hero-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cs-hero-mark { height: 42px; }
.cs-hero-word { height: 26px; }
.cs-hero-nav { display: flex; gap: 24px; margin-top: 4px; }
.cs-hero-nav a {
    color: #111827; font: 700 15px/1 Inter, sans-serif; text-decoration: underline;
    text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.cs-hero-nav a:hover { color: #000; }
.cs-hero-line-logo { margin-left: auto; max-height: 48px; max-width: 120px; object-fit: contain; }
@media (max-width: 640px) { .cs-hero-nav { display: none; } .cs-hero-word { height: 20px; } }

.cs-wave { position: relative; margin-top: -50px; height: 50px; overflow: hidden; z-index: 2; }
.cs-wave-strip { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.cs-wave-svg { position: relative; display: block; width: 200%; height: 50px; animation: cs-wave 10s linear infinite; }
@media (max-width: 767px) { .cs-wave { margin-top: -20px; height: 20px; } .cs-wave-svg { height: 20px; } }
@keyframes cs-wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* old custom-header generations, retired */
.cd-top, .cd-overlay, .cd-headerbox { display: none !important; }

/* ---- layout: center the page like the main site's max-w-7xl ---- */
.main-container, .package-details.container-fluid {
    max-width: 1280px !important;
    margin: 0 auto !important;
    float: none !important;
}

/* ---- breadcrumbs: quiet text links, no gray band ---- */
.breadcrumb {
    background: transparent !important;
    border: 0 !important;
    font-size: 15px;
    padding-top: .75rem !important;
}
.breadcrumb a.breadcrumb-item { color: #006279 !important; text-decoration: none; }
.breadcrumb a.breadcrumb-item:hover { text-decoration: underline; }
.breadcrumb .dir-ltr { color: #374151; }

/* ---- headings: main-site Gabarito 700 near-black ---- */
h1, h2, h3, .h1, .h2, .h3 { font-family: Gabarito, Inter, sans-serif; color: #111827; }
.cruise-details-package-title, .breadcrumb-cruise-title {
    font-family: Gabarito, Inter, sans-serif !important;
    color: #111827 !important;
    font-weight: 700 !important;
}
/* the visible package title on the detail card */
[data-ody-id="PackageDetailsV2Card"] h4, .package-detail h4 {
    font-family: Gabarito, Inter, sans-serif !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
}
[data-ody-id="PackageDetailsV2Card"] h4 .text-primary,
[data-ody-id="PackageDetailsV2Card"] h4.text-primary { color: #111827 !important; }

/* ---- brand colors: links teal, primary actions main-site blue ---- */
a { color: #006279; }
a:hover { color: #00475a; }

.btn-primary, .badge-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}
.bg-primary { background-color: #2563eb !important; color: #fff !important; }
.text-primary { color: #006279 !important; }
.border-primary { border-color: #2563eb !important; }
.btn-outline-primary { color: #2563eb !important; border-color: #2563eb !important; border-radius: 6px !important; }
.btn-outline-primary:hover { background-color: #2563eb !important; color: #fff !important; }
.btn { border-radius: 6px !important; }

/* card headers: white with bold near-black text, like main-site sections */
.card-header, .card-header.bg-secondary, .bg-secondary {
    background-color: #fff !important;
    color: #111827 !important;
    font-family: Gabarito, Inter, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.card-header .text-white, .card-header.text-white, .bg-secondary .text-white { color: #111827 !important; }
.card-header .pointer, .card-header i { color: #6b7280 !important; }

/* ---- shape: cards and inputs exactly as measured ---- */
.card, .modal-content, .alert, .list-group, .border.rounded {
    border-radius: 8px !important;
    border-color: #e5e7eb !important;
}
.card { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.card .card-body, .card > .minh500 { padding: 1.25rem; }
.card-header { border-radius: 8px 8px 0 0 !important; }
.form-control, .custom-select, select.form-control {
    border-radius: 6px !important;
    border-color: #d1d5db !important;
}
.form-control:focus, .custom-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: #2563eb; }

/* mixed colorful odysseus icons read off-brand: mute them */
.package-details-basic-info .odi, .bonus-offer-icontitle img,
[data-ody-id] img[src*="content/images/icons"], .guest-info-icons {
    filter: grayscale(1) opacity(.65);
}

/* ---- step wizard -> main-site pill pattern ---- */
.progress-stepper-arrow, [data-ody-id="ProgressStepperBar"] { background: transparent !important; }
.checkout-steps-wrap { gap: 10px; padding: 6px 0; }
.checkout-step {
    background: #fff !important;
    border: 1px solid #d1d5db;
    border-radius: 999px !important;
    overflow: hidden;
    font-family: Inter, sans-serif;
}
.checkout-step .checkout-step-inner:not(.rounded-circle) {
    background: transparent !important;
    color: #374151 !important;
    font-weight: 600;
}
.checkout-step .checkout-step-inner:not(.rounded-circle)::before,
.checkout-step .checkout-step-inner:not(.rounded-circle)::after {
    display: none !important; /* no chevron arrows */
}
.checkout-step.current {
    background: #0c1a2b !important;
    border-color: #0c1a2b;
}
.checkout-step.current .checkout-step-inner:not(.rounded-circle) { color: #fff !important; }
.checkout-step.current span { color: #fff !important; }
.checkout-step-dot { display: none !important; }

/* ---- polaroids (main-site frame) ---- */
.cs-polaroid {
    max-width: 240px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    border-radius: 4px;
    background: linear-gradient(135deg, #dedad5 0%, #fafaf9 100%);
    padding: 10px 0 0;
    position: relative;
    border: 1px solid #e5e7eb;
    transform: rotate(5deg);
    margin: 0 auto 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cs-polaroid:hover { transform: rotate(0deg); box-shadow: 0 6px 12px rgba(0, 0, 0, .15); }
.cs-polaroid-innards {
    width: calc(100% - 20px);
    margin: 0 10px;
    border-radius: 2px;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.cs-polaroid-innards img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-polaroid-label {
    font-family: "Permanent Marker", cursive;
    font-size: 14px;
    text-align: center;
    color: #003;
    opacity: .8;
    padding: 6px 8px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cs-polaroid.cs-polaroid-map { transform: rotate(-3deg); max-width: 240px; }
.cs-polaroid.cs-polaroid-map:hover { transform: rotate(0deg); }

/* ---- "Pricing From" as the main-site price table ---- */
[data-ody-id="PricingFrom"] .card-header { display: none !important; }
[data-ody-id="PricingFrom"] .border.rounded {
    border: 2px solid #e5e7eb !important;
    border-radius: .75rem !important;
    box-shadow: none;
    overflow: hidden;
}
[data-ody-id="PricingFrom"] .package-prices .d-flex { flex-wrap: nowrap !important; }
[data-ody-id="PricingFrom"] .package-prices .text-center {
    padding: 0 8px 12px;
    border-right: 1px solid #e5e7eb;
    flex: 1;
    min-width: 0;
    flex-basis: 0;
    margin: 0 !important;
}
[data-ody-id="PricingFrom"] .package-prices .text-center:last-child { border-right: 0; }
[data-ody-id="PricingFrom"] .sailing-category-label {
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #374151;
    background: #f9fafb;
    margin: 0 -8px 12px !important;
    padding: 12px 8px;
    border-bottom: 1px solid #e5e7eb;
}
[data-ody-id="PricingFrom"] .sailing-category-label::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 100%;
    margin-right: 5px;
    vertical-align: text-bottom;
}
[data-ody-id="PricingFrom"] .text-center:nth-child(1) .sailing-category-label::before { background: #FED470; }
[data-ody-id="PricingFrom"] .text-center:nth-child(2) .sailing-category-label::before { background: #006279; }
[data-ody-id="PricingFrom"] .text-center:nth-child(3) .sailing-category-label::before { background: #508543; }
[data-ody-id="PricingFrom"] .text-center:nth-child(4) .sailing-category-label::before { background: #F16279; }
[data-ody-id="PricingFrom"] .sailing-category-price {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
[data-ody-id="PricingFrom"] .sailing-category-price strong { white-space: nowrap; }
[data-ody-id="PricingFrom"] .cs-per-day {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* ---- injected main-site footer (markup added by sheet-foot) ---- */
.cs-footer { background: #0a1929; color: #fff; margin-top: 3rem; }
.cs-footer-inner { max-width: 1280px; margin: 0 auto; padding: 3rem 1rem; }
.cs-footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; border-top: 1px solid #1f2937; padding: 2rem 0; }
@media (min-width: 768px) { .cs-footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.cs-footer h3 { font: 700 .875rem/1.4 Inter, sans-serif; color: #fff; margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .05em; }
.cs-footer ul { list-style: none; margin: 0; padding: 0; }
.cs-footer li { margin-bottom: .5rem; }
.cs-footer a { color: #d1d5db; font-size: .875rem; text-decoration: none; }
.cs-footer a:hover { color: #fff; }
.cs-footer .cs-footer-cred { text-align: center; margin-bottom: 1.5rem; opacity: .8; filter: invert(1) brightness(.9); }
.cs-footer .cs-footer-legal { border-top: 1px solid #1f2937; padding-top: 1.5rem; text-align: center; color: #9ca3af; font-size: .8rem; }
.cs-footer .cs-footer-legal a { color: #9ca3af; text-decoration: underline; }

/* legacy-page odds and ends */
.search-bar-section { background-image: linear-gradient(to bottom, #006279 5%, #005269 100%); }
.text-price-color { color: #000000; }
.navbar-header-placeholder { display: none !important; }

/* the visible package title: main-site h1 treatment (it uses a webkit
   text-gradient fill that must be cleared before color applies) */
h3.cruise-details-package-title, .cruise-details-package-title.text-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #111827 !important;
    color: #111827 !important;
    font-family: Gabarito, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.9rem !important;
    line-height: 1.25 !important;
}
/* section headings inside cards ("Step 1 - Guest Information") */
.guest-info-form .text-primary, form .text-primary.font-weight-bold,
h6.text-primary, h5.text-primary {
    color: #111827 !important;
    font-family: Gabarito, Inter, sans-serif;
}
/* bonus offer sprite icons: mute to match */
[data-ody-id] .bonus-offer-icon, .bonus-offers img, .bonus-offer-icontitle ~ div img,
img[src*="odysol"][width="25"], td img[src*="content"], li img[src*="content"] {
    filter: grayscale(1) opacity(.65);
}
/* ...but the cabin-type tab photos are product imagery, not icons — the
   li img[src*=content] mute above caught them, and grayscale cabin photos
   read as sold out */
li.nav-item img.img-fluid, .nav-tabs li img {
    filter: none !important;
}

/* bonus-offer rows: icon-font glyphs and promo PNGs, muted uniformly */
.rules-list-view .odi, .rules-list-view em, .rules-list-view img,
.rules img, .rules .odi {
    filter: grayscale(1) opacity(.6);
    color: #6b7280 !important;
}
.bonus-text-primary { color: #1f2937 !important; }

/* every odi icon glyph in card content: uniform muted gray */
.card em[class*="odi-"], .card .odi, .card-body img[src*="Promotions"] {
    color: #6b7280 !important;
    filter: grayscale(1) opacity(.75);
}

/* any remaining colored icon-font glyphs, muted globally */
em[class*="odi-"], i[class*="odi-"] {
    color: #6b7280 !important;
    filter: grayscale(1);
}

/* sidebar itinerary: no boxed chrome — the polaroid map and day list sit
   directly on the card like main-site content */
.sidebar-itinerary.section-itinerary-border { border: 0 !important; }
.sidebar-itinerary [data-ody-id="SummaryItineraryTitle"],
.sidebar-itinerary [data-ody-id="SummaryItineraryTitle"].d-flex { display: none !important; }
.sidebar-itinerary .bg-whitesmoke { background: transparent !important; }

/* pricing box: the header band and cells run edge to edge inside the border */
.packageprices-whitebg { padding: 0 !important; }
[data-ody-id="PricingFrom"] .package-prices { padding: 0 !important; margin: 0 !important; }

/* bottom multi-tab ship-content module: gone */
[data-ody-id="CruiseShipDetailsTabs"] { display: none !important; }

/* ---- v6 refinements ---- */
/* no gray divider lines between sidebar sections or bonus rows */
.package-details-basic-info hr, .section-sidebar hr, .sidebar-itinerary hr { display: none !important; }
.package-details-basic-info .border-top, .package-details-basic-info .border-bottom { border: 0 !important; }

/* the bonus-offers promo box: gone entirely */
[data-ody-id="BonusOffer"] { display: none !important; }

/* forms outrank the pricing summary: bigger fields, stronger card */
.guest-info-form .card, form .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .07) !important;
    border-color: #d1d5db !important;
}
.form-control, .custom-select, select.form-control {
    min-height: 44px;
    font-size: 16px !important;
}
.ng-select .ng-select-container { min-height: 44px !important; border-radius: 6px !important; }
form label, .guest-info-form label { font-weight: 600; color: #111827; }

/* pricing summary: quieter than the form. The box is a fixed 400px on
   desktop, so the amounts get a fixed size that fits four columns of
   "$7,553.55"-length values — never viewport-scaled. */
[data-ody-id="PricingFrom"] .sailing-category-price { font-size: 15px; }
[data-ody-id="PricingFrom"] .package-prices .text-center { padding-left: 6px; padding-right: 6px; }
[data-ody-id="PricingFrom"] .border.rounded {
    border-width: 1px !important;
    box-shadow: none;
    background: #fcfcfd;
}

/* ---- v7 refinements ---- */
/* no vertical rule between the sidebar and the content column */
.section-sidebar, .package-details-basic-info { border-right: 0 !important; border-left: 0 !important; }

/* polaroids breathe like the main site */
.cs-polaroid { margin: 2rem auto; }
.cs-polaroid.cs-polaroid-map { margin: 2rem auto 2.25rem; }

/* share itinerary: hidden (also removed by script) */
.sidebar-itinerary .btn-outline-primary.btn-sm { display: none !important; }

/* forms stacked on the left, pricing summary docked right */
@media (min-width: 1200px) {
    .display-ordering > [data-ody-id="PricingFrom"] {
        float: right !important;
        width: 400px !important;
        max-width: 400px !important;
        padding: 0 !important;
    }
    .display-ordering > .max-width-onclick {
        float: left !important;
        width: calc(100% - 424px) !important;
        max-width: calc(100% - 424px) !important;
    }
    /* the three form cards stack full-width inside their column */
    .display-ordering > .max-width-onclick [class*="col-md-"],
    .display-ordering > .max-width-onclick [class*="col-xl-"],
    .display-ordering > .max-width-onclick [class*="col-lg-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }
}

/* checkout step 1: the sidebar polaroids clutter narrow screens, so they're
   hidden on this page at every width; sheet-foot clones them into the pricing
   column, where they only show on desktop, under the docked price box */
[data-ody-id="PackageDetailsV2Card"] .package-details-basic-info .cs-polaroid { display: none !important; }
/* the day-by-day route list in the sidebar reads as secondary — soften it */
[data-ody-id="PackageDetailsV2Card"] .sidebar-itinerary { opacity: .8; }
.cs-price-polaroids { display: none; }
@media (min-width: 1200px) {
    .cs-price-polaroids { display: block; padding-top: 2.5rem; }
    .cs-price-polaroids .cs-polaroid { margin: 0 auto 1.75rem; }
    /* deploy-skew guard: browsers cache the sheet-foot fragment with no
       cache headers, so this CSS can go live while a stale fragment (which
       never builds the price-column set) keeps running. If the set hasn't
       appeared, reveal the sidebar originals after a grace period rather
       than showing no polaroids at all. */
    [data-ody-id="PackageDetailsV2Card"]:not(:has(.cs-price-polaroids)) .package-details-basic-info .cs-polaroid {
        display: block !important;
        animation: cs-pol-reveal 0s 8s both;
    }
}
@keyframes cs-pol-reveal { from { visibility: hidden; } to { visibility: visible; } }

/* tablets (768-1199px): Odysseus renders PricingFrom as a full-width col-12
   float-left, and the form column (.max-width-onclick) is a flex container —
   a BFC that gets squeezed into the zero space beside the float, so the whole
   guest form vanishes and Continue lands ~1600px down. Stack them instead. */
@media (min-width: 768px) and (max-width: 1199px) {
    .display-ordering > [data-ody-id="PricingFrom"] { float: none !important; }
    .display-ordering > .max-width-onclick {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .display-ordering > .max-width-onclick [class*="col-md-"],
    .display-ordering > .max-width-onclick [class*="col-xl-"],
    .display-ordering > .max-width-onclick [class*="col-lg-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }
}

/* small screens: category labels shrink instead of clipping */
@media (max-width: 480px) {
    [data-ody-id="PricingFrom"] .sailing-category-label { font-size: 10px; letter-spacing: 0; padding-left: 2px; padding-right: 2px; }
    [data-ody-id="PricingFrom"] .sailing-category-label::before { width: 8px; height: 8px; margin-right: 3px; }
}

/* mobile breadcrumbs: just Home > Search Results — the full cruise title
   crumb wraps to four lines on a phone */
@media (max-width: 640px) {
    .breadcrumb .dir-ltr, .breadcrumb .breadcrumb-item.before-margin ~ .breadcrumb-item:not(a) { display: none !important; }
    .breadcrumb { font-size: 14px; }
}

/* mobile stepper: compact number pills, only the current step keeps its
   label — the four full-text blobs were half the screen */
@media (max-width: 767px) {
    .checkout-steps-wrap { gap: 5px; align-items: center; }
    .checkout-step { flex: 0 0 auto !important; }
    .checkout-step.current { flex: 0 1 auto !important; min-width: 0; }
    .checkout-step .checkout-step-inner:not(.rounded-circle) {
        padding: 3px 9px !important;
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .checkout-step:not(.current) .cs-step-label { display: none; }
    .progress-stepper-arrow { padding: 0 !important; }
}
/* small phones: centered nowrap text in the pills clipped MID-GLYPH at both
   ends at 320-390 ("Step 1 - Guest Informatior"). Let the strip scroll
   sideways instead of shaving letters — pills keep their natural width. */
@media (max-width: 480px) {
    .checkout-steps-wrap, .nav-stepper {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .checkout-steps-wrap::-webkit-scrollbar, .nav-stepper::-webkit-scrollbar { display: none; }
    .checkout-step .checkout-step-inner:not(.rounded-circle),
    .nav-stepper .nav-link {
        overflow: visible !important;
        text-overflow: clip !important;
    }
    /* pills size to their content — the scrolling strip absorbs the width */
    .checkout-step, .checkout-step.current { flex: 0 0 auto !important; min-width: 0; }
    .nav-stepper .nav-item { flex: 0 0 auto !important; white-space: nowrap; }
}
/* guest-age fields sat 5px left of the field grid below 768: Bootstrap's
   .form-row -5px margins are only compensated by col padding at >=768 */
@media (max-width: 767px) {
    .guest-info-form .form-row { margin-left: 0 !important; margin-right: 0 !important; }
}
/* the select2 clear "x" rendered mid-field on phones — a natural thumb tap
   on Country wiped the selection and removed the State field entirely.
   Values are changed via the dropdown; the clear affordance only sets traps. */
.select2-selection__clear { display: none !important; }
/* nav + marks get a soft light halo so watercolor place-names underneath
   ("Greenland") can't merge with the text ("Port Guided") */
.cs-hero-nav a { text-shadow: 0 1px 6px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.95); }
.cs-hero-mark, .cs-hero-word, .cs-hero-line-logo { filter: drop-shadow(0 0 4px rgba(255,255,255,.85)); }
/* accessibility: our segmented guest-count control needs a visible focus ring */
.cs-seg-btn:focus-visible { outline: 2px solid #006279; outline-offset: -2px; }
/* select2 comboboxes had no focus state at all in either skin */
.select2-container--focus .select2-selection {
    border-color: #006279 !important; box-shadow: 0 0 0 3px rgba(0,98,121,.2); }

/* phones: sidebar (photos + itinerary) renders after the form content;
   cloned fact rows lead the page instead */
.cs-facts-mobile { display: none; }
.cs-facts-mobile, .cs-facts-mobile span, .cs-facts-mobile div { color: #1f2937 !important; font-size: 15px; }
.cs-facts-mobile img { max-height: 20px; max-width: 100px; width: auto; height: auto; margin-left: auto; }
@media (max-width: 991px) {
    .package-details-basic-info { order: 2; }
    .package-details-basic-info > .mb-2.d-flex { display: none !important; }
    .cs-facts-mobile { display: block; padding: 4px 4px 0; }
    .cs-facts-mobile > div { margin-bottom: .5rem; display: flex; align-items: center; }
}

/* the package-subtitle is the cruise line's internal itinerary code name
   ("Hawaii Hnl Inter Island") — trade jargon, not customer copy */
.cruise-details-package-subtitle { display: none !important; }

/* ---- mobile: full-bleed, borderless price + form sections ---- */
@media (max-width: 767px) {
    .main-container, .package-details.container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
    [data-ody-id="PackageDetailsV2Card"] { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    [data-ody-id="PackageDetailsV2Card"] > .minh500 { padding: 0 !important; }
    [data-ody-id="PackageDetailsV2Card"] .row { margin-left: 0 !important; margin-right: 0 !important; }
    .package-details-basic-info, .package-details-basic-info ~ [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

    /* text keeps a comfortable inset while sections run edge to edge */
    .breadcrumb, .cruise-details-package-title, .cs-facts-mobile,
    .checkout-steps-wrap { padding-left: 16px !important; padding-right: 16px !important; }

    /* price table: full width, no box */
    [data-ody-id="PricingFrom"] .border.rounded {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff;
        margin-bottom: .5rem !important;
    }

    /* the nested wrappers around the forms all carry gutters */
    .landing-right-section, .landing-pricing-wrapper,
    .landing-pricing-wrapper > .col-12, .landing-pricing-wrapper .my-3,
    .display-ordering, .display-ordering > .max-width-onclick {
        padding-left: 0 !important; padding-right: 0 !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }

    /* every gutter layer between the section bands and the screen edge */
    .landing-right-section [class*="col-"],
    .landing-right-section .my-3,
    .display-ordering > .max-width-onclick > [class*="col-"],
    .display-ordering form > [class*="col-"] {
        padding-left: 0 !important; padding-right: 0 !important;
    }

    /* the last few gutter pixels sit on unstylable wrappers — paint the
       whole detail region white so the sections read full-bleed; light
       hairlines keep the sections legible */
    .landing-right-section, [data-ody-id="PackageDetailsV2Card"],
    .package-details, .main-container, .display-ordering,
    .display-ordering .max-width-onclick { background: #fff !important; }
    .display-ordering .card { border-top: 1px solid #eef0f2 !important; }
    /* the "boxes" around form groups are fieldset borders */
    fieldset { border: 0 !important; box-shadow: none !important; }

    /* form cards: white bands, no borders */
    .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .card .card-body, .card > .minh500 { padding: 1rem 16px; }
    .guest-info-form .card, form .card { padding: 4px 16px 12px; margin-bottom: .5rem; }
    .card-header { border-bottom: 0 !important; padding-left: 16px !important; }
}

/* ---- v14 form controls ---- */
/* Past Passenger # stays on one line, no divider */
.past-passenger-label { white-space: nowrap !important; border-right: 0 !important; }

/* floating back-to-top button: gone */
.btn-fab.back-to-top { display: none !important; }

/* guest age fields breathe */
.guest-info-form .form-row .form-group.col-auto { margin-right: 16px; }
.guest-info-form input[data-ody-id^="GuestAge"] { width: 72px !important; text-align: center; }

/* guest count: segmented 1-4 buttons replace the dropdown */
select[data-ody-id="GuestSelectDropdown"] { display: none !important; }
select[data-ody-id="GuestSelectDropdown"].cs-show { display: inline-block !important; margin-left: 10px; width: 70px !important; }
.cs-seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; background: #fff; }
.cs-seg-btn {
    border: 0; background: #fff; padding: 9px 18px;
    font: 600 15px Inter, sans-serif; color: #374151;
    border-right: 1px solid #d1d5db; cursor: pointer;
}
.cs-seg-btn:last-child { border-right: 0; }
.cs-seg-btn.active { background: #2563eb; color: #fff; }

/* ---- v15 polish ---- */
/* no spinner arrows on the age fields */
input[data-ody-id^="GuestAge"]::-webkit-inner-spin-button,
input[data-ody-id^="GuestAge"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[data-ody-id^="GuestAge"] { -moz-appearance: textfield; appearance: textfield; }

/* conversion: the primary action is unmissable on phones */
@media (max-width: 767px) {
    .btn-primary[data-ody-id="ContinueButton"], .display-ordering .btn-primary {
        width: calc(100% - 32px);
        margin: 0 16px 12px;
        padding: 13px 0 !important;
        font-size: 17px !important;
    }
}

/* ---- steps 2-4: the legacy template variants ---- */
/* stepper (ul.nav-stepper) becomes the same pill row */
.nav-stepper { background: transparent !important; border: 0 !important; gap: 10px; padding: 6px 0; }
.nav-stepper .nav-item {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 999px !important;
    overflow: hidden;
    margin: 0 !important;
}
.nav-stepper .nav-link {
    background: transparent !important;
    color: #374151 !important;
    font: 600 14px/1.4 Inter, sans-serif !important;
    padding: 8px 18px !important;
}
.nav-stepper .nav-item.active-nav-item {
    background: #0c1a2b !important;
    border-color: #0c1a2b !important;
}
.nav-stepper .nav-item.active-nav-item .nav-link { color: #fff !important; }
.nav-stepper .nav-link-arrow { display: none !important; }
.nav-stepper .stepper-item-caption { color: inherit; opacity: .75; font-size: 12px; }
@media (max-width: 767px) {
    .nav-stepper .nav-link { padding: 4px 10px !important; font-size: 11px !important; }
    .nav-stepper .stepper-item-caption { display: none; }
    .nav-stepper .nav-item:not(.active-nav-item) .nav-link { max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* page titles on the legacy pages */
h1.page-title, .cruise-details-title {
    font-family: Gabarito, Inter, sans-serif !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
}
[data-ody-id="BreadcrumbSubtitle"], h5[data-ody-id="BreadcrumbSubtitle"] {
    color: #6b7280 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
}

/* room-category tabs (Inside / Balcony / Suite) */
.nav-item .nav-link[data-toggle="tab"] {
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
}
.nav-item .nav-link.active[data-toggle="tab"],
.nav-item .nav-link[data-toggle="tab"].active {
    border-bottom-color: #2563eb !important;
}
.nav-item .nav-link[data-toggle="tab"] a { color: #111827; font-weight: 700; }

/* legacy sidebar photo caption reads like a polaroid label */
.img-caption { font-family: Inter, sans-serif; color: #374151; }

/* step 2-4 leftovers */
.nav-stepper .nav-item::before, .nav-stepper .nav-item::after,
.nav-stepper .nav-link::before, .nav-stepper .nav-link::after { display: none !important; content: none !important; }
.itinerary-accordion-header, h6.itinerary-accordion-header.d-flex { display: none !important; }
[data-ody-id="DestinationText"].img-caption { display: none !important; }

/* ---- no outer shell: content sits directly on the page (desktop) ---- */
@media (min-width: 768px) {
    /* step 1 (swift SPA): the page-wide wrapper card */
    [data-ody-id="PackageDetailsV2Card"].card, [data-ody-id="PackageDetailsV2Card"] {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    [data-ody-id="PackageDetailsV2Card"] > .minh500 { padding: 0 !important; }

    /* steps 2-4 (legacy): the outer material card + sticky title card */
    [data-ody-id="BreadcrumbPageTitle"].card, [data-ody-id="BreadcrumbPageTitle"] {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .card.card-material.sticky-top,
    .card.card-material.d-print-block,
    .cruise-details-outer, .res_cruise_details {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .card.card-material.sticky-top { background: #f9fafb !important; }
    /* the sidebar column card on legacy pages */
    .cruise-details-outer .card.mb-3, .res_cruise_details .card.mb-3,
    [data-ody-id="CruiseBookingDetails"] .card.mb-3 {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* keep the innermost content cards (categories, pricing, forms) */
}

/* ---- step 2 de-bordering ---- */
/* pricing disclaimers: plain quiet text on the page, no box (covers the
   swift page's bottom div.disclaimer too) */
.disclaimer, .disclaimer.cruise-pricing-note, [data-ody-id="DisclaimerTopCruisePricingNote"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    color: #6b7280 !important;
    font-size: 13px;
    font-weight: 400 !important;
}
.disclaimer b, .disclaimer strong { font-weight: 400 !important; color: #6b7280; }

/* stateroom selection tabs: no gray box or table borders around the strip */
.tabs.custom-table-border, .custom-table-border {
    border: 0 !important;
    background: transparent !important;
}
.nav-tabs, .cruise-info-tabs, .nav-tabs-overline, .category-tabs {
    border: 0 !important;
    background: transparent !important;
}
.nav-tabs .nav-item, .nav-tabs .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item .nav-link.active {
    background: transparent !important;
    border-bottom-color: #2563eb !important;
}
.tab-content, .tabs-container { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* step 2: no column separator or itinerary wrapper border */
.main-grid-content { border-left: 0 !important; box-shadow: none !important; }
[class*="grid-sidebar"], .left-grid-sidebar {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.section-itinerary-wrapper, .border.section-itinerary-wrapper { border: 0 !important; }

/* stateroom polaroids inside category cards */
.cs-polaroid-room { max-width: 280px; margin: .25rem auto .75rem; }
.cs-polaroid-room .cs-polaroid-innards a { display: block; width: 100%; height: 100%; }
.cs-polaroid-room .cs-polaroid-innards img { width: 100%; height: 100%; object-fit: cover; }

/* category price table: main-site table voice, single hairline header */
.category-price-table { border: 0 !important; }
.category-price-table-header, .category-price-table .category-price-table-header {
    background: #f9fafb !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #374151 !important;
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.category-price-table .text-primary,
.category-price-table strong,
.category-price-table .category-price-value {
    color: #111827 !important;
}
/* "Includes taxes and fees" notes: quiet gray, wherever they appear */
.cruise-tax-inclusive, .cruise-tax-inclusive.text-primary,
[data-ody-id="CruiseTaxLabel"], .nav-tabs .cruise-tax-inclusive {
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* price rows: content centers vertically (rows are as tall as the Book Now
   button; prices were top-aligned leaving a hole underneath) */
.category-price-table-row .category-price-table-cell {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.category-price-table-row .category-price-table-cell.flex-wrap { flex-direction: row; align-items: center; }
.category-price-table .totalfare-portcharges:empty { display: none; }
.category-price-table-row .w-100.pt-0 { padding-bottom: 0 !important; }

/* room polaroids: strictly square, photos crop to fit */
.cs-polaroid-room .cs-polaroid-innards {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    overflow: hidden;
}
.cs-polaroid-room .cs-polaroid-innards a { display: block !important; width: 100% !important; height: 100% !important; }
.cs-polaroid-room .cs-polaroid-innards img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
}

/* ---- steps 3 & 4: cabin upgrade + payment pages ---- */
/* pricing disclaimers sit on the plain background, no info box */
.alert.alert-secondary {
    background: transparent !important;
    border: 0 !important;
    color: #6b7280 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* passport note: quiet gray note instead of a blue alert */
.alert.alert-primary {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
}
.alert.alert-primary hr { display: none; }
.alert.alert-primary .passanger-names-warning-msg strong { font-weight: 400 !important; }

/* stateroom upgrade table: hairline separators, no zebra stripes */
.table-striped tbody tr:nth-of-type(odd), tr.upgrade-room-box-odd { background: transparent !important; }
.upgrade-room-box .table td, .table-striped td {
    border-top: 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
}
.upgrade-room-box .table thead th, .table-striped thead th {
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* payment schedule: our table-header treatment, not the blue banner */
.payment-header.table-header, .supplier-payment-title-table {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.payment-header .pay-head {
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* current-trip bar on step 4: dark title, our blue total chip */
h4.trip-title {
    font-family: Gabarito, Inter, sans-serif !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
}
.section-trip-total .bg-primary, .trip-total {
    background: #2563eb !important;
    color: #fff !important;
    border-radius: 6px;
}

.payment-header.table-header, .supplier-payment-title-table, .payment-schedule-customer {
    border-left: 0 !important;
}
.category-code { border-radius: 6px !important; font-weight: 700 !important; }

/* ---- v24: live-pass feedback ---- */
/* Continue sits under the form column, not at the far right of the
   full-width form row (the row spans past the docked pricing box) */
@media (min-width: 1200px) {
    form.guest-info-form [data-ody-id="EmailOfficeIDSection"] { max-width: calc(100% - 416px); }
}

/* Continue lands directly under the State field, on the form-field grid:
   identical left edge to the inputs (insets measured against the card
   padding chain per breakpoint), full field-column width on phones like
   the inputs themselves. sheet-foot moves the row inside the form column;
   these selectors match either position. */
.guest-info-form .d-flex.flex-wrap.align-items-start.justify-content-between { justify-content: flex-start !important; }
.guest-info-form .d-flex.flex-wrap.align-items-start.justify-content-between > .col-auto {
    /* sheet-foot measures margin-left to the field grid edge; the holder
       computes narrower than the button, so pack from the left or the
       overflow hangs out the LEFT side (justify-content-end default) */
    order: -1; margin-left: 16px;
    justify-content: flex-start !important;
    width: auto !important; max-width: none !important; }
.guest-info-form .d-flex.flex-wrap.align-items-start.justify-content-between .btn {
    /* proper touch-size primary CTA — the stock button was 140x34, under
       the 44px touch bar on tablets and visually minor for the main action */
    margin-left: 0 !important; white-space: nowrap; min-width: 170px;
    padding: 10px 24px !important; font-weight: 700; }
/* quiet reassurance under the CTA (injected by sheet-foot into the button
   holder, a flex row — full basis puts it on its own line under the button) */
.cs-cta-note { font-size: 12px; color: #6b7280; margin: 8px 0 0; flex: 1 1 100%; }
html.lux .cs-cta-note { color: var(--lx-muted); }
@media (max-width: 767px) {
    /* phones: the CTA spans the field column, same grid as the inputs */
    .guest-info-form .d-flex.flex-wrap.align-items-start.justify-content-between > .col-auto {
        flex: 1 1 100%; margin: 0 16px !important; }
    .guest-info-form .d-flex.flex-wrap.align-items-start.justify-content-between > .col-auto > div { flex: 1 1 100%; }
    .guest-info-form .d-flex.flex-wrap.align-items-start.justify-content-between .btn { width: 100%; }
}

/* "Includes taxes and fees" hangs below the pricing box, not inside it */
[data-ody-id="PricingFrom"] .border.rounded {
    position: relative;
    overflow: visible !important;
    margin-bottom: 2.25rem !important;
}
[data-ody-id="PricingFrom"] .package-prices .text-center:first-child .sailing-category-label { border-top-left-radius: .75rem; }
[data-ody-id="PricingFrom"] .package-prices .text-center:last-child .sailing-category-label { border-top-right-radius: .75rem; }
[data-ody-id="PricingFrom"] .cruise-tax-inclusive {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 8px 0 0 !important;
    color: #6b7280 !important;
    font-size: 12px !important;
}
[data-ody-id="PricingFrom"] .cruise-tax-inclusive .fw-semibold { font-weight: 400 !important; }

/* step 4, Lux: payment page leftovers measured on the real DOM. The white
   .loadmask overlays flash gray-on-ink bands while sections load; the fare
   table headers and the total-due row keep hard-set light grays; the button
   band under the passenger forms and the page header container stay white. */
html.lux .loadmask { background: var(--lx-ink) !important; }
html.lux .fare-title, html.lux th.fare-title {
    background: var(--lx-band) !important; color: var(--lx-muted) !important; border-color: var(--lx-line) !important; }
html.lux tr.payment-total-due, html.lux tr.payment-total-due td {
    background: var(--lx-band) !important; color: var(--lx-gold-lt) !important; }
html.lux .card-body-footer { background: var(--lx-card) !important; }
html.lux .client-header { background: var(--lx-ink) !important; }

/* step 3, Lux: deck plan section. Bootstrap paints each legend row white
   itself (.list-group-item), so the card override doesn't reach them; the
   symbol glyphs are line-supplied images (often black) so they sit on a
   small white chip; the deck diagram arrives as a background-image GIF with
   a transparent canvas — unreadable over ink without a white plate. */
html.lux .list-group-item {
    background: var(--lx-card) !important; color: var(--lx-cream) !important; border-color: var(--lx-line-soft) !important; }
html.lux .list-group-item img { background: #fff; border-radius: 4px; padding: 2px; }
html.lux #divDeckPlanMain, html.lux #divDeckPlanMainSmall {
    background-color: #fff; border-radius: 8px; }

/* phones, legacy steps: audit fixes. The sticky title card pinned 196px
   (~29% of a 667px viewport) over the upgrade list; the Price Details table
   clipped its TOTAL DUE column inside an overflow:hidden popup; and the
   guarantee row squeezed its description to 1-3 words per line. */
@media (max-width: 640px) {
    .card.card-material.sticky-top { position: static !important; }
    .trip-price-popup { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .trip-price-popup .table-responsive { overflow-x: auto !important; }
    .section-select-stateroom tr { display: flex; flex-wrap: wrap; align-items: center; }
    .section-select-stateroom td { flex: 1 1 100%; width: auto !important; }
    .section-select-stateroom td:last-child { flex: 0 0 auto; }
}

/* step 3: stateroom price reads as plain text, no card chrome */
.section-stateroom-price .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: .75rem !important;
}
.section-stateroom-price .card-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.section-stateroom-price .card-body { padding: 4px 0 0 !important; }
.section-stateroom-price .stateroom-cabin-price {
    color: #111827 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}
.section-stateroom-price [data-ody-id="CabinPageTax"] { font-weight: 400 !important; }

/* ============================================================================
   LUX variant — the dark ink/champagne-gold version of this skin, activated by
   html.lux (sheet-head sets it when the booking arrives with ?lux=1, persisted
   for the session). Mirrors the main-site Lux theme so a Lux booking keeps the
   look through every step. Scoped to html.lux; normal bookings are untouched.
   ink #14110c · card #211c14 · line #3a3123 · gold #c6a45c · gold-lt #dcc088
   · cream #ece5d8 · muted #9a8f7a
   ============================================================================ */

/* base surfaces */
/* one palette, shared conceptually with views/lux_theme.mustache (--lx-*) */
html.lux {
    --lx-ink: #14110c;
    --lx-card: #211c14;
    --lx-band: #1a160f;
    --lx-line: #3a3123;
    --lx-line-soft: #2c2519;
    --lx-gold: #c6a45c;
    --lx-gold-lt: #dcc088;
    --lx-cream: #ece5d8;
    --lx-muted: #9a8f7a;
    --lx-field: #171309;
}
html.lux body { background: var(--lx-ink) !important; color: var(--lx-cream); }
html.lux .card, html.lux .modal-content, html.lux .alert, html.lux .list-group, html.lux .border.rounded {
    background: var(--lx-card) !important; border-color: var(--lx-line) !important; color: var(--lx-cream); }
html.lux .card { box-shadow: 0 20px 50px -24px rgba(0,0,0,.9) !important; }
html.lux .card-header, html.lux .card-header.bg-secondary, html.lux .bg-secondary {
    background-color: var(--lx-band) !important; color: var(--lx-cream) !important; border-bottom-color: var(--lx-line) !important; }
html.lux .card-header .text-white, html.lux .card-header.text-white, html.lux .bg-secondary .text-white { color: var(--lx-cream) !important; }
html.lux .card-header .pointer, html.lux .card-header i { color: var(--lx-muted) !important; }

/* headings -> cream (clear the webkit gradient fill first) */
html.lux h1, html.lux h2, html.lux h3, html.lux .h1, html.lux .h2, html.lux .h3,
html.lux .cruise-details-package-title, html.lux .breadcrumb-cruise-title,
html.lux [data-ody-id="PackageDetailsV2Card"] h4, html.lux .package-detail h4,
html.lux h3.cruise-details-package-title, html.lux .cruise-details-package-title.text-gradient {
    color: var(--lx-cream) !important; -webkit-text-fill-color: var(--lx-cream) !important; }
html.lux [data-ody-id="PackageDetailsV2Card"] h4 .text-primary,
html.lux [data-ody-id="PackageDetailsV2Card"] h4.text-primary,
html.lux .guest-info-form .text-primary, html.lux form .text-primary.font-weight-bold,
html.lux h6.text-primary, html.lux h5.text-primary { color: var(--lx-cream) !important; }

/* links + primary actions -> gold */
html.lux a { color: var(--lx-gold-lt); }
html.lux a:hover { color: var(--lx-cream); }
html.lux .btn-primary, html.lux .badge-primary {
    background-color: var(--lx-gold) !important; border-color: var(--lx-gold) !important; color: var(--lx-ink) !important; }
html.lux .btn-primary:hover, html.lux .btn-primary:focus, html.lux .btn-primary:active {
    background-color: var(--lx-gold-lt) !important; border-color: var(--lx-gold-lt) !important; color: var(--lx-ink) !important; }
html.lux .bg-primary { background-color: var(--lx-gold) !important; color: var(--lx-ink) !important; }
html.lux .text-primary { color: var(--lx-gold-lt) !important; }
html.lux .border-primary { border-color: var(--lx-gold) !important; }
html.lux .btn-outline-primary { color: var(--lx-gold-lt) !important; border-color: var(--lx-gold) !important; }
html.lux .btn-outline-primary:hover { background-color: var(--lx-gold) !important; color: var(--lx-ink) !important; }
html.lux .btn-outline-secondary { color: var(--lx-gold-lt) !important; border-color: var(--lx-line) !important; }
html.lux .btn-outline-secondary:hover { background-color: var(--lx-gold) !important; border-color: var(--lx-gold) !important; color: var(--lx-ink) !important; }

/* forms — cover the bare widgets too, not just .form-control: the legacy
   steps and third-party widgets (select2, intl-tel-input) render plain
   selects/inputs and their own panels */
html.lux .form-control, html.lux .custom-select, html.lux select.form-control,
html.lux select, html.lux textarea,
html.lux input[type="text"], html.lux input[type="email"], html.lux input[type="tel"],
html.lux input[type="number"], html.lux input[type="password"], html.lux input[type="search"] {
    background: var(--lx-field) !important; border-color: var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux select option { background: var(--lx-field); color: var(--lx-cream); }
html.lux ::placeholder { color: var(--lx-muted) !important; opacity: 1; }
html.lux .form-control:focus, html.lux .custom-select:focus,
html.lux select:focus, html.lux textarea:focus, html.lux input:focus {
    border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px rgba(198,164,92,.25) !important;
    outline: none !important; }
html.lux input[type="checkbox"], html.lux input[type="radio"] { accent-color: var(--lx-gold); }

/* select2 (Country / State and friends): the widget paints its own spans and
   dropdown panel — default is a white panel and a faded-black placeholder,
   both unreadable on ink */
html.lux .select2-selection,
html.lux .select2-container--default .select2-selection--single,
html.lux .select2-container--default .select2-selection--multiple {
    background: var(--lx-field) !important; border: 1px solid var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux .select2-selection__rendered,
html.lux .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--lx-cream) !important; }
html.lux .select2-selection__placeholder,
html.lux .select2-container--default .select2-selection__placeholder {
    color: var(--lx-muted) !important; }
html.lux .select2-selection__clear { color: var(--lx-muted) !important; }
html.lux .select2-selection__arrow b { border-top-color: var(--lx-muted) !important; }
html.lux .select2-container--open .select2-selection__arrow b { border-bottom-color: var(--lx-muted) !important; }
html.lux .select2-dropdown {
    background: var(--lx-card) !important; border-color: var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux .select2-search__field,
html.lux .select2-search--dropdown .select2-search__field {
    background: var(--lx-field) !important; border: 1px solid var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux .select2-results__option { color: var(--lx-cream); background: transparent; }
html.lux .select2-results__option--highlighted,
html.lux .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--lx-gold) !important; color: var(--lx-ink) !important; }
html.lux .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background: var(--lx-band) !important; }

/* intl-tel-input (phone country picker on the payment step) */
html.lux .iti__country-list {
    background: var(--lx-card) !important; border-color: var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux .iti__country.iti__highlight { background: var(--lx-band) !important; }
html.lux .iti__dial-code { color: var(--lx-muted) !important; }
html.lux .iti__divider { border-bottom-color: var(--lx-line) !important; }

/* ng-select (other swift dropdowns) */
html.lux .ng-select .ng-select-container {
    background: var(--lx-field) !important; border-color: var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux .ng-select .ng-placeholder { color: var(--lx-muted) !important; }
html.lux .ng-dropdown-panel, html.lux .ng-dropdown-panel .ng-option {
    background: var(--lx-card) !important; border-color: var(--lx-line) !important; color: var(--lx-cream) !important; }
html.lux .ng-dropdown-panel .ng-option-marked { background: var(--lx-band) !important; }
html.lux .ng-dropdown-panel .ng-option-selected { background: var(--lx-gold) !important; color: var(--lx-ink) !important; }

/* breadcrumbs */
html.lux .breadcrumb a.breadcrumb-item { color: var(--lx-gold-lt) !important; }
html.lux .breadcrumb .dir-ltr { color: var(--lx-muted); }

/* step pills */
html.lux .checkout-step { background: var(--lx-card) !important; border-color: var(--lx-line) !important; }
html.lux .checkout-step .checkout-step-inner:not(.rounded-circle) { color: var(--lx-muted) !important; }
html.lux .checkout-step.current { background: var(--lx-gold) !important; border-color: var(--lx-gold) !important; }
html.lux .checkout-step.current .checkout-step-inner:not(.rounded-circle),
html.lux .checkout-step.current span { color: var(--lx-ink) !important; }

/* price table */
html.lux [data-ody-id="PricingFrom"] .border.rounded { border-color: var(--lx-line) !important; box-shadow: none !important; }
/* the inner .package-prices carries its own white background with square
   corners — with overflow:visible on the rounded outer box it pokes out at
   the corners (and below 1200px it paints the whole cell area white) */
html.lux [data-ody-id="PricingFrom"] .package-prices { background: var(--lx-card) !important; border-radius: .75rem; }
html.lux .packageprices-whitebg { background: var(--lx-card) !important; }
html.lux [data-ody-id="PricingFrom"] .package-prices .text-center { border-right-color: var(--lx-line); }
html.lux [data-ody-id="PricingFrom"] .sailing-category-label {
    background: var(--lx-band) !important; color: var(--lx-muted) !important; border-bottom-color: var(--lx-line) !important; }
html.lux [data-ody-id="PricingFrom"] .sailing-category-price { color: var(--lx-gold-lt) !important; }
html.lux [data-ody-id="PricingFrom"] .cs-per-day { color: var(--lx-muted) !important; }

/* hero: dim the map, dark top fade, cream nav, monochrome logos, ink wave.
   Only the FILL path gets the ink fill — the stroke curve keeps its original
   subtle blue-gradient sheen (forcing a fill onto it painted a heavy band). */
html.lux .cs-hero-map { background-color: #0f0d09 !important; filter: brightness(.82) sepia(.1) saturate(.95) contrast(1.05); }
/* the pale watercolor map is the header's backdrop: dark marks read far
   better on it than the old white-inverted set (2026-07-14 feedback) */
html.lux .cs-hero-topfade { background: none !important; }
html.lux .cs-hero-nav a { color: var(--lx-ink) !important; font-weight: 600; }
html.lux .cs-hero-nav a:hover { color: #6d5a33 !important; }
html.lux .cs-hero-mark, html.lux .cs-hero-word, html.lux .cs-hero-line-logo { filter: brightness(0); }
html.lux .cs-wave-svg path[fill="#f9fafb"] { fill: var(--lx-ink) !important; }

/* misc content text that was hard-set dark */
html.lux .bonus-text-primary, html.lux .text-price-color { color: var(--lx-cream) !important; }

/* ---- legacy steps 2-4 (nav-stepper pages), measured on the real DOM ---- */
/* sticky title card: was a #f9fafb band (its 3-class selector outranks the
   generic .card override, so name it exactly) */
html.lux .card.card-material.sticky-top { background: var(--lx-band) !important; }
/* legacy stepper pills */
html.lux .nav-stepper .nav-item { background: var(--lx-card) !important; border-color: var(--lx-line) !important; }
html.lux .nav-stepper .nav-link { color: var(--lx-muted) !important; }
html.lux .nav-stepper .nav-item.active-nav-item { background: var(--lx-gold) !important; border-color: var(--lx-gold) !important; }
html.lux .nav-stepper .nav-item.active-nav-item .nav-link { color: var(--lx-ink) !important; }
/* legacy page titles */
html.lux h1.page-title, html.lux .cruise-details-title { color: var(--lx-cream) !important; }
html.lux [data-ody-id="BreadcrumbSubtitle"], html.lux h5[data-ody-id="BreadcrumbSubtitle"] { color: var(--lx-muted) !important; }
/* category tabs (Inside / Balcony / Suite): cream labels, gold underline */
html.lux .nav-item .nav-link[data-toggle="tab"] a { color: var(--lx-cream) !important; }
html.lux .nav-item .nav-link.active[data-toggle="tab"],
html.lux .nav-item .nav-link[data-toggle="tab"].active,
html.lux .nav-tabs .nav-link.active, html.lux .nav-tabs .nav-item .nav-link.active {
    border-bottom-color: var(--lx-gold) !important; }
html.lux .cruise-tax-inclusive, html.lux [data-ody-id="CruiseTaxLabel"],
html.lux .nav-tabs .cruise-tax-inclusive { color: var(--lx-muted) !important; }
/* category price table: dark header band, cream/gold values */
html.lux .category-price-table-header, html.lux .category-price-table .category-price-table-header {
    background: var(--lx-band) !important; color: var(--lx-muted) !important; border-bottom-color: var(--lx-line) !important; }
/* mobile price-card label bands ("Average per Guest" / "Total Cruise Rate")
   kept the Odysseus #f2f2f2 band under inherited cream text — 1.12:1 */
html.lux .category-price-table-cell-header, html.lux label.category-price-table-cell-header {
    background: var(--lx-band) !important; color: var(--lx-muted) !important; border-color: var(--lx-line) !important; }
/* "LIMITED AVAILABILITY" scarcity banners were stock light-blue stripes —
   the element is .show-cabinsCount, not a Bootstrap .alert */
html.lux .alert-info, html.lux .alert.alert-info,
html.lux .show-cabinsCount, html.lux .show-cabinscount {
    background: var(--lx-band) !important; border-color: var(--lx-line) !important; color: var(--lx-gold-lt) !important; }
/* step-4 accordion number chips: white disc + Odysseus-blue numeral */
html.lux span.step-number { background: var(--lx-gold) !important; color: var(--lx-ink) !important; }
/* image placeholder container flashes #f5f5f5 if a thumbnail is slow/fails */
html.lux .dummy-img, html.lux .embed-responsive.dummy-img, html.lux .img-container.dummy-img {
    background: var(--lx-card) !important; }
/* required-field asterisks were dark red on ink (lum diff 53) */
html.lux form .text-danger, html.lux label .text-danger, html.lux .required-star,
html.lux form span[style*="color: red"], html.lux form span[style*="color:red"] {
    color: #ef8f88 !important; }
/* visible focus for keyboard users on the dark theme */
html.lux .btn:focus, html.lux .btn:focus-visible {
    outline: none !important; box-shadow: 0 0 0 3px rgba(198,164,92,.55) !important; }
html.lux .select2-container--focus .select2-selection,
html.lux .select2-selection:focus, html.lux .select2-selection:focus-visible {
    outline: none !important; border-color: var(--lx-gold) !important;
    box-shadow: 0 0 0 3px rgba(198,164,92,.4) !important; }
html.lux .cs-seg-btn:focus-visible { outline: 2px solid var(--lx-gold); outline-offset: -2px; }
html.lux .category-price-table .text-primary, html.lux .category-price-table strong,
html.lux .category-price-table .category-price-value { color: var(--lx-gold-lt) !important; }
/* disclaimers + quiet notes: warm muted, not cool gray */
html.lux .disclaimer, html.lux .disclaimer.cruise-pricing-note,
html.lux [data-ody-id="DisclaimerTopCruisePricingNote"],
html.lux .disclaimer b, html.lux .disclaimer strong,
html.lux .alert.alert-secondary { color: var(--lx-muted) !important; }
/* passport / info notes */
html.lux .alert.alert-primary { background: var(--lx-band) !important; border-color: var(--lx-line) !important; color: var(--lx-cream) !important; }
/* form labels + mobile fact rows */
html.lux form label, html.lux .guest-info-form label { color: var(--lx-cream) !important; }
html.lux .cs-facts-mobile, html.lux .cs-facts-mobile span, html.lux .cs-facts-mobile div { color: var(--lx-cream) !important; }
html.lux .img-caption { color: var(--lx-muted) !important; }
/* guest-count segmented control */
html.lux .cs-seg { background: var(--lx-field) !important; border-color: var(--lx-line) !important; }
html.lux .cs-seg-btn { background: var(--lx-field); color: var(--lx-muted); border-right-color: var(--lx-line); }
html.lux .cs-seg-btn.active { background: var(--lx-gold); color: var(--lx-ink); }
/* steps 3 & 4: upgrade table + payment schedule header bands */
html.lux .upgrade-room-box .table thead th, html.lux .table-striped thead th {
    background: var(--lx-band) !important; color: var(--lx-muted) !important; border-bottom-color: var(--lx-line) !important; }
html.lux .upgrade-room-box .table td, html.lux .table-striped td { border-bottom-color: var(--lx-line-soft) !important; color: var(--lx-cream); }
html.lux .payment-header.table-header, html.lux .supplier-payment-title-table {
    background: var(--lx-band) !important; color: var(--lx-muted) !important; border-bottom-color: var(--lx-line) !important; }
html.lux .payment-header .pay-head { color: var(--lx-muted) !important; }
html.lux h4.trip-title { color: var(--lx-cream) !important; }
html.lux .section-trip-total .bg-primary, html.lux .trip-total { background: var(--lx-gold) !important; color: var(--lx-ink) !important; }
html.lux .section-stateroom-price .card-header { color: var(--lx-muted) !important; }
html.lux .section-stateroom-price .stateroom-cabin-price { color: var(--lx-gold-lt) !important; }
/* mobile full-bleed: the white section paint becomes ink */
@media (max-width: 767px) {
    html.lux .landing-right-section, html.lux [data-ody-id="PackageDetailsV2Card"],
    html.lux .package-details, html.lux .main-container, html.lux .display-ordering,
    html.lux .display-ordering .max-width-onclick { background: var(--lx-ink) !important; }
    html.lux .display-ordering .card { border-top-color: var(--lx-line-soft) !important; }
    html.lux [data-ody-id="PricingFrom"] .border.rounded { background: var(--lx-card) !important; }
}