/*
 * ca_dialog.css - styles for the native <dialog> wrapper (ca_dialog.js) used by the
 * redesigned pages instead of bootbox/Bootstrap modals.
 *
 * The wrapper emits legacy class names (.modal-dialog/.modal-content/...) so finalized
 * modal CSS (e.g. .refunds-modal rules in radindex.css) keeps applying. On pages that
 * also define those classes elsewhere (Bootstrap 5 CSS on generic_rad, page-specific
 * rules in radindex.css), include THIS file FIRST so the more specific finalized rules
 * win by source order.
 */

/* The <dialog> element itself: neutral shell, content card styled below.
   NOTE: Tailwind v4 Preflight resets `margin:0` on all elements, which defeats the
   browser UA stylesheet's `margin:auto` centering for modal <dialog>. Re-assert
   centering explicitly (fixed + inset:0 + margin:auto + fit-content sizing). */
.ca-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100dvh;
    overflow: visible;
}
.ca-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5); /* matches the bootbox/.modal-backdrop.in look */
}
/* Fallback for browsers without <dialog> support (e.g. iOS Safari < 15.4), where showModal()
   is unavailable and there is no top layer and no ::backdrop. ca_dialog.js applies this class
   and renders the same markup as an ordinary fixed overlay. */
.ca-dialog.ca-dialog-fallback {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5); /* stands in for ::backdrop */
    z-index: 2050;                  /* above the site chrome, matching the bootbox modal layer */
}

/* Scroll-lock while a dialog is open (top layer handles stacking; this stops
   background scrolling on browsers that still allow it behind ::backdrop) */
html.ca-dialog-open,
html.ca-dialog-open body {
    overflow: hidden;
}

/* Sizing - mirrors the previous bootbox modal widths */
.ca-dialog .modal-dialog {
    position: relative;
    width: auto;
    margin: 1.5rem 0.75rem;
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
}
@media (min-width: 640px) {
    .ca-dialog .modal-dialog {
        width: 480px;
        margin: 4rem auto;
        max-height: calc(100dvh - 8rem);
    }
}
/* size: 'xl' (availability modal) - mirrors the old wide bootbox dialog */
.ca-dialog .modal-dialog.ca-dialog-xl {
    width: min(1000px, 96vw);
    margin: 2rem auto;
    max-height: calc(100dvh - 4rem);
}

/* Card look - same tokens as the redesign cards (client_auth / phys_site_new) */
.ca-dialog .modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 30px 120px -60px rgba(0, 0, 0, 0.7);
    outline: 0;
    font-family: inherit;
}
.ca-dialog .modal-header {
    padding: 1.1rem 1.25rem 0;
    border: 0;
    background: transparent;
}
.ca-dialog .modal-body {
    position: relative;
    padding: 1.25rem;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.6;
}
.ca-dialog .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 1.25rem 1.1rem;
    border: 0;
    background: transparent;
}

/* Buttons - base box + the variants the dialogs actually use. Variant colors match
   the Bootstrap palette so generic_rad's btn-danger/btn-info keep their current look;
   btn-primary uses the redesign accent (#3a8ffe, as in client_auth.css). */
.ca-dialog .btn {
    padding: 0.45rem 1.25rem;
    border-radius: 0.6rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.ca-dialog .btn-primary {
    background-color: #3a8ffe;
    border-color: #3a8ffe;
    color: #fff;
}
.ca-dialog .btn-primary:hover {
    background-color: #1d63c3;
    border-color: #1d63c3;
}
.ca-dialog .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.ca-dialog .btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}
.ca-dialog .btn-info {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #000;
}
.ca-dialog .btn-info:hover {
    background-color: #31d2f2;
    border-color: #25cff2;
}

/* Corner close button - the wrapper emits an empty button; draw the x here */
.ca-dialog .bootbox-close-button {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.8rem;
    z-index: 1;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}
.ca-dialog .bootbox-close-button::after {
    content: '\00d7';
}
.ca-dialog .bootbox-close-button:hover {
    color: #0f172a;
}

/* Gentle entrance to echo the old bootbox fade */
.ca-dialog[open] {
    animation: ca-dialog-in 0.15s ease-out;
}
@keyframes ca-dialog-in {
    from { opacity: 0; }
    to { opacity: 1; }
}