/* ==========================================================================
   Cruises - visual enhancement layer
   --------------------------------------------------------------------------
   Loaded AFTER css/cruises.min.css so it overrides without touching the
   minified build. CSS only - no markup changes - so it cannot affect
   booking behaviour.
   ========================================================================== */

:root {
    --cr-ink: #13203b;
    --cr-muted: #64748b;
    --cr-line: #e7ebf3;
    --cr-bg-soft: #f6f8fc;
    --cr-accent: #0056b3;
    --cr-accent-d: #003d80;
    --cr-price: #0db14b;
    --cr-radius: 16px;
    --cr-shadow: 0 2px 8px rgba(16, 34, 68, .06), 0 12px 28px -14px rgba(16, 34, 68, .22);
    --cr-shadow-hover: 0 4px 12px rgba(16, 34, 68, .09), 0 22px 44px -18px rgba(16, 34, 68, .34);
}

/* ==========================================================================
   1. RESULT CARDS  (search.phtml -> .cruiseoffer)
   Flat bordered rows -> lifted cards with a clear hover affordance.
   ========================================================================== */
.card.item.cruiseoffer {
    border-radius: var(--cr-radius) !important;
    box-shadow: var(--cr-shadow) !important;
    border: 1px solid var(--cr-line) !important;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    background: #fff;
}
.card.item.cruiseoffer:hover {
    transform: translateY(-3px);
    box-shadow: var(--cr-shadow-hover) !important;
    border-color: #cfe0f5 !important;
}

/* Image column flush to the card edge instead of floating inside padding */
.cruiseoffer .carousel-col {
    padding: 0 !important;
}
.cruiseoffer .carousel,
.cruiseoffer .carousel-inner,
.cruiseoffer .carousel-item {
    height: 100%;
}
.cruiseoffer .carousel-item img {
    border: 0 !important;
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
}
.cruiseoffer .carousel-control-prev,
.cruiseoffer .carousel-control-next {
    opacity: 0;
    transition: opacity .18s ease;
    width: 12%;
}
.cruiseoffer:hover .carousel-control-prev,
.cruiseoffer:hover .carousel-control-next {
    opacity: .85;
}

/* Typography inside the card */
.cruiseoffer .title {
    color: var(--cr-ink);
    letter-spacing: -.01em;
    line-height: 1.25;
}
.cruiseoffer .subtitle {
    color: var(--cr-muted);
}
.cruiseoffer .reviews {
    color: #f5a524;
    letter-spacing: 1px;
}
.cruiseoffer .results-logo img,
.cruiseoffer .results-logo {
    max-height: 26px;
}

