/* --- NAKŁADKA (OVERLAY) --- */
.ui-modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    background: rgba(0,0,0,0.5); 
    z-index: 9999; 
    display: none; 
    opacity: 0; /* DODANE: Zaczyna od 0 dla płynnego wejścia */
    transition: opacity 0.4s ease; /* DODANE: Płynne wygaszanie nakładki */
    backdrop-filter: blur(4px); 
}

body.ui-modal-no-scroll { overflow: hidden; }

/* --- BAZOWY MODAL --- */
.ui-modal { 
    visibility: hidden; 
    pointer-events: none; 
    opacity: 0; 
    /* POPRAWKA: visibility 0s linear 0.4s wymusza na przeglądarce poczekanie 0.4s z całkowitym ukryciem elementu! */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0s linear 0.4s;
}

.ui-modal__tags-slot { display: none; }

/* =========================================================================
   WIDOK MOBILNY (PONIŻEJ 768px)
   ========================================================================= */
@media (max-width: 767px) {
    
    .ui-modal { 
        display: none !important; /* Domyślnie element nie obciąża DOM */
        position: fixed; 
        background: var(--white, #fff); 
        z-index: 10000; 
        flex-direction: column; 
        box-sizing: border-box; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100vh; 
        height: 100dvh; 
        overflow: hidden !important; 
        contain: paint; 
    }

    /* POPRAWKA: Element zachowuje flex zarówno gdy jest otwarty, jak i W TRAKCIE zamykania */
    .ui-modal.is-modal-open,
    .ui-modal.ui-modal--closing {
        display: flex !important;
    }

    .ui-modal[data-modal-type="side"] { 
        top: 0; 
        left: auto; 
        right: 0; 
        width: 85%; 
        max-width: 380px; 
        transform: translateX(100%); 
    }
    
    .ui-modal[data-modal-type="center"] { top: 50%; left: 50%; width: 90%; max-height: 85vh; transform: translate(-50%, -45%); border-radius: var(--br-15, 15px); }
    .ui-modal[data-modal-type="fullscreen"] { top: 0; left: 0; width: 100%; height: 100vh; transform: scale(0.95); }

    /* --- ANIMACJA OTWIERANIA --- */
    .ui-modal.is-modal-open { 
        visibility: visible !important; 
        opacity: 1 !important; 
        pointer-events: auto !important; 
        /* Przy otwieraniu widoczność jest natychmiastowa (0s delay) */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0s; 
    }
    .ui-modal.is-modal-open[data-modal-type="side"] { 
        transform: translateX(0) !important; 
        box-shadow: -5px 0 30px rgba(0,0,0,0.15); 
    }
    .ui-modal.is-modal-open[data-modal-type="center"] { transform: translate(-50%, -50%) !important; }
    .ui-modal.is-modal-open[data-modal-type="fullscreen"] { transform: scale(1) !important; }

    /* Nagłówek staje się zwykłym elementem... (i reszta Twojego pliku pozostaje bez zmian) */
    .ui-modal.ui-modal--closing { 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s; 
    }

    /* --- STRUKTURA WEWNĘTRZNA --- */
    
    /* Nagłówek */
    .ui-modal__header { 
        display: flex !important; 
        justify-content: space-between; 
        align-items: center; 
        border-bottom: 1px solid var(--border, #e6e3dc); 
        padding: 20px; 
        background: var(--white, #fff); 
        width: 100%; 
        box-sizing: border-box; 
        flex-shrink: 0; 
    }

    /* Ciało modalu - przejmuje cały scroll */
    .ui-modal__body { 
        display: flex !important; 
        flex-direction: column; 
        gap: 16px; 
        padding: 10px 0; 
        width: 100%; 
        box-sizing: border-box; 
        flex-grow: 1; /* Rozciągnij na całą dostępną przestrzeń */
        overflow-y: auto; /* Włącz przewijanie tylko tutaj */
        -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */
    }

    /* Stopka */
    .ui-modal__footer { 
        display: flex !important; 
        padding: 20px; 
        border-top: 1px solid var(--border, #e6e3dc); 
        background: var(--white, #fff); 
        width: 100%; 
        box-sizing: border-box; 
        flex-shrink: 0; 
        margin-top: auto; 
        /* Zabezpieczenie przed dolnymi paskami gestów w nowych telefonach (Safe Area) */
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); 
    }

    /* --- TYPOGRAFIA I ELEMENTY INTERFEJSU --- */
    .ui-modal__title { 
        font-size: 16px; 
        font-weight: 700; 
        color: var(--text-dark, #1A2B3C); 
        text-transform: uppercase; 
        letter-spacing: 0.5px; 
    }
    
    .ui-modal__close { 
        background: none; 
        border: none; 
        cursor: pointer; 
        color: var(--secondary, #475569); 
        padding: 6px; 
        display: flex; 
        align-items: center; 
    }

    .ui-modal__tags-slot.has-tags { 
        display: flex !important; 
        flex-wrap: wrap; 
        align-items: center; 
        gap: 8px; 
        padding: 12px 20px; 
        border-bottom: 1px solid var(--border, #e6e3dc); 
        background: var(--white, #fff); 
        width: 100%; 
        box-sizing: border-box; 
        flex-shrink: 0; 
    }

    .ui-modal__mobile-tabs-container { 
        display: block !important; 
        padding: 10px 20px; 
        border-bottom: 1px solid var(--border, #e6e3dc); 
        background: var(--white, #fff); 
        flex-shrink: 0; 
    }
    
    .ui-modal__mobile-tabs-container .news-tabs { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 8px !important; 
        width: 100% !important; 
        overflow: visible !important; 
    }
    
    .ui-modal__mobile-tabs-container .news-tab-btn { 
        display: flex !important; 
        width: 100% !important; 
        box-sizing: border-box; 
        padding: 12px 16px !important; 
        font-size: 13px !important; 
        border: 1.5px solid var(--border, #e6e3dc) !important; 
        border-radius: var(--br-5, 5px) !important; 
        text-align: left !important; 
        justify-content: flex-start !important; 
        background: var(--white, #fff); 
    }
    
    .ui-modal__mobile-tabs-container .news-tab-btn.is-active { 
        background: var(--primary, #005B99) !important; 
        color: var(--white, #fff) !important; 
        border-color: var(--primary, #005B99) !important; 
    }
    
    .ui-modal__mobile-tabs-container .news-tab-btn.is-active .tab-icon svg { 
        stroke: var(--white); 
    }
    
    .ui-modal__mobile-tabs-container .news-tab-btn::after { display: none !important; }

    .ui-modal__apply { 
        width: 100%; 
        padding: 14px; 
        background-color: var(--primary, #005B99); 
        color: var(--white, #fff); 
        border: none; 
        border-radius: var(--br-5, 5px); 
        font-size: 14px; 
        font-weight: 700; 
        text-transform: uppercase; 
        letter-spacing: 0.5px; 
        cursor: pointer; 
        transition: opacity 0.4s ease; 
    }
    
    .ui-modal__apply:hover { opacity: 0.9; }
    
    .ui-modal__body .news-field-group { 
        padding: 10px 20px; 
        width: 100%; 
        box-sizing: border-box; 
    }



    .ui-modal:not(.is-modal-open):not(.ui-modal--closing):not(.ui-modal--opening) {
        display: none !important; 
    }

    /* Wszystkie trzy stany (otwarty, zamykający się, przygotowujący się) muszą mieć flex */
    .ui-modal.is-modal-open,
    .ui-modal.ui-modal--closing,
    .ui-modal.ui-modal--opening {
        display: flex !important;
    }
}

/* =========================================================================
   WIDOK DESKTOPOWY (INLINE, POWYŻEJ 768px)
   ========================================================================= */
@media (min-width: 768px) {
    .ui-modal--inline-desktop { 
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 20px !important; 
        align-items: flex-end !important; 
        position: relative !important; 
        width: 100% !important; 
        height: auto !important; 
        background: transparent !important; 
        transform: none !important; 
        opacity: 1 !important; 
        visibility: visible !important; 
        pointer-events: auto !important; 
        box-shadow: none !important; 
        margin: 0 !important; 
        padding: 0 !important; 
    }
    
    .ui-modal--inline-desktop .ui-modal__body { 
        display: contents !important; 
    }
    
    /* Ukrywamy sekcje typowo mobilne na desktopie */
    .ui-modal--inline-desktop .ui-modal__header,
    .ui-modal--inline-desktop .ui-modal__footer,
    .ui-modal--inline-desktop .ui-modal__tags-slot,
    .ui-modal--inline-desktop .ui-modal__mobile-tabs-container { 
        display: none !important; 
    }
}