/* ============================================================
   Centre 360 · Shared confirmation modal brand skin
   Targets #cupolaConfirmModal (Pages/Shared/_ConfirmModal.cshtml).

   Loaded ONLY by the public _Layout.cshtml (after tokens.css), so
   the Bootstrap-default modal in _AdminLayout.cshtml — which does
   not load tokens.css — stays untouched and references no missing
   custom properties.

   Pure CSS reskin: no markup or JS change, so the dialog keeps its
   behaviour (Bootstrap modal, focus trap, ESC/backdrop dismiss).
   The cupolaTourConfirm() JS applies Bootstrap colour utilities
   (.bg-danger / .text-white / .btn-danger …). Utilities carry
   !important, so the neutralizing rules below must as well — they
   are scoped to #cupolaConfirmModal and never leak.

   Echoes the .details-modal language in bookings.css (same surface,
   gold-soft border, civic-gold top stripe) so the two dialogs on
   My Bookings read as one system.
   ============================================================ */

#cupolaConfirmModal {
    /* Destructive accent. Brand has no red token; this warm brick red
     harmonizes with the gold and clears WCAG AA on the dark surface
     both as text and as a button fill. */
    --cf-danger: oklch(63% 0.17 33);
    --cf-danger-strong: oklch(56% 0.17 33);
}

    /* ---- Surface ------------------------------------------------ */
    #cupolaConfirmModal .modal-content {
        position: relative;
        overflow: hidden;
        background: var(--surface-raise);
        /* Beat Bootstrap .border-0 / .shadow utilities on the element. */
        border: 1px solid var(--gold-soft) !important;
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg) !important;
        color: var(--ink-soft);
    }

        #cupolaConfirmModal .modal-content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-civic-gold);
        }

        /* ---- Header ------------------------------------------------- */
        /* Neutralize whatever bg-* / text-* utility the JS typeMap set on
   the header. Bootstrap's .bg-* utilities set the background-color
   longhand with !important, so the override must target the same
   longhand with !important and out-rank it on specificity. The
   .modal-content ancestor in the selector lifts specificity well
   clear of the (0,1,0) utility. */
        #cupolaConfirmModal .modal-content .modal-header,
        #cupolaConfirmModal .modal-content .modal-header.bg-danger,
        #cupolaConfirmModal .modal-content .modal-header.bg-warning,
        #cupolaConfirmModal .modal-content .modal-header.bg-success,
        #cupolaConfirmModal .modal-content .modal-header.bg-primary {
            background-color: transparent !important;
            background-image: none !important;
            color: var(--ink-primary) !important;
            border-bottom: 1px solid var(--hairline);
            padding: var(--space-6) var(--space-6) var(--space-4);
            align-items: flex-start;
        }
    /* Eyebrow ("Cupola Tour"): mono gold. Inline style sets only
   font-size/letter-spacing/opacity — override the dimmed opacity
   so the gold reads crisp; keep the inline metrics. */
    #cupolaConfirmModal .modal-header .fw-semibold {
        color: var(--gold-accent);
        font-family: var(--mono);
        opacity: 1 !important;
    }

    #cupolaConfirmModal .modal-title {
        font-family: var(--serif-display);
        font-weight: 400;
        font-size: var(--fs-h3);
        letter-spacing: 0.04em;
        line-height: var(--lh-snug);
        text-transform: uppercase;
        color: var(--ink-primary);
        margin-top: var(--space-2);
    }

    /* ---- Close ("×") — matches .details-modal__close ------------ */
    #cupolaConfirmModal .btn-close,
    #cupolaConfirmModal .btn-close.btn-close-white {
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 1px solid var(--hairline);
        border-radius: var(--radius);
        color: var(--ink-soft);
        opacity: 1;
        filter: none;
        font-family: var(--serif-display);
        font-size: 20px;
        line-height: 1;
        transition: color var(--t-fast), border-color var(--t-fast);
    }

        #cupolaConfirmModal .btn-close::before {
            content: "\00d7";
        }

        #cupolaConfirmModal .btn-close:hover,
        #cupolaConfirmModal .btn-close:focus-visible {
            color: var(--gold-accent);
            border-color: var(--gold-soft);
            outline: none;
        }

        #cupolaConfirmModal .btn-close:focus-visible {
            outline: 2px solid var(--gold-accent);
            outline-offset: 2px;
        }

    /* ---- Body --------------------------------------------------- */
    #cupolaConfirmModal .modal-body {
        font-family: var(--sans);
        font-size: var(--fs-body);
        line-height: var(--lh-base);
        color: var(--ink-soft);
        padding: var(--space-4) var(--space-6) var(--space-5);
    }

        #cupolaConfirmModal .modal-body p {
            margin-bottom: var(--space-3);
        }

            #cupolaConfirmModal .modal-body p:last-child {
                margin-bottom: 0;
            }

        #cupolaConfirmModal .modal-body .text-danger {
            color: var(--cf-danger) !important;
        }
            /* Irreversible-action line keeps the danger colour on its bold text
   so the warning reads as destructive, not just the icon. */
            #cupolaConfirmModal .modal-body .text-danger strong {
                color: var(--cf-danger);
            }

        #cupolaConfirmModal .modal-body strong {
            color: var(--ink-primary);
        }

    /* ---- Footer + buttons --------------------------------------- */
    #cupolaConfirmModal .modal-footer {
        border-top: 1px solid var(--hairline);
        padding: var(--space-4) var(--space-6) var(--space-5);
    }
        /* Shared button geometry — mirrors .btn-cta / .btn-ghost. */
        #cupolaConfirmModal .modal-footer .btn {
            border-radius: var(--radius);
            padding: 12px 22px;
            font-family: var(--sans);
            font-size: var(--fs-small);
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
        }
    /* Cancel ("Keep Booking") → ghost. */
    #cupolaConfirmModal #cupolaConfirmCancelBtn {
        background: transparent;
        color: var(--gold-accent);
        border: 1px solid var(--gold-soft);
    }

        #cupolaConfirmModal #cupolaConfirmCancelBtn:hover,
        #cupolaConfirmModal #cupolaConfirmCancelBtn:focus-visible {
            color: var(--gold-bright);
            background: oklch(91% 0.13 92 / 0.08);
            border-color: var(--gold-accent);
        }
    /* Confirm ("Yes, Cancel Booking") → solid destructive CTA that
   inverts on hover, same gesture as .btn-cta. */
    #cupolaConfirmModal #cupolaConfirmOkBtn {
        background: var(--cf-danger);
        color: var(--surface-base);
        border: 1px solid var(--cf-danger-strong);
    }

        #cupolaConfirmModal #cupolaConfirmOkBtn:hover,
        #cupolaConfirmModal #cupolaConfirmOkBtn:focus-visible {
            background: transparent;
            color: var(--cf-danger);
            border-color: var(--cf-danger);
        }

    #cupolaConfirmModal .modal-footer .btn:focus-visible {
        outline: 2px solid var(--gold-accent);
        outline-offset: 3px;
    }

    #cupolaConfirmModal .modal-footer .btn:active {
        transform: scale(0.97);
    }

