/* Wildly – Popup Wilo Direct */
:root {
    --wwpd-navy: #0c3744;
    --wwpd-green: #14af95;
    --wwpd-cream: #f8efe2;
    --wwpd-orange: #f7966a;
    --wwpd-white: #ffffff;
}

.wwpd-root,
.wwpd-root * {
    box-sizing: border-box;
}

.wwpd-launcher {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    min-height: 70px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 6px 17px 6px 7px !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    border-radius: 999px !important;
    color: var(--wwpd-white) !important;
    background: linear-gradient(135deg, var(--wwpd-navy), #0b6570) !important;
    box-shadow: 0 18px 48px rgba(12, 55, 68, .30) !important;
    cursor: pointer !important;
    font-family: Inter, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: left !important;
    appearance: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.wwpd-launcher:hover,
.wwpd-launcher:focus-visible {
    transform: translateY(-3px) !important;
    box-shadow: 0 24px 60px rgba(12, 55, 68, .36) !important;
}

.wwpd-launcher-logo {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: var(--wwpd-cream) !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.45) !important;
}

.wwpd-launcher-logo img,
.wwpd-brand-logo,
.wwpd-loader img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.wwpd-launcher-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.1 !important;
}

.wwpd-launcher-copy strong {
    color: var(--wwpd-white) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.wwpd-launcher-copy small {
    color: rgba(255,255,255,.74) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.wwpd-overlay[hidden] {
    display: none !important;
}

.wwpd-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483640 !important;
    display: grid !important;
    place-items: center !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    background: rgba(6, 26, 32, .62) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

.wwpd-dialog {
    width: min(980px, 96vw) !important;
    height: min(900px, 92dvh) !important;
    min-height: 560px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    border-radius: 30px !important;
    background: var(--wwpd-white) !important;
    box-shadow: 0 36px 110px rgba(4, 26, 32, .45) !important;
    outline: none !important;
}

.wwpd-header {
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px 10px 14px !important;
    border-bottom: 1px solid rgba(12, 55, 68, .10) !important;
    background: rgba(248, 239, 226, .82) !important;
}

.wwpd-brand {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

.wwpd-brand-logo {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    background: var(--wwpd-white) !important;
}

.wwpd-brand div {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.wwpd-brand strong {
    overflow: hidden !important;
    color: var(--wwpd-navy) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.wwpd-brand span {
    color: #66777c !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

.wwpd-close {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--wwpd-navy) !important;
    background: var(--wwpd-white) !important;
    box-shadow: 0 8px 24px rgba(12, 55, 68, .10) !important;
    cursor: pointer !important;
    appearance: none !important;
}

.wwpd-close span {
    margin-top: -3px !important;
    font-size: 31px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

.wwpd-frame-wrap {
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--wwpd-cream) !important;
}

.wwpd-frame {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0 !important;
    background: var(--wwpd-white) !important;
}

.wwpd-loader {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    color: var(--wwpd-navy) !important;
    background: var(--wwpd-cream) !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    transition: opacity .2s ease, visibility .2s ease !important;
}

.wwpd-loader img {
    width: 74px !important;
    height: 74px !important;
    animation: wwpd-pulse 1.4s ease-in-out infinite !important;
}

.wwpd-frame-wrap.is-loaded .wwpd-loader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.wwpd-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

@keyframes wwpd-pulse {
    0%, 100% { transform: scale(.96); }
    50% { transform: scale(1.04); }
}

@media (max-width: 720px) {
    .wwpd-launcher {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        min-height: 64px !important;
        padding: 5px !important;
    }

    .wwpd-launcher-logo {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
    }

    .wwpd-launcher-copy {
        display: none !important;
    }

    .wwpd-overlay {
        padding: 0 !important;
        place-items: stretch !important;
    }

    .wwpd-dialog {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .wwpd-header {
        padding-top: max(10px, env(safe-area-inset-top)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wwpd-launcher,
    .wwpd-loader,
    .wwpd-loader img {
        animation: none !important;
        transition: none !important;
    }
}