/**
 * WP Notify Pro — Frontend CSS
 *
 * Popup- en belknop-stijlen met CSS custom properties (variabelen)
 * zodat kleuren, lettertype, lettergrootte en hoekafronding dynamisch
 * vanuit PHP kunnen worden ingesteld.
 */

/* ── Basis-variabelen (fallback) ─────────────────────────────────────────── */
:root {
    --wnp-bg:          #1a1a2e;
    --wnp-text:        #ffffff;
    --wnp-btn:         #e94560;
    --wnp-btn-text:    #ffffff;
    --wnp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wnp-font-size:   15px;
    --wnp-title-size:  22px;
    --wnp-radius:      16px;
    --wnp-shadow:      0 20px 60px rgba(0, 0, 0, 0.4);
    --wnp-z:           999999;
}

/* ── Overlay (achtergrond) ────────────────────────────────────────────────── */
.wnp-popup {
    position:         fixed;
    inset:            0;                          /* top/right/bottom/left = 0 */
    z-index:          var(--wnp-z);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          16px;
    background:       rgba(0, 0, 0, 0.55);
    backdrop-filter:  blur(4px);
    opacity:          0;
    visibility:       hidden;
    transition:       opacity 0.35s ease, visibility 0.35s ease;
}

.wnp-popup--visible {
    opacity:    1;
    visibility: visible;
}

/* ── Positie-varianten ────────────────────────────────────────────────────── */
.wnp-popup--pos-center {
    align-items:     center;
    justify-content: center;
}

.wnp-popup--pos-bottom-right {
    align-items:     flex-end;
    justify-content: flex-end;
    padding:         24px;
}

.wnp-popup--pos-bottom-left {
    align-items:     flex-end;
    justify-content: flex-start;
    padding:         24px;
}

.wnp-popup--pos-bottom-right .wnp-popup__inner,
.wnp-popup--pos-bottom-left  .wnp-popup__inner {
    max-width: 380px;
}

/* ── Overlay uitgeschakeld (subtiele melding) ─────────────────────────────── */
.wnp-popup--no-overlay {
    background:       transparent;
    backdrop-filter:  none;
    pointer-events:   none;                       /* klikken gaan door de lege ruimte */
}

.wnp-popup--no-overlay .wnp-popup__inner {
    pointer-events: auto;                         /* het paneel zelf blijft klikbaar */
}

