/* Booking widget extensions for the listing detail page.
   Base widget chrome (.bw--improved, .pkg-sticky-sidebar, .mob-footer,
   .mob-backdrop, .mob-sheet) is shared with package_details.css — this file
   only adds what's new here. Trip selection can happen from the widget's own
   picker (.trip-pick-row) or the .alltrips list — both broadcast into every
   live widget instance. */

/* Match the sidebar's top margin to the "About Tour" card's so they align */
@media (min-width: 768px) {
    .col-md-8 > section.adventure.whitecard,
    .pkg-sticky-sidebar {
        margin-top: 20px;
    }
}

/* Bound the sidebar to the viewport so it scrolls on its own instead of extending past it */
@media (min-width: 768px) {
    .pkg-sticky-sidebar {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #D2D5DB transparent;
    }
    .pkg-sticky-sidebar::-webkit-scrollbar { width: 6px; }
    .pkg-sticky-sidebar::-webkit-scrollbar-track { background: transparent; }
    .pkg-sticky-sidebar::-webkit-scrollbar-thumb { background: #D2D5DB; border-radius: 100px; }
    .pkg-sticky-sidebar::-webkit-scrollbar-thumb:hover { background: #B5BAC2; }
}

/* Species cards use row-cols-5 (20% each) sized for the homepage's full-width container; shrink to 3-per-row here so cards stay the same size in the narrower col-md-8 */
@media (min-width: 768px) {
    #species-section .row-cols-5 > * { width: 33.333%; }
}

/* In-widget "Choose your trip" picker (desktop sidebar + mobile sheet) */
.bw--improved .trip-pick-sec { padding-top: 14px; }
.bw--improved .trip-pick-list { display: flex; flex-direction: column; gap: 8px; }
.bw--improved .trip-pick-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.bw--improved .trip-pick-row:hover { border-color: var(--ink-2); }
.bw--improved .trip-pick-row .radio {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--rule-strong); position: relative;
}
.bw--improved .trip-pick-row .info { flex: 1 1 auto; min-width: 0; }
.bw--improved .trip-pick-row .ttl { font-weight: 600; font-size: 13px; color: var(--ink); }
.bw--improved .trip-pick-row .meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.bw--improved .trip-pick-row .price { flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--ink); }
.bw--improved .trip-pick-row.selected {
    border-color: var(--ink); border-width: 2px; background: var(--selected-tint); padding: 9px 11px;
}
.bw--improved .trip-pick-row.selected .radio { border-color: var(--ink); border-width: 5px; }
.bw--improved .trip-pick-row.disabled {
    cursor: not-allowed; opacity: .55;
    background: repeating-linear-gradient(45deg, #fff 0 4px, #F4F4F7 4px 8px);
}
.bw--improved .trip-pick-row.disabled .price { color: var(--muted); font-weight: 600; }

/* Deposit breakdown summary, ported from package_details.css commit b5d24f8f1 (not yet on this branch) */
.bw--improved .bw-row { gap: 10px; }
.bw--improved .bw-row .label { min-width: 0; }
.bw--improved .bw-row .val { white-space: nowrap; flex-shrink: 0; }
.bw--improved .bw-row-deposit { margin-top: 7px; padding-top: 10px; border-top: 1px dashed var(--rule-strong); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bw--improved .bw-dep-label { font-weight: 700; font-size: 13px; color: var(--ink); }
.bw--improved .bw-dep-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.bw--improved .bw-dep-val { font-weight: 800; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.bw--improved .bw-row-captain { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 6px 0 2px; }
.bw--improved .bw-row-captain .label { color: var(--muted); }
.bw--improved .bw-row-captain .val { color: var(--muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.bw--improved .cta .price-pill { white-space: nowrap; }
/* Keep the deposit pill visible on desktop too (shared CSS hides it there) */
@media (min-width: 768px) { .bw--improved .cta .price-pill { display: inline-flex; } }
/* Stacked fineprint lines sit closer together than a single standalone note */
.bw--improved .bw-fineprint-line { margin-top: 6px; }

/* Days control (compact stepper, reuses .stepper visuals from the date section) */
.bw--improved .days-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px dashed var(--rule); margin-top: 6px; }
.bw--improved .days-row .who { font-weight: 600; font-size: 13px; }

/* Mobile footer: WhatsApp icon as a 3rd flex item, plus the deposit pill in the Reserve button */
@media (max-width: 767px) {
    .mob-footer-whatsapp {
        flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        margin-left: auto;
    }
    .mob-footer-whatsapp i { color: #25D366 !important; font-size: 30px; }
    .mob-cta-btn { padding: 13px 16px; }
    .mob-cta-btn .mob-cta-price { background: rgba(0,0,0,.08); padding: 2px 9px; border-radius: 100px; font-weight: 700; font-size: 13px; white-space: nowrap; }
    /* customnew.css's shared div#mobilesearchpop has margin-left:-50px, leaving a gap on the right; match its selector specificity (div#id) so this override actually wins */
    div#mobilesearchpop { margin-left: -12px !important; }
    /* Bump up the "Tours from $X" price block, it reads too small next to the Reserve button */
    .mob-price-top { font-size: 22px; }
    .mob-price-top .mob-curr { font-size: 16px; }
    .mob-price-sub { font-size: 16px; font-weight: 600; }
}

/* Widget loading state during the AJAX availability refresh */
.bw--improved.bw-loading { opacity: .6; pointer-events: none; }

/* "Ver Disponibilidad" hero button: sitewide .lbutton forces width:100%,
   which stretches too wide now that this row lives in the narrower
   two-column layout — cap it to its natural content width instead. */
.hero-avail-btn { width: auto !important; display: inline-flex !important; align-items: center; gap: 8px; white-space: nowrap; padding-left: 14px !important; padding-right: 14px !important; }
@media (max-width: 767px) { .hero-avail-btn { width: 100% !important; justify-content: center; } }

/* Captain photo + name/address row: force explicit flex layout so the
   circular avatar and the text beside it never overlap, regardless of the
   legacy nested .container/.row/.col-md-8 wrapper this section still sits in. */
.captain-header-row { display: flex !important; flex-wrap: wrap; align-items: flex-start !important; }
.captain-photo-col { flex: 0 0 90px !important; max-width: 90px !important; width: 90px !important; }
.captain-photo-col .circleimg { width: 80px !important; height: 80px !important; }
.captain-info-col { flex: 1 1 0 !important; max-width: none !important; width: auto !important; min-width: 0; }

/* Star-rating breakdown (5/4/3/2/1 bars): the sitewide .ratingline/.ratecount
   rules position the bar and count with hand-tuned percentages (position:
   absolute; left:X%; margin-left:Y%) calibrated for the page's original
   single-column width. In the new narrower two-column layout those
   percentages no longer clear the star icon, so the bar/count overlap it.
   Replace with an explicit flex row so it lays out correctly at any width. */
.reviewnums li.posrelative {
    display: flex !important;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.reviewnums .rateleft { width: 14px !important; flex: 0 0 auto; }
.reviewnums .staricon { flex: 0 0 auto; }
.reviewnums .ratingline {
    position: static !important;
    top: auto !important; left: auto !important; transform: none !important;
    width: auto !important; flex: 1 1 auto; min-width: 0;
    height: 8px !important;
    border-radius: 6px;
    overflow: hidden;
}
.reviewnums .ratecount { margin-left: 0 !important; flex: 0 0 28px; text-align: right; }

/* The "big star + 4.8 + reviews" summary vs. the 5/4/3/2/1 breakdown list
   use Bootstrap .col-md-3/.col-md-9 for their side-by-side split. Force it
   explicitly with flex (min-width:0 on the list side so its content, now
   fixed by the .reviewnums rules above, can never push the row to wrap). */
.rating_section {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 16px;
}
.rating_section > div:first-child { flex: 0 0 auto; width: auto; }
.rating_section > div:last-child { flex: 1 1 auto; min-width: 0; width: auto; }
@media (max-width: 480px) {
    .rating_section { flex-wrap: wrap !important; }
    .rating_section > div:first-child,
    .rating_section > div:last-child { flex: 1 1 100%; }
}

/* Review photo strip: shared .col-md-8r is 12.5% (8-per-row), used elsewhere
   on the page too (e.g. species icons) — scope the 6-per-row size to just
   this review-photos row instead of changing the shared class. The row's
   own .flex-nowrap-mbl class forces flex-wrap:nowrap unconditionally (not
   actually mobile-scoped despite the name) — override with a more specific
   selector so it wraps into a proper 6-column grid on desktop instead of a
   horizontal-scroll strip. */
@media (min-width: 768px) {
    .review-photos-row.flex-nowrap-mbl { flex-wrap: wrap !important; overflow: visible !important; }
    .review-photos-row .col-md-8r { width: 16.6667% !important; }
}

/* Review cards (server-rendered by Front::ajaxPostCustomerReview into
   #customer_review_div): same bug as the captain header — a fixed 60x60
   .circleimg avatar inside a percentage-based .col-md-1 that's now too
   narrow for it in the two-column layout, overlapping the name/badge text
   next to it. Bootstrap's .row is already flex-wrap:wrap (so the message/
   photos .col-md-12 below still correctly drops to its own line) — only the
   header row's column widths need fixing, not the wrap behavior itself. */
.reviewslist .formwhitecard.row > .col-md-1,
.reviewslist .comments.row > .col-md-1 {
    flex: 0 0 72px !important; max-width: 72px !important; width: 72px !important;
    padding-right: 0 !important;
}
.reviewslist .circleimg { width: 52px !important; height: 52px !important; }
.reviewslist .formwhitecard.row > .col-md-9,
.reviewslist .formwhitecard.row > .col-md-11,
.reviewslist .comments.row > .col-md-11 {
    flex: 1 1 0 !important; max-width: none !important; width: auto !important; min-width: 0;
    padding-left: 15px !important;
}
.reviewslist .messagehead .badge { margin-left: 8px; }

/* Section-jump pill nav (.tripoptions): flex-wrap layout, desktop only —
   mobile keeps customnew.css's horizontal-scroll strip. */
@media (min-width: 768px) {
    .tripoptions {
        margin-top: 2rem;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        gap: 10px;
    }
    .tripoptions li { margin-right: 0 !important; }
}

/* Match the "show more photos" overlay's radius to the thumbnail under it */
.showmore { border-radius: 12px; }

/* "Trips & Prices" card selection (replaces the old "Reserve" link that
   navigated straight to booking) — clicking "Select" highlights this card
   and pushes the choice into the sidebar widget via bwBroadcastTripSelection
   in listing_details_widget.js; the actual booking now happens from the
   sidebar's/mobile sheet's own Reserve CTA. */
.trip-select-btn {
    border: 1px solid #026278; background: #fff; color: #026278;
    font-family: inherit; cursor: pointer;
}
.trip-select-btn.selected {
    background: #026278; border-color: #026278; color: #fff;
}
.tripsbooking:has(.trip-select-btn) {
    cursor: pointer;
}
.tripsbooking.trip-card-selected {
    border: 2px solid #026278;
}