@media (prefers-reduced-motion: reduce) {
    #cupolaConfirmModal .modal-footer .btn:active {
        transform: none;
    }
}

/* ============================================================
   Specific Modal Overrides
   ============================================================ */

/* ---- Cancel Booking Modal --------------------------------- */
#cancelBookingModal {
    --cb-danger: oklch(63% 0.17 33);
}

    #cancelBookingModal .modal-content {
        background: var(--surface-raise);
        border: 1px solid var(--gold-soft) !important;
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg) !important;
        color: var(--ink-soft);
        position: relative;
        overflow: hidden;
    }

        #cancelBookingModal .modal-content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-civic-gold);
        }

    #cancelBookingModal .modal-header {
        background-color: transparent !important;
        background-image: none !important;
        color: var(--ink-primary) !important;
        border-bottom: 1px solid var(--hairline);
        padding: var(--space-6) var(--space-6) var(--space-4);
    }

    #cancelBookingModal .modal-title {
        font-family: var(--serif-display);
        font-weight: 400;
        font-size: var(--fs-h3);
        letter-spacing: 0.04em;
        line-height: var(--lh-snug);
        text-transform: uppercase;
        color: var(--ink-primary);
    }

    #cancelBookingModal .btn-close {
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 1px solid var(--hairline);
        border-radius: var(--radius);
        color: var(--ink-soft);
        opacity: 1;
        filter: none;
        font-family: var(--serif-display);
        font-size: 20px;
        line-height: 1;
        transition: color var(--t-fast), border-color var(--t-fast);
    }

        #cancelBookingModal .btn-close::before {
            content: "\00d7";
        }

        #cancelBookingModal .btn-close:hover,
        #cancelBookingModal .btn-close:focus-visible {
            color: var(--gold-accent);
            border-color: var(--gold-soft);
            outline: none;
        }

        #cancelBookingModal .btn-close:focus-visible {
            outline: 2px solid var(--gold-accent);
            outline-offset: 2px;
        }

    #cancelBookingModal .modal-body {
        font-family: var(--sans);
        font-size: var(--fs-body);
        line-height: var(--lh-base);
        color: var(--ink-soft);
        padding: var(--space-4) var(--space-6);
    }

    #cancelBookingModal .form-label {
        color: var(--ink-primary);
        font-weight: 500;
        margin-bottom: var(--space-2);
    }

    #cancelBookingModal .form-control,
    #cancelBookingModal .form-select {
        border-color: var(--hairline);
        color: var(--ink-soft);
    }

        #cancelBookingModal .form-control:focus,
        #cancelBookingModal .form-select:focus {
            border-color: var(--gold-accent);
            box-shadow: 0 0 0 0.25rem rgb(255, 180, 0 / 0.25);
        }

    #cancelBookingModal .form-text {
        color: var(--ink-soft);
        font-size: var(--fs-small);
    }

    #cancelBookingModal .modal-footer {
        border-top: 1px solid var(--hairline);
        padding: var(--space-4) var(--space-6) var(--space-5);
        gap: 0.5rem;
    }

        #cancelBookingModal .modal-footer .btn {
            border-radius: var(--radius);
            padding: 12px 22px;
            font-family: var(--sans);
            font-size: var(--fs-small);
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
        }

        #cancelBookingModal .modal-footer .btn-secondary {
            background: transparent;
            color: var(--gold-accent);
            border: 1px solid var(--gold-soft);
        }

            #cancelBookingModal .modal-footer .btn-secondary:hover,
            #cancelBookingModal .modal-footer .btn-secondary:focus-visible {
                color: var(--gold-bright);
                background: oklch(91% 0.13 92 / 0.08);
                border-color: var(--gold-accent);
            }

        #cancelBookingModal .modal-footer .btn-danger {
            background: var(--cb-danger);
            color: var(--surface-base);
            border: 1px solid oklch(56% 0.17 33);
        }

            #cancelBookingModal .modal-footer .btn-danger:hover,
            #cancelBookingModal .modal-footer .btn-danger:focus-visible {
                background: transparent;
                color: var(--cb-danger);
                border-color: var(--cb-danger);
            }

        #cancelBookingModal .modal-footer .btn:focus-visible {
            outline: 2px solid var(--gold-accent);
            outline-offset: 3px;
        }

        #cancelBookingModal .modal-footer .btn:active {
            transform: scale(0.97);
        }

