/* =============================================================
   Elevida Luxury Journeys — Brand override for Swift v2 engine
   Verified against the live results page at
   https://book.travelplanners.com/swift/cruise?siid=1425221

   Engine: Bootstrap 4 + Angular + Odysol (odi-*) icon font.
   Load AFTER appcore-style-bundle and theme-vODY css.

   Palette:  mocha (#4B3621) + gold (#D4AF37) + cream (#F5F5DC)
   Fonts:    Playfair Display + Cormorant Garamond + Montserrat
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --mocha:        #4B3621;
    --mocha-light:  #5C4433;
    --mocha-dark:   #3A2A19;
    --mocha-deep:   #2E2015;
    --panel:        #3F2E1C;
    --gold:         #D4AF37;
    --gold-light:   #E0C565;
    --gold-dark:    #B8951F;
    --cream:        #F5F5DC;
    --cream-dim:    rgba(245,245,220,.78);
    --cream-mute:   rgba(245,245,220,.55);
    --hairline:     rgba(212,175,55,.18);
    --hairline-mid: rgba(212,175,55,.35);
    --hairline-strong: rgba(212,175,55,.5);
}

/* ---- Page foundation ---------------------------------------- */
html, body,
body.results-page,
body[data-ody-template] {
    background: var(--mocha-deep) !important;
    color: var(--cream) !important;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
    line-height: 1.55;
}

a, a:link, a:visited { color: var(--gold) !important; text-decoration: none; }
a:hover, a:focus     { color: var(--gold-light) !important; }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--cream) !important;
    font-weight: 600 !important;
}

.card, .panel, .modal-content {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    color: var(--cream) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}

hr, .divider { border-color: var(--hairline) !important; }

/* ---- Bootstrap utility overrides ---------------------------- */
.bg-primary    { background-color: var(--mocha-light) !important; color: var(--cream) !important; }
.text-primary  { color: var(--gold) !important; }
.border-primary{ border-color: var(--gold) !important; }
.bg-white      { background-color: var(--mocha) !important; color: var(--cream) !important; }
.text-white    { color: var(--cream) !important; }
.text-muted    { color: var(--cream-mute) !important; }
.text-dark     { color: var(--cream) !important; }
.bg-light,
.bg-whitesmoke { background-color: var(--mocha-dark) !important; color: var(--cream) !important; }
.bg-dark       { background-color: var(--mocha-deep) !important; }

/* ---- Top header / navbar ----------------------------------- */
.navbar,
.navbar-default,
.navbar-header-placeholder,
nav.navbar {
    background: var(--mocha-deep) !important;
    border-bottom: 1px solid var(--hairline) !important;
    border-color: var(--hairline) !important;
    box-shadow: none !important;
    padding: 14px 30px !important;
}
.navbar img[alt*="Elevida"] { max-height: 56px; width: auto; }
.navbar a, .navbar .nav-link { color: var(--gold) !important; }
.navbar a[href^="tel:"],
.navbar a[href^="mailto:"] { color: var(--gold) !important; font-weight: 600; }
.navbar .navbar-nav .nav-item,
.navbar ul li { color: var(--cream-dim) !important; }

/* ---- "Modify Your Search" bar (was solid blue) ------------- */
.custom-modifysearchtext,
.custom-modifysearchtext.container-fluid {
    background: var(--mocha-light) !important;
    border-top: 1px solid var(--hairline-mid) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 12px 30px !important;
}
.custom-modifysearchtext span,
.custom-modifysearchtext .fs18 {
    color: var(--gold) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    font-size: 16px !important;
    letter-spacing: .03em;
}
.custom-modifysearchtext .odi { color: var(--gold) !important; }

/* ---- Filter sidebar ---------------------------------------- */
.filter-panel {
    background: var(--mocha-dark) !important;
    border-right: 1px solid var(--hairline) !important;
    padding: 12px !important;
}

/* The "FILTER YOUR SEARCH" pill at the top — gold chip */
[data-ody-id="FilterSearchlabel"],
[data-ody-id="FilterSearchlabel"].card,
[data-ody-id="FilterSearchlabel"].card.bg-primary {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}
[data-ody-id="FilterSearchlabel"] .panel-title,
[data-ody-id="FilterSearchlabel"] .panel-title *,
[data-ody-id="FilterSearchlabel"] .text-white,
[data-ody-id="FilterSearchlabel"] .odi {
    color: var(--mocha-deep) !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
}

/* Each filter section card — transparent, gold hairline */
.filter-panel .card,
filter-content-component.card,
.filter-panel .filters-section .card {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 2px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.filter-panel .card:hover,
filter-content-component.card:hover {
    background: rgba(212,175,55,.05) !important;
    border-color: rgba(212,175,55,.45) !important;
}

.filter-panel .card-heading,
filter-content-component .card-heading {
    padding: 8px 10px !important;
    background: transparent !important;
}
.filter-panel .panel-title {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* The clickable row inside each filter card — engine defaults to dark text */
.filter-panel .panel-title a,
.filter-panel .panel-title > a,
.filter-panel a[role="button"],
filter-content-component a {
    color: var(--cream) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
    display: flex !important;
}

/* Label span — strip text-truncate so the full label shows */
.filter-panel .panel-title a span,
.filter-panel a[role="button"] span,
.filter-panel a .flex-spacer.text-truncate {
    color: var(--cream) !important;
    font-size: 13px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

/* Icons in the filter rail */
.filter-panel .odi,
.filter-panel .panel-icon,
.filter-panel .text-primary,
.filter-panel a .odi {
    color: var(--gold) !important;
    opacity: 1 !important;
}
.filter-panel .odi.fs20 { font-size: 16px !important; }
.filter-panel .odi.fs24 { font-size: 18px !important; }

.filter-panel .panel-body {
    background: transparent !important;
    color: var(--cream) !important;
}
.filter-panel .collapse,
.filter-panel .collapsing { background: transparent !important; }

.filter-panel .form-check-label,
.filter-panel .custom-control-label,
.filter-panel label { color: var(--cream-dim) !important; }
.filter-panel .form-check-input:checked,
.filter-panel .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

/* Expanded filter option chips (label.custom-checkbox inside each
   section — Sailing Dates, Cruise length, Cruise Line, etc.). The engine
   paints the label near-white (rgb(245,245,245)) when unchecked, so the
   cream text vanished (white-on-white), and bright blue (rgb(9,120,189))
   when checked. Recolour: dark mocha chip + cream text when unchecked,
   gold chip + dark text when checked. */
.filter-panel label.custom-checkbox,
.filter-panel .filter-item label.custom-checkbox {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 3px !important;
    color: var(--cream-dim) !important;
}
.filter-panel label.custom-checkbox .custom-control-label,
.filter-panel label.custom-checkbox span { color: var(--cream-dim) !important; }
.filter-panel label.custom-checkbox:hover {
    background: var(--mocha-light) !important;
    border-color: var(--hairline-strong) !important;
}
/* Checked option — engine turns it blue; make it gold with dark text */
.filter-panel label.custom-checkbox:has(input:checked) {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--mocha-deep) !important;
}
.filter-panel label.custom-checkbox:has(input:checked) .custom-control-label,
.filter-panel label.custom-checkbox:has(input:checked) span {
    color: var(--mocha-deep) !important;
}

/* The quick-action squares at the bottom of the filter rail */
.filter-panel .btn,
.filter-panel button {
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--gold) !important;
    border-radius: 2px !important;
}
.filter-panel .btn:hover { background: rgba(212,175,55,.08) !important; }

/* ---- Sort-by bar / results toolbar ------------------------- */
.sort-by-section,
.sort-by-section.card {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    color: var(--cream-dim) !important;
    padding: 14px 18px !important;
}
.sort-by-section strong,
.float-right.order-1.text-nowrap strong {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600;
}
.sort-by-section label, .sort-by-section span { color: var(--cream-dim) !important; }

/* select2 (Sort by dropdown) */
.select2-container--default .select2-selection,
.select2-selection--single,
.select2-selection--multiple {
    background: var(--mocha-dark) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px !important;
    min-height: 34px;
    padding: 4px 6px !important;
}
.select2-container--default .select2-selection__rendered,
.select2-selection__choice__display { color: var(--cream) !important; }
.select2-selection__choice {
    background: rgba(212,175,55,.16) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline-mid) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--gold) transparent transparent transparent !important;
}
.select2-dropdown {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--cream) !important;
}
.select2-results__option { color: var(--cream) !important; }
.select2-results__option--highlighted { background: var(--gold) !important; color: var(--mocha-deep) !important; }

/* ---- Buttons (Bootstrap btn classes) ----------------------- */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--mocha-deep) !important;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px !important;
    border-radius: 2px !important;
    padding: 9px 22px !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--gold-light) !important;
    border-color: var(--gold-light) !important;
    color: var(--mocha-deep) !important;
    box-shadow: none !important;
}

.btn-outline-primary,
.btn.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--hairline-strong) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px !important;
    border-radius: 2px !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: rgba(212,175,55,.08) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: none !important;
}
.btn-outline-primary.bg-white { background-color: transparent !important; color: var(--gold) !important; }

