/*
 * Envio24 - General UI Component: Modal (system okien modalnych)
 *
 * @version 1.1.0
 * @package envio24-core/assets/css/general/
 *
 * SPIS TREŚCI (PL):
 * 1) Tokeny (globalne) – RESKIN: single source of truth w theme-tokens.css
 * 2) Lock scroll (html/body)
 * 3) Overlay + box + animacja
 * 4) Header + tytuł + przycisk zamykania (X)
 * 4.1) HARD LOCK (DESKTOP) – stabilizacja Ajuda vs Inserir przy konfliktach CSS
 * 5) Body (scroll)
 * 6) MOBILE: modal jako pełnoekranowa karta
 *
 * ZMIANY 1.1.0 (PL):
 * - FIX: Ustalono kolor ikony zamykania (X) przez tokeny theme-tokens.css:
 *   - .e24-modal-close { color: var(--e24-brand-dark); }
 *   Dzięki temu SVG z fill="currentColor" ma zawsze poprawny kolor (brand-dark).
 *
 * ZMIANY 1.0.9 (PL):
 * - FIX (blokada prac): dodano HARD LOCK dla desktop (>768px), aby modale Ajuda i Inserir
 *   miały identyczny layout nagłówka mimo konfliktów/nadpisań z innych CSS:
 *   - wymuszenie flex + align-items:center na .e24-modal-header
 *   - wymuszenie layoutu tytułu w 1 linii (row) na .e24-modal-title
 *   - wymuszenie white-space:nowrap i line-height dla prefix/main
 *   - wymuszenie symetrycznych paddingów headera (17/17)
 * - Mobile pozostaje bez zmian (tytuł może być 2-liniowy).
 */

/* ========================================
 * 1) Tokeny (globalne) – RESKIN
 * ===================================== */
/*
 * UWAGA (PL):
 * - Ten plik NIE definiuje :root.
 * - Kolory i podstawowe tokeny trzymamy w:
 *   assets/css/general/theme-tokens.css
 */

/* ========================================
 * 2) Lock scroll (html/body)
 * ===================================== */
html.e24-modal-open,
body.e24-modal-open{
    overflow: hidden !important;
}

/* ========================================
 * 3) Overlay + box + animacja
 * ===================================== */
.e24-modal-overlay{
    /* RESKIN: pomarańczowy tint dla hover na X (zamiast zielonego) */
    --e24-modal-close-hover-bg: rgba(211, 84, 0, 0.14);
    --e24-modal-close-active-bg: rgba(211, 84, 0, 0.18);

    /* Rezerwa na X po prawej stronie (żeby tytuł nie wchodził pod przycisk) */
    --e24-modal-close-reserve-right: 58px;

    /* Wspólny pad X (lewy/prawy) */
    --e24-modal-header-pad-x: 22px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;

    display: none; /* otwieramy przez JS -> display:flex */
    align-items: center;
    justify-content: center;

    backdrop-filter: blur(2px);
}

.e24-modal-box{
    position: relative;
    background-color: #FFFFFF;

    width: 90%;
    max-width: 650px;
    max-height: 85vh;

    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: column;

    overflow: hidden;
    animation: e24ModalFadeIn 0.3s ease-out;
}

@keyframes e24ModalFadeIn{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* ========================================
 * 4) Header + tytuł + przycisk zamykania (X)
 * ===================================== */