/* ---- Waitlist Modal ---------------------------------------- */
#waitlistModal {
    --wl-brand: #0056b3;
}

    #waitlistModal .modal-content {
        background: var(--surface-raise);
        border: 1px solid var(--gold-soft) !important;
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg) !important;
        color: var(--ink-soft);
        position: relative;
        overflow: hidden;
    }

        #waitlistModal .modal-content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-civic-gold);
        }

    #waitlistModal .modal-header {
        background-color: transparent !important;
        background-image: none !important;
        color: var(--ink-primary) !important;
        border-bottom: 1px solid var(--hairline);
        padding: var(--space-6) var(--space-6) var(--space-4);
    }

    #waitlistModal .modal-title {
        font-family: var(--serif-display);
        font-weight: 400;
        font-size: var(--fs-h3);
        letter-spacing: 0.04em;
        line-height: var(--lh-snug);
        text-transform: uppercase;
        color: var(--ink-primary);
    }

    #waitlistModal .btn-close {
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 1px solid var(--hairline);
        border-radius: var(--radius);
        color: var(--ink-soft);
        opacity: 1;
        filter: none;
        font-family: var(--serif-display);
        font-size: 20px;
        line-height: 1;
        transition: color var(--t-fast), border-color var(--t-fast);
    }

        #waitlistModal .btn-close::before {
            content: "\00d7";
        }

        #waitlistModal .btn-close:hover,
        #waitlistModal .btn-close:focus-visible {
            color: var(--gold-accent);
            border-color: var(--gold-soft);
            outline: none;
        }

        #waitlistModal .btn-close:focus-visible {
            outline: 2px solid var(--gold-accent);
            outline-offset: 2px;
        }

    #waitlistModal .modal-body {
        font-family: var(--sans);
        font-size: var(--fs-body);
        line-height: var(--lh-base);
        color: var(--ink-soft);
        padding: var(--space-4) var(--space-6);
    }

    #waitlistModal .form-label {
        color: var(--ink-primary);
        font-weight: 500;
        margin-bottom: var(--space-2);
    }

    #waitlistModal .form-control,
    #waitlistModal .form-select {
        border-color: var(--hairline);
        color: var(--ink-soft);
    }

        #waitlistModal .form-control:focus,
        #waitlistModal .form-select:focus {
            border-color: var(--gold-accent);
            box-shadow: 0 0 0 0.25rem rgb(255, 180, 0 / 0.25);
        }

    #waitlistModal .form-text {
        color: var(--ink-soft);
        font-size: var(--fs-small);
    }

    #waitlistModal .alert {
        border-radius: var(--radius);
        border-color: var(--hairline);
    }

    #waitlistModal .alert-success {
        background-color: var(--surface-base);
        border-color: var(--hairline);
        color: var(--ink-soft);
    }

        #waitlistModal .alert-success .bi {
            color: #28a745;
        }

    #waitlistModal .alert-danger {
        background-color: var(--surface-base);
        border-color: var(--hairline);
        color: oklch(63% 0.17 33);
    }

        #waitlistModal .alert-danger .bi {
            color: oklch(63% 0.17 33);
        }

    #waitlistModal .modal-footer {
        border-top: 1px solid var(--hairline);
        padding: var(--space-4) var(--space-6) var(--space-5);
        gap: 0.5rem;
    }

        #waitlistModal .modal-footer .btn {
            border-radius: var(--radius);
            padding: 12px 22px;
            font-family: var(--sans);
            font-size: var(--fs-small);
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
        }

        #waitlistModal .modal-footer .btn-secondary {
            background: transparent;
            color: var(--gold-accent);
            border: 1px solid var(--gold-soft);
        }

            #waitlistModal .modal-footer .btn-secondary:hover,
            #waitlistModal .modal-footer .btn-secondary:focus-visible {
                color: var(--gold-bright);
                background: oklch(91% 0.13 92 / 0.08);
                border-color: var(--gold-accent);
            }

        #waitlistModal .modal-footer .btn-primary {
            background: var(--wl-brand);
            color: var(--surface-base);
            border: 1px solid var(--wl-brand);
        }

            #waitlistModal .modal-footer .btn-primary:hover,
            #waitlistModal .modal-footer .btn-primary:focus-visible {
                background: transparent;
                color: var(--wl-brand);
                border-color: var(--wl-brand);
            }

        #waitlistModal .modal-footer .btn:focus-visible {
            outline: 2px solid var(--gold-accent);
            outline-offset: 3px;
        }

        #waitlistModal .modal-footer .btn:active {
            transform: scale(0.97);
        }

