/**
 * LeadRadar Forms — powłoka popupów z buildera (v2.9.0, poprawki w v2.11.0)
 *
 * Tylko okno modalne: overlay, karta, przycisk zamknięcia, ikona.
 * Sam formularz w środku stylują `leadradar-forms.css` i ustawienia z buildera,
 * dlatego tutaj jedynie neutralizujemy „kartę w karcie" (kontener formularza).
 *
 * v2.11.0: neutralizacja kontenera wymagała podbicia specyficzności (reguły
 * `shadow-*` / `style-*` z arkusza formularzy mają 3 klasy z `!important`),
 * doszła typografia okna i mapowanie presetów stylu na kartę popupu.
 *
 * ZASADA `!important` (patrz CLAUDE.md — pułapka WoodMart):
 * - właściwości strukturalne/wizualne dostają `!important`, bo ciężkie motywy
 *   mają reguły o tej samej specyficzności i ładują się później;
 * - właściwości ANIMOWANE (`opacity`, `transform`) NIGDY nie dostają `!important`,
 *   bo ważne deklaracje autora wygrywają z animacjami/przejściami i je wyłączają.
 */

.leadradar-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    margin: 0 !important;
    background: rgba(17, 24, 39, .62) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none !important;
    /* animowane — bez !important */
    opacity: 0;
    transition: opacity .25s ease;
}

.leadradar-modal-overlay.is-open {
    pointer-events: auto !important;
    opacity: 1;
}

/* Atrybut `hidden` musi wygrać z `display:flex` powyżej (styl autora bije UA) */
.leadradar-modal-overlay[hidden] {
    display: none !important;
}

.leadradar-modal-overlay * {
    box-sizing: border-box !important;
}

.leadradar-modal {
    position: relative !important;
    width: 100% !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    padding: 34px 34px 30px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff; /* nadpisywane inline kolorem tła z buildera */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28) !important;
    /* animowane — bez !important */
    transform: var(--lr-modal-from, none);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

/* Stan docelowy wspólny dla wszystkich animacji.
   Punkt startowy jedzie przez zmienną `--lr-modal-from`, a nie przez kolejne
   reguły na `transform` — inaczej selektory pozycji (4 klasy) biłyby ten stan
   (3 klasy) i karta zostawałaby poza ekranem po otwarciu. */
.leadradar-modal-overlay.is-open .leadradar-modal {
    transform: none;
}

/* ==========================================================================
   POZYCJA OKNA (v2.10.0) — overlay jest kontenerem, pozycję robi flex.
   ========================================================================== */

.leadradar-modal-overlay.is-pos-center       { align-items: center !important;     justify-content: center !important; }
.leadradar-modal-overlay.is-pos-bottom-right { align-items: flex-end !important;   justify-content: flex-end !important; }
.leadradar-modal-overlay.is-pos-bottom-left  { align-items: flex-end !important;   justify-content: flex-start !important; }
.leadradar-modal-overlay.is-pos-top-right    { align-items: flex-start !important; justify-content: flex-end !important; }
.leadradar-modal-overlay.is-pos-top-left     { align-items: flex-start !important; justify-content: flex-start !important; }
.leadradar-modal-overlay.is-pos-bottom-bar   { align-items: flex-end !important;   justify-content: center !important; }

/* Pasek na całą szerokość — reguła z !important bije inline max-width z buildera */
.leadradar-modal-overlay.is-pos-bottom-bar {
    padding: 0 !important;
}

.leadradar-modal-overlay.is-pos-bottom-bar .leadradar-modal {
    max-width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 26px 30px 24px !important;
}

/* Pasek jest niski i szeroki — nagłówek schodzi o klasę niżej */
.leadradar-modal-overlay.is-pos-bottom-bar .leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-title {
    font-size: 19px !important;
}

/* ==========================================================================
   WJAZD OKNA (v2.10.0) — stan spoczynku; docelowy `transform: none` wyżej.
   Żadnego `!important` na `transform`/`transition`, inaczej przejście umiera
   (patrz CLAUDE.md — pułapka z !important i animacjami).
   ========================================================================== */

/* Zoom — zachowanie sprzed 2.10.0, domyślne dla popupu na środku */
.leadradar-modal-overlay.is-anim-zoom {
    --lr-modal-from: translateY(14px) scale(.985);
}

/* Slide — wjazd zza najbliższej krawędzi */
.leadradar-modal-overlay.is-anim-slide.is-pos-bottom-right,
.leadradar-modal-overlay.is-anim-slide.is-pos-top-right {
    --lr-modal-from: translateX(calc(100% + 24px));
}

.leadradar-modal-overlay.is-anim-slide.is-pos-bottom-left,
.leadradar-modal-overlay.is-anim-slide.is-pos-top-left {
    --lr-modal-from: translateX(calc(-100% - 24px));
}

