/*
 * modal-fix.css
 * Fixes the Confirm modal so it:
 *   1. Covers the FULL screen including the Order Summary sidebar
 *   2. Stays fixed (doesn't scroll with the page)
 *   3. Centers the dialog card perfectly in the viewport
 *
 * Reference design: Image 3 (bizee.com version)
 */

/* ── Overlay: covers everything, full viewport, fixed ───────────────────── */
#foreignIndividualModal {
    /* Fixed to viewport — escapes ALL parent containers */
    position: fixed   !important;
    top:    0         !important;
    left:   0         !important;
    right:  0         !important;
    bottom: 0         !important;
    width:  100vw     !important;
    height: 100vh     !important;
    margin: 0         !important;
    padding: 0        !important;

    /* Dark semi-transparent backdrop covering EVERYTHING (form + sidebar) */
    background: rgba(0, 0, 0, 0.55) !important;

    /* Must be above the sticky sidebar (z-index: 50) and header (z-index: 100) */
    z-index: 9999999  !important;

    /* Flex: centres the dialog card */
    display:         none            !important; /* JS switches to flex       */
    align-items:     center          !important;
    justify-content: center          !important;

    /* No transform on the overlay itself — keeps fixed positioning intact */
    transform: none  !important;
}

/* When JS opens the modal it sets display:flex inline;
   this rule makes the transition smooth */
#foreignIndividualModal[style*="flex"] {
    display: flex !important;
}

/* ── Dialog card ─────────────────────────────────────────────────────────── */
#foreignIndividualModal > div {
    position:   relative  !important;
    margin:     auto      !important;   /* combined with flex centres it      */

    width:      90%       !important;
    max-width:  560px     !important;
    max-height: 90vh      !important;
    overflow-y: auto      !important;

    background:    #ffffff;
    border-radius: 0.75rem;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 10px 20px  -5px rgba(0, 0, 0, 0.10);

    /* No transform here either — keeps fixed context clean */
    transform: none !important;

    /* Slide-in animation */
    animation: confirmModalIn 0.22s ease-out both;
}

@keyframes confirmModalIn {
    from {
        opacity:   0;
        transform: translateY(-18px) scale(0.97);
    }
    to {
        opacity:   1;
        transform: translateY(0)     scale(1);
    }
}

/* ── Prevent body scroll while modal is open ─────────────────────────────── */
body.ein-modal-open {
    overflow: hidden !important;
}