/* NSL Signup Popup
   Colors and fonts come from CSS variables set inline by the plugin.
   Fallbacks match the original blush mockup so it still looks right if a var is missing. */

.nsl-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--nsl-overlay, rgba(75, 21, 40, 0.45));
    opacity: 0;
    transition: opacity 0.25s ease;
}
.nsl-popup-overlay[hidden] { display: none; }
.nsl-popup-overlay.nsl-is-open { opacity: 1; }

.nsl-popup-card {
    position: relative;
    width: 100%;
    max-width: var(--nsl-width, 420px);
    background: var(--nsl-bg, #FBEAF0);
    border-radius: 16px;
    padding: 40px 30px 30px;
    text-align: center;
    box-sizing: border-box;
    transform: translateY(8px);
    transition: transform 0.25s ease;
    font-family: var(--nsl-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}
.nsl-popup-overlay.nsl-is-open .nsl-popup-card { transform: translateY(0); }

.nsl-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--nsl-accent, #993556);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.nsl-popup-logo {
    font-family: var(--nsl-heading-font, Georgia, "Times New Roman", serif);
    font-size: var(--nsl-logo-size, 32px);
    color: var(--nsl-text, #4B1528);
    letter-spacing: 0.5px;
    line-height: 1;
}
.nsl-popup-logo-img {
    display: block;
    margin: 0 auto;
    height: auto;
}
.nsl-popup-tagline {
    font-family: var(--nsl-body-font, sans-serif);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--nsl-accent, #D4537E);
    margin-top: 8px;
}
.nsl-popup-star {
    color: var(--nsl-accent, #D4537E);
    margin: 14px 0 4px;
    font-size: 15px;
}
.nsl-popup-heading {
    font-family: var(--nsl-heading-font, Georgia, serif);
    font-size: var(--nsl-heading-size, 23px);
    color: var(--nsl-text, #4B1528);
    margin: 6px 0 10px;
    font-weight: 500;
    line-height: 1.25;
}
.nsl-popup-sub {
    font-family: var(--nsl-body-font, sans-serif);
    font-size: var(--nsl-body-size, 14px);
    color: var(--nsl-text2, #72243E);
    line-height: 1.6;
    margin: 0 0 18px;
}

.nsl-popup-input {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--nsl-accent, #F4C0D1);
    border-radius: 999px;
    padding: 0 18px;
    height: 46px;
    font-size: 14px;
    font-family: var(--nsl-body-font, sans-serif);
    color: var(--nsl-text, #4B1528);
    margin-bottom: 12px;
    outline: none;
}
.nsl-popup-input:focus { box-shadow: 0 0 0 3px var(--nsl-overlay, rgba(212, 83, 126, 0.15)); }

.nsl-popup-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.nsl-popup-submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--nsl-btn, #993556);
    color: var(--nsl-btn-text, #ffffff);
    font-size: var(--nsl-btn-size, 15px);
    font-weight: 500;
    font-family: var(--nsl-body-font, sans-serif);
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.nsl-popup-submit:hover { filter: brightness(0.92); }
.nsl-popup-submit:disabled { opacity: 0.65; cursor: default; }

.nsl-popup-decline {
    font-family: var(--nsl-body-font, sans-serif);
    font-size: 11.5px;
    letter-spacing: 1.5px;
    color: var(--nsl-accent, #D4537E);
    margin-top: 16px;
    cursor: pointer;
    user-select: none;
}

.nsl-popup-error {
    background: #F7C1C1;
    color: #791F1F;
    font-size: 13px;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    text-align: left;
    font-family: var(--nsl-body-font, sans-serif);
}
.nsl-popup-error[hidden] { display: none; }

.nsl-popup-view[hidden] { display: none; }

.nsl-popup-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--nsl-accent, #F4C0D1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 18px;
}
.nsl-popup-check span { font-size: 26px; color: var(--nsl-btn-text, #ffffff); }

/* ---------- floating circle button ---------- */
.nsl-popup-tab {
    position: fixed;
    bottom: 22px;
    z-index: 999998;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--nsl-btn, #993556);
    color: var(--nsl-btn-text, #ffffff);
    font-family: var(--nsl-body-font, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.nsl-popup-tab:hover { filter: brightness(0.94); transform: scale(1.05); }
.nsl-popup-tab[hidden] { display: none; }
.nsl-popup-tab--right { right: 22px; }
.nsl-popup-tab--left  { left: 22px; }
.nsl-popup-tab-text { display: inline-block; }

@media (max-width: 480px) {
    .nsl-popup-card { padding: 34px 22px 24px; }
    .nsl-popup-logo { font-size: calc(var(--nsl-logo-size, 32px) * 0.9); }
    .nsl-popup-heading { font-size: calc(var(--nsl-heading-size, 23px) * 0.92); }
    .nsl-popup-tab { width: 68px; height: 68px; font-size: 11px; }
}