/* ── Popup-paneel ─────────────────────────────────────────────────────────── */
.wnp-popup__inner {
    position:      relative;
    width:         100%;
    max-width:     440px;
    background:    var(--wnp-bg);
    color:         var(--wnp-text);
    font-family:   var(--wnp-font-family);
    font-size:     var(--wnp-font-size);
    border-radius: var(--wnp-radius);
    padding:       40px 32px 32px;
    box-shadow:    var(--wnp-shadow);
    text-align:    center;
    transform:     translateY(20px) scale(0.96);
    transition:    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wnp-popup--visible .wnp-popup__inner {
    transform: translateY(0) scale(1);
}

/* ── Sluitknop (× rechtsbovenin) ──────────────────────────────────────────────
 * Geïsoleerd en hard ge-reset: veel thema's stylen ALLE <button>-elementen
 * (volle breedte, grote padding, gecentreerd). Met een hoog-specifieke selector
 * + !important op de layout-eigenschappen blijft de × klein en subtiel in de
 * rechterhoek. De kleur komt nog steeds uit de instellingen (var(--wnp-text)).
 * ------------------------------------------------------------------------- */
#wnp-popup .wnp-popup__close,
.wnp-popup button.wnp-popup__close {
    position:         absolute !important;
    top:              10px !important;
    right:            10px !important;
    width:            32px !important;
    height:           32px !important;
    min-width:        0 !important;
    min-height:       0 !important;
    max-width:        none !important;
    margin:           0 !important;
    padding:          0 !important;
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    box-sizing:       border-box !important;
    background:       transparent !important;
    border:           0 !important;
    border-radius:    50% !important;
    box-shadow:       none !important;
    color:            var(--wnp-text) !important;
    font-family:      inherit !important;
    font-size:        18px !important;
    font-weight:      400 !important;
    line-height:      1 !important;
    text-align:       center !important;
    text-transform:   none !important;
    text-shadow:      none !important;
    letter-spacing:   normal !important;
    text-decoration:  none !important;
    cursor:           pointer !important;
    float:            none !important;
    opacity:          0.55 !important;
    transition:       opacity 0.2s ease, background 0.2s ease !important;
}

#wnp-popup .wnp-popup__close:hover,
#wnp-popup .wnp-popup__close:focus,
.wnp-popup button.wnp-popup__close:hover,
.wnp-popup button.wnp-popup__close:focus {
    opacity:    1 !important;
    background: rgba(127, 127, 127, 0.18) !important;
    color:      var(--wnp-text) !important;
    outline:    none !important;
    box-shadow: none !important;
    transform:  none !important;
}

#wnp-popup .wnp-popup__close:focus-visible,
.wnp-popup button.wnp-popup__close:focus-visible {
    outline:        2px solid var(--wnp-btn) !important;
    outline-offset: 1px !important;
}

/* ── Icoon ────────────────────────────────────────────────────────────────── */
.wnp-popup__icon {
    font-size:     48px;
    margin-bottom: 16px;
    display:       block;
    animation:     wnp-ring 1.5s ease-in-out 0.5s 2;
}

@keyframes wnp-ring {
    0%, 100% { transform: rotate(0deg); }
    10%       { transform: rotate(12deg); }
    20%       { transform: rotate(-10deg); }
    30%       { transform: rotate(8deg); }
    40%       { transform: rotate(-6deg); }
    50%       { transform: rotate(4deg); }
}

/* ── Tekst ────────────────────────────────────────────────────────────────── */
.wnp-popup__title {
    font-size:     var(--wnp-title-size);
    font-weight:   700;
    margin:        0 0 10px;
    color:         var(--wnp-text);
    line-height:   1.3;
}

.wnp-popup__desc {
    font-size:     var(--wnp-font-size);
    margin:        0 0 28px;
    opacity:       0.85;
    line-height:   1.6;
    color:         var(--wnp-text);
}

/* ── Vervolg-aanbod ("wil je ook …?") ─────────────────────────────────────── */
.wnp-popup__followup {
    font-size:     var(--wnp-font-size);
    margin:        0 0 16px;
    padding:       10px 14px;
    border-radius: 8px;
    background:    rgba(255, 255, 255, 0.1);
    border:        1px solid rgba(255, 255, 255, 0.15);
    color:         var(--wnp-text);
    line-height:   1.5;
}

/* ── Actieknoppen ─────────────────────────────────────────────────────────── */
.wnp-popup__actions {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin-bottom:  16px;
}

.wnp-btn {
    display:          block;
    width:            100%;
    padding:          14px 20px;
    border:           none;
    border-radius:    10px;
    font-family:      inherit;
    font-size:        var(--wnp-font-size);
    font-weight:      600;
    cursor:           pointer;
    transition:       transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    background:       var(--wnp-btn);
    color:            var(--wnp-btn-text);
    box-shadow:       0 4px 14px rgba(0, 0, 0, 0.25);
}

.wnp-btn:hover,
.wnp-btn:focus {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    outline:    none;
}

.wnp-btn:active {
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* E-mailknop: iets minder prominent */
.wnp-btn--email {
    background: rgba(255, 255, 255, 0.12);
    color:      var(--wnp-text);
    box-shadow: none;
    border:     1px solid rgba(255, 255, 255, 0.2);
}

.wnp-btn--email:hover,
.wnp-btn--email:focus {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

/* Terug-knop */
.wnp-btn--back {
    background: transparent;
    color:      var(--wnp-text);
    box-shadow: none;
    border:     1px solid rgba(255, 255, 255, 0.25);
    opacity:    0.75;
    font-size:  13px;
    padding:    10px;
}

.wnp-btn--back:hover {
    opacity:    1;
    box-shadow: none;
    transform:  none;
}

/* Verwijder-tekst knop ("Nee, bedankt" / "Sluiten") */
.wnp-popup__dismiss-text {
    display:     block;
    width:       100%;
    background:  transparent;
    border:      none;
    color:       var(--wnp-text);
    font-family: inherit;
    font-size:   13px;
    opacity:     0.5;
    cursor:      pointer;
    margin-top:  12px;
    padding:     4px;
    transition:  opacity 0.2s;
}

.wnp-popup__dismiss-text:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* ── E-mailformulier ──────────────────────────────────────────────────────── */
.wnp-email-form {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  12px;
}

.wnp-email-input {
    width:         100%;
    padding:       13px 16px;
    border:        2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background:    rgba(255, 255, 255, 0.1);
    color:         var(--wnp-text);
    font-family:   inherit;
    font-size:     var(--wnp-font-size);
    box-sizing:    border-box;
    transition:    border-color 0.2s;
}

.wnp-email-input::placeholder {
    color:   rgba(255, 255, 255, 0.4);
}

.wnp-email-input:focus {
    outline:       none;
    border-color:  var(--wnp-btn);
}

/* ── Status-berichten ─────────────────────────────────────────────────────── */
.wnp-popup__status {
    padding:       12px 16px;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   500;
    margin-top:    12px;
}

.wnp-popup__status--success {
    background: rgba(0, 200, 100, 0.2);
    color:      #5dffa0;
    border:     1px solid rgba(0, 200, 100, 0.3);
}

.wnp-popup__status--error {
    background: rgba(255, 80, 80, 0.2);
    color:      #ffaaaa;
    border:     1px solid rgba(255, 80, 80, 0.3);
}

/* ── Belknop (popup opnieuw oproepen) ─────────────────────────────────────── */
.wnp-reopen {
    position:        fixed;
    bottom:          24px;
    z-index:         999998;
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    border:          none;
    cursor:          pointer;
    padding:         12px 18px;
    border-radius:   50px;
    background:      var(--wnp-btn);
    color:           var(--wnp-btn-text);
    font-family:     var(--wnp-font-family);
    font-size:       15px;
    font-weight:     600;
    box-shadow:      0 6px 20px rgba(0, 0, 0, 0.25);
    opacity:         0;
    transform:       translateY(12px) scale(0.95);
    transition:      transform 0.25s ease, box-shadow 0.2s ease, opacity 0.25s ease;
}

.wnp-reopen[hidden] {
    display: none;
}

.wnp-reopen--visible {
    opacity:   1;
    transform: translateY(0) scale(1);
}

.wnp-reopen--right { right: 24px; }
.wnp-reopen--left  { left:  24px; }

.wnp-reopen:hover,
.wnp-reopen:focus {
    transform:  translateY(-2px) scale(1.02);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
    outline:    none;
}

.wnp-reopen__icon {
    font-size:   18px;
    line-height: 1;
}

.wnp-reopen__label {
    white-space: nowrap;
}

/* ── Responsiefheid ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wnp-popup__inner {
        padding:       28px 20px 24px;
        border-radius: var(--wnp-radius);
    }

    .wnp-popup__icon {
        font-size: 38px;
    }

    /* Belknop wordt een compacte ronde knop op kleine schermen */
    .wnp-reopen__label {
        display: none;
    }

    .wnp-reopen {
        padding:       14px;
        border-radius: 50%;
    }
}

/* ── Verminderde beweging (toegankelijkheid) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wnp-popup,
    .wnp-popup__inner,
    .wnp-btn,
    .wnp-popup__icon,
    .wnp-reopen {
        transition:  none;
        animation:   none;
    }

    .wnp-popup__inner {
        transform: none;
    }
}

/* ── Privacy-akkoord in de popup (V2.0) ───────────────────────────────────── */
.wnp-popup__privacy {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    text-align:    left;
    font-size:     13px;
    line-height:   1.5;
    margin:        0 0 14px;
    color:         var(--wnp-text);
    opacity:       0.9;
}

.wnp-popup__privacy input {
    margin-top: 3px;
}

.wnp-popup__privacy a {
    color: var(--wnp-btn);
}

/* ── Inline aanmeldformulier (shortcode/widget, V2.0) ─────────────────────── */
.wnp-inline {
    background:    var(--wnp-bg, #1a1a2e);
    color:         var(--wnp-text, #fff);
    font-family:   var(--wnp-font-family, inherit);
    border-radius: var(--wnp-radius, 14px);
    padding:       24px 22px;
    margin:        20px 0;
    box-shadow:    0 6px 24px rgba(0, 0, 0, 0.12);
}

.wnp-inline__title {
    font-size:   18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wnp-inline__desc {
    font-size:   14px;
    opacity:     0.85;
    margin-bottom: 14px;
    line-height: 1.5;
}

.wnp-inline__row {
    display:     flex;
    flex-wrap:   wrap;
    gap:         10px;
    align-items: center;
}

.wnp-inline__row .wnp-btn {
    width:       auto;
    flex:        0 0 auto;
    padding:     12px 18px;
}

.wnp-inline__row .wnp-inline-email {
    flex:        1 1 200px;
    width:       auto;
    min-width:   180px;
}

.wnp-inline__status {
    margin-top: 12px;
}

@media (max-width: 480px) {
    .wnp-inline__row .wnp-btn,
    .wnp-inline__row .wnp-inline-email {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ── Onderwerpkeuze in de popup/inline (V3.2) ─────────────────────────────── */
.wnp-cats {
    text-align: left;
    margin:     0 0 16px;
    font-size:  var(--wnp-font-size, 15px);
}

.wnp-cats__label {
    margin:      0 0 8px;
    font-weight: 600;
    color:       var(--wnp-text);
}

.wnp-cats__label span {
    font-weight: 400;
    opacity:     0.7;
    font-size:   0.85em;
}

.wnp-cats__list {
    max-height: 150px;
    overflow-y: auto;
    display:    flex;
    flex-direction: column;
    gap:        6px;
    padding:    10px 12px;
    border:     1px solid rgba(127, 127, 127, 0.25);
    border-radius: 8px;
}

.wnp-cat {
    display:     flex;
    align-items: center;
    gap:         8px;
    color:       var(--wnp-text);
    font-size:   0.95em;
    cursor:      pointer;
}

/* Inline-variant: iets compacter */
.wnp-inline .wnp-cats { margin-bottom: 12px; }