.leadradar-modal-overlay.is-anim-slide.is-pos-bottom-bar,
.leadradar-modal-overlay.is-anim-slide.is-pos-center {
    --lr-modal-from: translateY(calc(100% + 24px));
}

/* Fade — sama przezroczystość overlaya (brak zmiennej = brak transformacji) */

/* Bez animacji */
.leadradar-modal-overlay.is-anim-none .leadradar-modal {
    transition: none;
}

/* ==========================================================================
   TRYB NIEBLOKUJĄCY (v2.10.0) — bez przyciemnienia, bez przejmowania kliknięć.
   Strona pod spodem przewija się i klika normalnie; „klik w tło zamyka"
   znika sam z siebie, bo overlay nie łapie zdarzeń.
   ========================================================================== */

.leadradar-modal-overlay.is-backdrop-none {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.leadradar-modal-overlay.is-backdrop-none,
.leadradar-modal-overlay.is-backdrop-none.is-open {
    pointer-events: none !important;
}

.leadradar-modal-overlay.is-backdrop-none .leadradar-modal {
    pointer-events: auto !important;
    max-height: calc(100vh - 40px) !important;
}

/* ==========================================================================
   PRZYCISK ZAMKNIĘCIA — motywy stylują :is(button,.btn,[type=button]),
   więc każda właściwość musi być tu jawnie zresetowana.
   ========================================================================== */

.leadradar-modal-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    color: #9aa1ab !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease;
}

.leadradar-modal-close:hover,
.leadradar-modal-close:focus {
    background: rgba(0, 0, 0, .06) !important;
    color: #4b5563 !important;
    outline: none !important;
}

/* ==========================================================================
   IKONA NAD FORMULARZEM
   ========================================================================== */

.leadradar-modal-ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto 14px !important;
    border-radius: 50% !important;
    background: rgba(75, 183, 103, .12) !important;
    color: #4bb767 !important;
}

.leadradar-modal-ico svg {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
}

