/* ==========================================================================
   Cruises - single-page select flow (select3.phtml)
   --------------------------------------------------------------------------
   Loaded AFTER cruises-enhance.css and cruises-select2.css, so the --cr-*
   tokens and the .c2-* components are available and reused rather than
   duplicated. Everything here is scoped under .c3-flow, so it cannot alter
   select.phtml or select2.phtml.

   THE ONE RULE THAT REMOVES THE WIZARD
   ------------------------------------
   main.css:2412 hides .travel-steps .data until its step has .active, which
   is what made each panel replace the last. Forcing .data visible turns the
   same markup into one continuous page - the JS keeps adding and removing
   .active and it simply stops mattering.

   Hiding a section that does not apply still works, because that is done
   with .d-none on the .step-N WRAPPER: a display:none parent removes the
   whole subtree from layout, so the child rule below cannot resurrect it.
   That distinction is what makes this safe - the Carnival "no dining" and
   guarantee-cabin paths keep working untouched.
   ========================================================================== */
.c3-flow .travel-steps .data {
    display: block !important;
}
.c3-flow .travel-steps .result {
    display: none !important;
}

/* Section headings: the numbered label replaces two stacked h2s. */
.c3-flow .travel-steps .title {
    display: none !important;
}
.c3-flow .travel-steps .title-active {
    display: block !important;
    font-size: .8125rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    color: var(--cr-muted, #64748b) !important;
    margin: 0 0 .5rem !important;
}
.c3-flow .travel-steps .subtitle {
    display: block !important;
    font-size: .8125rem;
    color: var(--cr-muted, #64748b);
    margin: -.25rem 0 .75rem;
}

/* Each step becomes a plain block on the page, not a floating card. */
.c3-flow .travel-steps .step {
    margin-bottom: 1.1rem !important;
}
.c3-flow .travel-steps .data.card,
.c3-flow .travel-steps .card.item {
    border: 1px solid var(--cr-line, #e7ebf3) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
.c3-flow .travel-steps .data.card > .card-body {
    padding: 1.15rem 1.25rem !important;
}

/* Intermediate CONTINUE buttons are gone - one CTA lives in the rail. */
.c3-flow .travel-steps .data.card > .card-footer {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Passenger counter - tighter, and the age inputs read as a set
   -------------------------------------------------------------------------- */
.c3-flow .travelers-counter .fs-2 {
    font-size: 1.35rem !important;
    font-weight: 600;
    min-width: 1.75rem;
    display: inline-block;
}
.c3-flow .travelers-counter h4 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--cr-ink, #13203b);
}
.c3-flow .travelers-counter h6 {
    font-size: .75rem;
    color: var(--cr-muted, #64748b);
    margin: 2px 0 0;
}
.c3-flow #ageguests {
    border-top: 1px solid var(--cr-line, #e7ebf3);
    padding-top: 1rem !important;
}
.c3-flow #ageguests .row {
    margin-bottom: .6rem !important;
    align-items: center;
}
.c3-flow #ageguests h4 {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cr-muted, #64748b);
}
.c3-flow .travel-input {
    border-radius: 10px;
    border: 1px solid var(--cr-line, #e7ebf3);
}

/* --------------------------------------------------------------------------
   Date and price grid - the best thing on the page, sharpened
   -------------------------------------------------------------------------- */
.c3-flow .tab-info .tab-col-label > div,
.c3-flow .tab-info .tab-col-item > div {
    padding: .45rem .55rem;
    font-size: .875rem;
    border-radius: 9px;
    line-height: 1.35;
}
.c3-flow .tab-info .tab-col-label > div {
    color: var(--cr-muted, #64748b);
    font-weight: 500;
    white-space: nowrap;
}
.c3-flow .tab-info .tab-date {
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    font-size: .8125rem;
}
.c3-flow .tab-info .selectcabin {
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    color: var(--cr-ink, #13203b);
    transition: background .13s ease, color .13s ease;
}
.c3-flow .tab-info .selectcabin:hover {
    background: #eef6ff;
}
.c3-flow .tab-info .best-price-color {
    color: var(--cr-price, #0db14b) !important;
    font-weight: 600;
}
.c3-flow .tab-info .selectcabin.is-picked,
.c3-flow .tab-info .selectcabin.is-picked.best-price-color {
    background: var(--cr-accent, #0056b3);
    color: #fff !important;
    font-weight: 600;
}
.c3-flow .tab-info .text-danger {
    text-align: center;
    color: #cbd5e1 !important;
}
.c3-flow .selectedtt {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Cabin cards - a price comparison first, a picture second
   -------------------------------------------------------------------------- */
.c3-flow #cabins .card.item {
    transition: border-color .14s ease, background .14s ease;
    margin-bottom: .5rem !important;
}
.c3-flow #cabins .card.item:hover {
    border-color: #cfe0f5 !important;
}
.c3-flow #cabins .card.item.is-picked {
    border: 2px solid var(--cr-accent, #0056b3) !important;
    background: #f4f9ff !important;
}
.c3-flow #cabins h2 {
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
    margin-bottom: 2px;
}
.c3-flow #cabins .results-price2 {
    font-size: 1.25rem !important;
    font-weight: 600;
    color: var(--cr-ink, #13203b);
}
.c3-flow #cabins .results-price-sub {
    font-size: .6875rem;
    color: var(--cr-muted, #64748b);
    text-transform: lowercase;
}
.c3-flow #cabins .rounded-tl-25r {
    border-radius: 13px 0 0 13px;
}

/* Skeleton rows while the cabin list loads - replaces a blocking spinner
   with something that shows the shape of what is coming. */
.c3-flow .c3-skel {
    height: 74px;
    border-radius: 14px;
    background: var(--cr-bg-soft, #f6f8fc);
    border: 1px solid var(--cr-line, #e7ebf3);
    margin-bottom: .5rem;
    animation: c3pulse 1.25s ease-in-out infinite;
}
.c3-flow .c3-skel:nth-child(2) { animation-delay: .12s; }
.c3-flow .c3-skel:nth-child(3) { animation-delay: .24s; }
@keyframes c3pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* --------------------------------------------------------------------------
   Selects (location / deck / room / dining)
   -------------------------------------------------------------------------- */
.c3-flow .form-select {
    border-radius: 10px;
    border: 1px solid var(--cr-line, #e7ebf3);
    font-size: .9375rem;
    padding: .5rem .75rem;
}
.c3-flow .form-select:focus {
    border-color: var(--cr-accent, #0056b3);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .10);
}

/* --------------------------------------------------------------------------
   The rail - receipt, checklist, and the only button on the page
   -------------------------------------------------------------------------- */
.c3-flow .c2-rail {
    padding: 20px !important;
}
.c3-flow .c3-check {
    border-bottom: 1px solid var(--cr-line, #e7ebf3);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.c3-flow .c3-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    padding: 2px 0;
    color: #b6bfcd;
}
.c3-flow .c3-check-row.is-done {
    color: var(--cr-ink, #13203b);
}
.c3-flow .c3-check-row.is-done .c3-dot {
    background: var(--cr-price, #0db14b);
    border-color: var(--cr-price, #0db14b);
}
.c3-flow .c3-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d8dee9;
    flex-shrink: 0;
}
.c3-flow .c3-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: .8rem 1rem;
    margin-top: 1rem;
    border-radius: 11px;
    font-weight: 600;
    font-size: .9375rem;
    border: 0;
    background: var(--cr-accent, #0056b3);
    color: #fff;
    transition: background .14s ease;
}
.c3-flow .c3-cta:hover {
    background: var(--cr-accent-d, #003d80);
    color: #fff;
}
.c3-flow .c3-cta.is-off {
    background: #e9edf4;
    color: #97a3b6;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Mobile - the rail becomes a sticky summary bar so the price and the
   button are never scrolled away from
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .c3-flow .c2-rail {
        position: sticky;
        bottom: 0;
        z-index: 5;
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
        padding: 14px 16px !important;
    }
    .c3-flow .c3-check,
    .c3-flow .c3-rail-hide-sm {
        display: none !important;
    }
    .c3-flow .c2-total .c2-v {
        font-size: 1.55rem;
    }
    .c3-flow .c3-cta {
        margin-top: .6rem;
    }
}

/* --------------------------------------------------------------------------
   Scroll offsets for the "follow the flow" scrolling in select3.phtml
   --------------------------------------------------------------------------
   c3ScrollToNew() uses scrollIntoView({block:'start'}), which puts the target
   flush against the top of the viewport - underneath the site header, so the
   section heading a guest needs to read ("Select your room number") would be
   the first thing hidden. scroll-margin-top reserves that space.

   Kept here rather than in the JS so the value can be corrected against a
   real header height without touching the scrolling logic.
   -------------------------------------------------------------------------- */
.c3-flow .step[data-step] {
    scroll-margin-top: 90px;
    scroll-margin-bottom: 24px;
}
@media (max-width: 991.98px) {
    /* The rail is sticky at bottom:0 on small screens and overlays roughly
       160px, so a block scrolled to the bottom edge would sit under it. */
    .c3-flow .step[data-step] {
        scroll-margin-top: 70px;
        scroll-margin-bottom: 180px;
    }
}

/* --------------------------------------------------------------------------
   v2's shared extras action bar is redundant here - the rail's single CTA
   drives everything. diningStepTarget() still un-hides it, so it is held
   down from the stylesheet rather than by fighting that logic in JS.
   -------------------------------------------------------------------------- */
.c3-flow #c2extrasactions {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Every intermediate CONTINUE is hidden, by id.
   --------------------------------------------------------------------------
   Hiding .card-footer was not enough: #continuecabin sits in a plain
   div.py-4.text-end, not a footer, so it stayed on screen. A guest could
   press it - and because the rail's CTA was waiting on state that only that
   press produced, pressing it was the only thing that worked, which made the
   page feel like a loop.

   The handlers behind these ids are still live and still do the real work
   (the cabins request, the room options fetch, the dining and gratuities
   reads). They are fired by the CHOICE that should trigger them. Only the
   buttons are gone.
   -------------------------------------------------------------------------- */
.c3-flow #continue1,
.c3-flow #continue2,
.c3-flow #continue12,
.c3-flow #continuecabin,
.c3-flow #continuedeck,
.c3-flow #continuedining,
.c3-flow #continuedtips,
.c3-flow #continueextras,
.c3-flow #continuebtn {
    display: none !important;
}

/* --------------------------------------------------------------------------
   The legacy #totals panel is the OLD rail. It un-hides itself when a cabin
   card is clicked (select3.phtml:994) and then renders a second Departure,
   a second cabin name and a second Total directly on top of the new rail's
   button. One receipt, not two.
   -------------------------------------------------------------------------- */
.c3-flow #totals {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Collapse the WRAPPERS of the hidden buttons, not just the buttons.
   --------------------------------------------------------------------------
   #continuecabin sits in a <div class="py-4 text-end">. Hiding the anchor
   left that div in the flow with its py-4 intact - 1.5rem top AND bottom of
   empty space between the guarantee notice and "Select your room number".
   A hidden control should take no room at all.

   Targeted through .step-3 rather than :has(), which is unnecessary here:
   this is the only .py-4.text-end in the file, and a descendant selector
   works in every browser the site supports.
   -------------------------------------------------------------------------- */
.c3-flow .step-3 .py-4.text-end {
    display: none !important;
}

/* Trim the card's own bottom padding when its footer is gone, so the last
   element inside a section is not floating above dead space. */
.c3-flow .travel-steps .data.card > .card-body:last-child {
    padding-bottom: 1rem !important;
}

/* The guarantee / special-needs notice is supporting text, not a card of
   its own weight - lighten it so it stops competing with the cabin rows. */
.c3-flow #cabins + .card.item,
.c3-flow .cabin-experiences ~ .card.item {
    background: var(--cr-bg-soft, #f6f8fc) !important;
    border: 1px solid var(--cr-line, #e7ebf3) !important;
}