/* ============================================================
   Universal Modal Styling
   Applies consistent branding to all modals across the site
   ============================================================ */

/* Base styles for all modals */
.modal-content {
    background: var(--surface-raise);
    border: 1px solid var(--gold-soft) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg) !important;
    color: var(--ink-soft);
    position: relative;
    overflow: hidden;
}

    .modal-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-civic-gold);
    }

/* Modal header consistent styling */
.modal-header {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ink-primary) !important;
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-6) var(--space-6) var(--space-4);
    align-items: flex-start;
}

/* Modal title styling */
.modal-title {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: var(--fs-h3);
    letter-spacing: 0.04em;
    line-height: var(--lh-snug);
    text-transform: uppercase;
    color: var(--ink-primary);
}

/* Close button styling */
.modal-header .btn-close,
.modal-header .btn-close.btn-close-white {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--ink-soft);
    opacity: 1;
    filter: none;
    font-family: var(--serif-display);
    font-size: 20px;
    line-height: 1;
    transition: color var(--t-fast), border-color var(--t-fast);
}

    .modal-header .btn-close::before {
        content: "\00d7";
    }

    .modal-header .btn-close:hover,
    .modal-header .btn-close:focus-visible {
        color: var(--gold-accent);
        border-color: var(--gold-soft);
        outline: none;
    }

    .modal-header .btn-close:focus-visible {
        outline: 2px solid var(--gold-accent);
        outline-offset: 2px;
    }

