/**
 * MB Groups — [mb_trip_*] data tags + booking-form styling, for a
 * staff-built Elementor trip page. Design language matches the plugin's
 * own --mb-*/--tp-* brand tokens (teal #0099c5, Montserrat) so a tag
 * dropped into an Elementor page still reads as the same product.
 *
 * @since 1.0.0
 */
:root {
    --trip-tag-primary: #0099c5;
    --trip-tag-primary-dark: #007a9e;
    --trip-tag-ink: #1a2332;
    --trip-tag-muted: #64748b;
    --trip-tag-border: #e2e8f0;
    /* Quick-facts card ([mb_trip_features]) — the app's dark-mode navy,
       not the lighter teal used elsewhere on the trip page. */
    --trip-tag-quickfacts-dark: #004656;
    --trip-tag-quickfacts-dark-hover: #00303c;
}

/* flatpickr's calendar is appended straight to <body> (appendTo:
   document.body in tbInitDatePickers()), OUTSIDE .mb-tp-booking's own
   scoping entirely — so it's exposed to whatever global CSS the site
   theme/Elementor ships, not just this plugin's own rules. Used to fight
   that with a custom year <select> (tbFpAddYearDropdown(), now removed —
   see trip-booking.js) that never rendered correctly despite !important
   everywhere: a <select>'s closed-state box is OS-drawn chrome a theme's
   own global CSS fights far harder than a plain number input. Styling
   flatpickr's OWN native year field directly instead — same fix already
   proven working in mb-booking's own flatpickr skin, color/background
   only. A follow-up also tried adding appearance:none here, which instead
   made the year digits disappear entirely (removing a number input's
   native appearance can collapse the width it reserves for its own text,
   with nothing here to replace it) — reverted, matching mb-booking's
   recipe exactly rather than an "improved" version of it. */
.flatpickr-current-month input.cur-year { color: #fff !important; background: transparent !important; }

/* Rates table — ported 1:1 from mb-booking's Weekender rates table
   (.mb-weekender-rates / .mb-weekender-rates-table) so both products'
   pricing tables are structurally and visually identical. */
.mb-trip-rates {
    /* Literal fallbacks on every var() below — on the live site the
       :root custom-property block was silently failing to apply (only
       literal-value declarations rendered; every var()-driven color
       stayed unset/white, confirmed via dev tools), so nothing here
       may depend on --trip-tag-* resolving. */
    --mbtr-brand: var(--trip-tag-primary, #0099c5);
    --mbtr-brand-dark: var(--trip-tag-primary-dark, #007a9e);
    --mbtr-ink: var(--trip-tag-ink, #1a2332);
    --mbtr-muted: var(--trip-tag-muted, #64748b);
    --mbtr-border: var(--trip-tag-border, #e2e8f0);
    --mbtr-surface: #f0f9fc;
    font-family:'Montserrat',system-ui,sans-serif !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
.mb-trip-rates.mb-trip-rates-liu {
    --mbtr-brand: #c4006a;
    --mbtr-brand-dark: #8f004d;
    --mbtr-surface: #fdf0f6;
}
.mb-trip-rates-table { width:100% !important; border-collapse:collapse !important; background:#fff !important; border:1px solid var(--mbtr-border, #e2e8f0) !important; border-radius:12px !important; overflow:hidden !important; }
.mb-trip-rates-table th, .mb-trip-rates-table td { padding:12px 14px !important; text-align:center !important; font-size:14px !important; }
.mb-trip-rates-table thead th { background:var(--mbtr-brand, #0099c5) !important; color:#fff !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.4px !important; font-size:12px !important; }
.mb-trip-rates-table thead th:first-child, .mb-trip-rates-table tbody th { text-align:left !important; }
.mb-trip-rates-table tbody th { font-weight:700 !important; background:var(--mbtr-surface, #f0f9fc) !important; color:var(--mbtr-ink, #1a2332) !important; }
.mb-trip-rates-table tbody tr:nth-child(even) td, .mb-trip-rates-table tbody tr:nth-child(even) th { background:#fafcfd !important; }
.mb-trip-rates-table td { font-weight:600 !important; color:var(--mbtr-ink, #1a2332) !important; }
.mb-trip-rates-note { margin:10px 4px 0 !important; font-size:12px !important; color:var(--mbtr-muted, #64748b) !important; font-style:italic !important; }
.mb-trip-rates-empty { padding:16px 18px !important; background:var(--mbtr-surface, #f0f9fc) !important; border:1px dashed var(--mbtr-border, #e2e8f0) !important; border-radius:10px !important; text-align:center !important; font-family:'Montserrat',system-ui,sans-serif !important; color:var(--mbtr-muted, #64748b) !important; }
@media (max-width: 480px) {
    .mb-trip-rates-table th, .mb-trip-rates-table td { padding:9px 8px !important; font-size:12.5px !important; }
}

/* Included list */
.mb-trip-included-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-family:'Montserrat',system-ui,sans-serif; }
.mb-trip-included-list li { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--trip-tag-ink, #1a2332); font-weight:600; }
.mb-trip-included-list i { color:#0f8a5f; font-size:13px; }

/* Choosable activities pills */
.mb-trip-choice-pills { display:flex; flex-wrap:wrap; gap:8px; font-family:'Montserrat',system-ui,sans-serif; }
.mb-trip-choice-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; background:rgba(0,153,197,.08); border:1px solid rgba(0,153,197,.2); font-size:13px; font-weight:600; color:var(--trip-tag-ink, #1a2332); transition:background .15s ease, transform .15s ease; }
.mb-trip-choice-pill:hover { background:rgba(0,153,197,.14); transform:translateY(-1px); }
.mb-trip-choice-pill em { font-style:normal; font-weight:700; color:#0f8a5f; font-size:12px; }
.mb-trip-included-tag { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:rgba(16,163,74,.12); color:#0f8a5f; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }

/* Add-on cards */
.mb-trip-addon-cards { display:flex; flex-wrap:wrap; gap:12px; font-family:'Montserrat',system-ui,sans-serif; }
.mb-trip-addon-card { flex:1 1 260px; max-width:400px; display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--trip-tag-border, #e2e8f0); border-radius:12px; background:#fafcfe; transition:transform .15s ease, box-shadow .15s ease; }
.mb-trip-addon-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.08); }
.mb-trip-addon-icon { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.mb-trip-addon-info { flex:1 1 auto; min-width:0; }
.mb-trip-addon-info strong { display:block; font-size:14px; margin-bottom:2px; color:var(--trip-tag-ink, #1a2332); }
.mb-trip-addon-info p { margin:0; font-size:12.5px; color:var(--trip-tag-muted, #64748b); line-height:1.5; }
.mb-trip-addon-price { flex:0 0 auto; font-weight:700; font-size:13px; color:var(--trip-tag-primary-dark, #007a9e); white-space:nowrap; }
.mb-trip-addon-price--free { color:#0f8a5f; }
@media (max-width:640px){ .mb-trip-addon-card { flex-basis:100%; max-width:100%; } }

/* Files */
.mb-trip-files-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-family:'Montserrat',system-ui,sans-serif; }
.mb-trip-files-list a { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--trip-tag-primary-dark, #007a9e); text-decoration:none; }
.mb-trip-files-list a:hover { text-decoration:underline; }
.mb-trip-files-list i { font-size:13px; }

/* "Quick facts" card ([mb_trip_features]) — dark date-header bar over a
   bordered white body holding the icon tiles, matching the original
   hand-built Weekender card mockup 1:1 so ONE tag reproduces the whole
   card instead of staff hand-building a container around it. */
/* !important throughout this block — Elementor's own per-page generated
   CSS (post-<id>.css) is printed as a LATE inline <style> block, often
   right before </head>, so it wins equal-specificity cascades against a
   normally-enqueued plugin stylesheet regardless of source order.
   Reported: card/icons/borders all silently failing to apply even
   though the linked stylesheet + markup were both confirmed correct on
   the live page. !important is the reliable way to guarantee these
   actually render inside an Elementor-built page. */
.mb-trip-quickfacts { max-width: 900px !important; margin: 0 auto !important; border: 2px solid var(--trip-tag-quickfacts-dark, #004656) !important; border-radius: 14px !important; overflow: hidden !important; background: #fff !important; font-family: 'Montserrat', system-ui, sans-serif !important; }
.mb-trip-quickfacts-header { background: var(--trip-tag-quickfacts-dark, #004656) !important; color: #fff !important; text-align: center !important; font-weight: 800 !important; letter-spacing: .03em !important; text-transform: uppercase !important; font-size: 17px !important; padding: 9px 20px !important; margin: 0 !important; }
.mb-trip-quickfacts .mb-trip-features { padding: 28px 24px !important; margin: 0 !important; }
/* Always one row of 4 (never wraps to a second row, even on the tiny
   max-width:140px tile basis) — each tile just shrinks to fit. */
.mb-trip-features { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 20px !important; font-family: 'Montserrat', system-ui, sans-serif !important; }
.mb-trip-feature { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: 160px !important; gap: 10px !important; }
.mb-trip-feature-icon { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: var(--trip-tag-quickfacts-dark, #004656) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; flex: 0 0 auto !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important; }
.mb-trip-feature-icon i { color: #fff !important; }
.mb-trip-feature:hover .mb-trip-feature-icon { transform: translateY(-3px) scale(1.06) !important; box-shadow: 0 8px 18px rgba(0,70,86,.35) !important; background: var(--trip-tag-quickfacts-dark-hover, #00303c) !important; }
.mb-trip-feature-label { font-size: 14px !important; font-weight: 700 !important; color: var(--trip-tag-ink, #1a2332) !important; line-height: 1.3 !important; margin: 0 !important; }
@media (max-width: 480px) {
    .mb-trip-quickfacts-header { font-size: 14px !important; padding: 7px 12px !important; }
    .mb-trip-quickfacts .mb-trip-features { padding: 20px 10px !important; gap: 8px !important; }
    .mb-trip-feature-icon { width: 46px !important; height: 46px !important; font-size: 18px !important; }
    .mb-trip-feature-label { font-size: 11px !important; }
}

/* Overview title/body ([mb_trip_overview_title] / [mb_trip_overview_body]) */
.mb-trip-overview-body { font-family: 'Montserrat', system-ui, sans-serif; font-size: 14.5px; line-height: 1.7; color: #334155; }
.mb-trip-overview-body p { margin: 0 0 14px; }
.mb-trip-overview-body p:last-child { margin-bottom: 0; }

/* Marketing image */
.mb-trip-image { max-width: 100%; height: auto; border-radius: 12px; display: block; }

/* Terms & Conditions (collapsible) */
.mb-trip-terms { font-family:'Montserrat',system-ui,sans-serif; border:1px solid var(--trip-tag-border, #e2e8f0); border-radius:10px; padding:2px 16px; background:#fafcfe; }
.mb-trip-terms summary { padding:12px 4px; font-weight:700; font-size:14px; color:var(--trip-tag-ink, #1a2332); cursor:pointer; list-style:none; }
.mb-trip-terms summary::-webkit-details-marker { display:none; }
.mb-trip-terms summary::before { content:'+'; display:inline-block; width:16px; font-weight:800; color:var(--trip-tag-primary, #0099c5); }
.mb-trip-terms[open] summary::before { content:'\2212'; }
.mb-trip-terms-body { padding:0 4px 14px; font-size:13.5px; line-height:1.65; color:#475569; }
.mb-trip-terms-body p { margin:0 0 10px; }
.mb-trip-terms-body p:last-child { margin-bottom:0; }
.mb-trip-terms-special ul, .mb-trip-terms-special ol { margin:0 0 10px; padding-left:22px; }
.mb-trip-terms-special li { margin-bottom:5px; }
.mb-trip-terms-special li:last-child { margin-bottom:0; }
.mb-trip-terms-special > :last-child { margin-bottom:0; }
.mb-trip-terms-link { margin-top:10px; padding-top:10px; border-top:1px dashed var(--trip-tag-border, #e2e8f0); }
.mb-trip-terms-link a { color:var(--trip-tag-primary, #0099c5); font-weight:600; text-decoration:none; }
.mb-trip-terms-link a:hover { text-decoration:underline; }
.mb-trip-terms-link i { font-size:11px; margin-left:3px; }

/* Itinerary ([mb_trip_itinerary]) — day cards in a max-width column,
   each item a row with a colored icon chip so activities/hotel check-
   in-out/transportation read as distinct at a glance rather than one
   flat undifferentiated list. */
.mb-trip-itinerary { max-width: 720px; margin: 0 auto; font-family:'Montserrat',system-ui,sans-serif; display: flex; flex-direction: column; gap: 14px; }
.mb-trip-itin-day { border:1px solid var(--trip-tag-border, #e2e8f0); border-radius:12px; padding:16px 18px; background:#fff; }
.mb-trip-itin-date { font-size:12.5px; font-weight:800; color:#fff; background: var(--trip-tag-quickfacts-dark, #004656); display:inline-block; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
.mb-trip-itin-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mb-trip-itin-items li { display:flex; align-items:center; gap:12px; font-size:14px; flex-wrap:wrap; padding:6px 0; border-top:1px solid #f1f5f9; }
.mb-trip-itin-items li:first-child { border-top:0; padding-top:0; }
.mb-trip-itin-icon { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; background: var(--trip-tag-primary, #0099c5); }
.mb-trip-itin-hotel .mb-trip-itin-icon { background: var(--trip-tag-quickfacts-dark, #004656); }
.mb-trip-itin-transport .mb-trip-itin-icon { background: var(--trip-tag-muted, #64748b); }
.mb-trip-itin-time { font-size:12px; font-weight:700; color:var(--trip-tag-muted, #64748b); min-width:110px; }
.mb-trip-itin-name { font-weight:600; color:var(--trip-tag-ink, #1a2332); }
.mb-trip-itin-hotel .mb-trip-itin-name, .mb-trip-itin-transport .mb-trip-itin-name { font-style: italic; color: var(--trip-tag-muted, #64748b); }
.mb-trip-itin-note { color:var(--trip-tag-muted, #64748b); font-size:13px; flex-basis:100%; padding-left:42px; }

/* ---------------------------------------------------------------------
 * Booking form ([mb_trip_booking_form]) — identical to the fallback
 * template's own booking-form CSS, so the same registration UI looks
 * right regardless of whether a trip's page is the bare fallback or a
 * staff-built Elementor page using this tag.
 * --------------------------------------------------------------------- */
.mb-tp-booking { font-family:'Montserrat',system-ui,sans-serif; color:var(--trip-tag-ink, #1a2332); margin-bottom:60px; }
.mb-tp-booking-note { margin:0; color:var(--trip-tag-muted, #64748b); font-size:14px; line-height:1.55; }
/* Loading state — shown until trip-booking.js's render() has fully built
   the form AND the browser has actually finished loading the fonts/icons
   it draws on (see tbRevealWhenReady() there); this placeholder is the
   only thing ever visible before that, instead of a plain "form will
   appear here" sentence or a half-styled flash of the real form. */
.mb-tp-booking .tb-loading-card { display:flex; flex-direction:column; align-items:center; gap:14px; padding:48px 20px; }
.mb-tp-booking .tb-loading-card p { margin:0; font-size:14px; color:var(--trip-tag-muted, #64748b); font-weight:600; }
.mb-tp-booking .tb-loading-spinner { width:38px; height:38px; border-radius:50%; border:4px solid #e5e7eb; border-top-color:var(--trip-tag-primary, #0099c5); animation:mbTbLoadSpin .8s linear infinite; }
@keyframes mbTbLoadSpin { to { transform:rotate(360deg); } }
.mb-tp-booking .tb-reveal { opacity:0; transition:opacity .25s ease; }
.mb-tp-booking .tb-reveal.tb-revealed { opacity:1; }
.mb-tp-booking .tb-title { font-size:18px; font-weight:700; margin:0 0 16px; }
.mb-tp-booking .tb-participant { border:2px solid transparent; border-radius:12px; padding:16px 18px; margin-bottom:14px; background:#fafcfe; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:border-color .18s ease; }
.mb-tp-booking .tb-participant:focus-within { border-color:rgba(0,153,197,.35); }
.mb-tp-booking .tb-participant-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--trip-tag-border, #e2e8f0); transition:margin-bottom .15s ease, padding-bottom .15s ease; }
.mb-tp-booking .tb-participant.tb-collapsed .tb-participant-head { margin-bottom:0; border-bottom:0; }
.mb-tp-booking .tb-participant.tb-collapsed { padding-bottom:16px; }
.mb-tp-booking .tb-participant-body { display:flex; flex-direction:column; gap:14px; }
.mb-tp-booking .tb-participant.tb-collapsed .tb-participant-body { display:none; }
.mb-tp-booking .tb-toggle-p { display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:left; }
.mb-tp-booking .tb-toggle-p i.fa-chevron-up { color:var(--trip-tag-muted, #64748b); font-size:12px; transition:transform .2s ease; }
.mb-tp-booking .tb-participant.tb-collapsed .tb-toggle-p i.fa-chevron-up { transform:rotate(180deg); }
.mb-tp-booking .tb-participant-num { font-weight:700; color:var(--trip-tag-primary, #0099c5); font-size:13px; text-transform:uppercase; letter-spacing:.4px; }
.mb-tp-booking .tb-participant-summary { font-weight:600; color:var(--trip-tag-muted, #64748b); font-size:13px; text-transform:none; letter-spacing:normal; }
.mb-tp-booking .tb-remove-p { background:none; border:0; color:#dc2626; font-size:12px; cursor:pointer; }
.mb-tp-booking .tb-cat-block { margin:0 0 18px; }
.mb-tp-booking .tb-cat-label { display:block; font-size:13px; font-weight:700; margin-bottom:10px; color:#004656; }
.mb-tp-booking .tb-cat-select { width:100%; box-sizing:border-box; padding:13px 16px; border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:12px; font-size:15px; font-family:inherit; background:#fbfdfe; color:var(--trip-tag-ink, #1a2332); transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.mb-tp-booking .tb-cat-select:hover { border-color:#cbd5e1; }
.mb-tp-booking .tb-cat-select:focus { outline:none; border-color:var(--trip-tag-primary, #0099c5); background:#fff; box-shadow:0 0 0 4px rgba(0,153,197,.16); }
.mb-tp-booking .tb-occ-block { margin:0 0 18px; }
.mb-tp-booking .tb-occ-label { display:block; font-size:13px; font-weight:700; margin-bottom:10px; color:#004656; }
.mb-tp-booking .tb-occ-select { width:100%; box-sizing:border-box; padding:13px 16px; border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:12px; font-size:15px; font-family:inherit; background:#fbfdfe; color:var(--trip-tag-ink, #1a2332); transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.mb-tp-booking .tb-occ-select:hover { border-color:#cbd5e1; }
.mb-tp-booking .tb-occ-select:focus { outline:none; border-color:var(--trip-tag-primary, #0099c5); background:#fff; box-shadow:0 0 0 4px rgba(0,153,197,.16); }
.mb-tp-booking .tb-occ-block .tb-hint { display:block; margin-top:4px; }
.mb-tp-booking .tb-block { display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
/* Groups several related questions (Personal Info, Emergency Contact,
   Occupancy & Roommates) under one titled outer card instead of each
   question floating as its own equally-weighted box with no hierarchy. */
.mb-tp-booking .tb-group-card { background:#fff; border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:16px; box-shadow:0 1px 3px rgba(15,23,42,.06); padding:18px 20px; margin-bottom:16px; }
.mb-tp-booking .tb-group-card .tb-block { margin-bottom:0; }
.mb-tp-booking .tb-group-card .tb-q { border:0; box-shadow:none; padding:0; }
.mb-tp-booking .tb-group-card .tb-cat-block, .mb-tp-booking .tb-group-card .tb-occ-block, .mb-tp-booking .tb-group-card .tb-roommates-block { padding:0; }
.mb-tp-booking .tb-group-head { display:flex; align-items:center; gap:8px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--trip-tag-border, #e2e8f0); font-size:14px; font-weight:700; color:#004656; text-transform:uppercase; letter-spacing:.03em; }
.mb-tp-booking .tb-group-icon { color:var(--trip-tag-primary, #0099c5); font-size:14px; }
.mb-tp-booking .tb-sec-h { margin:6px 0 0; font-size:13px; font-weight:700; color:#004656; text-transform:uppercase; letter-spacing:.03em; }
/* Every top-level booking-flow question (name/DOB/contact/emergency/etc.)
   gets its own bordered sub-card — matches mb-booking's activity/addon
   card recipe (2px border, 16px radius, soft shadow) instead of being
   one flat stack of fields with no visual separation. */
.mb-tp-booking .tb-q { background:#fff; border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:16px; box-shadow:0 1px 3px rgba(15,23,42,.06); padding:18px 20px; }
.mb-tp-booking .tb-q.tb-q-info { background:rgba(0,153,197,.05); border:0; box-shadow:none; padding:10px 12px; }
.mb-tp-booking .tb-q-label { display:block; font-size:13px; font-weight:700; margin-bottom:10px; color:#004656; }
.mb-tp-booking .tb-q-label-icon, .mb-tp-booking .tb-cat-label .tb-q-label-icon, .mb-tp-booking .tb-occ-label .tb-q-label-icon { color:var(--trip-tag-primary, #0099c5); font-size:12px; margin-right:2px; }
.mb-tp-booking .tb-req { color:#dc2626; }
.mb-tp-booking .tb-q-help { font-size:12px; color:var(--trip-tag-muted, #64748b); margin:-4px 0 10px; line-height:1.4; }
.mb-tp-booking .tb-q-info { background:rgba(0,153,197,.05); border-radius:8px; padding:10px 12px; font-size:13px; }
.mb-tp-booking .tb-in { width:100%; box-sizing:border-box; padding:13px 16px; border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:12px; font-size:15px; font-family:inherit; background:#fbfdfe; color:var(--trip-tag-ink, #1a2332); transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.mb-tp-booking .tb-in::placeholder { color:#94a3b8; }
.mb-tp-booking .tb-in:hover { border-color:#cbd5e1; }
.mb-tp-booking .tb-in:focus { outline:none; border-color:var(--trip-tag-primary, #0099c5); background:#fff; box-shadow:0 0 0 4px rgba(0,153,197,.16); }
.mb-tp-booking .tb-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mb-tp-booking .tb-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.mb-tp-booking .tb-sub { display:flex; flex-direction:column; }
.mb-tp-booking .tb-sub-label { font-size:11px; font-weight:700; color:var(--trip-tag-muted, #64748b); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
@media (max-width:600px){ .mb-tp-booking .tb-row2, .mb-tp-booking .tb-row3 { grid-template-columns:1fr; } .mb-tp-booking .tb-participant { padding:14px; } .mb-tp-booking .tb-q { padding:16px; } }
.mb-tp-booking .tb-measure-row { align-items:center; }
.mb-tp-booking .tb-unit-hint { font-size:12.5px; color:var(--trip-tag-muted, #64748b); white-space:nowrap; }
/* Height's "Feet & Inches" unit: two small number inputs instead of one
   plain number box that can't hold "5'5"". Sits in the same grid cell
   the single value input would otherwise occupy. */
.mb-tp-booking .tb-ftin-group { display:flex; align-items:center; gap:3px; }
.mb-tp-booking .tb-ftin-in { width:100%; min-width:0; padding:13px 8px; text-align:center; }
.mb-tp-booking .tb-ftin-sep { font-size:15px; font-weight:700; color:var(--trip-tag-muted, #64748b); }
.mb-tp-booking .tb-choices { display:flex; flex-direction:column; gap:6px; }
.mb-tp-booking .tb-choice { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.mb-tp-booking .tb-actgroup { border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:16px; padding:16px 18px; margin-bottom:10px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.06); }
/* Validation highlight for a required field left empty/unanswered at
   submit (required activity groups, and the "desired roommates" field). */
.mb-tp-booking .tb-choice-error { border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.12) !important; }
.mb-tp-booking .tb-roommates-block.tb-choice-error .tb-roommates-input { border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.mb-tp-booking .tb-q.tb-choice-error .tb-in,
.mb-tp-booking .tb-q.tb-choice-error input { border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.mb-tp-booking .tb-q.tb-choice-error .tb-q-label { color:#dc2626; }
.mb-tp-booking .tb-actgroup-label { font-weight:600; font-size:13px; margin-bottom:6px; }
.mb-tp-booking .tb-hint { color:var(--trip-tag-muted, #64748b); font-weight:400; font-size:12px; }
/* Add-on cards — same left-accent-stripe recipe as mb-booking's
   .mb-addon-card: a colored bar that's faint when idle, solid once
   checked, plus the whole-card hover lift/shadow. */
.mb-tp-booking .tb-addon { position:relative; border:2px solid var(--trip-tag-border, #e2e8f0); border-radius:16px; padding:16px 18px 16px 22px; margin-bottom:12px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.06); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; overflow:hidden; }
.mb-tp-booking .tb-addon::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--trip-tag-primary, #0099c5); opacity:.35; transition:opacity .2s ease; }
.mb-tp-booking .tb-addon:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,70,86,.14); }
.mb-tp-booking .tb-addon:hover::before { opacity:.7; }
.mb-tp-booking .tb-addon:has(.tb-addon-check:checked) { border-color:rgba(0,153,197,.45); box-shadow:0 8px 22px rgba(0,153,197,.18); }
.mb-tp-booking .tb-addon:has(.tb-addon-check:checked)::before { opacity:1; }
.mb-tp-booking .tb-addon-head strong { font-size:14px; }
.mb-tp-booking .tb-addon-desc { font-size:12.5px; color:var(--trip-tag-muted, #64748b); margin:4px 0 0 24px; }
.mb-tp-booking .tb-addon-q { margin:10px 0 0 24px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.mb-tp-booking .tb-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 18px; border-radius:9px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; border:0; transition:filter .15s ease, transform .1s ease, box-shadow .15s ease; }
.mb-tp-booking .tb-btn:active { transform:scale(.97); }
.mb-tp-booking .tb-btn-ghost { background:transparent; border:1px dashed var(--trip-tag-border, #e2e8f0); color:var(--trip-tag-primary, #0099c5); margin:4px 0 14px; }
.mb-tp-booking .tb-btn-primary { background:linear-gradient(135deg,#0099c5,#007a9e); color:#fff; width:100%; box-shadow:0 4px 12px rgba(0,153,197,.3); }
.mb-tp-booking .tb-btn-primary:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 6px 16px rgba(0,153,197,.4); }
.mb-tp-booking .tb-btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.mb-tp-booking .tb-price { color:#0f8a5f; font-weight:700; font-size:13px; }
.mb-tp-booking .tb-price-total { color:var(--trip-tag-muted, #64748b); font-weight:500; font-size:12px; }
.mb-tp-booking .tb-estimate { margin:10px 0 14px; padding:12px 15px; border-radius:10px; background:rgba(0,153,197,.08); border:1px solid rgba(0,153,197,.22); font-size:14px; transition:background .2s ease; }
.mb-tp-booking .tb-estimate strong { font-size:17px; color:#0099c5; }
.mb-tp-booking .tb-occ-warn { display:block; margin-top:4px; color:#b45309; font-weight:600; }
.mb-tp-booking .tb-q-hidden { display:none !important; }
.mb-tp-booking .tb-error { color:#dc2626; font-size:13px; margin:8px 0; }
.mb-tp-booking .tb-done { text-align:center; padding:20px; }
.mb-tp-booking .tb-done h2 { color:#12a150; }
.mb-tp-booking .tb-done ul { list-style:none; padding:0; font-size:14px; }
.mb-tp-booking .tb-done a { color:var(--trip-tag-primary, #0099c5); font-weight:600; }
.mb-tp-booking .tb-waiver-cta { margin:22px auto 0; max-width:340px; padding:18px; border-radius:14px; border:2px solid var(--trip-tag-border, #e2e8f0); background:#fafcfe; }
.mb-tp-booking .tb-waiver-cta h3 { margin:0 0 6px; font-size:15px; color:var(--trip-tag-ink, #1a2332); }
.mb-tp-booking .tb-waiver-cta p { margin:0 0 12px; font-size:13px; color:#64748b; }
.mb-tp-booking .tb-waiver-cta .tb-btn-primary { width:100%; }
.mb-tp-booking .tb-pay-amt { font-size:15px; margin:0 0 16px; }
.mb-tp-booking #tb-payment-element { margin:0 0 16px; }

/* Step wizard — Participants / Review / Payment / Done, card-based,
   matching mb-booking's own booking-flow visual language: a real
   branded gradient header bar (mirrors .mb-participant-modal-header —
   brand cyan → dark teal, white uppercase title) instead of the
   progress dots/title floating directly on the page background, then
   step cards below on a flat neutral surface. */
.mb-tp-booking .tb-header-bar { background:linear-gradient(135deg, var(--trip-tag-primary, #0099c5) 0%, #007a9e 55%, #006077 100%); border-radius:16px 16px 0 0; padding:26px 28px 22px; margin:0; text-align:center; }
.mb-tp-booking .tb-header-title { margin:0 0 18px; color:#fff; font-size:1.3em; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; text-shadow:0 2px 6px rgba(0,0,0,.2); }
.mb-tp-booking .tb-wizard-body { background:#f1f5fa; border-radius:0 0 16px 16px; padding:28px; }

.mb-tp-booking .tb-progress { display:flex; align-items:center; max-width:560px; margin:0 auto; }
.mb-tp-booking .tb-progress-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.mb-tp-booking .tb-progress-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.4); color:rgba(255,255,255,.75); transition:all .2s ease; }
.mb-tp-booking .tb-progress-active .tb-progress-dot { background:#fff; border-color:#fff; color:#007a9e; box-shadow:0 0 0 4px rgba(255,255,255,.22); }
.mb-tp-booking .tb-progress-done .tb-progress-dot { background:#ff9c00; border-color:#ff9c00; color:#fff; }
.mb-tp-booking .tb-progress-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.7); }
.mb-tp-booking .tb-progress-active .tb-progress-label { color:#fff; }
.mb-tp-booking .tb-progress-rail { flex:1 1 auto; height:2px; background:rgba(255,255,255,.3); margin:0 8px 18px; }
.mb-tp-booking .tb-progress-rail-done { background:#ff9c00; }
.mb-tp-booking .tb-step-card { animation:mbTbStepIn .25s ease; }
@keyframes mbTbStepIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.mb-tp-booking .tb-review-list { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.mb-tp-booking .tb-review-card { border:2px solid transparent; border-radius:12px; padding:16px 18px; background:#fafcfe; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.mb-tp-booking .tb-review-card h3 { margin:0 0 10px; font-size:15px; font-weight:700; color:var(--trip-tag-ink, #1a2332); }
.mb-tp-booking .tb-review-row { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:6px 0; border-top:1px solid #f1f5f9; }
.mb-tp-booking .tb-review-row:first-of-type { border-top:0; }
.mb-tp-booking .tb-review-row span { color:var(--trip-tag-muted, #64748b); }
.mb-tp-booking .tb-review-actions { display:flex; justify-content:space-between; gap:12px; }
.mb-tp-booking .tb-review-actions .tb-btn-primary { flex:1 1 auto; }
@media (prefers-reduced-motion: reduce) {
    .mb-tp-booking .tb-participant, .mb-tp-booking .tb-addon, .mb-tp-booking .tb-btn, .mb-tp-booking .tb-in { transition:none !important; }
    .mb-tp-booking .tb-step-card { animation:none !important; }
}