.e24-modal-header{
    position: relative; /* potrzebne pod absolutne pozycjonowanie X */

    /*
     * Symetria 17/17 = optyczne wyrównanie X i tytułu.
     * (Wcześniej Ajuda miało rozjazdy przez nadpisania.)
     */
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: var(--e24-modal-header-pad-x);

    /* Rezerwa po prawej na X */
    padding-right: calc(var(--e24-modal-header-pad-x) + var(--e24-modal-close-reserve-right));

    border-bottom: 1px solid #EEEEEE;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    /* RESKIN: tło nagłówka w jasnej tonacji CTA */
    background-color: var(--e24-input-filled-bg, #FFF8F2);
}

.e24-modal-title{
    margin: 0;
    font-family: "Rubik", sans-serif;
    color: var(--e24-text-main, #444444);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    text-align: left;
    line-height: 1.15;

    flex: 1 1 auto;
    min-width: 0;

    padding-top: 0 !important;

    /* Bezpiecznik dla długich tytułów */
    padding-right: 8px;
}

.e24-modal-title__prefix{
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1.15;
}

.e24-modal-title__main{
    font-size: 19px;
    font-weight: 700;

    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    line-height: 1.15;
}

.e24-modal-close{
    position: absolute;
    right: var(--e24-modal-header-pad-x);
    top: 50%;

    background: transparent !important;
    border: none !important;
    cursor: pointer;

    /* FIX 1.1.0: kolor X bierze się z tokenów (SVG ma fill="currentColor") */
    color: var(--e24-brand-dark) !important;

    /* większy hitbox */
    padding: 8px;
    min-width: 42px;
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    outline: none !important;
    box-shadow: none !important;

    /* Bazowe centrowanie pionowe */
    transform: translateY(-50%);

    transition: background-color 0.16s ease, transform 0.16s ease;
    will-change: transform;

    -webkit-tap-highlight-color: transparent;
}

.e24-modal-close:focus,
.e24-modal-close:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.e24-modal-close:hover{
    background-color: var(--e24-modal-close-hover-bg) !important;
    transform: translateY(calc(-50% - 0.5px)) translateX(-0.5px) scale(1.02);
}

.e24-modal-close:active{
    background-color: var(--e24-modal-close-active-bg) !important;
    transform: translateY(-50%) translateX(-0.5px) scale(1.01);
}

.e24-modal-close svg{
    width: 24px;
    height: 24px;
    display: block;
    shape-rendering: geometricPrecision;
}

/* Preferuje mniej ruchu: wyłączamy transformy (oprócz centrowania) */
@media (prefers-reduced-motion: reduce){
    .e24-modal-close{
        transition: background-color 0.16s ease !important;
    }
    .e24-modal-close:hover,
    .e24-modal-close:active{
        transform: translateY(-50%) !important;
    }
}

/* ========================================
 * 4.1) HARD LOCK (DESKTOP) – stabilizacja Ajuda vs Inserir
 * ===================================== */
@media (min-width: 769px){

    /*
     * Cel (PL):
     * - niezależnie od konfliktów z innymi CSS, desktop ma mieć:
     *   * jedną linię tytułu (prefix + main)
     *   * pionowe centrowanie tytułu i X
     *   * przewidywalną wysokość headera
     */

    .e24-modal-header{
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding-top: 17px !important;
        padding-bottom: 17px !important;
    }

    .e24-modal-title{
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;

        /* wycinanie do 1 linii */
        white-space: nowrap !important;

        /* pewność, że nie wraca margin z motywu */
        margin: 0 !important;
    }

    .e24-modal-title__prefix{
        white-space: nowrap !important;
        line-height: 1.15 !important;
    }

    .e24-modal-title__main{
        white-space: nowrap !important;
        line-height: 1.15 !important;
    }

    .e24-modal-close{
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .e24-modal-close:hover{
        transform: translateY(calc(-50% - 0.5px)) translateX(-0.5px) scale(1.02) !important;
    }

    .e24-modal-close:active{
        transform: translateY(-50%) translateX(-0.5px) scale(1.01) !important;
    }
}

/* ========================================
 * 5) Body (scroll)
 * ===================================== */
.e24-modal-body{
    padding: 25px;

    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;

    color: var(--e24-text-main, #444444);
}

/* ========================================
 * 6) MOBILE: modal jako pełnoekranowa karta
 * ===================================== */
@media (max-width: 768px){

    .e24-modal-overlay{
        align-items: stretch;
        justify-content: stretch;
        backdrop-filter: none;

        /* Na mobile header jest niższy – trochę mniejsza rezerwa na X */
        --e24-modal-close-reserve-right: 52px;
    }

    .e24-modal-box{
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;

        border-radius: 0;
        animation: none;
        box-shadow: none;
    }

    .e24-modal-header{
        position: sticky;
        top: 0;
        z-index: 2;

        border-bottom: 1px solid #EAEAEA;

        /*
         * Mobile:
         * - tytuł może być w 2 liniach (prefix nad main),
         * - padding 14/14 optycznie dobrze wygląda,
         * - nadal rezerwujemy miejsce na X.
         */
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 16px;
        padding-right: calc(16px + var(--e24-modal-close-reserve-right));
    }

    .e24-modal-close{
        right: 12px;
    }

    .e24-modal-title{
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        white-space: normal;
    }

    .e24-modal-title__prefix{
        font-size: 14px;
        font-weight: 400;
        white-space: normal;
        line-height: 1.15;
        color: var(--e24-text-muted, #777777);
    }

    .e24-modal-title__main{
        font-size: 14px;
        font-weight: 800;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.2;
    }

    .e24-modal-body{
        padding: 16px;
        font-size: 15px;
        line-height: 1.6;
    }
}