/**
 * LeadRadar Forms — Popup „Zadzwoń teraz"
 * Version: 2.8.1
 *
 * Osobny, samodzielny popup (odwzorowanie designu Fair Forms, tryb „Zadzwońcie teraz").
 *
 * PUŁAPKA KASKADY (v2.8.1): ciężkie motywy (np. WoodMart) mają reguły na
 * `:is(.btn,.button,button,[type=submit],[type=button])` oraz na input/heading o TAKIEJ
 * SAMEJ specyficzności co nasze klasy, ale ładują się PÓŹNIEJ → wygrywają remis i „rozbierają"
 * popup (szary box zamiast ×, bordery pól z motywu, złe kolory nagłówka). Dlatego na
 * właściwościach STRUKTURALNYCH/wizualnych dajemy `!important` (jak reszta wtyczki).
 * WYJĄTEK — zgodnie z pułapką projektu — NIE dajemy `!important` na właściwości ANIMOWANE:
 *   • `opacity` overlaya (transition open/close),
 *   • `transform` okna (transition open/close),
 *   • `stroke-dashoffset` checkmarka (@keyframes) — !important zablokowałby animację.
 */

.leadradar-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
    opacity: 0; /* ANIMOWANE — bez !important */
    pointer-events: none !important;
    transition: opacity 0.25s ease;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.leadradar-popup-overlay.is-open {
    opacity: 1; /* ANIMOWANE — bez !important */
    pointer-events: auto !important;
}
.leadradar-popup-overlay * { box-sizing: border-box !important; }

.leadradar-popup {
    position: relative !important;
    background: #fff !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 560px !important;
    padding: 40px 44px 40px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(12px); /* ANIMOWANE — bez !important */
    transition: transform 0.25s ease;
}
.leadradar-popup-overlay.is-open .leadradar-popup { transform: translateY(0); /* ANIMOWANE — bez !important */ }

.leadradar-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #9aa0a6 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    transition: color 0.15s ease;
}
.leadradar-popup-close:hover { color: #5f6368 !important; background: none !important; }

.leadradar-popup-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 4px 0 26px !important;
    text-align: center !important;
}
.leadradar-popup-ico {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(75, 183, 103, 0.12) !important;
    color: #4bb767 !important;
}
.leadradar-popup-ico svg { width: 28px !important; height: 28px !important; display: block !important; }

.leadradar-popup-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #3c4043 !important;
    /* Motywy (np. WoodMart) kolorują nagłówki gradientem przez background-clip:text +
       -webkit-text-fill-color:transparent — trzeba je zdjąć, inaczej `color` nic nie da. */
    background: none !important;
    -webkit-text-fill-color: #3c4043 !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-wrap: balance;
}

.leadradar-popup-row {
    display: flex !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin: 0 !important;
}
.leadradar-popup-phone {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid #d6d9de !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: #3c4043 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.leadradar-popup-phone:focus {
    outline: none !important;
    border-color: #4bb767 !important;
    box-shadow: 0 0 0 3px rgba(75, 183, 103, 0.2) !important;
}
.leadradar-popup-phone.has-error {
    border-color: #e0554e !important;
    box-shadow: 0 0 0 3px rgba(224, 85, 78, 0.15) !important;
}

.leadradar-popup-submit {
    flex: 0 0 auto !important;
    min-width: 200px !important;
    width: auto !important;
    background: #6cc283 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 14px 22px !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.leadradar-popup-submit:hover { background: #4bb767 !important; color: #fff !important; }
.leadradar-popup-submit:disabled { opacity: 0.65; cursor: default !important; }

.leadradar-popup-error {
    color: #c0392b !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 12px 2px 0 !important;
}

.leadradar-popup-consent {
    text-align: center !important;
    color: #9aa0a6 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 20px auto 0 !important;
    max-width: 460px !important;
}
.leadradar-popup-consent a { color: #4bb767 !important; text-decoration: none !important; }
.leadradar-popup-consent a:hover { text-decoration: underline !important; }

/* ---- Ukrywanie stanów (atrybut `hidden` z JS) ----
   Musi bić naszą własną `display:flex` na .leadradar-popup-success oraz motyw.
   Bez tego blok sukcesu (checkmark) jest widoczny od razu obok formularza. */
.leadradar-popup-form[hidden],
.leadradar-popup-success[hidden],
.leadradar-popup-error[hidden] { display: none !important; }

/* ---- Stan sukcesu (po wysłaniu) ---- */
.leadradar-popup-success {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 0 6px !important;
}
.leadradar-popup-check {
    display: inline-flex !important;
    margin-bottom: 16px !important;
}
.leadradar-popup-check svg { width: 68px !important; height: 68px !important; }
.leadradar-popup-check circle {
    stroke: #4bb767 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 151 !important;
    stroke-dashoffset: 151; /* ANIMOWANE (@keyframes) — bez !important */
    animation: lr-popup-circle 0.5s ease forwards;
}
.leadradar-popup-check path {
    stroke: #4bb767 !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: 40 !important;
    stroke-dashoffset: 40; /* ANIMOWANE (@keyframes) — bez !important */
    animation: lr-popup-check 0.35s 0.45s ease forwards;
}
@keyframes lr-popup-circle { to { stroke-dashoffset: 0; } }
@keyframes lr-popup-check  { to { stroke-dashoffset: 0; } }

.leadradar-popup-success-msg {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #3c4043 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
    .leadradar-popup { max-width: 100% !important; padding: 40px 22px 28px !important; }
    .leadradar-popup-title { font-size: 24px !important; }
    .leadradar-popup-row { flex-direction: column !important; }
    .leadradar-popup-submit { min-width: 0 !important; width: 100% !important; }
}