/*
  Mobile-specific styles for public-facing pages.
  Card layouts, responsive overrides, and any mobile-only UI components.
  Loaded alongside styles_public.css in base.html.

  All colors use CoreUI CSS variables so cards adapt automatically
  when dark mode (data-coreui-theme="dark") is enabled.
*/

/* Sticky sidebar only on md+ — prevents the sidebar from pinning to the viewport
   top on mobile where it stacks full-width above the form content */
@media (min-width: 768px) {
    .position-md-sticky {
        position: sticky;
        top: 0;
    }
}

/* ─── Phone number widget ────────────────────────────────────────────
   Full-width on mobile; 50% on md+ to match single-column form feel.  */
.phone-widget-container {
    width: 50%;
}
@media (max-width: 767.98px) {
    .phone-widget-container {
        width: 100%;
    }
}

/* ─── Reservation cards ──────────────────────────────────────────────
   Used by Your Reservations, Past Reservations, and future tabs.      */
.res-card {
    border: 1px solid var(--cui-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: var(--cui-card-bg, var(--cui-body-bg));
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.res-card-header {
    background: rgba(var(--cui-body-color-rgb), 0.03);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--cui-border-color);
}
.res-card-header img {
    max-width: 36px;
    max-height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
}
.res-card-header .res-card-title {
    flex: 1;
    font-weight: 700;
    font-size: 0.875rem;
}
.res-card-body {
    padding: 0.5rem 0.75rem;
}
.res-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}
.res-card-grid .res-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--cui-secondary-color);
}
.res-card-grid .res-value {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--cui-body-color);
}
.res-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--cui-border-color);
}

/* Canceled reservation card tint */
.res-card.res-card-canceled {
    border-color: var(--cui-danger-border-subtle);
}
.res-card.res-card-canceled .res-card-header {
    background: var(--cui-danger-bg-subtle);
}

/* Unfinished (hold) reservation card — yellow tint */
.res-card.res-card-hold {
    border-color: var(--cui-warning-border-subtle);
}
.res-card-header.res-card-header-hold {
    background: var(--cui-warning-bg-subtle);
    border-bottom-color: var(--cui-warning-border-subtle);
}

/* ─── Participant Transaction History cards ──────────── */
.txn-card {
    border: 1px solid var(--cui-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: var(--cui-card-bg, var(--cui-body-bg));
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.txn-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: rgba(var(--cui-body-color-rgb), 0.03);
    border-bottom: 1px solid var(--cui-border-color);
}
.txn-date {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cui-body-color);
}
.txn-amount {
    font-size: 1rem;
    font-weight: 700;
}
.txn-card-body {
    padding: 0.55rem 0.75rem 0.65rem;
}
.txn-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}
.txn-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cui-secondary-color);
}
.txn-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cui-body-color);
}
.txn-card-footer {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    border-top: 1px solid var(--cui-border-color-translucent);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}
.txn-card-footer .txn-value {
    font-size: 0.8rem;
    color: var(--cui-secondary-color);
}

/* ─── Payment Schedule: status badges (all viewports) ──────────────── */
.pmt-status-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pmt-status-paid    { background: var(--cui-success-bg-subtle);   color: var(--cui-success-text-emphasis); }
.pmt-status-unpaid  { background: var(--cui-danger-bg-subtle);    color: var(--cui-danger-text-emphasis); }
.pmt-status-partial { background: var(--cui-warning-bg-subtle);   color: var(--cui-warning-text-emphasis); }
.pmt-status-default { background: var(--cui-secondary-bg-subtle); color: var(--cui-secondary-text-emphasis); }

/* ─── Participant Detail: additional contact field cards ────────────── */
.detail-category-card {
    border: 1px solid var(--cui-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: var(--cui-card-bg, var(--cui-body-bg));
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.detail-category-header {
    background: rgba(var(--cui-body-color-rgb), 0.03);
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cui-secondary-color);
    border-bottom: 1px solid var(--cui-border-color);
}
.detail-field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--cui-border-color-translucent);
}
.detail-field-row:last-child {
    border-bottom: none;
}
.detail-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cui-secondary-color);
    flex-shrink: 0;
}
.detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cui-body-color);
    text-align: right;
}