.btn-default,
.btn.btn-default,
.btn-outline-default {
    background-color: transparent !important;
    border: 1px solid var(--hairline) !important;
    color: var(--cream-dim) !important;
}
.btn-default:hover, .btn-outline-default:hover {
    background-color: rgba(212,175,55,.06) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

.btn-link, a.btn-link { color: var(--gold) !important; }

/* ---- Cruise result card ------------------------------------ */
.card.cruise-item-card,
.cruise-item-card {
    background: var(--panel) !important;
    border: 1px solid rgba(212,175,55,.2) !important;
    border-radius: 4px !important;
    margin-bottom: 22px !important;
    overflow: hidden;
}
.cruise-item-card .card-header,
.cruise-item-card .panel-heading {
    background: rgba(30,22,14,.4) !important;
    border-bottom: 1px solid var(--hairline) !important;
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.cruise-title,
.cruise-title.clearfix,
h4.cruise-title {
    font-family: 'Playfair Display', serif !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
}

/* Cruise line name (e.g. AmaWaterways — engine's accent red) */
.cruise-line-name,
.cruise-item-card .cruise-line,
.cruise-item-card .supplier-name {
    font-family: 'Playfair Display', serif !important;
    color: #D76B5C !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
}
.cruise-item-card .ship-name { color: var(--cream) !important; }
.cruise-item-card a[href*="javascript"] { color: var(--gold) !important; }
a[role="button"],
a[href="javascript:void(0);"],
a[href="javascript:void(0)"] { color: var(--gold) !important; }

/* "Lowest Rate" inset box */
.lowest-rate-card,
[data-ody-id*="LowestRate"],
.lowest-rate, .rate-box,
.cruise-lowest-prices,
.cruise-lowest-prices .low-rate-list,
.low-rate-list,
.low-rate-list li { color: var(--cream) !important; background: transparent !important; }

.low-rate-list label {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.low-rate-list li span,
.low-rate-list li span span,
.cruise-lowest-prices span,
.cruise-lowest-prices li span {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.low-rate-list li > span { font-size: 14px !important; }

/* The big "From $X / per night / Includes taxes" block */
.cruise-prices,
.cruise-prices-details,
.cruise-min-price-section,
.cruise-item-min-price { color: var(--cream) !important; }
.cruise-prices-details,
[data-ody-id="CruisePricesDetails"] {
    background: rgba(30,22,14,.45) !important;
    border-left: 1px solid var(--hairline) !important;
    padding: 16px 18px !important;
}
[data-ody-id="PricingFromText"] {
    display: block;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--cream-mute) !important;
}
.cruise-price, .cruise-min-price, .cruise-low-price,
.text-price-color,
span.cruise-low-price,
.cruise-price.text-price-color,
.cruise-prices .cruise-price,
.cruise-prices-details .cruise-price,
[data-ody-id="CruisePricesDetails"] .cruise-price,
[data-ody-id="CruisePricesDetails"] span {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
}
.cruise-low-price,
.cruise-min-price,
.cruise-prices-details .cruise-low-price {
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.1;
}
.cruise-tax-inclusive,
.fw-semibold.text-primary.cruise-tax-inclusive,
.cruise-item-min-price .text-primary,
.cruise-item-min-price .cruise-tax-inclusive {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500 !important;
}
.cruise-price-per-night,
.cruise-prices .per-night,
.price-per-night,
.cruise-prices-details small,
.cruise-prices-details .text-muted {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: var(--cream-mute) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ---- Outside / Balcony / Suite tabs above the date rows ---- */
.cruise-sailing-dates,
.cruise-sailing-dates-container,
.cruise-sailing-dates .tab-content { background: rgba(30,22,14,.35) !important; }
.tab-pane.cruise-sailing-dates-container { background: transparent !important; }

.cruise-sailing-dates .nav.nav-tabs,
.cruise-sailing-dates .nav-tabs,
.cruise-item-card .nav.nav-tabs,
.cruise-item-card .nav-tabs,
ul.nav.nav-tabs {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cruise-sailing-dates .nav-tabs .nav-link,
.cruise-item-card .nav-tabs .nav-link,
ul.nav.nav-tabs > li > .nav-link,
ul.nav.nav-tabs .nav-item .nav-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: var(--cream-dim) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 11px 18px !important;
    margin: 0 !important;
}
.cruise-sailing-dates .nav-tabs .nav-link:hover,
.cruise-item-card .nav-tabs .nav-link:hover,
ul.nav.nav-tabs .nav-link:hover {
    background: rgba(212,175,55,.06) !important;
    color: var(--gold) !important;
    border-color: transparent !important;
}
.cruise-sailing-dates .nav-tabs .nav-link.active,
.cruise-item-card .nav-tabs .nav-link.active,
ul.nav.nav-tabs .nav-link.active,
ul.nav.nav-tabs .nav-item.active .nav-link {
    background: var(--mocha) !important;
    color: var(--gold) !important;
    border: 1px solid var(--hairline) !important;
    border-bottom: 2px solid var(--gold) !important;
}

/* Each date row (ul.cruise-result-list) — used in compact grid view */
ul.cruise-result-list,
.cruise-result-list {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(212,175,55,.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    color: var(--cream) !important;
}
ul.cruise-result-list li { font-size: 13px !important; color: var(--cream) !important; }
ul.cruise-result-list li[data-ody-id="PriceDisplayType"] span,
ul.cruise-result-list li.text-center span {
    color: var(--cream) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 14px !important;
}

/* ---- Date table (LIST view: DATE / OUTSIDE / BALCONY / SUITE header) */
.cruise-item-card .table,
.cruise-sailing-dates table,
.cruise-sailing-dates-container table,
table.table.striped,
.table.striped {
    background: transparent !important;
    color: var(--cream) !important;
    margin: 0 !important;
    border: none !important;
}
.table-fixed-inner-container,
.cruise-sailing-dates-container.table-responsive,
.table-responsive { background: transparent !important; }

/* Column header row */
.cruise-item-card .table thead,
.cruise-sailing-dates table thead,
table.table.striped thead {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
.cruise-item-card .table thead tr,
.cruise-sailing-dates table thead tr,
table.table.striped thead tr {
    background: transparent !important;
    border: none !important;
}
.cruise-item-card .table thead th,
.cruise-sailing-dates table thead th,
table.table.striped thead th,
.table.striped th {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    padding: 11px 12px !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.cruise-item-card .table thead th.sailing-info-cell,
table.table.striped thead th.sailing-info-cell { background: var(--mocha-dark) !important; }
.cruise-item-card .table thead th.w-10:not(.text-center),
table.table.striped thead th.w-10:not(.text-center) { text-align: left !important; }
.cruise-item-card .table thead th[data-ody-id="bonusOfferSectionHeader"],
table.table.striped thead th[data-ody-id="bonusOfferSectionHeader"] {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
}
.cruise-item-card .table thead th .icon-bonus-offer,
.cruise-item-card .table thead th .bonus-text-primary { color: var(--gold) !important; }

/* Body rows + striping */
.cruise-item-card .table tbody tr,
.cruise-sailing-dates table tbody tr,
table.table.striped tbody tr {
    background: transparent !important;
    border-top: 1px solid rgba(212,175,55,.1) !important;
}
.cruise-item-card .table tbody tr.odd,
table.table.striped tbody tr.odd { background: rgba(212,175,55,.03) !important; }
.cruise-item-card .table tbody tr.even,
table.table.striped tbody tr.even { background: transparent !important; }
.cruise-item-card .table tbody tr:hover,
table.table.striped tbody tr:hover { background: rgba(212,175,55,.06) !important; }

/* Body cells */
.cruise-item-card .table tbody td,
.cruise-sailing-dates table tbody td,
table.table.striped tbody td,
.table.striped td {
    background: transparent !important;
    color: var(--cream) !important;
    border: none !important;
    padding: 12px 12px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
}
.cruise-item-card .table tbody td.text-center,
table.table.striped tbody td.text-center {
    color: var(--cream) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* First column (sailing-info-cell with mini buttons) */
.cruise-item-card .table .sailing-info-cell,
table.table.striped .sailing-info-cell { background: transparent !important; }
.cruise-item-card .table .sailing-info-cell .btn,
table.table.striped .sailing-info-cell .btn {
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--gold) !important;
}

/* Continue button cell (last column) */
.cruise-item-card .table tbody td:last-child .btn.btn-primary,
table.table.striped tbody td:last-child .btn.btn-primary {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
}

/* Continue button cell */
.text-right.grid-view-button,
.grid-view-button { text-align: right !important; }
.grid-view-button .btn.btn-primary {
    background-color: var(--gold) !important;
    color: var(--mocha-deep) !important;
}

/* Bonus Offers strip — engine uses .bg-whitesmoke */
.bonus-offers-label,
.bonus-offers-label.card-header.bg-whitesmoke {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.bonus-text-primary { color: var(--gold) !important; }

/* Agency Deals strip */
.agency-deals,
.cruise-item-card ul + ul li,
.cruise-item-card .agency-deals {
    color: var(--cream-mute) !important;
    border-top: 1px solid rgba(212,175,55,.1);
    padding: 11px 18px !important;
}

/* Image collage cell */
.cruise-image-section,
.cruise-image-section img { background: transparent !important; }
.cruise-image-section .cruise-image-overlay,
.cruise-image-section .cruise-title-overlay {
    background: linear-gradient(0deg, rgba(30,22,14,.85), transparent 55%) !important;
    color: var(--cream) !important;
}

/* ---- Results-page disclaimer (was white block at the bottom) */
.disclaimer,
.disclaimer.mb-3,
[data-ody-id="ResultsPriceDisclaimer"] {
    background: rgba(212,175,55,.06) !important;
    color: var(--cream-dim) !important;
    border: 1px solid var(--hairline) !important;
    border-left: 4px solid var(--gold) !important;
    border-radius: 2px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    line-height: 1.6;
}
.disclaimer strong { color: var(--cream) !important; }

/* ---- Odysol icon font (odi-*) ------------------------------ */
.odi { color: var(--gold) !important; }
.text-primary.odi, .odi.text-primary { color: var(--gold) !important; }

/* Icons sitting on a gold (.btn-primary) background — flip to dark */
.btn-primary .odi,
.btn-primary > .odi,
.btn-primary > i.odi,
button.btn-primary .odi,
.btn-fab.btn-primary .odi { color: var(--mocha-deep) !important; }

/* Back-to-top FAB */
.btn-fab.back-to-top,
button.btn-fab.back-to-top.btn-primary {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--mocha-deep) !important;
}
.btn-fab.back-to-top:hover,
button.btn-fab.back-to-top.btn-primary:hover {
    background-color: var(--gold-light) !important;
    color: var(--mocha-deep) !important;
}
.btn-fab.back-to-top .odi,
.btn-fab.back-to-top i.odi,
.btn-fab.back-to-top .odi-expand-less { color: var(--mocha-deep) !important; }

/* ---- Form controls ----------------------------------------- */
input, select, textarea, .form-control {
    background-color: var(--mocha-dark) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px !important;
}
input::placeholder, textarea::placeholder { color: var(--cream-mute) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
    background-color: var(--mocha-dark) !important;
    color: var(--cream) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(212,175,55,.18) !important;
    outline: none !important;
}
label, .form-label, .control-label { color: var(--cream-dim) !important; }

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

/* ---- Steps / progress bar (checkout) ----------------------- */
.steps-container,
.booking-steps,
.checkout-steps,
.nav.nav-pills.steps {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.step, .step-item, .booking-steps > li, .checkout-steps > li {
    color: rgba(245,245,220,.4) !important;
    font-size: 11px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.step.done, .step.complete, .step-item.done { color: var(--gold) !important; }
.step.active, .step.current, .step-item.active {
    color: var(--cream) !important;
    background: var(--mocha) !important;
    border-bottom: 2px solid var(--gold) !important;
}

/* ---- Booking summary / cabin selection (checkout) ---------- */
.booking-summary, .summary-panel, aside.summary, .checkout-summary {
    background: var(--mocha-deep) !important;
    color: var(--cream) !important;
    border-left: 1px solid var(--hairline) !important;
    padding: 26px 24px !important;
}
.cabin-card, .room-option, .stateroom-card {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    padding: 16px 18px !important;
    color: var(--cream) !important;
}
.cabin-card.selected, .room-option.selected, .stateroom-card.is-selected {
    border-color: var(--gold) !important;
    background: rgba(212,175,55,.08) !important;
}

/* ---- Modals, tooltips, popovers ---------------------------- */
.modal-content { background: var(--mocha) !important; color: var(--cream) !important; border: 1px solid var(--hairline-mid) !important; }
.modal-header  { background: var(--mocha-dark) !important; border-bottom: 1px solid var(--hairline) !important; }
.modal-footer  { background: var(--mocha-dark) !important; border-top: 1px solid var(--hairline) !important; }
.modal-title   { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; }
.close, .modal-close, button.close { color: var(--gold) !important; opacity: 1 !important; text-shadow: none !important; }
.tooltip-inner { background: var(--mocha) !important; color: var(--cream) !important; }
.popover, .popover-body { background: var(--mocha) !important; color: var(--cream) !important; border: 1px solid var(--hairline-mid) !important; }

/* ---- Loader / splash screen -------------------------------- */
.full-page-external-loader-wrapper,
#divTransitionLoaderhtml,
.client-loader,
#TransMessage,
.loader-wrapper {
    background: var(--mocha-deep) !important;
    color: var(--cream) !important;
}
.loader-title, .loading-title { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; font-weight: 500 !important; }
.loader-message { color: var(--cream-dim) !important; }
.loader-copyright { color: var(--cream-mute) !important; font-size: 11px !important; }
.loader-spiral { border-top-color: var(--gold) !important; border-right-color: var(--gold) !important; }
.loader-bubble { color: var(--gold) !important; }

/* #TransMessage box (page-transition loader) — engine gives it a 3px
   blue border; recolour to light gold, keeping the engine's width/style. */
#TransMessage,
div#TransMessage {
    border-color: var(--gold-light) !important;
}

/* Per-element loading overlay (.loader — position:absolute; inset:0;
   z-index:1020). The engine paints it rgba(255,255,255,.8) — a jarring
   translucent white veil while a component loads. Recolour to a soft
   translucent mocha so it blends with the dark theme. Safe to override
   unconditionally: when idle the engine collapses .loader to 0x0, so
   the brown only shows while actually loading. */
.loader {
    background-color: rgba(46, 32, 21, 0.72) !important;   /* --mocha-deep @ 72% */
}

/* ---- Footer ------------------------------------------------ */
footer, .footer, .site-footer, .app-footer {
    background: #23180E !important;
    border-top: 1px solid var(--hairline) !important;
    color: rgba(212,175,55,.42) !important;
    padding: 18px 26px !important;
    text-align: center;
}
footer p, .footer p { color: rgba(212,175,55,.42) !important; font-size: 11px !important; line-height: 1.7; }

/* ---- Alerts, badges, tables -------------------------------- */
.badge,
.badge-primary { background-color: var(--gold) !important; color: var(--mocha-deep) !important; border-radius: 2px !important; }
.badge-secondary { background-color: var(--mocha-light) !important; color: var(--cream) !important; }

.alert, .alert-info, .alert-warning, .important-information,
.cruise-disclaimer, .results-disclaimer {
    background: rgba(212,175,55,.06) !important;
    color: var(--cream-dim) !important;
    border: 1px solid var(--hairline) !important;
    border-left: 4px solid var(--gold) !important;
    border-radius: 2px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    line-height: 1.6;
}
.alert-danger { border-left-color: #D76B5C !important; }
.alert strong, .alert b { color: var(--cream) !important; }

/* Icon alerts (.alert-icon — System Error / stop / info on the quote &
   booking pages). The engine pins a coloured icon box at the left edge;
   our blanket .alert padding removed the left gutter, so the text slid
   under the icon. Restore a left gutter and theme the stop/danger icon. */
.alert.alert-icon {
    position: relative;
    padding-left: 64px !important;
}
.alert.alert-stop,
.alert.alert-icon.alert-stop {
    border-left: 4px solid #D76B5C !important;
}
/* the coloured icon square itself — keep it inside the 64px gutter */
.alert.alert-icon::before,
.alert.alert-icon > .alert-icon-img,
.alert.alert-icon > i:first-child,
.alert.alert-icon > em:first-child {
    width: 44px !important;
    max-width: 44px !important;
    left: 0 !important;
}
.alert.alert-stop strong,
.alert.alert-stop { color: var(--cream) !important; }

/* Fieldset legends (Request-a-Quote / fare-code form) — engine renders
   them in blue; match the gold section-heading styling. */
legend,
fieldset legend {
    color: var(--gold) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding-bottom: 6px !important;
}

table, .table { color: var(--cream) !important; }
.table th, .table td { border-color: var(--hairline) !important; }
.table thead th { color: rgba(245,245,220,.7) !important; border-bottom: 1px solid var(--hairline-mid) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(212,175,55,.04) !important; }

/* Cancellation-policy tables (.oc-table — Policies tab) — theme the
   header rows + caption + cells to match the site. */
.oc-table { background: transparent !important; color: var(--cream) !important; border-color: var(--hairline) !important; }
.oc-table .oc-table-head th,
.oc-table thead th {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-color: var(--hairline-mid) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}
.oc-table-caption {
    background: rgba(212,175,55,.06) !important;
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.oc-table td,
.oc-table .oc-table-cell {
    background: transparent !important;
    color: var(--cream) !important;
    border-color: var(--hairline) !important;
}
.oc-table tbody tr:nth-of-type(odd) td { background: rgba(212,175,55,.03) !important; }

.pagination .page-link {
    background: transparent !important;
    color: var(--gold) !important;
    border: 1px solid var(--hairline-mid) !important;
}
.pagination .page-item.active .page-link {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border-color: var(--gold) !important;
}

/* ---- Skeleton loader shimmer ------------------------------- */
.skeleton-loader, .skeleton {
    background: linear-gradient(90deg, var(--mocha-dark) 0%, var(--mocha-light) 50%, var(--mocha-dark) 100%) !important;
    background-size: 200% 100% !important;
}

/* ---- Scrollbar & selection --------------------------------- */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: var(--mocha-deep); }
::-webkit-scrollbar-thumb   { background: var(--mocha-light); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

::selection      { background: var(--gold); color: var(--mocha-deep); }
::-moz-selection { background: var(--gold); color: var(--mocha-deep); }

/* =============================================================
   Package detail subpage (/swift/cruise/package/...)
   Targets: checkout steps, Pricing From card, Bonus Offers,
   Guest Information form, amenity tiles (Dining/Wellness/etc.)
   ============================================================= */

/* Site-header wrapper that's marked .bg-white */
.site-header.bg-white { background: var(--mocha-deep) !important; color: var(--cream) !important; }

/* Checkout steps bar (Guest Info / Category / Staterooms / Check out) */
.checkout-steps-wrap {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.checkout-step { background: transparent !important; color: var(--cream-mute) !important; }
.checkout-step .checkout-step-inner,
.checkout-step.text-center .checkout-step-inner,
.d-flex.checkout-step-inner {
    background: transparent !important;
    color: var(--cream-mute) !important;
    border: none !important;
    padding: 14px 8px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    min-height: 61px !important;
}
.checkout-step.current .checkout-step-inner,
.checkout-step.active .checkout-step-inner,
.checkout-step.current.text-center .checkout-step-inner {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
}
.checkout-step.done .checkout-step-inner,
.checkout-step.complete .checkout-step-inner {
    background: var(--mocha) !important;
    color: var(--gold) !important;
}
.checkout-step .checkout-step-inner * { color: inherit !important; }

/* Stepper arrow (the chevron notch between steps) — gold for the
   current and past steps. */
.progress-stepper-arrow .checkout-steps-wrap .checkout-step.current .checkout-step-inner::after,
.progress-stepper-arrow .checkout-steps-wrap .checkout-step.past .checkout-step-inner::after,
.checkout-step.current .checkout-step-inner::after,
.checkout-step.past .checkout-step-inner::after,
.checkout-step.done .checkout-step-inner::after,
.checkout-step.complete .checkout-step-inner::after {
    border-color: transparent transparent transparent var(--gold) !important;
    border-left-color: var(--gold) !important;
}

/* Breadcrumb (Home > Search Results > current) */
.breadcrumb, ol.breadcrumb, nav .breadcrumb {
    background: transparent !important;
    color: var(--cream-dim) !important;
    padding: 12px 16px !important;
}
.breadcrumb a, .breadcrumb-item a { color: var(--gold) !important; }
.breadcrumb-item.active, .breadcrumb-item.active strong { color: var(--cream) !important; }

/* "Pricing From" header — engine uses .bg-secondary (blue) */
.bg-secondary { background-color: var(--mocha-dark) !important; color: var(--cream) !important; }
h5.card-header.bg-secondary,
.card-header.bg-secondary.text-white,
.card-header-primary,
.card-header.card-header-primary,
.guest-info-icon-title {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}
/* keep icons + any inner text inside the header on-brand */
.card-header-primary .odi,
.card-header-primary i,
.card-header-primary em,
.card-header-primary span,
.card-header-primary strong { color: var(--gold) !important; }

/* Pricing card body */
.packageprices-whitebg,
.border.rounded.packageprices-whitebg,
.package-prices {
    background: var(--mocha) !important;
    border-color: var(--hairline) !important;
    color: var(--cream) !important;
}
.package-prices h6,
.package-prices .h6,
.package-prices strong {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.package-prices .text-muted,
.package-prices small { color: var(--cream-mute) !important; }

/* "Includes taxes and fees" — already covered, this widens specificity */
[data-ody-id="cruiseInclusiveExclusiveMessage"],
[data-ody-id="cruiseInclusiveExclusiveMessage"] * {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500 !important;
}

/* Guest Information panel */
.panel.card.panel-default {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--cream) !important;
}
.panel.card.panel-default .panel-heading,
.panel.card.panel-default .card-header {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-family: 'Playfair Display', serif !important;
}

/* Bonus Offers card */
.card.card-flat,
.card.border.p-0.card-flat { background: var(--mocha-dark) !important; border: 1px solid var(--hairline) !important; }
.bonus-offer-icontitle,
.card-header.bg-whitesmoke.bonus-offer-icontitle,
.d-flex.card-header.bg-whitesmoke {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 12px !important;
}

/* Amenity tiles (Dining / Entertainment & Nightlife / Onboard Activities / Outdoor Activities / Wellness) */
.cruise-features.ship-info-activities { background: transparent !important; }
.cruise-feature-item {
    background: var(--panel) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    color: var(--cream) !important;
    overflow: hidden;
}
.cruise-feature-heading,
.cruise-feature-heading h2 {
    background: rgba(30,22,14,.5) !important;
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.cruise-feature-item p,
.cruise-feature-item .feature-description {
    color: var(--cream-dim) !important;
    font-size: 13px !important;
    padding: 14px 16px !important;
    line-height: 1.6;
}
.cruise-feature-item .show-more,
.cruise-feature-item .read-more,
.cruise-feature-item [class*="more"] {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-top: 1px solid var(--hairline) !important;
}

/* Secondary disclaimer ("Note: Details...") */
.disclaimer.mt-2 {
    background: rgba(212,175,55,.06) !important;
    color: var(--cream-dim) !important;
    border: 1px solid var(--hairline) !important;
    border-left: 4px solid var(--gold) !important;
    border-radius: 2px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
}

/* Convert to Custom / Start New Search / Fare Code / Manual Booking — engine uses btn-secondary */
.btn-secondary, .btn.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px !important;
    border-radius: 2px !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover {
    background: rgba(212,175,55,.08) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* Main container background */
.container-fluid.main-container,
.container-fluid.loader-wrapper { background: var(--mocha-deep) !important; }

/* Itinerary timeline (left side) */
.itinerary-list, .itinerary-list li,
.day-itinerary, .day-itinerary li { color: var(--cream) !important; }
.day-itinerary strong, .itinerary-list strong { color: var(--gold) !important; }
.day-itinerary a, .itinerary-list a { color: var(--gold) !important; }

/* Ship Highlights bulleted list */
.cruise-features h2,
h2[class*="cruise"], h2[class*="ship"] {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
}
.cruise-features ul,
.cruise-features ul li { color: var(--cream-dim) !important; }
.cruise-features ul li .odi,
.cruise-features ul li em.odi { color: var(--gold) !important; }

/* ---- Grey borders (engine defaults to Bootstrap #dee2e6) ---- */

/* Bootstrap .border utility — flip to muted gold */
.border,
.border-top,
.border-right,
.border-bottom,
.border-left { border-color: var(--hairline) !important; }
.border-left { border-left-color: var(--hairline-mid) !important; }
.border-right { border-right-color: var(--hairline-mid) !important; }
.border-top { border-top-color: var(--hairline-mid) !important; }
.border-bottom { border-bottom-color: var(--hairline-mid) !important; }

/* Itinerary sidebar wrapper */
.sidebar-itinerary,
.sidebar-itinerary.section-itinerary-border { border-color: var(--hairline-mid) !important; }

/* Column divider on the sidebar */
.section-sidebar,
.section-sidebar.package-details-basic-info { border-right-color: var(--hairline) !important; }

/* Pricing From card outer border */
.border.rounded.packageprices-whitebg,
.border.rounded.packageprices-whitebg.mb-3 { border-color: var(--hairline-mid) !important; }

/* Bonus Offers card */
.card.border.p-0.card-flat,
.card.border.card-flat { border-color: var(--hairline) !important; }

/* Guest Information panel */
.panel.card.panel-default { border-color: var(--hairline) !important; }

/* "At least one guest..." checkbox wrapper */
.border.mb-3.p-2,
.border.p-2 { border-color: var(--hairline) !important; }

/* Vertical divider between Guest Info and Guest Residency */
.guest-residency-section.border-left,
.guest-residency-section { border-left-color: var(--hairline-mid) !important; }

/* Card / card-header / card-footer borders */
.card-header { border-bottom-color: var(--hairline) !important; }
.card-footer { border-top-color: var(--hairline) !important; }

/* "Itinerary" header strip inside the sidebar — was bg-whitesmoke + blue text */
.sidebar-itinerary .bg-whitesmoke,
.sidebar-itinerary .d-flex.align-items-center.bg-whitesmoke {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.sidebar-itinerary .bg-whitesmoke .text-primary,
.sidebar-itinerary .bg-whitesmoke span { color: var(--gold) !important; }

/* ---- Stateroom inner tabs (Suite / Balcony / Outside) ---- */
.cruiseline-content.shrink-tabs.custom-tabs,
.cruiseline-content { background: transparent !important; }

.cruiseline-content .nav.nav-tabs,
.shrink-tabs.custom-tabs .nav.nav-tabs {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    padding: 0 !important;
}
.cruiseline-content .nav.nav-tabs .nav-item,
.shrink-tabs .nav.nav-tabs .nav-item,
.cruiseline-content ul.nav.nav-tabs li.d-flex.nav-item {
    background: transparent !important;
    border: none !important;
}
.cruiseline-content .nav.nav-tabs .nav-link,
.shrink-tabs .nav.nav-tabs .nav-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: var(--cream-dim) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 11px 18px !important;
    margin: 0 !important;
}
.cruiseline-content .nav.nav-tabs .nav-link:hover,
.shrink-tabs .nav.nav-tabs .nav-link:hover {
    background: rgba(212,175,55,.06) !important;
    color: var(--gold) !important;
}
.cruiseline-content .nav.nav-tabs .nav-link.active,
.shrink-tabs .nav.nav-tabs .nav-link.active,
.cruiseline-content .nav.nav-tabs .nav-item.active .nav-link {
    background: var(--mocha) !important;
    color: var(--gold) !important;
    border: 1px solid var(--hairline) !important;
    border-bottom: 2px solid var(--gold) !important;
}

/* ---- Stateroom category badge (SS, BB, OO etc.).
   Keep each cabin type's own engine colour — only normalise the shape
   and bump the size. ---- */
.category-cabin {
    border: none !important;
    border-radius: 2px !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    padding: 4px 10px !important;
    font-size: 1.25rem !important;
}
.ship-category-title { color: var(--cream) !important; }
.ship-category-title .category-cabin + * { color: var(--cream) !important; }

/* ---- Category price table header (.category-price-table-header).
   Engine renders it on a light bar that stands out too strongly; use a
   darker brown with light (gold) uppercase labels to match the other
   table headers on the site. ---- */
.category-price-table-header,
.category-price-table-header.category-price-table-row {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
.category-price-table-header .category-price-table-cell {
    background: transparent !important;
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
/* info icon in the header — keep it gold, not green */
.category-price-table-header .odi.text-success,
.category-price-table-header .odi { color: var(--gold) !important; }

/* ---- "View More" / "View Less" inline toggle (stateroom & description) */
button.read-more,
button.read-more.text-primary,
.read-more.text-primary,
button.read-less,
button.show-more,
button.show-less {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important;
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin: 4px 0 8px !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1.4;
}
button.read-more:hover,
button.read-more.text-primary:hover,
button.read-less:hover {
    background: transparent !important;
    color: var(--gold-light) !important;
    border-bottom-color: var(--gold) !important;
}
button.read-more:focus, button.read-less:focus { outline: none !important; }
button.read-more .odi,
button.read-more i,
button.read-less .odi { color: var(--gold) !important; font-size: 14px !important; }

/* ---- Ship Facts content ---- */
ship-facts, ship-facts.d-block { display: block !important; background: transparent !important; }
ship-facts .facts,
ul.facts {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}
ship-facts .facts > li,
ul.facts > li {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
}
.facts-wrap {
    background: rgba(212,175,55,.04) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 2px !important;
    color: var(--cream) !important;
    padding: 10px 14px !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.facts-wrap label {
    color: var(--cream) !important;
    margin: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
}
.facts-wrap label strong {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    margin-right: 6px;
}
.facts-wrap .odi,
.facts-wrap em.odi { color: var(--gold) !important; }
.facts li .odi { background: var(--mocha) !important; }

/* ---- "Note: ..." disclaimer inside Ship Facts/Staterooms tabs ---- */
[role="tabpanel"] .disclaimer,
ship-facts + .disclaimer,
.staterooms-tab .disclaimer {
    background: rgba(212,175,55,.06) !important;
    color: var(--cream-dim) !important;
    border: 1px solid var(--hairline) !important;
    border-left: 4px solid var(--gold) !important;
    border-radius: 2px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    line-height: 1.6;
}

/* =============================================================
   Category selection page (the step after Guest Information)
   - .nav.nav-stepper progress bar
   - #tblCategoryAdmin category-rate matrix
   ============================================================= */

/* ---- Stepper progress bar (.nav.nav-stepper) ---- */
.nav.nav-stepper {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline) !important;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
}
.nav.nav-stepper .nav-item {
    flex: 1;
    background: transparent !important;
    border: none !important;
    position: relative;
    list-style: none;
    padding: 0 !important;
}
.nav.nav-stepper .nav-link {
    display: block !important;
    padding: 14px 20px !important;
    color: var(--cream-mute) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    position: relative;
}
.nav.nav-stepper .stepper-item-caption {
    display: block;
    font-size: 11px !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    color: var(--cream-mute) !important;
    margin-top: 2px;
    font-weight: 400 !important;
}

/* Chevron arrow between steps */
.nav.nav-stepper .nav-link-arrow {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 14px solid transparent;
    z-index: 1;
    pointer-events: none;
}

/* Completed step — gold accent text, mocha bg behind */
.nav.nav-stepper .completed-nav-item .nav-link {
    color: var(--gold) !important;
    background: var(--mocha) !important;
}
.nav.nav-stepper .completed-nav-item .nav-link-arrow,
.nav.nav-stepper .completed-nav-item .nav-link-arrow::before,
.nav.nav-stepper .completed-nav-item .nav-link-arrow::after,
.nav.nav-stepper .completed-nav-item .nav-link::after {
    border-left-color: var(--mocha) !important;   /* matches the completed box */
    background: transparent !important;
}
.nav.nav-stepper .completed-nav-item .nav-link:hover {
    background: var(--mocha-light) !important;
    color: var(--gold-light) !important;
}
.nav.nav-stepper .completed-nav-item .nav-link:hover ~ .nav-link-arrow,
.nav.nav-stepper .completed-nav-item:hover .nav-link-arrow {
    border-left-color: var(--mocha-light) !important;
}

/* Active step — gold pill, dark text */
.nav.nav-stepper .active-nav-item .nav-link,
.nav.nav-stepper .active-nav-item .nav-link.active {
    color: var(--mocha-deep) !important;
    background: var(--gold) !important;
    font-weight: 700 !important;
    cursor: default;
}
.nav.nav-stepper .active-nav-item .stepper-item-caption {
    color: var(--mocha-deep) !important;
    opacity: .75;
}
.nav.nav-stepper .active-nav-item .nav-link-arrow,
.nav.nav-stepper .active-nav-item .nav-link.active .nav-link-arrow,
.nav.nav-stepper .active-nav-item .nav-link-arrow::before,
.nav.nav-stepper .active-nav-item .nav-link-arrow::after,
.nav.nav-stepper .active-nav-item .nav-link.active::after {
    border-left-color: var(--gold) !important;
    background: transparent !important;
    color: var(--gold) !important;
}

/* Disabled (upcoming) step — dim cream */
.nav.nav-stepper .disabled-nav-item .nav-link,
.nav.nav-stepper .disabled-nav-item .nav-link.disabled {
    color: rgba(245,245,220,.35) !important;
    background: transparent !important;
    cursor: not-allowed;
}
.nav.nav-stepper .disabled-nav-item .stepper-item-caption {
    color: rgba(245,245,220,.3) !important;
}
.nav.nav-stepper .disabled-nav-item .nav-link-arrow,
.nav.nav-stepper .disabled-nav-item .nav-link-arrow::before,
.nav.nav-stepper .disabled-nav-item .nav-link-arrow::after,
.nav.nav-stepper .disabled-nav-item .nav-link::after {
    border-left-color: var(--mocha-dark) !important;   /* matches the (transparent) upcoming box over the mocha-dark bar */
    background: transparent !important;
}

/* ---- Category selection table (#tblCategoryAdmin) ---- */
.table-sticky-fixed { background: transparent !important; }
.sticky-col-table,
.sticky-col-table.rounded {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    overflow: hidden;
}

#tblCategoryAdmin,
#tblCategoryAdmin.table.table-bordered,
table#tblCategoryAdmin {
    background: transparent !important;
    color: var(--cream) !important;
    border: none !important;
    margin: 0 !important;
}
#tblCategoryAdmin thead { background: var(--mocha-dark) !important; }
#tblCategoryAdmin thead th,
#tblCategoryAdmin th {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

/* The fare-code header label inside <th> */
.category-title-code {
    display: block;
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.category-title-code span { color: var(--gold) !important; }
.category-title-code .width-160,
.category-title-code .width-160.text-truncate {
    color: var(--cream-dim) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 4px;
}

/* Body rows */
#tblCategoryAdmin tbody tr,
tr.categoryAdminRow {
    background: transparent !important;
    border-top: 1px solid rgba(212,175,55,.1) !important;
    transition: background .15s;
}
#tblCategoryAdmin tbody tr.alternate,
tr.categoryAdminRow.alternate {
    background: rgba(212,175,55,.04) !important;
}
#tblCategoryAdmin tbody tr:hover,
tr.categoryAdminRow:hover {
    background: rgba(212,175,55,.08) !important;
}

#tblCategoryAdmin tbody td,
#tblCategoryAdmin td {
    background: transparent !important;
    color: var(--cream) !important;
    border: none !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

/* Cabin-type cell (e.g. "D Outside Stateroom") */
td[data-ody-id="CabinType"] .text-left.text-primary,
td[data-ody-id="CabinType"] .text-primary {
    color: var(--cream) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .02em;
}

/* Category code badge (D, BB, AB) — engine uses inline background-color.
   Preserve the inline color but add gold border + Playfair text. */
.category-ship-img {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 32px;
    padding: 0 8px !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .04em;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Price cell — large gold Playfair */
.minpriceblock,
span.minpriceblock,
.text-primary.fs14.fs-600.minpriceblock {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: .01em;
}

/* Info icon next to the price */
.odi-icon.odi-info-circle,
i.odi-info-circle,
.text-success.odi { color: var(--gold) !important; }

/* "Average per Guest / Total Cruise Rate" popover */
.subcategoryContainer .table.table-bordered,
.subcategoryContainer .table.table-bordered th,
.subcategoryContainer .table.table-bordered td {
    background: var(--mocha) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline) !important;
}
.subcategoryContainer .table tr.bg-whitesmoke,
.subcategoryContainer .table tr.bg-whitesmoke.alternate {
    background: var(--mocha-dark) !important;
}
.subcategoryContainer .table .text-primary,
.subcategoryContainer .table .text-primary.font-weight-bold,
.subcategoryContainer .table strong.text-primary {
    color: var(--gold) !important;
}

/* "Includes taxes and fees" reused — already styled site-wide. Just ensure
   it stays readable inside the table popover too. */
#tblCategoryAdmin .cruise-tax-inclusive,
.subcategoryContainer .cruise-tax-inclusive,
.cruise-tax-inclusive.text-primary {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* "NCCF (Port Charges) Included in price" footer of the popover */
.subcategoryContainer .border-top.text-center {
    background: var(--mocha-dark) !important;
    color: var(--cream-dim) !important;
    border-top-color: var(--hairline) !important;
    font-size: 11px !important;
}

/* Uplift-pay "or from $310/mo" financing */
.Uplift-pay {
    color: var(--cream-dim) !important;
    font-size: 11px !important;
}
.Uplift-pay a,
.Uplift-pay a.text-primary,
.Uplift-pay .text-primary.price-color,
.Uplift-pay span {
    color: var(--gold) !important;
    text-decoration: none !important;
    font-weight: 600;
}
.Uplift-pay .odi-info-circle { color: var(--gold) !important; }

/* Price / Book Now action links */
.price-book { text-align: center; }
.price-book a,
.price-book .text-link,
a.text-link,
a.fs-600.text-link,
a.fs-600.pointer.text-link {
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 6px 10px !important;
}
.price-book a:hover,
a.text-link:hover { color: var(--gold-light) !important; }
.price-book .border-right,
a.text-link.border-right { border-right-color: var(--hairline-mid) !important; }

/* "Book Now" — emphasize as the primary action.
   Higher specificity than `a.fs-600.text-link` above so the dark text wins. */
a.text-link[data-ody-id="BookNowButton"],
a.fs-600.text-link[data-ody-id="BookNowButton"],
.price-book a[data-ody-id="BookNowButton"] {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 2px !important;
    padding: 6px 14px !important;
    letter-spacing: .14em !important;
}
a.text-link[data-ody-id="BookNowButton"]:hover,
a.fs-600.text-link[data-ody-id="BookNowButton"]:hover,
.price-book a[data-ody-id="BookNowButton"]:hover {
    background: var(--gold-light) !important;
    color: var(--mocha-deep) !important;
    border-color: var(--gold-light) !important;
}

/* Blank subcategory placeholder (the "-" cells) */
.subcategoryBlankContainer {
    color: var(--cream-mute) !important;
    text-align: center;
    font-size: 18px;
    opacity: .4;
}

/* Hover detail card (category-content shown in tooltip) */
.category-content {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 4px !important;
    color: var(--cream) !important;
    padding: 12px !important;
}
.category-content .text-primary,
.category-content .text-primary.fs-600.text-uppercase {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
}
.category-content .border-bottom { border-bottom-color: var(--hairline) !important; }
.category-content strong { color: var(--gold) !important; }

/* =============================================================
   Package detail sidebar (#packageDetails / .cruise-details-outer)
   - Ship image + destination caption
   - General details rows (ship/route/dates/etc.)
   - Bonus Offers list-group
   - Itinerary accordion + day-by-day timeline
   - Stateroom price summary card
   ============================================================= */

#packageDetails,
.cruise-details-outer,
.res_cruise_details { background: transparent !important; color: var(--cream) !important; }

/* Ship image container */
.embed-responsive.dummy-img.img-container,
#CruiseNavigationTabsInfo {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    overflow: hidden;
}

/* "Europe - 7 Night Gems..." destination caption under the ship image */
.img-caption,
[data-ody-id="DestinationText"],
.img-caption[data-ody-id="DestinationText"] {
    background: var(--mocha-dark) !important;
    color: var(--cream-dim) !important;
    border: 1px solid var(--hairline) !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1.5;
}

/* General details panel */
.cruise-details,
.cruise-details.general-details {
    background: transparent !important;
    color: var(--cream) !important;
}
.cruise-details.general-details .row,
.cruise-details.general-details .d-flex {
    color: var(--cream) !important;
}

.page-title.cruise-details-title,
h1.cruise-details-title {
    font-family: 'Playfair Display', serif !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
}

/* Cruiseline logo wrapper */
.cruiseline-logo,
img.cruiseline-logo,
.img-fluid.cruiseline-logo {
    background: rgba(245,245,220,.95) !important;
    border-radius: 2px !important;
    padding: 4px !important;
    border: 1px solid var(--hairline) !important;
}

/* Each detail row's icon + label */
.cruise-details .odi-icon,
.cruise-details .odi-icon.odi {
    color: var(--gold) !important;
    margin-right: 8px;
    font-size: 18px;
}
.cruise-details .departure-arrival-port,
.cruise-details .departure-arrival-date,
.cruise-details span[data-ody-id="ShipText"],
.cruise-details [data-ody-id="GuestText"] span,
.cruise-details [data-ody-id="CategoryText"] span {
    color: var(--cream) !important;
    font-size: 14px !important;
}
.cruise-details .departur-port-text,
.cruise-details .arrival-port-text { color: var(--cream) !important; font-weight: 500; }
.cruise-details [data-ody-id="DepartureArrivalPortArrow"],
.cruise-details [data-ody-id="DepartureArrivalDateText"] { color: var(--gold) !important; }

/* "STANDARD" fare-code label */
.cruise-details .odi.odi-fare-code + span {
    color: var(--cream) !important;
    letter-spacing: .04em;
}
/* "Modify Fare code" pencil button */
.btn.btn-icon.odi.odi-pencil,
a.btn.btn-icon.odi.odi-pencil {
    color: var(--gold) !important;
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px !important;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn.btn-icon.odi.odi-pencil:hover { background: rgba(212,175,55,.08) !important; border-color: var(--gold) !important; }

/* "Cruise line Tour (...)" link */
.cruise-details .bPopup,
.cruise-details a.bPopup { color: var(--gold) !important; text-decoration: none !important; }
.cruise-details a.bPopup:hover { color: var(--gold-light) !important; text-decoration: underline; }

/* ---- Bonus Offers list-group ---- */
.cruise-details.special-offers .list-group {
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    overflow: hidden;
    background: transparent !important;
}
.list-group-item.bg-secondary.display-with-icon,
h6.list-group-item.bg-secondary {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 12px 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
.bonus-offer-label { color: var(--gold) !important; }

.list-group-item,
.cruise-details.special-offers .list-group .list-group-item {
    background: transparent !important;
    color: var(--cream-dim) !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.list-group-item:last-child { border-bottom: none !important; }
.list-group-item.rules-icon,
a.list-group-item.rules-icon {
    color: var(--cream) !important;
    transition: background .15s;
}
.list-group-item.rules-icon:hover,
a.list-group-item.rules-icon:hover {
    background: rgba(212,175,55,.06) !important;
    color: var(--gold) !important;
    text-decoration: none !important;
}
.list-group-item.rules-icon span { color: inherit !important; }

/* The disclaimer at the bottom of the bonus offers list */
.list-group-item.p-2.small,
[data-ody-id="BonusOfferDisclaimer"] {
    background: rgba(212,175,55,.04) !important;
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    line-height: 1.5;
    padding: 10px 14px !important;
}

/* ---- Itinerary accordion + timeline ---- */
.itinerary-accordion-header,
h6.itinerary-accordion-header.bg-whitesmoke,
h6.itinerary-accordion-header.bg-whitesmoke.text-primary {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
}
.itinerary-accordion-header .flex-grow-1 { color: var(--gold) !important; }
.itinerary-accordion-header .odi { color: var(--gold) !important; }

.section-itinerary-wrapper,
.border.section-itinerary-wrapper {
    background: transparent !important;
    border-color: var(--hairline) !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
}

.itinerary-map-img,
img.itinerary-map-img {
    border-bottom: 1px solid var(--hairline) !important;
    background: var(--mocha-dark) !important;
}

/* "Ports of Call may vary..." caption above the timeline */
.section-itinerary-wrapper .px-2.pt-2 {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    font-style: italic;
    padding: 10px 12px !important;
}

/* Day-by-day timeline list */
ul.itinerary-details {
    background: transparent !important;
    list-style: none;
    padding: 8px 12px !important;
    margin: 0 !important;
}
ul.itinerary-details > li {
    background: transparent !important;
    color: var(--cream) !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(212,175,55,.08);
}
ul.itinerary-details > li:last-child { border-bottom: none; }

ul.itinerary-details .port-hold,
ul.itinerary-details .crusing {
    color: var(--cream) !important;
    position: relative;
    padding-left: 18px;
}
/* Timeline dot/wave marker */
ul.itinerary-details .icon-dot-and-circle::before,
ul.itinerary-details .icon-waves::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 2px var(--mocha);
}
ul.itinerary-details .icon-waves::before {
    background: transparent;
    border: 1px solid var(--gold);
    width: 8px;
    height: 8px;
}

ul.itinerary-details .location strong { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; }
ul.itinerary-details .location a,
ul.itinerary-details .location a.bPopup { color: var(--gold) !important; }
ul.itinerary-details .location a:hover { color: var(--gold-light) !important; }
ul.itinerary-details .location .odi { color: var(--gold) !important; }

ul.itinerary-details .time,
ul.itinerary-details .itinerary-date-time {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    margin-left: 18px;
    margin-top: 2px;
    display: block;
}
ul.itinerary-details .time .odi { color: var(--gold) !important; }

/* ---- Stateroom price summary card (right column) ---- */
.card-body.p-2 { background: transparent !important; }

/* Stateroom price was blue (text-secondary). Force gold Playfair. */
h4.cabin-price,
h4.stateroom-cabin-price,
h4.cabin-price.stateroom-cabin-price,
h4.cabin-price.text-secondary,
h4.stateroom-cabin-price.text-secondary,
h4[data-ody-id="StateroomPrice"],
.cabin-price.stateroom-cabin-price.text-secondary {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 26px !important;
    line-height: 1.1;
    margin: 8px 0 6px !important;
}

/* General .text-secondary fallback (in case it's used elsewhere as text color) */
.text-secondary,
*[class*="text-secondary"] { color: var(--cream-dim) !important; }
/* But the SS-style category badge or items where text-secondary is used as decorative — they get the cream-dim. The price uses higher-specificity rule above. */

/* "Price" outline button on the stateroom price card */
.btn.btn-outline-primary.price-btn-padding,
a.btn.btn-outline-primary.price-btn-padding {
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px !important;
    border-radius: 2px !important;
    padding: 6px 14px !important;
}
.btn.btn-outline-primary.price-btn-padding:hover {
    background: rgba(212,175,55,.08) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* "Includes taxes and fees" wrapper on stateroom card */
#cabintaxes,
#cabintaxes.fs12.font-weight-bold {
    color: var(--cream-mute) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 6px;
}

/* ---- Cruiseline Info modal (the big nav tabs popup) ---- */
.cruiseline-info-header { color: var(--cream) !important; }
.cruiseline-info-header .cruiseline-logo { background: rgba(245,245,220,.95) !important; }
.cruiseline-info-header .media-body,
.cruiseline-info-header .h2.cruiseline-title,
.cruiseline-info-header strong {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}

/* Big nav tabs (Sailing Dates / Cruise Info / Policies) inside the modal */
.cruise-info-tabs.cruise-new-info-tabs,
ul.cruise-info-tabs {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    padding: 0 !important;
}
.cruise-info-tabs .nav-item .nav-link {
    background: transparent !important;
    color: var(--cream-dim) !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 12px 18px !important;
}
.cruise-info-tabs .nav-item .nav-link.active {
    background: var(--mocha) !important;
    color: var(--gold) !important;
    border: 1px solid var(--hairline) !important;
    border-bottom: 2px solid var(--gold) !important;
}

/* Level-2 tabs inside Cruise Info (Ship Info / Gallery / Deck Plans / Staterooms / Ship Facts) */
ul.nav.nav-tabs.nav-fill.level2 { background: var(--mocha-dark) !important; }
ul.nav.nav-tabs.nav-fill.level2 .nav-link.active {
    background: var(--mocha) !important;
    color: var(--gold) !important;
    border-bottom: 2px solid var(--gold) !important;
}

/* Ship Highlights heading (red star icon) — keep gold like the rest */
.ship-info-highlights h2 {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
}
.ship-info-highlights .odi.text-red,
.ship-info-highlights .odi.odi-star-circle,
.ship-info-highlights .odi.odi-diamond-shape { color: var(--gold) !important; }
.ship-info-highlights ul.slides { list-style: none; padding-left: 0; }
.ship-info-highlights ul.slides li { color: var(--cream-dim) !important; padding: 4px 0; }
.ship-info-highlights ul.slides li span { color: var(--cream-dim) !important; }

.cruiseline-content.ship-info-description {
    color: var(--cream-dim) !important;
    line-height: 1.6;
}

/* Ship Highlights heading — engine gives it a red bottom border; use gold */
.cruiseline-content .cruise-highlights h2 {
    border-bottom-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* =============================================================
   "Other Sailing Dates" tab — div-based flex table (sailing-dates).
   Not a real <table>, so the results-card table rules don't reach it;
   the engine leaves the header row + alternating rows on a white
   background (white-on-white text). Re-skin to the mocha/gold theme.
   ============================================================= */
sailing-dates .flex-table.sailing-dates,
.flex-table.sailing-dates { background: transparent !important; color: var(--cream) !important; }

/* Header row */
.sailing-dates .header-row {
    background: var(--mocha-dark) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
.sailing-dates .header-cell,
.sailing-dates .header-cell.even,
.sailing-dates .header-cell.odd {
    background: transparent !important;
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

/* Body rows — strip the white bg, add subtle gold striping + hairline */
.sailing-dates .table-body { background: transparent !important; }
.sailing-dates .table-row {
    background: transparent !important;
    border-top: 1px solid rgba(212,175,55,.1) !important;
}
.sailing-dates .table-row:nth-child(odd) { background: rgba(212,175,55,.03) !important; }
.sailing-dates .table-row:hover { background: rgba(212,175,55,.06) !important; }
.sailing-dates .table-cell,
.sailing-dates .table-cell.even,
.sailing-dates .table-cell.odd {
    background: transparent !important;
    color: var(--cream) !important;
}
.sailing-dates .sailing-date-cell,
.sailing-dates .sailing-date-cell span { color: var(--cream) !important; }
/* responsive per-cell category label (Inside/Outside/...) */
.sailing-dates .sailing-category-label { color: var(--cream-mute) !important; }
/* prices */
.sailing-dates .table-cell span span {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
/* "Includes taxes and fees" footnote */
.sailing-dates .cruise-tax-inclusive,
.sailing-dates .cruise-tax-inclusive * {
    color: var(--cream-mute) !important;
    font-family: 'Montserrat', sans-serif !important;
}
/* wrapper border (.custom-table-border) */
.custom-table-border { border-color: var(--hairline) !important; }

/* "+ More" link on amenity tiles in this modal */
.cruise-feature-link .more-link,
a.more-link.activity {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    text-decoration: none !important;
    display: inline-block;
    padding: 6px 12px !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
.cruise-feature-link .more-link:hover,
a.more-link.activity:hover {
    background: rgba(212,175,55,.08) !important;
    border-color: var(--gold) !important;
    color: var(--gold-light) !important;
}

/* Activity image inside the cards */
.cruise-feature-image { background: var(--mocha-dark) !important; overflow: hidden; }
.cruise-feature-image img { display: block; width: 100%; }
.cruise-feature-description { background: transparent !important; }
.cruise-feature-description p { color: var(--cream-dim) !important; font-size: 13px !important; padding: 10px 14px !important; margin: 0 !important; }

/* Activity detail panel (expanded) */
.cruise-ship-activities {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    padding: 14px !important;
    color: var(--cream) !important;
    margin-top: 12px;
}
.cruise-ship-activity-title {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.cruise-ship-activity-close,
a.close-slider-icon.cruise-ship-activity-close {
    color: var(--gold) !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px;
}
.cruise-ship-activity-description { color: var(--cream-dim) !important; line-height: 1.6; }
.cruise-sub-activity-name { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; font-weight: 600 !important; margin-top: 8px; }
.cruise-sub-activity--description { color: var(--cream-dim) !important; font-size: 13px; }
.cruise-ship-sub-activity-slider .flexslider .slides li.bg-white {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px;
    padding: 10px !important;
}

/* Promotion modal (Sell Five, Sail Free) */
.modal .modal-content,
.modal-dialog .modal-content {
    background: var(--mocha) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 4px !important;
}
.modal-body { color: var(--cream-dim) !important; }
.modal-body p, .modal-body li { color: var(--cream-dim) !important; }
.modal-body strong, .modal-body b { color: var(--gold) !important; }
.modal-body a { color: var(--gold) !important; text-decoration: underline; }
.modal-body .bonusOfferName {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}
.modal-body .dkRed { color: #D76B5C !important; }
.modal .close,
.modal button.close {
    color: var(--gold) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 24px;
}

/* =============================================================
   Checkout page (/web/booking/checkout.aspx)
   ============================================================= */

/* "Your Itinerary" card header */
.card.mProItinerary > .card-header.bg-secondary,
.card.mProItinerary .mProItiTitle {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
.card.mProItinerary .mProItiTitle h5,
.card.mProItinerary .card-header h5 {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}

/* "Convert to Custom" inverted button */
.btn.btn-invert,
.btnConvertToCustom {
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px !important;
    border-radius: 2px !important;
}
.btn.btn-invert:hover, .btnConvertToCustom:hover {
    background: rgba(212,175,55,.08) !important;
    color: var(--gold) !important;
}

/* "Day 1 To 14" counter badge */
.package-itinerary-day-counter,
.package-itinerary-day-counter.mProItiCounter {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 4px !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.package-itinerary-day-label,
strong.package-itinerary-day-label {
    color: var(--gold) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
}

/* Cruise itinerary node header */
.section-package-itinerary-node .card-header,
.package-itinerary-node-header {
    background: var(--mocha-dark) !important;
    color: var(--cream) !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.section-package-itinerary-node .cruise-line-name { color: #D76B5C !important; }
.section-package-itinerary-node .cruise-ship-name { color: var(--cream-dim) !important; }
.package-itinerary-node-header .packageStatus { color: var(--gold) !important; }

/* Embark / Disembark times (was text-primary blue) */
.itinerary-node-time.text-primary,
.itinerary-node-time.mProFlightTime {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.itinerary-node-date,
.itinerary-node-location { color: var(--cream) !important; }
.itinerary-node-duration { color: var(--gold) !important; }
.mProFlightStop { color: var(--cream-dim) !important; }

/* Labels on the itinerary detail rows (Passengers:, Fare code:, etc.) */
.itinerary-node-info-item label.text-primary,
.itinerary-node-info-item label.text-nowrap.text-primary.font-weight-bold,
.itinerary-node-info-item label.text-nowrap.text-primary,
.itinerary-node-info-item label.col-auto.text-nowrap.text-primary.font-weight-bold,
.itinerary-node-info-group label.text-primary,
.mProAddDet label.text-primary,
.mProAddDet label.text-nowrap.text-primary,
.mProAddDet label.text-nowrap.text-primary.font-weight-bold {
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
}
.itinerary-node-info-item span,
.itinerary-node-info-group span,
.mProAddDet .itinerary-node-info-item span,
.mProAddDet .itinerary-node-info-group span { color: var(--cream) !important; }
.custom-farecode-text,
.mProAddDet .custom-farecode-text { color: var(--cream) !important; font-weight: 500; }

/* Additional Detail wrapper (mProAddDet) — fix light bg on the right-hand info column */
.mProAddDet,
.col-12.col-md-auto.mProAddDet,
.col-12.col-md-auto.mProAddDet.p-md-2 {
    background: var(--mocha-dark) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 4px !important;
    padding: 14px !important;
}
.mProAddDet > div { background: transparent !important; color: var(--cream) !important; }
.mProAddDet .itinerary-node-info-item,
.mProAddDet .itinerary-node-info-group {
    background: transparent !important;
    color: var(--cream) !important;
}
.mProAddDet .mProPaxAdult,
.mProAddDet .mProPaxAdult .odi { color: var(--cream) !important; }
.mProAddDet [data-ody-id="CategoryUpgradeOption"],
.mProAddDet [data-ody-id="SailingDetailDescription"] { color: var(--cream) !important; }

/* "Add Hotel" buttons */
.btn.btn-outline-primary.hotel-link {
    background: transparent !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    font-size: 11px !important;
}

/* ---- Price Details card ---- */
.card.paymentDetails > .card-header.bg-secondary,
.conf-title.book-offer-conf-icon {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
.card.paymentDetails > .card-header strong,
.card.paymentDetails > .card-header .odi {
    color: var(--gold) !important;
}
.card.paymentDetails h5.package-title,
.card.paymentDetails h5.text-primary.package-title {
    background: rgba(212,175,55,.05) !important;
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    border-top: 1px solid var(--hairline) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 10px 14px !important;
}

/* Flight summary table (Pax #1 / Pax #2 / Grand Total) */
table.flight-summary-table,
table.flight-sum-tbl {
    background: transparent !important;
    color: var(--cream) !important;
    border: none !important;
    width: 100%;
}
table.flight-summary-table thead,
table.flight-summary-table tr:first-child {
    background: var(--mocha-dark) !important;
}
table.flight-summary-table th.fare-title,
.flight-sum-tbl th.fare-title {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 11px 12px !important;
}
table.flight-summary-table td,
.flight-sum-tbl td {
    background: transparent !important;
    color: var(--cream) !important;
    border: none !important;
    padding: 11px 12px !important;
}
tr.border-bottom-dashed,
tr.border-bottom-dashed td {
    border-bottom: 1px dashed var(--hairline) !important;
}

/* Grand Total bar */
.bg-color-totaldue,
tr.payment-total-due {
    background: rgba(212,175,55,.08) !important;
}
tr.payment-total-due td {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-top: 1px solid var(--hairline-mid) !important;
}
.payment-total-due [data-ody-id="price-info-currency-disclaimer"] {
    color: var(--cream-mute) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin-left: 8px;
}

/* ---- Payment Schedule card ---- */
.card.payment-schedule-customer {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
}
.payment-header.table-header,
.supplier-payment-title-table,
.supp-payment-title-table {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
.pay-head,
.payment-header .pay-head {
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
.pay-content,
.supplier-payment-content-table .pay-content {
    color: var(--cream) !important;
    background: transparent !important;
}
.payment-schedule-name { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; font-weight: 600 !important; }
.payment-schedule-description { color: var(--cream-dim) !important; font-size: 12px; }
.payment-schedule-cust-total {
    background: rgba(212,175,55,.05) !important;
    border-top: 1px solid var(--hairline) !important;
    color: var(--cream) !important;
}
.payment-schedule-cust-total .font-weight-700 { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; }

/* ---- Cancellation Penalty Details card ---- */
#CancellationPolicyHeader {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
}
#CancellationPolicyHeader strong,
#CancellationPolicyHeader .odi { color: var(--gold) !important; }

/* ---- Bonus Offers select card ---- */
#CruiseTRules > .card-header.bg-secondary {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
}
#CruiseTRules .card-header span,
#CruiseTRules .card-header .odi { color: var(--gold) !important; }
.list-group-item.bonus-offer-header {
    background: rgba(212,175,55,.05) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}
.offer-group.list-group-item,
.list-group-item.offer-group {
    background: transparent !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.bonus-offer-text,
.bonus-offer-text.red-text,
label.bonus-offer-text {
    color: var(--cream) !important;
    font-weight: 500;
}
.custom-control-label,
.custom-control.custom-radio .custom-control-label { color: var(--cream) !important; }

/* ---- Stepper accordion (Passenger Details, Additional Services, Travel Insurance) ---- */
#st-accordion > .card,
.checkout-stepper-accordion > .card,
.card.section-passenger-details {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
    margin-bottom: 12px;
}

.spc-panel-title,
.card-header.spc-panel-title,
a.card-header.spc-panel-title {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline-mid) !important;
    text-decoration: none !important;
    padding: 14px 18px !important;
}
.spc-panel-title:hover { background: var(--mocha-light) !important; }
.spc-panel-title .flex-grow-1 {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Numbered circles (1, 2, 3) for stepper sections */
.step-number {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border-radius: 50% !important;
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 14px !important;
    margin-right: 12px;
    flex-shrink: 0;
}

.spc-info-link { color: var(--cream-mute) !important; font-size: 11px !important; }
.spc-edit-link.odi-pencil { color: var(--gold) !important; }

/* Passenger card inside Passenger Details */
.card.login-page-details.Customca,
.card.login-page-details {
    background: var(--mocha) !important;
    border: 1px solid var(--hairline) !important;
}
.card.login-page-details > .card-header {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.card.login-page-details .pass-form-heading,
.card.login-page-details .pass-form-title {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}
.card.login-page-details [data-ody-id="guestType"] { color: var(--cream-dim) !important; font-style: italic; }

/* Form labels inside passenger card */
label.pass-form-title,
.pass-form-title {
    color: var(--cream-dim) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
    margin-bottom: 4px !important;
    display: block;
}
.text-danger.require-field, span.require-field { color: #D76B5C !important; }
.street-add-lbl, label.street-add-lbl {
    color: var(--cream-dim) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.street-add-lbl .res_label { color: var(--cream-dim) !important; }

/* Date triplet wrappers (Month/Day/Year) */
.section-date,
.d-flex.flex-nowrap.section-date { background: transparent !important; }
.section-date > div.rounded {
    background: var(--mocha-dark) !important;
    border-radius: 2px !important;
}

/* NOTE alert (passenger details warning) */
.alert.alert-primary {
    background: rgba(212,175,55,.06) !important;
    color: var(--cream) !important;
    border: 1px solid var(--hairline) !important;
    border-left: 4px solid var(--gold) !important;
    border-radius: 2px !important;
}
.alert.alert-primary .note-heading,
.alert.alert-primary strong { color: var(--gold) !important; }
.alert.alert-primary .passanger-names-warning-msg { color: var(--cream-dim) !important; }

.alert.alert-warning {
    background: rgba(215,107,92,.08) !important;
    color: var(--cream) !important;
    border-left-color: #D76B5C !important;
}
.alert.alert-danger {
    background: rgba(215,107,92,.08) !important;
    color: var(--cream) !important;
    border-left-color: #D76B5C !important;
}
.alert.alert-danger .alert-heading,
.alert.alert-danger h6.alert-heading { color: #D76B5C !important; }
ul.errorblock_ul li,
li.errorblock_li { color: var(--cream-dim) !important; }

/* "click here to select a customer" link area */
[data-ody-id="UserProfileSelectionSection"] { color: var(--cream-dim) !important; }
[data-ody-id="UserProfileSelectionSection"] a { color: var(--gold) !important; }

/* Update Customer Profile checkbox */
.custom-control.custom-checkbox .custom-control-label { color: var(--cream) !important; }

/* intl-tel-input (phone number widget) */
.intl-tel-input { background: transparent !important; }
.intl-tel-input .selected-flag {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px 0 0 2px !important;
}
.intl-tel-input .selected-dial-code { color: var(--cream) !important; }
.intl-tel-input .iti-arrow { border-top-color: var(--gold) !important; }
.intl-tel-input .country-list {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline-mid) !important;
    color: var(--cream) !important;
}
.intl-tel-input .country-list .country .country-name { color: var(--cream) !important; }
.intl-tel-input .country-list .country .dial-code { color: var(--cream-mute) !important; }
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.active { background: rgba(212,175,55,.1) !important; }
.intl-tel-input .country-list .divider { border-bottom-color: var(--hairline) !important; }

/* "Note: Fields marked with * are required." */
.new-account-note,
.text-danger.text-right.new-account-note { color: #D76B5C !important; font-size: 12px !important; }

/* Travel With / Tours & Transfers / Travel Insurance section headers */
.additionalServHeader,
.card-header.border-bottom-0.additionalServHeader {
    background: var(--mocha-dark) !important;
    color: var(--gold) !important;
}
.additionalServHeader .odi,
.additionalServHeader em.odi { color: var(--gold) !important; }

/* Yes/No switch */
.switch-field input[type="radio"] + label,
.switch-field label {
    background: var(--mocha-dark) !important;
    color: var(--cream-dim) !important;
    border: 1px solid var(--hairline-mid) !important;
}
.switch-field input[type="radio"]:checked + label {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border-color: var(--gold) !important;
}

/* Continue / Hold / Send-a-Quote button row */
.card-body-footer.spc-conti-cont,
.spc-conti-cont {
    background: rgba(30,22,14,.4) !important;
    border-top: 1px solid var(--hairline) !important;
    padding: 14px 18px !important;
    text-align: right;
}
input.btn.btn-outline-primary.HoldNoEmailLNK,
input.btn.btn-outline-primary.HoldLNK,
input.btn.btn-outline-primary.saveForLaterBtn {
    background: transparent !important;
    border: 1px solid var(--hairline-strong) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    border-radius: 2px !important;
}
input.btn.btn-primary.ContinueLNK,
#continuePaymentBtn,
input#PessengerContinue {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border: 1px solid var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    border-radius: 2px !important;
}

/* Top hotline-style label (".titlelbl" — engine inlined #454545 dark grey bar) */
.titlelbl { background: var(--mocha-dark) !important; color: var(--gold) !important; }

/* Bonus offer rule image flags (TA Deal / TPI compass logo).
   Cream chip so the dark raster PNG reads against the brown row. */
.rule-img-max-area,
img.rule-img-max-area,
img.offer-img,
.offer-img.ng-star-inserted {
    background: var(--cream) !important;
    padding: 2px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px var(--hairline-mid) !important;
}

/* Promo-code badges (Member Special, Non Refundable, etc.) — engine
   renders the icon via a background-image PNG on a bare transparent
   span, so they read as small dark glyphs on the brown row. Give them
   the same cream chip as .offer-img above and a matching 24px size so
   the whole bonus-offers row is consistent. */
.cruise-promotions .promo-code,
li .promo-code,
.bonus-text-primary ~ .promo-code,
.promo-code[class*="promo-"] {
    width: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    background-color: var(--cream) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-origin: content-box !important;
    border-radius: 4px !important;
    padding: 2px !important;
    box-shadow: 0 0 0 1px var(--hairline-mid) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Date-table bonus-offer column (td.rules-icons / .rules-list-view) —
   mixes img.rule-img-max-area (28px) and .promo-code spans (24px), so
   the icons have uneven heights and inconsistent gaps. Standardise
   every icon to a uniform 26x26 cream chip with even 3px side margins
   so they line up and sit equally spaced. */
.rules.rules-list-view,
td.rules-icons .rules {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    vertical-align: middle;
}
td.rules-icons .offer-img,
td.rules-icons .rule-img-max-area,
td.rules-icons .promo-code,
.rules-list-view .offer-img,
.rules-list-view .rule-img-max-area,
.rules-list-view .promo-code,
.rules.rules-list-view img,
.rules.rules-list-view .promo-code {
    width: 26px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    margin: 0 3px !important;          /* equal spacing between icons */
    padding: 2px !important;
    border-radius: 4px !important;
    background-color: var(--cream) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-origin: content-box !important;
    box-shadow: 0 0 0 1px var(--hairline-mid) !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* =============================================================
   Client feedback — Paul Valenti review, 29 May 2026
   Re-skin remaining off-brand template colors + fix dark-on-dark
   contrast. Item numbers match the review email.
   ============================================================= */

/* ---- #4  "+ View More" ports toggle — was a white pill that
   overlapped the ports text. Engine: a.read-more, absolutely
   positioned inside .ships-view-more-content with a white bg. ---- */
a.read-more,
.read-more,
.ships-view-more-content .read-more,
.ships-view-more-content a.read-more {
    background: var(--mocha) !important;   /* matches the card, masks truncated text cleanly */
    color: var(--gold) !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 4px !important;
    font-weight: 600 !important;
    width: 97px !important;
}
a.read-more:hover, .read-more:hover { color: var(--gold-light) !important; }
/* Fade overlay after the ports list — drop its background to transparent */
.ships-view-more-content::after {
    background: transparent !important;
}

/* ---- #8  "Lowest Rate" box — bright green dashed border
   (rgb(38,189,151)). Engine: .low-rate / .col-12.low-rate ---- */
.low-rate,
.col-12.low-rate,
div.low-rate {
    border: 1px solid var(--hairline-mid) !important;
    border-style: solid !important;
    border-color: var(--hairline-mid) !important;
    background: rgba(212,175,55,.05) !important;
    border-radius: 4px !important;
}
.low-rate .low-rate,
.low-rate-list { border: none !important; background: transparent !important; }

/* All other green dashed borders/lines — the per-price divider lines in
   the "Lowest Rate" box (.word-break) and the dashed boxes around the
   date-table prices (.lowest-sailing-price). Engine greens:
   rgb(38,189,151) & rgb(38,190,76). Convert to solid, pale gold. */
.lowest-sailing-price,
.low-rate .word-break,
.cruise-lowest-prices .word-break,
.low-rate-list .word-break,
.word-break.ng-star-inserted {
    border-style: solid !important;
    border-color: var(--hairline-strong) !important;   /* pale gold */
}
.lowest-sailing-price {
    border: 1px solid var(--hairline-strong) !important;
    border-radius: 3px !important;
    background: transparent !important;
}

/* ---- Date-group separators — engine draws a blue dashed
   bottom border (rgb(9,120,189)) + blue year label.
   Engine: .clear.pt-2.pb-2.mb-2 inside the sailing list ---- */
.cruise-sailing-component .clear.pt-2.pb-2.mb-2,
.clear.pt-2.pb-2.mb-2 {
    border-bottom: 1px dashed var(--hairline-mid) !important;
    color: var(--gold) !important;
}

/* ---- #2  "Modify Your Search" bar overlapping the All/Ocean/River
   radios + the Itineraries/Sailings counts.
   Real structure (verified live):
     section.search-bar-section
       div.custom-modifysearchtext      (the bar — engine: position:relative; z-index:3)
       div.container-fluid.relative
         search-bar-component
           div.row.section-initial-search
             div[data-ody-id=DestinationTypesAndCountsContainer]  (radios + counts)
   The engine tucks the form up under the bar (negative margin for the
   collapse animation) and the bar's z-index:3 paints over it. Fix:
   drop the bar out of the stacking contest, reset the tuck-up margin,
   and give the first form row clearance below the bar. ---- */
.custom-modifysearchtext {
    position: static !important;   /* neutralises the engine's z-index:3 overlay */
    z-index: auto !important;
    margin-bottom: 1rem !important;
}
section.search-bar-section .container-fluid.relative,
search-bar-component,
search-bar-component .row.section-initial-search {
    margin-top: 0 !important;      /* undo the negative tuck-up margin */
}
search-bar-component .row.section-initial-search {
    padding-top: 14px !important;  /* clear the bar */
}
[data-ody-id="DestinationTypesAndCountsContainer"],
.search-cruise-types {
    margin-top: 0 !important;
    position: relative;
    z-index: 1;                    /* sit above, not behind, the bar */
}
/* All / Ocean / River radio labels + the counts text */
.search-cruise-types .custom-control-label { color: var(--cream-dim) !important; }
.search-cruise-types .custom-control-input:checked ~ .custom-control-label { color: var(--gold) !important; }
[data-ody-id="ItinerariesCountsContainer"] strong,
[data-ody-id="SailingsCountsContainer"] strong { color: var(--gold) !important; }
[data-ody-id="ItinerariesCountsContainer"] .opacity-50,
[data-ody-id="SailingsCountsContainer"] .opacity-50 { color: var(--cream-dim) !important; opacity: 1 !important; }

/* ---- #3  Expanded filter dropdowns — unreadable option text
   on white rows (3A) + bright-blue selected row (3B).
   Covers select2, Bootstrap dropdowns and list-group variants. */
.filter-panel .dropdown-menu,
.filter-panel .select2-dropdown,
.filter-panel .select2-results,
.filter-content .dropdown-menu {
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline-mid) !important;
}
.filter-panel .dropdown-item,
.filter-panel .select2-results__option,
.filter-panel li,
.filter-content .dropdown-item {
    color: var(--cream) !important;
    background: transparent !important;
}
.filter-panel .dropdown-item:hover,
.filter-panel .select2-results__option--highlighted,
.filter-panel li:hover {
    background: rgba(212,175,55,.12) !important;
    color: var(--cream) !important;
}
/* 3B — selected row: blue -> gold, white check stays readable */
.filter-panel .dropdown-item.active,
.filter-panel .dropdown-item.selected,
.filter-panel li.active,
.filter-panel .list-group-item.active,
.filter-panel .select2-results__option[aria-selected="true"],
.filter-panel .select2-results__option--selected,
.select2-results__option[aria-selected="true"],
.select2-results__option--selected {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border-color: var(--gold) !important;
}

/* ---- #6  Date-picker calendar — white popup is fine; only the
   month/year header bar + < > chevrons are off-brand blue.
   Recolor header to gold, chevrons to dark brown. Covers
   bootstrap-datepicker, jQuery-UI and ngb variants. ---- */
.datepicker .datepicker-switch,
.datepicker thead tr:first-child th,
.datepicker .prev,
.datepicker .next,
.ui-datepicker-header,
.ui-datepicker-title,
.ngb-dp-navigation-chevron,
.ngb-dp-arrow-btn,
.bs-datepicker-head,
.calendar-header,
[class*="datepicker"] [class*="header"] {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
}
.datepicker .prev, .datepicker .next,
.ui-datepicker-prev, .ui-datepicker-next,
.ngb-dp-navigation-chevron,
.bs-datepicker-head button,
.calendar-header .prev, .calendar-header .next {
    color: var(--mocha-deep) !important;
    border-color: var(--mocha-deep) !important;
}
.ngb-dp-navigation-chevron { border-width: 0 .12em .12em 0 !important; }

/* ---- #7  "Rate Type" / fare-feature icons on list rows —
   bright red/green/black/blue stock icons -> monochrome gold.
   (Not present on every supplier; written defensively.) ---- */
.rate-type .odi,
.rate-type-icons .odi,
[class*="rate-type" i] .odi,
[class*="ratetype" i] .odi,
.fare-features .odi,
.fare-feature-icons .odi,
.included-features .odi,
.cruise-amenities .odi,
.amenity-icons .odi,
[class*="rate-type" i] img,
.fare-features img {
    color: var(--gold) !important;
    filter: none !important;
}

/* ---- #1 / #5  Shipboard-credit (SC) badge — near-black on
   brown. Recolor any SC / credit badge to gold chip + dark text.
   (Not present on this supplier's sailings; defensive.) ---- */
.shipboard-credit,
.sbc-badge,
.credit-badge,
.bonus-credit,
[class*="shipboard" i],
[class*="credit-amount" i],
[data-ody-id*="ShipboardCredit" i] {
    background: var(--gold) !important;
    color: var(--mocha-deep) !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
}

/* ---- #9  Guest Information — STATE dropdown placeholder nearly
   invisible on brown. Lighten placeholder + gold border to match
   the Country field. ---- */
.section-residency select,
.section-residency .form-control,
.guest-residency select,
select[name*="State" i],
select[id*="State" i],
select[name*="state" i] {
    color: var(--cream) !important;
    background: var(--mocha-dark) !important;
    border: 1px solid var(--hairline-mid) !important;
}
.section-residency select option,
select[name*="State" i] option,
select[id*="State" i] option {
    color: #1c1c1c !important;        /* native list keeps OS bg — dark text reads */
    background: #fff !important;
}
.section-residency .select2-selection__placeholder,
.select2-selection__placeholder {
    color: var(--cream-dim) !important;
}
.section-residency .select2-selection,
.guest-residency .select2-selection {
    border: 1px solid var(--hairline-mid) !important;
    background: var(--mocha-dark) !important;
}

/* ---- #10  Category Selection — room-type letter badges (D, O, B…).
   Each category sets its own background colour on the page, so we keep
   that (no background override). Just normalise the shape + weight, and
   force the text to mocha. The text colour must also win over the global
   `a { color: gold }` rule, so the <a> variants are listed explicitly. ---- */
.category-code,
.cat-code,
.category-letter,
.subcategory-code,
.deck-category-code,
.ship-category-title .badge,
[class*="category-code" i],
[class*="cabin-code" i],
a.category-code,
a.cat-code,
a.category-letter,
a.subcategory-code,
a.deck-category-code,
a[class*="category-code" i],
a[class*="cabin-code" i] {
    color: var(--mocha-deep) !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
}

/* ---- Stray blue spinner border on the client loader ---- */
.client-loader { border-top-color: var(--gold) !important; }

/* ---- Results-toolbar icon buttons (sort direction, share, and the
   List/Grid view toggle). The active view button carries .btn-primary,
   which the global text-button rule was padding to 9x22 (69x43px) and
   leaving transparent with a dark — invisible — icon. Normalise all of
   them to compact 34x34 square icon buttons, render the toggle as a
   joined segmented control, and give the active one a gold fill with a
   dark icon. ---- */
.cruise-list-view.btn-group { display: inline-flex !important; gap: 0 !important; }
.cruise-list-view.btn-group .btn,
[data-ody-id="LblSorthByBotton"] .btn.btn-icon,
sort-by-component .btn.btn-icon {
    padding: 6px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--hairline-mid) !important;
    border-radius: 2px !important;
}
.cruise-list-view.btn-group .btn:not(.btn-primary) { background: transparent !important; }
.cruise-list-view.btn-group .btn { border-radius: 0 !important; margin: 0 !important; }
.cruise-list-view.btn-group .btn:first-child { border-radius: 2px 0 0 2px !important; }
.cruise-list-view.btn-group .btn:last-child  { border-radius: 0 2px 2px 0 !important; border-left: none !important; }
/* Active (selected) view button — gold fill, dark icon */
.cruise-list-view.btn-group button.btn.btn-primary {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}
.cruise-list-view.btn-group button.btn.btn-primary .odi { color: var(--mocha-deep) !important; }
.cruise-list-view.btn-group button.btn:not(.btn-primary) .odi { color: var(--gold) !important; }
/* Sort-direction + share icons stay gold */
[data-ody-id="LblSorthByBotton"] .btn .odi,
sort-by-component .btn.btn-icon .odi,
button.btn-default.btn-icon .odi-share { color: var(--gold) !important; }

/* ---- Catch-all for hard-coded engine blue ------------------ */
[style*="#0978bd"], [style*="#0978BD"],
[style*="#0678be"], [style*="#0678BE"],
[style*="rgb(9, 120, 189)"], [style*="rgb(9,120,189)"],
[style*="rgb(6, 120, 190)"], [style*="rgb(6,120,190)"] {
    background-color: var(--mocha-light) !important;
    color: var(--gold) !important;
    border-color: var(--hairline-mid) !important;
}