/* Price block - make the number the loudest thing on the row */
.cruiseoffer .results-price2 {
    color: var(--cr-price) !important;
    font-weight: 800 !important;
    font-size: 1.65rem !important;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.cruiseoffer .results-price-sub {
    color: var(--cr-muted) !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.best-price-color {
    color: var(--cr-price) !important;
    font-weight: 700;
}

/* Give the price/CTA column a soft panel so it reads as a distinct zone */
@media (min-width: 992px) {
    .cruiseoffer .col.text-end {
        background: linear-gradient(180deg, #fff 0%, var(--cr-bg-soft) 100%);
        border-left: 1px solid var(--cr-line);
        border-radius: 0 var(--cr-radius) var(--cr-radius) 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1rem 1.25rem !important;
    }
}

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */
.btn-book {
    background: var(--cr-accent) !important;
    border-color: var(--cr-accent) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 10px !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    box-shadow: 0 6px 16px -8px rgba(0, 86, 179, .8);
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-book:hover,
.btn-book:focus {
    background: var(--cr-accent-d) !important;
    border-color: var(--cr-accent-d) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(0, 61, 128, .95);
}
.btn-book:active {
    transform: translateY(0);
}

/* ==========================================================================
   3. FILTER SIDEBAR  (.search-col)
   ========================================================================== */
.search-col {
    background: #fff;
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    margin-bottom: 1.25rem;
}
.search-col h2 {
    font-size: 1rem !important;
    font-weight: 800;
    color: var(--cr-ink);
    letter-spacing: .01em;
}
.search-col .form-select,
.search-col .form-control {
    border-radius: 10px;
    border-color: var(--cr-line);
}
.search-col .input-group-text {
    background: var(--cr-bg-soft);
    border-color: var(--cr-line);
    border-radius: 10px 0 0 10px;
    color: var(--cr-accent);
}
.search-col .form-check-label {
    color: var(--cr-ink);
    font-size: .92rem;
}
.search-col .badge {
    background: var(--cr-bg-soft);
    color: var(--cr-muted);
    font-weight: 700;
}
.search-col .form-check-input:checked {
    background-color: var(--cr-accent);
    border-color: var(--cr-accent);
}

/* ==========================================================================
   4. CABIN CATEGORY GRID  (select.phtml -> .tab-info / .tab-col)
   ========================================================================== */
.data.card {
    border-radius: var(--cr-radius) !important;
    box-shadow: var(--cr-shadow) !important;
    border: 1px solid var(--cr-line) !important;
}
.tab-info,
.tab-info-lg {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tab-info::-webkit-scrollbar,
.tab-info-lg::-webkit-scrollbar {
    height: 8px;
}
.tab-info::-webkit-scrollbar-thumb,
.tab-info-lg::-webkit-scrollbar-thumb {
    background: #c9d2e3;
    border-radius: 999px;
}
.tab-col {
    scroll-snap-align: start;
    border-radius: 12px;
    transition: background .15s ease, box-shadow .15s ease;
}
.tab-col-label {
    color: var(--cr-muted);
    font-weight: 700;
}
/*
 * NO padding here.
 *
 * .tab-col-item (the price column) and .tab-col-label (the Cabin/Interior/
 * Ocean view column) are two SEPARATE flex columns sitting side by side, and
 * their rows only line up because every row is the same height in both.
 * Padding one and not the other pushed the whole price column down by the
 * top padding, so each figure sat proud of its own label - subtle per row,
 * obvious by the Suite line.
 *
 * If this ever needs breathing room, it has to go on
 *   .tab-col-item > div, .tab-col-label > div
 * together, never on one column alone.
 */
.tab-col-item:hover {
    background: var(--cr-bg-soft);
}
.selectcabin {
    cursor: pointer;
    border-radius: 10px;
    padding: .35rem .5rem;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.selectcabin:hover {
    background: rgba(0, 86, 179, .08);
    color: var(--cr-accent-d);
    box-shadow: inset 0 0 0 1px rgba(0, 86, 179, .25);
}
.tab-date {
    color: var(--cr-ink);
    font-weight: 700;
}

/*
 * Keep the two columns' rows in step.
 *
 * .tab-col-label and .tab-col-item are SEPARATE flex columns, so nothing makes
 * row N of one match row N of the other except both cells being the same
 * height. main.css sets height:60px for exactly that reason - but these are
 * flex items, and a flex item's default min-height:auto refuses to shrink
 * below its content. The date header carries two lines ("Mon" / "Sep 28,
 * 2026") plus 30px of padding, so that ONE cell stretches past 60px while
 * "Cabin" stays at 60px, and the 3px blue header border ends up at two
 * different heights with a visible step between the columns.
 *
 * flex:0 0 <h> plus min-height defeats min-height:auto, so the declared height
 * is actually honoured. The header row gets its own, taller value because two
 * lines genuinely do not fit in 60px - applied to BOTH columns so they still
 * match.
 */
/* Base .tab-info - main.css sets height:50px. Used by search.phtml. */
.tab-col-label > div,
.tab-col-item > div {
    min-height: 50px;
    flex: 0 0 50px;
}

.tab-col-label > div:first-child,
.tab-col-item > div:first-child {
    height: 62px;
    min-height: 62px;
    flex: 0 0 62px;
}

/* .tab-info-lg - main.css sets height:60px. Used by offer.phtml + select.phtml. */
.tab-info-lg .tab-col-label > div,
.tab-info-lg .tab-col-item > div {
    min-height: 60px;
    flex: 0 0 60px;
}

.tab-info-lg .tab-col-label > div:first-child,
.tab-info-lg .tab-col-item > div:first-child {
    height: 72px;
    min-height: 72px;
    flex: 0 0 72px;
}

/* ==========================================================================
   5. ITINERARY TIMELINE / DAY CARDS  (offer.phtml)
   ========================================================================== */
.trip-badge {
    background: var(--cr-accent);
    color: #fff;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    display: inline-block;
}
.cd-timeline-content {
    border: 1px solid var(--cr-line);
    box-shadow: var(--cr-shadow);
}
.map-border {
    border: 1px solid var(--cr-line);
    box-shadow: var(--cr-shadow);
}

/* ==========================================================================
   6. CHECKOUT (summary / passengers / payment)
   ========================================================================== */
.checkout-col .card {
    border-radius: var(--cr-radius) !important;
    border: 1px solid var(--cr-line) !important;
    box-shadow: var(--cr-shadow) !important;
}
@media (min-width: 992px) {
    /* Keep the running total visible while long guest forms scroll */
    .checkout-col.col-lg-4 {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        z-index: 2;
    }
    .search-col {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Agent commission widget - themed, so the markup can drop inline styles */
.cruise-commission {
    background: linear-gradient(135deg, #fdfcfb, #f3f0ff);
    border: 1px solid #dcd4f7;
    border-radius: var(--cr-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.cruise-commission .cruise-commission-title { color: #4a3a8c; }
.cruise-commission .cruise-commission-value { color: #6a4bc3; }
.cruise-commission .cruise-commission-note  { color: #7b6bb8; }

/* ==========================================================================
   7. ACCESSIBILITY - the bespoke widgets had no visible focus ring
   ========================================================================== */
.selectcabin:focus-visible,
.filter:focus-visible,
.btn-book:focus-visible,
.cruiseoffer a:focus-visible,
.search-col .form-check-input:focus-visible {
    outline: 3px solid rgba(0, 86, 179, .45);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ==========================================================================
   8. RESPONSIVE - the cruise views previously had no @media rules at all
   ========================================================================== */
@media (max-width: 991.98px) {
    .tab-col-label { min-width: 92px; }
    .tab-col-item  { min-width: 104px; }
}

@media (max-width: 767.98px) {
    .cruiseoffer .carousel-inner,
    .cruiseoffer .carousel-item {
        min-height: 0 !important;
        max-height: none !important;
    }
    .cruiseoffer .carousel-item img {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .cruiseoffer .col.text-end {
        text-align: left !important;
        border-left: 0;
        border-top: 1px solid var(--cr-line);
        background: var(--cr-bg-soft);
        padding: .85rem 1rem !important;
    }
    /* Tables in the confirmed-cruises views could not collapse */
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        white-space: nowrap;
    }
    table td,
    table th { width: auto !important; }
}

@media (max-width: 575.98px) {
    .cruiseoffer .results-price2 { font-size: 1.4rem !important; }
    .card-body.p-4,
    .card-footer.p-4 { padding: 1rem !important; }
    .tab-col-label { min-width: 78px; font-size: 1rem !important; }
    .tab-col-item  { min-width: 92px; }
    .tab-date { white-space: nowrap; }
    .checkout-col { padding-left: .5rem; padding-right: .5rem; }
}

/* ==========================================================================
   CRUISE LINE FILTER  (search.phtml -> .cr-linefilter)
   --------------------------------------------------------------------------
   Promoted from the bottom of the rail to the top. It is now the first
   decision offered, so it is styled as a panel rather than as one more row
   of checkboxes - the previous treatment was a collapsed link that read as
   a footnote next to the h2 headings around it.

   Rows are made deliberately large: three or four lines means there is room
   to spend, and a full-width clickable row is a far easier target than a
   13px checkbox, which matters most on a phone.
   ========================================================================== */
.cr-linefilter {
    background: var(--cr-bg-soft, #f6f8fc);
    border: 1px solid var(--cr-line, #e7ebf3);
    border-radius: var(--cr-radius, 16px);
    padding: 1rem 1.1rem .65rem;
}
.cr-linefilter > h2 {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--cr-ink, #13203b);
    letter-spacing: -.01em;
    margin-bottom: .75rem !important;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--cr-line, #e7ebf3);
}
.cr-linefilter-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 -.35rem;
    padding: .5rem .35rem;
    border-radius: 9px;
    transition: background-color .15s ease;
}
.cr-linefilter-row:hover {
    background: #fff;
}
.cr-linefilter-row .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
    border-color: #b8c2d4;
}
.cr-linefilter-row .form-check-input:checked {
    background-color: var(--cr-accent, #0056b3);
    border-color: var(--cr-accent, #0056b3);
}
.cr-linefilter-row .form-check-label {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    line-height: 1.25;
}
/* float-end is in the markup for consistency with the other filters; the
   flex row makes it a no-op, so the badge is placed by flex instead. */
.cr-linefilter-row .badge {
    float: none !important;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--cr-line, #e7ebf3);
    color: var(--cr-muted, #64748b);
    font-weight: 600;
    font-size: .75rem;
    padding: .3rem .55rem;
}
.cr-linefilter-row .form-check-input:checked ~ .form-check-label {
    color: var(--cr-accent-d, #003d80);
}

/* ==========================================================================
   CONFIRMATION RAIL - collapsible price breakdown
   --------------------------------------------------------------------------
   confirm.phtml's summary rail listed every charge for every passenger, the
   deposit, the payment schedule and the commission - around 800px of figures
   beside a column that ended at the ship card, so the page showed a large
   blank area next to a wall of numbers.

   The detail is now behind a toggle. These rules only style that toggle;
   the showing and hiding is Bootstrap's own collapse.
   ========================================================================== */
.cr-detail-toggle {
    color: var(--cr-accent, #0056b3) !important;
    font-weight: 600;
    padding: .55rem 0;
    cursor: pointer;
}
.cr-detail-toggle:hover {
    color: var(--cr-accent-d, #003d80) !important;
}
/* Bootstrap puts .collapsed on the trigger while the target is hidden, so the
   chevron can point down when closed and up when open with no JS. */
.cr-detail-chevron {
    transition: transform .18s ease;
}
.cr-detail-toggle:not(.collapsed) .cr-detail-chevron {
    transform: rotate(180deg);
}