/* ==========================================================================
   FORMULARZ W ŚRODKU — karta jest jedna (.leadradar-modal),
   więc kontener formularza traci własne tło, cień, ramkę i padding.

   ⚠️ SPECYFICZNOŚĆ (naprawione w v2.11.0). `leadradar-forms.css` stylizuje
   kontener przez `.leadradar-form-wrapper.shadow-medium .leadradar-form-container`
   oraz `.leadradar-form-wrapper.style-* .leadradar-form-container` — to TRZY klasy
   z `!important`, więc reset na `.leadradar-modal .leadradar-form-container`
   (dwie klasy) przegrywał i w popupie zostawała „karta w karcie": biały prostokąt
   z własnym cieniem w środku okna. Dlatego klasa wrappera jest tu powtórzona
   (`.leadradar-form-wrapper.leadradar-form-wrapper` = 4 klasy w selektorze) —
   bije każdy wariant `shadow-*` i `style-*` bez sięgania po `#id`.
   Paletę presetów (`style-dark`, `style-glass`, …) przejmuje sama karta popupu,
   patrz sekcja „PRESETY STYLU" niżej.
   ========================================================================== */

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-container {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-inner {
    padding: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   TYPOGRAFIA W OKNIE — karta popupu jest węższa niż formularz na stronie,
   więc nagłówek 24 px łamał się na trzy linie i zjadał całe okno.
   ========================================================================== */

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-header {
    margin-bottom: 18px !important;
}

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-title {
    margin: 0 0 6px !important;
    font-size: 21px !important;
    line-height: 1.28 !important;
    letter-spacing: -.01em !important;
}

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form {
    gap: 16px !important;
}

/* Zgoda / drobny druk — w oknie ma być przypisem, nie drugim akapitem treści */
.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-info-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: .78;
}

/* Ikona + nagłówek wyśrodkowany: bez tego ikona wisi na środku,
   a tekst zaczyna się przy lewej krawędzi i całość się rozjeżdża. */
.leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-header.align-center {
    max-width: 34em !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   PRESETY STYLU — w popupie maluje je karta okna, nie kontener formularza.
   Presety, które dają kontenerowi własne tło/ramkę, muszą mieć odpowiednik tutaj,
   inaczej wyzerowanie kontenera zostawiłoby jasną kartę pod jasnym tekstem.
   ========================================================================== */

.leadradar-modal.is-style-dark {
    background: linear-gradient(135deg, rgba(88, 28, 135, .9), rgba(30, 30, 50, .95)) !important;
}

.leadradar-modal.is-style-glass {
    background: rgba(255, 255, 255, .1) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
}

.leadradar-modal.is-style-modern-pink {
    background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 50%, #fdf2f8 100%) !important;
}

.leadradar-modal.is-style-rounded {
    border: 2px solid #d1fae5 !important;
    border-radius: 20px !important;
}

.leadradar-modal.is-style-minimal {
    border: 1px solid #e0e0e0 !important;
}

/* Blokada scrolla strony pod otwartym popupem (tylko tryb modalny) */
body.leadradar-modal-open {
    overflow: hidden !important;
}

/* ==========================================================================
   UCHWYT PRZY KRAWĘDZI (v2.10.0)
   Zostaje po zamknięciu popupu i wsuwa go z powrotem. Jak przy przycisku ×,
   każda właściwość musi być zresetowana — motywy stylują :is(button,.btn,…).
   ========================================================================== */

.leadradar-modal-handle {
    position: fixed !important;
    z-index: 999997 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 260px !important;
    padding: 11px 18px 11px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #4bb767 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
    color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: box-shadow .18s ease, transform .18s ease;
}

.leadradar-modal-handle[hidden] {
    display: none !important;
}

.leadradar-modal-handle:hover,
.leadradar-modal-handle:focus {
    background: #3ea459 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28) !important;
    outline: none !important;
    transform: translateY(-1px);
}

.leadradar-modal-handle.is-pos-bottom-right { right: 20px !important; bottom: 20px !important; }
.leadradar-modal-handle.is-pos-bottom-left  { left: 20px !important;  bottom: 20px !important; }
.leadradar-modal-handle.is-pos-top-right    { right: 20px !important; top: 20px !important; }
.leadradar-modal-handle.is-pos-top-left     { left: 20px !important;  top: 20px !important; }

/* Ikona w uchwycie jest mała — nadpisujemy koło 54 px z .leadradar-modal-ico */
.leadradar-modal-handle .leadradar-modal-ico {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    background: none !important;
    color: inherit !important;
}

.leadradar-modal-handle .leadradar-modal-ico svg {
    width: 22px !important;
    height: 22px !important;
}

.leadradar-modal-handle-text {
    display: block !important;
    color: inherit !important;
    font: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================================
   MOBILE — każda pozycja schodzi do arkusza przy dolnej krawędzi
   ========================================================================== */

@media (max-width: 600px) {
    .leadradar-modal-overlay,
    .leadradar-modal-overlay.is-pos-center,
    .leadradar-modal-overlay.is-pos-bottom-right,
    .leadradar-modal-overlay.is-pos-bottom-left,
    .leadradar-modal-overlay.is-pos-top-right,
    .leadradar-modal-overlay.is-pos-top-left,
    .leadradar-modal-overlay.is-pos-bottom-bar {
        padding: 10px !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .leadradar-modal,
    .leadradar-modal-overlay.is-pos-bottom-bar .leadradar-modal {
        max-width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        padding: 28px 20px 24px !important;
    }

    .leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-title,
    .leadradar-modal-overlay.is-pos-bottom-bar .leadradar-modal .leadradar-form-wrapper.leadradar-form-wrapper .leadradar-form-title {
        font-size: 19px !important;
    }

    /* Na wąskim ekranie każdy slide jedzie z dołu — z boku nie ma miejsca.
       Selektory muszą mieć tę samą specyficzność co wersja desktopowa
       (media query sam z siebie nie podbija wagi) — wygrywa kolejność w pliku. */
    .leadradar-modal-overlay.is-anim-slide.is-pos-bottom-right,
    .leadradar-modal-overlay.is-anim-slide.is-pos-top-right,
    .leadradar-modal-overlay.is-anim-slide.is-pos-bottom-left,
    .leadradar-modal-overlay.is-anim-slide.is-pos-top-left,
    .leadradar-modal-overlay.is-anim-slide.is-pos-bottom-bar,
    .leadradar-modal-overlay.is-anim-slide.is-pos-center {
        --lr-modal-from: translateY(calc(100% + 20px));
    }

    .leadradar-modal-handle {
        max-width: calc(100vw - 40px) !important;
    }

    .leadradar-modal-handle.is-pos-top-right,
    .leadradar-modal-handle.is-pos-top-left {
        top: auto !important;
        bottom: 16px !important;
    }
}

/* ==========================================================================
   OGRANICZONE ANIMACJE — zostaje samo pojawienie się
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Transform zerujemy wprost (nie przez zmienną) — te selektory biją zarówno
       stan spoczynku, jak i `.is-open`, więc karta po prostu się pojawia. */
    .leadradar-modal-overlay .leadradar-modal,
    .leadradar-modal-overlay.is-open .leadradar-modal {
        transform: none;
        transition: none;
    }

    .leadradar-modal-overlay {
        transition: opacity .12s linear;
    }

    .leadradar-modal-handle {
        transition: none;
    }
}