/* Modal body styling */
.modal-body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--ink-soft);
    padding: var(--space-4) var(--space-6);
}

    .modal-body p {
        margin-bottom: var(--space-3);
    }

        .modal-body p:last-child {
            margin-bottom: 0;
        }

    .modal-body strong {
        color: var(--ink-primary);
    }

/* Modal footer styling */
.modal-footer {
    border-top: 1px solid var(--hairline);
    padding: var(--space-4) var(--space-6) var(--space-5);
    gap: 0.5rem;
}

    /* Modal footer buttons */
    .modal-footer .btn {
        border-radius: var(--radius);
        padding: 12px 22px;
        font-family: var(--sans);
        font-size: var(--fs-small);
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    }

        .modal-footer .btn:focus-visible {
            outline: 2px solid var(--gold-accent);
            outline-offset: 3px;
        }

        .modal-footer .btn:active {
            transform: scale(0.97);
        }

@media (prefers-reduced-motion: reduce) {
    .modal-footer .btn:active {
        transform: none;
    }
}

/* Secondary button in footer (Cancel/Close) */
.modal-footer .btn-secondary {
    background: transparent;
    color: var(--gold-accent);
    border: 1px solid var(--gold-soft);
}

    .modal-footer .btn-secondary:hover,
    .modal-footer .btn-secondary:focus-visible {
        color: var(--gold-bright);
        background: oklch(91% 0.13 92 / 0.08);
        border-color: var(--gold-accent);
    }

/* Primary button in footer */
.modal-footer .btn-primary {
    background: var(--brand-primary, #0056b3);
    color: var(--surface-base);
    border: 1px solid var(--brand-primary, #0056b3);
}

    .modal-footer .btn-primary:hover,
    .modal-footer .btn-primary:focus-visible {
        background: transparent;
        color: var(--brand-primary, #0056b3);
        border-color: var(--brand-primary, #0056b3);
    }

/* Danger button in footer */
.modal-footer .btn-danger {
    background: oklch(63% 0.17 33);
    color: var(--surface-base);
    border: 1px solid oklch(56% 0.17 33);
}

    .modal-footer .btn-danger:hover,
    .modal-footer .btn-danger:focus-visible {
        background: transparent;
        color: oklch(63% 0.17 33);
        border-color: oklch(63% 0.17 33);
    }

/* Form elements in modals */
.modal-body .form-label {
    color: var(--ink-primary);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.modal-body .form-control,
.modal-body .form-select {
    border-color: var(--hairline);
    color: var(--ink-soft);
}

    .modal-body .form-control:focus,
    .modal-body .form-select:focus {
        border-color: var(--gold-accent);
        box-shadow: 0 0 0 0.25rem rgb(255, 180, 0 / 0.25);
    }

.modal-body .form-text {
    color: var(--ink-soft);
    font-size: var(--fs-small);
}

/* Alerts in modals */
.modal-body .alert {
    border-radius: var(--radius);
    border-color: var(--hairline);
}

/* ---- Party Members Modal --------------------------------- */
#cupolaConfirmModal .party-members-container {
    /* Allow the container to scroll if content overflows */
    display: block;
}

/* Increase modal width when showing party member details */
#cupolaConfirmModal.party-members-modal .modal-dialog {
    max-width: 650px;
}

/* Override header styling for party members to use brand styling */
#cupolaConfirmModal.party-members-modal .modal-header,
#cupolaConfirmModal.party-members-modal .modal-header.bg-primary,
#cupolaConfirmModal.party-members-modal .modal-header.bg-danger,
#cupolaConfirmModal.party-members-modal .modal-header.bg-warning,
#cupolaConfirmModal.party-members-modal .modal-header.bg-success {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ink-primary) !important;
}

/* Responsive: stack cards on smaller screens */
@media (max-width: 768px) {
    #cupolaConfirmModal.party-members-modal .modal-dialog {
        max-width: 95vw;
    }
}

/* ---- Modal Card Components (Party Members, etc) ------- */
.modal-card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--surface-base);
    display: block;
}

    .modal-card.lead-guest {
        background-color: var(--surface-raise);
        border-color: var(--gold-soft);
    }

.modal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.modal-card-title {
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-body);
}

    .modal-card-title .bi {
        flex-shrink: 0;
        font-size: 1.1em;
    }

    .modal-card-title.text-primary .bi {
        color: var(--brand-primary, #0056b3);
    }

    .modal-card-title.text-secondary .bi {
        color: var(--ink-soft);
    }

.modal-card-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--gold-soft);
    color: var(--gold-dark, #333);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

.modal-card-content {
    margin-top: 0;
}

.modal-card-list {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-base);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.75rem;
    row-gap: 0.5rem;
}

