/* ==========================================================================
   Cruises - consolidated select flow (select2.phtml)
   --------------------------------------------------------------------------
   Loaded AFTER cruises-enhance.css so the --cr-* tokens defined there are
   available. Scoped to the v2 view only: every rule below is either a new
   .c2-* class or sits under .c2-flow, so linking this file cannot change
   the appearance of select.phtml or any other page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STEP CHIPS
   Replaces the stack of oversized per-step headings. The old page gave each
   of seven steps an h2 at font-size 2rem plus a dimmed duplicate title, so
   the headings occupied more vertical space than the controls did and there
   was no single place showing what had been chosen so far.
   -------------------------------------------------------------------------- */
.c2-steps {
    display: flex;
    gap: 10px;
    margin: 0 0 24px;
}
.c2-step {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--cr-line, #e7ebf3);
    border-radius: 12px;
    padding: 10px 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.c2-step-k {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--cr-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c2-step-v {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c2-step.is-active {
    border: 2px solid var(--cr-accent, #0056b3);
    padding: 9px 13px;
    box-shadow: 0 2px 10px rgba(0, 86, 179, .10);
}
.c2-step.is-active .c2-step-k {
    color: var(--cr-accent, #0056b3);
}
.c2-step.is-todo {
    opacity: .55;
}
.c2-step.is-done .c2-step-k::before {
    content: "\2713";
    color: var(--cr-price, #0db14b);
    font-weight: 700;
    margin-right: 5px;
}

/* --------------------------------------------------------------------------
   2. COMPACT HEADINGS
   The chips now carry the wayfinding, so the dimmed duplicate .title is
   redundant and the active one only needs to name the current panel.
   -------------------------------------------------------------------------- */
.c2-flow .travel-steps .title {
    display: none !important;
}
.c2-flow .travel-steps .active .title-active {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    margin-bottom: .25rem !important;
}
.c2-flow .travel-steps .subtitle {
    font-size: .875rem;
    color: var(--cr-muted, #64748b);
    margin-bottom: .75rem;
}

/* --------------------------------------------------------------------------
   3. PRICE RAIL
   Two numbers, always both visible, with the larger one carrying the total.
   The hierarchy is the point: per person and total sat at identical weight
   in the old markup, which is part of why the two were confused for each
   other during the pricing work.
   -------------------------------------------------------------------------- */
.c2-rail {
    background: #fff;
    border: 1px solid var(--cr-line, #e7ebf3);
    border-radius: var(--cr-radius, 16px);
    padding: 18px 20px;
}
@media (min-width: 992px) {
    .c2-rail-sticky {
        position: sticky;
        top: 16px;
    }
}
.c2-rail-ship {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    line-height: 1.25;
}
.c2-rail-sub {
    font-size: .8125rem;
    color: var(--cr-muted, #64748b);
    line-height: 1.5;
    margin-top: 2px;
}
.c2-rail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: .875rem;
    padding: 3px 0;
}
.c2-rail-k {
    color: var(--cr-muted, #64748b);
}
.c2-rail-v {
    color: var(--cr-ink, #13203b);
    font-weight: 500;
    text-align: right;
}
.c2-rail-sep {
    border: 0;
    border-top: 1px solid var(--cr-line, #e7ebf3);
    margin: 12px 0;
    opacity: 1;
}
.c2-pp {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.c2-pp .c2-k {
    font-size: .875rem;
    color: var(--cr-muted, #64748b);
}
.c2-pp .c2-v {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
}
.c2-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 6px;
}
.c2-total .c2-k {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
}
.c2-total .c2-v {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--cr-ink, #13203b);
    white-space: nowrap;
}
.c2-note {
    font-size: .75rem;
    color: var(--cr-muted, #64748b);
    line-height: 1.5;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   4. SELECTABLE ROWS  (cabin categories, decks)
   Replaces the wide image cards for the list itself. A category is a price
   comparison first and a picture second, so the price, the per-person
   figure and how many are left all belong on one scannable line.
   -------------------------------------------------------------------------- */
.c2-row {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--cr-line, #e7ebf3);
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.c2-row:hover {
    border-color: #cfe0f5;
    box-shadow: 0 2px 10px rgba(16, 34, 68, .07);
}
.c2-row.is-on {
    border: 2px solid var(--cr-accent, #0056b3);
    padding: 10px 13px;
    background: #f4f9ff;
}
.c2-row.is-off {
    opacity: .55;
    cursor: not-allowed;
}
.c2-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.c2-row-name {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
}
.c2-row-price {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    white-space: nowrap;
}
.c2-row-bot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--cr-muted, #64748b);
}
.c2-cheapest {
    color: var(--cr-price, #0db14b);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. DATE GRID
   Tighter cells and a clearer selected state. The grid was already the best
   part of this page - this only sharpens it.
   -------------------------------------------------------------------------- */
.c2-flow .tab-info .tab-col-item > div {
    border-radius: 8px;
}
.c2-flow .tab-info .selectcabin {
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.c2-flow .tab-info .selectcabin:hover {
    background: #f4f9ff;
}
.c2-flow .tab-info .selectcabin.is-picked {
    background: var(--cr-accent, #0056b3);
    color: #fff;
    font-weight: 600;
}
.c2-flow .tab-info .selectcabin.is-picked .selectedtt {
    color: #fff;
}

/* --------------------------------------------------------------------------
   6. MOBILE - the rail becomes a summary bar under the content
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .c2-rail {
        padding: 14px 16px;
    }
    .c2-total .c2-v {
        font-size: 1.6rem;
    }
}