/* ─── Payment Schedule: stacked cards on mobile ────────────────────── */
@media (max-width: 767.98px) {
    .main_content_container {
        padding-left: 0;
        padding-right: 0;
    }

    .main_content_container > .container-lg:only-child {
        padding-left: 0;
        padding-right: 0;
    }

    .wizard-step-body {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767.98px) {
    .pmt-schedule-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .pmt-schedule-table thead {
        display: none;
    }

    .pmt-schedule-table,
    .pmt-schedule-table tbody,
    .pmt-schedule-table tfoot {
        display: block;
        width: 100%;
    }

    /* Each row becomes a card */
    .pmt-schedule-table tbody tr {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    .pmt-schedule-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.75rem;
        border: none;
        font-size: 0.875rem;
    }

    .pmt-schedule-table tbody td:last-child {
        border-bottom: none;
    }

    /* First cell (payment name/date) becomes the card header */
    .pmt-schedule-table tbody td:first-child {
        background: var(--cui-tertiary-bg, #f8f9fa);
        font-weight: 700;
        font-size: 0.875rem;
        padding: 0.55rem 0.75rem;
        border-bottom: 1px solid var(--cui-border-color, #dee2e6);
    }

    /* Show data-label as left-side label */
    .pmt-schedule-table tbody td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--cui-secondary-color, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    /* No label for the header cell */
    .pmt-schedule-table tbody td:first-child::before {
        content: none;
    }

    /* Footer total row */
    .pmt-schedule-table tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0.75rem;
        background: var(--cui-tertiary-bg, #f8f9fa);
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .pmt-schedule-table tfoot td {
        border: none;
        padding: 0;
    }

    .pmt-schedule-table tfoot td.pmt-total-label, .pmt-schedule-table tfoot td.pmt-total-paid {
        text-align: left;
        background-color: transparent;
    }
}

/* ─── Event Detail page — participant cards ──────────────────────────
   Used by _event_detail_participant_card.html                          */
.evt-participant-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--cui-body-color);
    text-decoration: none;
}
a.evt-participant-name {
    color: var(--cui-link-color);
    text-decoration: underline;
}
.evt-participant-occupancy {
    font-size: 0.75rem;
    color: var(--cui-secondary-color);
    margin-top: 0.1rem;
}
.evt-canceled-note {
    font-size: 0.8rem;
    color: var(--cui-danger-color);
    padding: 0.4rem 0.75rem;
    background: var(--cui-danger-bg-subtle);
    border-top: 1px solid var(--cui-danger-border-subtle);
}

/* ─── Step bar: responsive tweaks ────────────────────────────────────── */
@media (max-width: 767.98px) {
    .step-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .step-vertical-item {
        min-height: 50px;
    }

    .hide-border-end-sm {
        border-right: none !important;
    }

    .step-line-vertical {
        top: 35px;
    }

    /* Align connector line with 30px mobile icons (center=15px).
       calc() ensures a fixed pixel gap from each icon edge regardless of item width. */
    .step-line-horizontal {
        top: 15px;
        left: calc(50% + 19px);  /* icon half (15px) + 4px gap */
        right: calc(-50% + 3px); /* mirrors left: ends 4px before next icon edge */
    }
}

/* Current step label shown below the icon bar on mobile only */
.step-current-label-mobile {
    font-size: 0.8rem;
    font-weight: 600;
}

/* ─── Reservation wizard formset table: desktop thead styling ────────── */
.wizard-formset-table thead th {
    background-color: var(--cui-tertiary-bg, #f8f9fa);
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
}

/* ─── Add Participants table: CSS card layout on mobile ─────────────
   Transforms the 7-column data-entry table into stacked per-participant cards.
   No template changes: all rules are scoped to .formset_reservation_participants
   and the mobile breakpoint only. Desktop layout is completely unchanged.
   Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+.                    */
@media (max-width: 767.98px) {

    /* Release the table-responsive scroll container on mobile — the card
       layout replaces horizontal scrolling entirely */
    .formset_reservation_participants .table-responsive {
        overflow-x: visible;
    }

    /* Table becomes a plain block container */
    .formset_reservation_participants table {
        display: block;
        width: 100%;
    }

    /* tbody becomes a single-column grid.
       CSS spec §3.4 "Blockification": grid items are always blockified, so even when
       django-dynamic-formset's JS sets style="display:table-row" on a cloned <tr>,
       the computed display resolves to block. Chrome then anchors native <select>
       dropdowns to the correct visual position — no display:block !important needed. */
    .formset_reservation_participants tbody {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Hide the column header row (both the template-rendered one and the
       JS-injected replacement from addTableHeader()) */
    .formset_reservation_participants thead {
        display: none;
    }

    /* Each participant row becomes a card.
       :not(.empty-form) — Bootstrap's d-none keeps the template row hidden (display:none
       removes the element from the grid entirely, so it is never a grid item).
       No display override needed — grid blockification already resolves the display. */
    .formset_reservation_participants tr.formset_row-reservation_participants:not(.empty-form) {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
    }

    /* All cells stack vertically, full width */
    .formset_reservation_participants td {
        display: block;
        padding: 0;
        margin-bottom: 0.75rem;
        border: none;
    }

    /* Inputs and selects fill the card width */
    .formset_reservation_participants td select,
    .formset_reservation_participants td input[type="text"],
    .formset_reservation_participants td input[type="date"] {
        width: 100%;
        min-height: 44px; /* Apple/Google recommended minimum touch target */
        font-size: 1rem;  /* Prevent iOS auto-zoom on focus (requires ≥ 16px — 1rem) */
    }

    /* Field label style applied by all ::before rules below */
    .formset_reservation_participants td::before {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    /* Per-field labels, scoped by the field contained in each <td>.
       Targets Django formset field IDs which always end with "-fieldname". */
    .formset_reservation_participants td:has(select[id$="-user_type"])::before      { content: "Add or choose participant"; }
    .formset_reservation_participants td:has(select[id$="-participant"])::before    { content: "Existing contact"; }
    .formset_reservation_participants td:has(input[id*="-participant_type"])::before { content: "Participant type"; }
    .formset_reservation_participants td:has(input[id$="-first_name"])::before      { content: "First name"; }
    .formset_reservation_participants td:has(input[id$="-last_name"])::before       { content: "Last name"; }
    .formset_reservation_participants td:has(input[id$="-birth_date"])::before      { content: "Date of birth"; }
    .formset_reservation_participants td:has(input[id$="-payment_schedule"])::before { content: "Payment Schedule"; }
    .formset_reservation_participants td:has(select[id$="-payment_profile"])::before { content: "Payment Profile"; }

    /* Payment participant selection — additional monetary / action fields */
    .formset_reservation_participants td:has(input[id$="-balance"])::before              { content: "Balance"; }
    .formset_reservation_participants td:has(input.total-paid-field)::before             { content: "Total paid to date"; }
    .formset_reservation_participants td:has(input.next-payment-date)::before            { content: "Next payment date"; }
    .formset_reservation_participants td:has(input.next-payment-amount)::before          { content: "Next payment amount due"; }
    .formset_reservation_participants td:has(a.btn-primary.btn-sm)::before               { content: none; }
    .formset_reservation_participants td:has(button.btn-secondary.btn-sm)::before        { content: none; }

    /* Delete button (injected by django-dynamic-formset as <a class="del">):
       Sits at the bottom of its card in its own <td>, right-aligned with a
       top separator. No position:absolute needed — flows naturally in block layout. */
    .formset_reservation_participants td:has(a.del) {
        margin-bottom: 0;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
        text-align: right;
    }
    .formset_reservation_participants td:has(a.del)::before {
        content: none; /* no generated label for the delete cell */
    }

    .box-new-participant {
        padding-top: 0.75rem;
    }
}

/* ─── Memberships table: CSS card layout on mobile ──────────────────── */
@media (max-width: 767.98px) {
    /* Release scroll container so card layout takes over */
    .table-responsive:has(.profile-membership-table) {
        overflow-x: visible;
    }

    .profile-membership-table {
        display: block;
        width: 100%;
    }

    .profile-membership-table thead {
        display: none;
    }

    .profile-membership-table tbody {
        display: block;
        width: 100%;
    }

    .profile-membership-table tbody tr {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .profile-membership-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem 0;
        background-color: var(--cui-card-bg, #fff);
        --cui-table-bg-type: white !important;
        border: none;
        font-size: 0.875rem;
    }

    .profile-membership-table td::before {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--cui-secondary-color, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    /* Membership name: card title, full width */
    .profile-membership-table td[data-label="Membership Type"] {
        display: block;
        font-size: 0.95rem;
        padding-bottom: 0.4rem;
        margin-bottom: 0.35rem;
    }
    .profile-membership-table td[data-label="Membership Type"]::before { content: "Membership Type"; }

    /* Membership #: label-value row */
    .profile-membership-table td[data-label="Membership #"]::before { content: "Membership Number"; }

    /* Edit/Delete: side-by-side action buttons */
    .profile-membership-table td[data-label=""] {
        display: inline-flex;
        width: 49%;
        justify-content: center;
        margin-top: 0.5rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--cui-border-color, #dee2e6);
    }
    .profile-membership-table td[data-label=""]::before { content: none; }

    .profile-membership-table td[data-label=""] .btn {
        width: 100%;
        text-align: center;
    }
}

/* ─── Payment Profiles table: CSS card layout on mobile ─────────────── */
@media (max-width: 767.98px) {
    .profile-payment-table {
        display: block;
        width: 100%;
    }

    .profile-payment-table thead {
        display: none;
    }

    .profile-payment-table tbody {
        display: block;
        width: 100%;
    }

    .profile-payment-table tbody tr {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .profile-payment-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem 0;
        border: none;
        font-size: 0.875rem;
    }

    .profile-payment-table td::before {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--cui-secondary-color, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    /* nick_name: card title, full width */
    .profile-payment-table td:nth-child(1) {
        font-weight: 700;
        font-size: 0.95rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--cui-border-color, #dee2e6);
        margin-bottom: 0.35rem;
        display: block;
    }
    .profile-payment-table td:nth-child(1)::before { content: "Nick Name:"; }

    .profile-payment-table td:nth-child(2)::before  { content: "Account Type"; }
    .profile-payment-table td:nth-child(3)::before  { content: "Last 4 Digits"; }
    .profile-payment-table td:nth-child(4)::before  { content: "Exp. Month"; }
    .profile-payment-table td:nth-child(5)::before  { content: "Exp. Year"; }
    .profile-payment-table td:nth-child(6)::before  { content: "Updated"; }

    /* Edit/Delete: action buttons side by side */
    .profile-payment-table td:nth-child(7),
    .profile-payment-table td:nth-child(8) {
        display: inline-flex;
        width: 49%;
        justify-content: center;
        margin-top: 0.5rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--cui-border-color, #dee2e6);
    }
    .profile-payment-table td:nth-child(7) { border-right: none; }
    .profile-payment-table td:nth-child(7)::before,
    .profile-payment-table td:nth-child(8)::before { content: none; }

    .profile-payment-table td:nth-child(7) a,
    .profile-payment-table td:nth-child(8) a {
        width: 100%;
        text-align: center;
    }
}

/* ─── Additional Contacts: desktop table vs mobile cards ─────────────
   Desktop shows the standard django-tables2 table; mobile shows cards
   built from a separate template block.                                */

/* Mobile cards hidden on desktop */
.contacts-cards-mobile { display: none; }

@media (max-width: 767.98px) {
    /* Hide the desktop table on mobile */
    .contacts-table-desktop { display: none; }

    /* Show mobile cards */
    .contacts-cards-mobile { display: block; }

    .contact-card {
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.5rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    /* Card header: name + phone */
    .contact-card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--cui-border-color, #eee);
        background: var(--cui-tertiary-bg, #fafbfc);
    }
    .contact-card__name {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--cui-link-color, #5856d6);
        text-decoration: none;
    }
    .contact-card__name:hover { text-decoration: underline; }
    .contact-card__phone {
        font-size: 0.8rem;
        color: var(--cui-secondary-color, #555);
        white-space: nowrap;
    }

    /* Card body */
    .contact-card__body { padding: 0.6rem 0.85rem; }

    .contact-card__row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.2rem 0;
        font-size: 0.85rem;
    }
    .contact-card__label {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--cui-secondary-color, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
        margin-right: 0.75rem;
    }
    .contact-card__value {
        text-align: right;
        color: var(--cui-body-color, #333);
        word-break: break-word;
    }

    .contact-card__divider {
        border: none;
        border-top: 1px solid var(--cui-border-color-translucent, #f0f0f0);
        margin: 0.35rem 0;
    }

    /* Card footer: actions */
    .contact-card__actions {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        border-top: 1px solid var(--cui-border-color, #eee);
    }
    .contact-card__actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ─── Group event cards ───────────────────────────────────────────────
   Used by Upcoming Group Events and Past Group Events tabs.            */
.group-card {
    border: 1px solid var(--cui-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: var(--cui-card-bg, var(--cui-body-bg));
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.group-card-header {
    background: var(--cui-tertiary-bg);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--cui-border-color);
}
.group-card-title {
    font-weight: 700;
    font-size: 0.875rem;
}
.group-card-subtitle {
    font-size: 0.75rem;
    color: var(--cui-secondary-color);
    margin-top: 0.15rem;
}
.group-card-body {
    padding: 0.5rem 0.75rem;
}
.group-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── Sponsor table: CSS card layout on mobile ───────────────────────
   Transforms the 5-column sponsor data-entry table into stacked cards.
   Scoped to .sponsor-card-deck (added to the template wrapper).
   Same pattern as the Add Participants table above.
   Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+.              */
@media (max-width: 767.98px) {

    /* Release scroll container */
    .sponsor-card-deck .table-responsive {
        overflow-x: visible;
    }

    /* Table becomes block container */
    .sponsor-card-deck table {
        display: block;
        width: 100%;
    }

    /* tbody becomes single-column grid — blockification resolves
       django-dynamic-formset's inline display:table-row */
    .sponsor-card-deck tbody {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Hide column headers */
    .sponsor-card-deck thead {
        display: none;
    }

    /* Each sponsor row becomes a card */
    .sponsor-card-deck tr[class*="formset_row-sponsor_"]:not(.empty-form) {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
    }

    /* Cells stack vertically, full width */
    .sponsor-card-deck td {
        display: block;
        padding: 0;
        margin-bottom: 0.75rem;
        border: none;
    }

    /* Inputs fill card width with touch-friendly sizing */
    .sponsor-card-deck td input[type="text"],
    .sponsor-card-deck td input[type="email"] {
        width: 100%;
        min-height: 44px;
        font-size: 1rem;
    }

    /* Field label base style */
    .sponsor-card-deck td::before {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    /* Per-field labels using :has() */
    .sponsor-card-deck td:has(input[id$="-first_name"])::before { content: "First name"; }
    .sponsor-card-deck td:has(input[id$="-last_name"])::before  { content: "Last name"; }
    .sponsor-card-deck td:has(input[id$="-email"])::before      { content: "Email"; }
    .sponsor-card-deck td:has(input[id$="-phone"])::before      { content: "Phone"; }

    /* Hidden fields — collapse entirely */
    .sponsor-card-deck td:has(input[type="hidden"])::before { content: none; }
    .sponsor-card-deck td:has(input[type="hidden"]) { margin-bottom: 0; padding: 0; }

    /* DELETE checkbox cell */
    .sponsor-card-deck td:has(input[name$="-DELETE"])::before { content: none; }

    /* Delete button — bottom of card, right-aligned with separator */
    .sponsor-card-deck td:has(a.del) {
        margin-bottom: 0;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
        text-align: right;
    }
    .sponsor-card-deck td:has(a.del)::before {
        content: none;
    }
    .sponsor-card-deck .dynamic-form-add {
        padding-top: 0.5rem;
    }
}

/* ─── Accommodation Room Selection: mobile card layout ─────────────
   Transforms the outer room-selection table into stacked cards and the
   inner room-choice table into compact card rows on mobile.
   Scoped to .accom-room-deck (added to formset_obj_add_room.html).
   Same CSS-only transformation pattern as Add Participants above.      */

/* Meta span inside name cell: hidden on desktop */
.accom-item-meta {
    display: none;
}

@media (max-width: 1200px) {

    /* ── Outer room table → block layout ── */
    .accom-room-deck {
        display: block;
        width: 100%;
        border: none;
    }

    /* Hide column header row but keep the dynamic helper text row (.dynamic-helper-text)
       that is appended to thead by JS (shows "N distinct participant(s) saved…") */
    .accom-room-deck > thead > tr:not(.dynamic-helper-text) {
        display: none;
    }

    /* Helper text row: render as a plain block, not a table row */
    .accom-room-deck > thead {
        display: block;
    }
    .accom-room-deck > thead > tr.dynamic-helper-text {
        display: block;
        border: none;
    }
    .accom-room-deck > thead > tr.dynamic-helper-text > td {
        display: block;
        border: none;
        padding: 0.25rem 0;
    }
    .accom-room-deck > thead > tr.dynamic-helper-text > small {
        padding: 0;
    }

    .accom-room-deck > tbody {
        display: block;
        width: 100%;
    }

    /* Each room row: position anchor for the action button */
    .accom-room-deck > tbody > tr.formset_row-room_selections:not(.empty-form) {
        display: block;
        position: relative;
        border: none;
    }

    /* Content cell: full width, no table styling */
    .accom-room-deck > tbody > tr.formset_row-room_selections > td:first-child {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
    }

    /* Action column: overlay on card header area.
       display: block must come first to override table-cell before position: absolute. */
    .accom-room-deck > tbody > tr.formset_row-room_selections > td.action-column {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: auto !important;
        height: auto !important;
        border: none;
        padding: 0;
        z-index: 1;
        background-color: var(--cui-card-cap-bg);
    }

    /* Restyle delete button as outlined danger badge */
    .accom-room-deck td.action-column .btn.del:hover {
        background: var(--cui-danger, #dc3545) !important;
        color: #fff !important;
    }
    .accom-room-deck td.action-column .btn.del {
        width: auto !important;
        height: auto !important;
        border: 1px solid var(--cui-danger, #dc3545);
        color: var(--cui-danger, #dc3545);
        background: var(--cui-card-bg, #fff);
        border-radius: 0.3rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        margin-top: 5px;
        margin-right: 7px;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Card header: right padding so title doesn't overlap delete button */
    .accom-room-deck .card-header {
        padding-right: 5rem;
    }

    /* Non-formset rows (messages, group headers): full width */
    .accom-room-deck > tbody > tr:not(.formset_row-room_selections):not(.empty-form) {
        display: block;
        border: none;
    }
    .accom-room-deck > tbody > tr:not(.formset_row-room_selections):not(.empty-form) > td {
        display: block;
        border: none;
        padding: 0.25rem 0;
    }

    /* ── Room choice table → stacked card rows ── */
    .accom-room-deck .accom-items-table {
        display: block;

        border-radius: 0.375rem;
        overflow: hidden;
    }

    .accom-room-deck .accom-items-table thead {
        display: none;
    }

    .accom-room-deck .accom-items-table tbody {
        display: block;
    }

    /* Each item row: 3-column grid.
       Col 1: radio (spans all rows) | Col 2-3: name row + 2-col price grid */
    .accom-room-deck .accom-items-table tr.accom-item-row {
        display: grid;
        grid-template-columns: 24px 1fr 1fr;
        column-gap: 0.5rem;
        row-gap: 0.25rem;
        padding: 0.6rem 0.65rem;
        background: var(--cui-card-bg, #fff);
        align-items: start;
        border: 1px solid var(--cui-border-color, #dee2e6);
        margin: 0.25rem 0;
    }

    /* Selected row highlight */
    .accom-room-deck .accom-items-table tr.accom-item-row:has(input:checked) {
        background: #e8f0fe;
    }

    /* Reset all cells in item rows */
    .accom-room-deck .accom-items-table .accom-item-row td {
        padding: 0;
        border: none;
        background: transparent;
    }

    /* Radio cell (last child in source): col 1, spans all 3 price rows */
    .accom-room-deck .accom-items-table .accom-item-row td:last-child {
        grid-column: 1;
        grid-row: 1 / span 3;
        text-align: center;
        align-self: center;
    }

    /* Name cell (1st child, contains .accom-item-meta span): spans both price cols, row 1 */
    .accom-room-deck .accom-items-table .accom-item-row td:first-child {
        grid-column: 2 / 4;
        grid-row: 1;
        font-weight: 600;
        font-size: 0.85rem;
        min-width: 0;
    }

    /* Meta span (occupancy · availability · price/person) visible on mobile */
    .accom-room-deck .accom-items-table .accom-item-meta {
        display: block;
        font-weight: 400;
        font-size: 0.72rem;
        color: var(--cui-secondary-color, #6c757d);
        margin-top: 0.1rem;
    }

    /* Hide raw occupancy / availability cells — covered by the meta span */
    .accom-room-deck .accom-items-table .accom-item-row td:nth-child(2),
    .accom-room-deck .accom-items-table .accom-item-row td:nth-child(3) {
        display: none !important;
    }

    /* Price cells: col 2, row 2 (orig price) and row 3 (discounts) */
    .accom-room-deck .accom-items-table .accom-item-row td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }
    .accom-room-deck .accom-items-table .accom-item-row .accom-item-discounts {
        grid-column: 2;
        grid-row: 3;
    }

    /* Price cells: col 3, row 2 (orig total) and row 3 (total) */
    .accom-room-deck .accom-items-table .accom-item-row .accom-item-original {
        grid-column: 3;
        grid-row: 2;
    }
    .accom-room-deck .accom-items-table .accom-item-row .accom-item-total {
        grid-column: 3;
        grid-row: 3;
        font-weight: 700;
        color: var(--cui-success, #198754);
    }

    /* Labels above each price value */
    .accom-room-deck .accom-items-table .accom-item-row td::before {
        display: block;
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--cui-secondary-color, #6c757d);
        margin-bottom: 0.1rem;
    }
    .accom-room-deck .accom-items-table .accom-item-row td:nth-child(4)::before  { content: "Orig. Price"; }
    .accom-room-deck .accom-items-table .accom-item-row .accom-item-original::before { content: "Orig. Total"; }
    .accom-room-deck .accom-items-table .accom-item-row .accom-item-discounts::before { content: "Discounts"; }
    .accom-room-deck .accom-items-table .accom-item-row .accom-item-total::before { content: "Total"; }

    /* No label on name, meta, or radio cells */
    .accom-room-deck .accom-items-table .accom-item-row td:first-child::before,
    .accom-room-deck .accom-items-table .accom-item-row td:last-child::before { content: none; }

    /* Description row: compact block under parent item */
    .accom-room-deck .accom-items-table tr.accom-item-desc-row {
        display: block;
        padding: 0 0.65rem 0.55rem 2.75rem;
        font-size: 0.72rem;
        color: var(--cui-secondary-color, #6c757d);
        border-bottom: 1px solid var(--cui-border-color, #dee2e6);
    }
    .accom-room-deck .accom-items-table tr.accom-item-desc-row td {
        display: block;
        padding: 0;
        border: none;
    }

    /* Collapse the mb-3 wrapper divs the template loop generates for each hidden
       field (map_area, accommodation_item, addl_*_ack, ltfo_ack, etc.).
       On mobile these stack up to ~112 px of blank space between the last
       visible field and the Room Choice table.
       Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+.             */
    .accom-room-deck .card-body > .form-group:has(> input[type="hidden"]) {
        display: none;
    }

    /* Occupancy radios: wrap better on narrow screens */
    .accom-room-deck div[id*="-occupancy"] .form-check {
        margin-right: 10px;
        margin-bottom: 10px;
    }

     .row.form-row:has(#plus-button) {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    /* Input column: fill remaining space */
    .row.form-row:has(#plus-button) > .col-sm-4 {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    /* Button column: auto-size, reset the mt-3 that was only needed when stacked */
    .row.form-row:has(#plus-button) > .col-sm-1 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
}

/* ─── Per-Accommodation Options: mobile card layout ────────────────
   Transforms the room summary table and the 6-column options table
   into stacked cards on mobile.  CSS-only transformation — no
   dual-render — because the options table contains form widgets
   (reservation_room_selection checkboxes) that would corrupt the
   formset if duplicated in the DOM.
   Same pattern as Add Participants and Accommodation Room Selection. */
@media (max-width: 995px) {

    /* ── Fix 1: Room Summary table → compact mini-cards ── */
    .room-summary-table {
        display: block;
        width: 100%;
        border: none;
    }
    .room-summary-table thead {
        display: none;
    }
    .room-summary-table tbody {
        display: block;
        width: 100%;
    }
    .room-summary-table tbody tr {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.375rem;
        padding: 0.55rem 0.75rem;
        margin-bottom: 0.5rem;
    }
    .room-summary-table tbody td {
        display: block;
        padding: 0;
        border: none;
    }
    /* Room Type cell: card "header" */
    .room-summary-table tbody td.room-type {
        font-weight: 600;
        font-size: 0.88rem;
        margin-bottom: 0.15rem;
    }
    /* Labels via ::before for non-name cells */
    .room-summary-table tbody td::before {
        display: block;
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--cui-secondary-color, #6c757d);
        margin-top: 0.2rem;
    }
    .room-summary-table tbody td.room-type::before          { content: none; }
    .room-summary-table tbody td:nth-child(2)::before       { content: "Occupancy"; }
    .room-summary-table tbody td:nth-child(3)::before       { content: "# Occupants"; }
    .room-summary-table tbody td:nth-child(4)::before       { content: "Participants"; }

    /* ── Fix 2: Options table → card layout ── */
    .accom-option-table {
        display: block;
        width: 100%;
        border: none;
    }
    .accom-option-table thead {
        display: none;
    }
    .accom-option-table tbody {
        display: block;
        width: 100%;
    }

    /* Override organizeAccomHierarchyCells() inline paddingLeft on mobile */
    .accom-option-table .hierarchy-cell {
        padding-left: 0 !important;
    }

    /* ── Group header rows (non-item rows: depth > 1 dependent groups) ── */
    .accom-option-table tr:not(.accom-option-row) {
        display: block;
        width: 100%;
        margin-bottom: 0.35rem;
        border: 0;
    }
    .accom-option-table tr:not(.accom-option-row) td {
        display: block;
        border: none;
        padding: 0;
    }
    /* Dependent group headers: left-border accent.
       Identified by hierarchy-name starting with "-" (depth prefix in the name).
       Uses :has() to match the <tr> via its child <td>'s data attribute. */
    .accom-option-table tr:not(.accom-option-row):has(td[data-hierarchy-name^="-"]) {
        border-left: 3px solid var(--cui-secondary-color, #6c757d);
        background: var(--cui-tertiary-bg, #e9ecef);
        border-radius: 0 0.375rem 0.375rem 0;
        padding: 0.45rem 0.65rem;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
        font-size: 0.82rem;
    }

    /* ── Option item rows → cards ── */
    .accom-option-table tr.accom-option-row {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.375rem;
        padding: 0.6rem 0.7rem;
        margin-bottom: 0.5rem;
        background: var(--cui-card-bg, #fff);
    }
    .accom-option-table tr.accom-option-row .additional-deposit {
        margin-top: -2rem;
    }
    /* Selected option card highlight */
    .accom-option-table tr.accom-option-row:has(input:checked) {
        border-color: var(--cui-primary, #0d6efd);
        background: #eef3ff;
    }
    /* Dependent option items: indented.
       Identified by hierarchy-name starting with "-" on the child <td>. */
    .accom-option-table tr.accom-option-row:has(td[data-hierarchy-name^="-"]) {
        margin-left: 0.75rem;
    }

    /* All cells become block; background: inherit overrides Bootstrap's --bs-table-bg
       so every cell matches the row's explicit white (or blue-tinted) background. */
    .accom-option-table tr.accom-option-row td {
        display: block;
        padding: 0;
        border: none;
        background: inherit;
    }

    /* Option name cell (1st td): card header */
    .accom-option-table tr.accom-option-row td:first-child {
        font-weight: 600;
        font-size: 0.88rem;
        margin-bottom: 0.35rem;
    }

    /* Orig. Price cell: stack label above value (column flex) so the price and
       "Additional Deposit" lines each get their own row without horizontal cramping.
       The template emits <br><br> between them; collapsing both to zero-height via
       font-size/line-height:0 removes the blank gap while keeping the line break. */
    .accom-option-table tr.accom-option-row td:nth-child(2) {
        flex-direction: column;
        align-items: flex-start;
    }
    .accom-option-table tr.accom-option-row td:nth-child(2) br {
        font-size: 0;
        line-height: 0;
    }

    /* Price cells: inline flex row with labels */
    .accom-option-table tr.accom-option-row td:nth-child(2),
    .accom-option-table tr.accom-option-row td:nth-child(3),
    .accom-option-table tr.accom-option-row td:nth-child(4),
    .accom-option-table tr.accom-option-row td:nth-child(5) {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.1rem 0;
        font-size: 0.82rem;
    }
    /* Price cell labels via ::before */
    .accom-option-table tr.accom-option-row td::before {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--cui-secondary-color, #6c757d);
    }
    .accom-option-table tr.accom-option-row td:first-child::before  { content: none; }
    .accom-option-table tr.accom-option-row td:nth-child(2)::before { content: "Orig. Price"; }
    .accom-option-table tr.accom-option-row td:nth-child(3)::before { content: "Orig. Total"; }
    .accom-option-table tr.accom-option-row td:nth-child(4)::before { content: "Discounts"; }
    .accom-option-table tr.accom-option-row td:nth-child(5)::before { content: "Total"; }
    /* Total cell: bold green */
    .accom-option-table tr.accom-option-row td:nth-child(5) {
        font-weight: 700;
    }

    /* Apply-to cell (last td): full-width, top border, always visible */
    .accom-option-table tr.accom-option-row td:last-child {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--cui-border-color, #dee2e6);
    }
    .accom-option-table tr.accom-option-row td:last-child::before {
        content: "Apply to";
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--cui-secondary-color, #495057);
        margin-bottom: 0.15rem;
    }
    /* Checkbox labels: comfortable touch targets */
    .accom-option-table tr.accom-option-row td:last-child label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 36px;
        font-size: 0.85rem;
    }
    .accom-option-table tr.accom-option-row:has(input:checked) td:last-child {
        border-top-color: #cfe2ff;
    }
}

/* ─── Per-Person Options: mobile card layout ──────────────────────
   Transforms the 5-column per-person options table into stacked cards
   on mobile.  CSS-only transformation — no dual-render — because the
   table contains form widgets (reservation_participants checkboxes)
   that would corrupt the formset if duplicated in the DOM. */
@media (max-width: 995px) {

    .pp-option-table {
        display: block;
        width: 100%;
        border: none;
    }
    .pp-option-table thead {
        display: none;
    }
    .pp-option-table tbody {
        display: block;
        width: 100%;
    }

    /* Override organizeHierarchyCells() inline paddingLeft on mobile */
    .pp-option-table .hierarchy-cell {
        padding-left: 0.7rem !important;
    }

    /* ── Group header rows (non-item rows) ── */
    .pp-option-table tr:not(.pp-option-row) {
        display: block;
        width: 100%;
        margin-bottom: 0.35rem;
        border: none;
    }
    .pp-option-table tr:not(.pp-option-row) td {
        display: block;
        border: none;
        padding: 0;
    }
    /* Suppress the empty root-group tr (depth=1, no <strong> content).
       Same suppression pattern as Per-Accommodation Options. */
    .pp-option-table tr:not(.pp-option-row):not(:has(td strong)) {
        display: none;
    }
    /* Dependent group headers: left-border accent.
       Identified by hierarchy-name starting with "-" (depth prefix in the name). */
    .pp-option-table tr:not(.pp-option-row):has(td[data-hierarchy-name^="-"]) {
        border-left: 3px solid var(--cui-secondary-color, #6c757d);
        background: var(--cui-tertiary-bg, #e9ecef);
        border-radius: 0 0.375rem 0.375rem 0;
        padding: 0.45rem 0.65rem;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
        font-size: 0.82rem;
    }

    /* ── Option item rows → cards ── */
    .pp-option-table tr.pp-option-row {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.375rem;
        padding: 0.6rem 0.7rem;
        margin-bottom: 0.5rem;
        background: var(--cui-card-bg, #fff);
    }
    /* Selected option card highlight */
    .pp-option-table tr.pp-option-row:has(input:checked) {
        border-color: var(--cui-primary, #0d6efd);
        background: #eef3ff;
    }
    /* Dependent option items: indented. */
    .pp-option-table tr.pp-option-row:has(td[data-hierarchy-name^="-"]) {
        margin-left: 0.75rem;
    }

    /* All cells become block; background: inherit overrides Bootstrap's --bs-table-bg
       so every cell matches the row's explicit white (or blue-tinted) background. */
    .pp-option-table tr.pp-option-row td {
        display: block;
        padding: 0;
        border: none;
        background: inherit;
    }

    /* Option name cell (hierarchy-cell): card header.
       Already contains "Original Price (per person): $X.XX" + optional
       "Additional Deposit" as plain text — keep them flowing inline. */
    .pp-option-table tr.pp-option-row td.hierarchy-cell {
        font-size: 0.88rem;
        margin-bottom: 0.35rem;
    }

    /* Price cells: inline flex row with labels */
    .pp-option-table tr.pp-option-row td.pp-original,
    .pp-option-table tr.pp-option-row td.pp-discounts,
    .pp-option-table tr.pp-option-row td.pp-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.1rem 0;
        font-size: 0.82rem;
    }
    /* Price cell labels via ::before */
    .pp-option-table tr.pp-option-row td.pp-original::before,
    .pp-option-table tr.pp-option-row td.pp-discounts::before,
    .pp-option-table tr.pp-option-row td.pp-total::before {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--cui-secondary-color, #6c757d);
    }
    .pp-option-table tr.pp-option-row td.pp-original::before  { content: "Orig. Total"; }
    .pp-option-table tr.pp-option-row td.pp-discounts::before { content: "Discounts"; }
    .pp-option-table tr.pp-option-row td.pp-total::before     { content: "Total"; }
    /* Total cell: bold */
    .pp-option-table tr.pp-option-row td.pp-total {
        font-weight: 700;
    }

    /* Add Participants cell (last td): full-width, top border, always visible */
    .pp-option-table tr.pp-option-row td:last-child {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--cui-border-color, #dee2e6);
    }
    .pp-option-table tr.pp-option-row td:last-child::before {
        content: "Add Participants";
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--cui-secondary-color, #495057);
        margin-bottom: 0.15rem;
    }
    /* Checkbox labels: comfortable touch targets (participants are tapped often) */
    .pp-option-table tr.pp-option-row td:last-child label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 40px;
        font-size: 0.85rem;
    }
    .pp-option-table tr.pp-option-row:has(input:checked) td:last-child {
        border-top-color: #cfe2ff;
    }
}



/* Group header label: bold on desktop, overridden to 500 in mobile block below */
.review-hierarchy-group-header td {
    font-weight: bold;
}

/* Override thead-dark on the "Additional Items for…" section header */
.review-accom-options-header th {
    background-color: transparent !important;
    color: var(--cui-body-color, #212529) !important;
}


/* ─── Review Step: compact card transforms on mobile ──────────────── */
@media (max-width: 995px) {

    /* === Shared base: all review tables → block layout === */
    #reservation_review_header .container.mb-4,
    #reservation-review-container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .review-participants-table,
    .review-accom-room-table,
    .review-accom-options-table,
    .review-perperson-table,
    .review-travel-table,
    .review-payment-table {
        display: block;
        width: 100%;
        border: none;
    }

    .review-participants-table thead,
    .review-accom-options-table thead,
    .review-perperson-table thead,
    .review-travel-table thead,
    .review-payment-table thead {
        display: none;
    }

    .review-participants-table tbody,
    .review-accom-room-table tbody,
    .review-accom-options-table tbody,
    .review-perperson-table tbody,
    .review-travel-table tbody {
        display: block;
        width: 100%;
    }

    /* Reservation Details Card */
    #reservation_review_card {
        border: 0 !important;
    }

    #reservation_review_card .card-header {
        background: transparent;
        border-bottom: 2px solid var(--cui-border-color, #dee2e6);
        padding-left: 0;
        padding-right: 0;
    }

    #reservation_review_card .card-header h2 {
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--cui-secondary-color, #6c757d);
        margin-bottom: 0;
    }


    /* ================================================================
       1. PARTICIPANT SUMMARY — grid card with price rows
       ================================================================ */
    .review-participants-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    /* All cells: reset table styling */
    .review-participants-table tbody td {
        border: none;
        padding: 0;
        text-align: center;
    }
    .review-participants-table tbody td::before {
        content: none;
    }

    /* Participant name → card header spanning full width */
    .review-participants-table tbody td[data-label="Participant"] {
        grid-column: 1 / -1;
        background: var(--cui-tertiary-bg, #f1f3f5);
        border-bottom: 1px solid var(--cui-border-color, #dee2e6);
        font-weight: 700;
        font-size: 0.88rem;
        padding: 0.5rem 0.75rem;
        text-align: left;
    }

    /* Hide DOB on mobile */
    .review-participants-table tbody td[data-label="DOB"] {
        display: none !important;
    }

    /* Event Dates, Occupancy → inline sub-header band */
    .review-participants-table tbody td[data-label="Event Dates"],
    .review-participants-table tbody td[data-label="Occupancy"] {
        grid-column: 1 / -1;
        display: inline;
        font-size: 0.72rem;
        color: var(--cui-secondary-color, #6c757d);
        padding: 0;
        line-height: 1;
    }
    .review-participants-table tbody td[data-label="Event Dates"] {
        padding: 0.35rem 0 0.35rem 0.75rem;
    }
    .review-participants-table tbody td[data-label="Occupancy"] {
        padding: 0.35rem 0.75rem 0.35rem 0;
    }
    /* · separator between sub-header fields */
    .review-participants-table tbody td[data-label="Event Dates"]::after {
        content: " · ";
        color: var(--cui-secondary-color, #adb5bd);
    }

    /* Price cell shared style (column layout: label on top, value below) */
    .review-participants-table tbody td[data-label="Original Total"],
    .review-participants-table tbody td[data-label="Discounts"],
    .review-participants-table tbody td[data-label="Total Amount"],
    .review-participants-table tbody td[data-label="Initial Deposit"],
    .review-participants-table tbody td[data-label="Balance Due"] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0.3rem 0.4rem;
        font-size: 0.72rem;
        border-right: 1px solid #f1f3f5;
    }
    .review-participants-table tbody td[data-label="Original Total"]::before,
    .review-participants-table tbody td[data-label="Discounts"]::before,
    .review-participants-table tbody td[data-label="Total Amount"]::before,
    .review-participants-table tbody td[data-label="Initial Deposit"]::before,
    .review-participants-table tbody td[data-label="Balance Due"]::before {
        content: attr(data-label);
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--cui-secondary-color, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.1rem;
    }

    /* First price row (3 cells): top border separator */
    .review-participants-table tbody td[data-label="Original Total"],
    .review-participants-table tbody td[data-label="Discounts"] {
        border-top: 1px solid #f1f3f5;
    }
    .review-participants-table tbody td[data-label="Total Amount"] {
        border-top: 1px solid #f1f3f5;
        border-right: none;
        font-weight: 700;
    }

    /* Second price row (2 cells) */
    .review-participants-table tbody td[data-label="Initial Deposit"] {
        border-top: 1px solid #f1f3f5;
        grid-column: 1 / 2;
    }
    .review-participants-table tbody td[data-label="Balance Due"] {
        border-top: 1px solid #f1f3f5;
        grid-column: 2 / 4;
        border-right: none;
    }


    /* ================================================================
       2. ACCOMMODATION ROOM CHARGES — grouped participants in one card
       ================================================================ */
    /* Re-display thead for room header row */
    .review-accom-room-table thead {
        display: block;
    }
    .review-accom-room-table thead tr.review-accom-room-header {
        display: block;
        padding: 0;
        background: var(--cui-tertiary-bg, #f1f3f5);
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-bottom: none;
        border-radius: 0.375rem 0.375rem 0 0;
    }
    .review-accom-room-table thead tr.review-accom-room-header th {
        display: block;
        border: none;
        padding: 0.5rem 0.75rem;
        background: transparent;
    }
    .review-accom-room-table thead tr.review-accom-room-header h4 {
        font-size: 0.88rem;
        margin-bottom: 0.1rem;
    }
    .review-accom-room-table thead tr.review-accom-room-header div {
        font-size: 0.72rem;
        color: var(--cui-secondary-color, #6c757d);
    }
    .review-accom-room-table thead tr:not(.review-accom-room-header) {
        display: none;
    }

    /* tbody = card body (all participants flow inside) */
    .review-accom-room-table tbody {
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-top: none;
        border-radius: 0 0 0.375rem 0.375rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    /* Each participant row: flex layout, no individual card borders */
    .review-accom-room-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 0;
    }
    .review-accom-room-table tbody tr:not(:first-child) {
        border-top: 1px solid var(--cui-border-color, #dee2e6);
    }

    .review-accom-room-table tbody td {
        border: none;
        padding: 0;
    }
    .review-accom-room-table tbody td::before {
        content: none;
    }

    /* Participant name → sub-header spanning full width */
    .review-accom-room-table tbody td[data-label="Participant"] {
        flex: 0 0 100%;
        font-weight: 700;
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem 0.2rem;
    }

    /* Price cells → 4-col flex row */
    .review-accom-room-table tbody td[data-label="Original Price"],
    .review-accom-room-table tbody td[data-label="Discounts"],
    .review-accom-room-table tbody td[data-label="Additional Deposit"],
    .review-accom-room-table tbody td[data-label="Total"] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0.2rem 0.3rem 0.4rem;
        font-size: 0.72rem;
        text-align: right;
        border-right: 1px solid #f1f3f5;
    }
    .review-accom-room-table tbody td[data-label="Total"] {
        border-right: none;
        font-weight: 700;
    }

    /* Price cell labels */
    .review-accom-room-table tbody td[data-label="Original Price"]::before,
    .review-accom-room-table tbody td[data-label="Discounts"]::before,
    .review-accom-room-table tbody td[data-label="Additional Deposit"]::before,
    .review-accom-room-table tbody td[data-label="Total"]::before {
        content: attr(data-label);
        font-size: 0.58rem;
        font-weight: 700;
        color: var(--cui-secondary-color, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.1rem;
    }
    /* Shorter labels for tight space */
    .review-accom-room-table tbody td[data-label="Original Price"]::before { content: "Orig. Price"; }
    .review-accom-room-table tbody td[data-label="Additional Deposit"]::before { content: "Add. Dep."; }


    /* ================================================================
       3. HIERARCHY OPTIONS — compact item cards (name + total only)
       ================================================================ */

    /* Accommodation options header row (Additional Items for Room X) */
    .review-accom-options-table thead {
        display: block;
    }
    .review-accom-options-table thead tr.review-accom-options-header {
        display: block;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--cui-card-cap-bg, #f8f9fa);
    }
    .review-accom-options-table thead tr.review-accom-options-header th {
        border: none;
        padding: 0;
    }
    .review-accom-options-table thead tr.review-accom-options-header h5 {
        font-size: 0.95rem;
        margin-bottom: 0;
    }
    .review-accom-options-table thead tr:not(.review-accom-options-header) {
        display: none;
    }

    /* Item rows → compact mini-cards */
    .review-accom-options-table tbody tr,
    .review-perperson-table tbody tr {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.25rem;
        margin-bottom: 0.35rem;
        background: var(--cui-card-bg, #fff);
        overflow: hidden;
        font-size: 0.78rem;
    }

    .review-accom-options-table tbody td,
    .review-perperson-table tbody td {
        border: none;
        padding: 0;
    }
    .review-accom-options-table tbody td::before,
    .review-perperson-table tbody td::before {
        content: none;
    }

    /* Hide price detail cells — only show participant + total */
    .review-hierarchy-item-first td[data-label="Original Price"],
    .review-hierarchy-item-first td[data-label="Discounts"],
    .review-hierarchy-item-first td[data-label="Additional Deposit"],
    .review-hierarchy-item-cont td[data-label="Original Price"],
    .review-hierarchy-item-cont td[data-label="Discounts"],
    .review-hierarchy-item-cont td[data-label="Additional Deposit"] {
        display: none !important;
    }

    /* Hide the rowspan item-name <td> */
    .review-hierarchy-item-first td[data-label="Item"] {
        display: none;
    }
    .review-hierarchy-item-first td[data-label="Item"][style] {
        padding-left: 0 !important;
    }

    /* Show item name as card header via ::before on the first <tr> only */
    .review-hierarchy-item-first::before {
        content: attr(data-item-name);
        display: block;
        font-weight: 700;
        font-size: 0.8rem;
        padding: 0.35rem 0.65rem;
        background: var(--cui-tertiary-bg, #f8f9fa);
        border-bottom: 1px solid #f1f3f5;
    }

    /* Item first rows: each is its own indented card */
    .review-hierarchy-item-first {
        border: 1px solid var(--cui-border-color, #dee2e6) !important;
        border-radius: 0.25rem !important;
        box-shadow: none !important;
        margin: 0.25rem 0 0 0 !important;
        background: var(--cui-card-bg, #fff) !important;
        overflow: hidden;
    }
    /* When cont rows follow: open the bottom so they attach seamlessly */
    .review-hierarchy-item-first:has(+ .review-hierarchy-item-cont) {
        border-bottom: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Continuation rows: attach directly to their item-first */
    .review-hierarchy-item-cont {
        border: 1px solid var(--cui-border-color, #dee2e6) !important;
        border-top: 1px solid var(--cui-border-color, #f1f3f5) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: var(--cui-card-bg, #fff) !important;
        overflow: hidden;
    }
    /* Last cont of an item: close with bottom radius */
    .review-hierarchy-item-cont:not(:has(+ .review-hierarchy-item-cont)) {
        border-bottom-left-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
    }
    .review-hierarchy-item-cont::before {
        content: none;
    }

    /* Flex layout so participant name and total align properly */
    .review-hierarchy-item-first,
    .review-hierarchy-item-cont {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    .review-hierarchy-item-first::before {
        width: 100%;
    }
    .review-hierarchy-item-first td[data-label="Participant"],
    .review-hierarchy-item-cont td[data-label="Participant"] {
        flex: 1;
        display: block;
        padding: 0.25rem 0.65rem;
        font-size: 0.75rem;
        background: transparent !important;
    }
    .review-hierarchy-item-first td[data-label="Total"],
    .review-hierarchy-item-cont td[data-label="Total"] {
        display: block;
        padding: 0.25rem 0.65rem;
        font-weight: 700;
        font-size: 0.75rem;
        background: transparent !important;
    }

    /* Group header: self-contained closed box, visually distinct from item cards */
    .review-hierarchy-group-header {
        border: 1px solid var(--cui-border-color, #dee2e6) !important;
        border-radius: 0.25rem 0.25rem 0 0 !important;
        box-shadow: none !important;
        background: var(--cui-secondary-bg, #e9ecef) !important;
        padding: 0.25rem 0.65rem !important;
        margin: 1rem 0 0 !important;
        font-size: 0.72rem;
    }
    .review-hierarchy-group-header td {
        display: block !important;
        font-weight: 500;
        font-size: 0.72rem;
        color: var(--cui-body-color, #212529);
        padding: 0 !important;
        border: none !important;
    }
    .review-hierarchy-group-header td::before {
        content: none !important;
    }
    .review-hierarchy-group-header td[style] {
        padding-left: 0 !important;
        background-color: transparent !important;
    }


    /* ================================================================
       4. TRAVEL PROTECTION — single card with flex rows
       ================================================================ */
    /* tbody = single card containing all participants */
    .review-travel-table tbody {
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.375rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    .review-travel-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        padding: 0.4rem 0.75rem;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin: 0;
        border-bottom: 1px solid #f1f3f5;
    }
    .review-travel-table tbody tr:last-child {
        border-bottom: none;
    }

    .review-travel-table tbody td {
        border: none;
        padding: 0;
    }
    .review-travel-table tbody td::before {
        content: none;
    }

    /* Participant name → row 1 col 1 */
    .review-travel-table tbody td[data-label="Participant"] {
        grid-row: 1;
        grid-column: 1;
        font-weight: 700;
        font-size: 0.82rem;
        background: transparent;
        display: block;
    }
    /* Protection Plan → row 2 col 1, small gray */
    .review-travel-table tbody td[data-label="Protection Plan"] {
        grid-row: 2;
        grid-column: 1;
        font-size: 0.75rem;
        color: var(--cui-secondary-color, #6c757d);
        margin-top: 0.05rem;
    }
    /* Amount → row 1-2 col 2, right-aligned, vertically centered */
    .review-travel-table tbody td[data-label="Amount"] {
        grid-row: 1 / 3;
        grid-column: 2;
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 0.82rem;
        text-align: right;
    }


    /* ================================================================
       5. PAYMENT SCHEDULE — one card per participant, payments inside
       ================================================================ */

    /* Each <tbody> = one participant card */
    .review-payment-table .review-payment-group {
        display: block;
        border: 1px solid var(--cui-border-color, #dee2e6);
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
        background: var(--cui-card-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    /* Participant name → card header via ::before on <tbody> */
    .review-payment-table .review-payment-group::before {
        content: attr(data-participant);
        display: block;
        font-weight: 700;
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
        background: var(--cui-tertiary-bg, #f1f3f5);
        border-bottom: 1px solid var(--cui-border-color, #dee2e6);
        color: var(--cui-body-color, #212529);
    }

    /* Each payment row inside the card */
    .review-payment-table .review-payment-group tr {
        display: block;
        padding: 0.4rem 0.75rem;
        border-top: 1px solid #f1f3f5;
    }
    .review-payment-table .review-payment-group tr:first-child {
        border-top: none;
    }

    .review-payment-table .review-payment-group td {
        border: none;
        padding: 0;
    }
    .review-payment-table .review-payment-group td::before {
        content: none;
    }

    /* Hide the rowspan participant <td> */
    .review-payment-table .review-payment-group td[data-label="Participant"] {
        display: none;
    }

    /* Payment Date + Amount Due → inline flex row */
    .review-payment-table .review-payment-group td[data-label="Payment Date"] {
        display: inline;
        font-size: 0.78rem;
    }
    .review-payment-table .review-payment-group td[data-label="Amount Due"] {
        display: inline;
        float: right;
        font-size: 0.78rem;
    }

} /* end Review Step mobile */