.modal-card-item {
    margin: 0;
    align-self: start;
}

.modal-card-list dt.modal-card-item {
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

    .modal-card-list dt.modal-card-item::after {
        content: "";
    }

.modal-card-list dd.modal-card-item {
    word-break: break-word;
    color: var(--ink-soft);
    display: block;
}

    .modal-card-list dd.modal-card-item::after {
        content: "";
    }

    .modal-card-list dd.modal-card-item:last-of-type::after {
        content: "";
        margin: 0;
    }

.modal-card-item a {
    color: var(--brand-primary, #0056b3);
    text-decoration: none;
    transition: color var(--t-fast);
}

    .modal-card-item a:hover {
        color: var(--brand-primary-dark, #003d82);
        text-decoration: underline;
    }

.modal-alert {
    border-radius: var(--radius);
    border-color: var(--hairline);
    margin-top: var(--space-3);
}

.modal-alert-info {
    background-color: var(--surface-base);
    border: 1px solid var(--hairline);
    color: var(--ink-soft);
    padding: var(--space-3);
}

    .modal-alert-info .bi {
        color: var(--brand-primary, #0056b3);
        margin-right: var(--space-2);
    }

/* ============================================================
   Responsive Modal Styling
   ============================================================ */

/* Tablets and smaller (max 768px) */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: calc(var(--radius) * 0.8);
    }

    .modal-header {
        padding: var(--space-4) var(--space-4) var(--space-3) !important;
    }

    .modal-title {
        font-size: var(--fs-h4, 1.25rem);
    }

    .modal-body {
        padding: var(--space-3) var(--space-4) !important;
    }

    .modal-footer {
        padding: var(--space-3) var(--space-4) var(--space-4) !important;
        flex-direction: column;
    }

        .modal-footer .btn {
            width: 100%;
            padding: 10px 16px;
        }

    /* Party members modal - wider on mobile but responsive */
    #cupolaConfirmModal.party-members-modal .modal-dialog {
        max-width: 95vw;
    }

    /* Modal cards - better spacing on mobile */
    .modal-card {
        padding: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .modal-card-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .modal-card-item {
        display: contents;
    }

        .modal-card-item dt {
            display: inline;
            font-size: 0.8125rem;
        }

        .modal-card-item dd {
            display: inline;
            font-size: 0.8125rem;
            margin-bottom: var(--space-1);
        }

    .modal-card-title {
        font-size: var(--fs-small, 0.875rem);
    }

    .modal-card-list {
        font-size: 0.8125rem;
    }
}

/* Small phones (max 480px) */
@media (max-width: 480px) {
    .modal-header {
        padding: var(--space-3) var(--space-3) var(--space-2) !important;
    }

    .modal-title {
        font-size: var(--fs-body);
        letter-spacing: 0.02em;
    }

    .modal-body {
        padding: var(--space-2) var(--space-3) !important;
    }

    .modal-footer {
        padding: var(--space-2) var(--space-3) var(--space-3) !important;
        gap: 0.25rem;
    }

        .modal-footer .btn {
            padding: 8px 12px;
            font-size: 0.8125rem;
            letter-spacing: 1px;
        }

    .btn-close {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .modal-card-list {
        gap: var(--space-1);
    }

    .modal-card-item {
        display: contents;
    }

        .modal-card-item dt {
            display: inline;
            font-size: 0.75rem;
        }

        .modal-card-item dd {
            display: inline;
            font-size: 0.75rem;
        }

    .modal-alert {
        font-size: 0.8125rem;
    }

    #cupolaConfirmModal.party-members-modal .modal-dialog {
        max-width: 100vw;
    }
}

/* Large screens (min 1200px) */
@media (min-width: 1200px) {
    .modal-header {
        padding: var(--space-7) var(--space-7) var(--space-5) !important;
    }

    .modal-body {
        padding: var(--space-5) var(--space-7) !important;
    }

    .modal-footer {
        padding: var(--space-5) var(--space-7) var(--space-6) !important;
    }

    .modal-card {
        padding: var(--space-4);
    }
}

/* Print styles */
@media print {
    .modal {
        display: none !important;
    }
}