/* ------------------------------------------------------------------ *
 * Nedroma — shop page auto-popup
 * Scoped under #nef-shop-popup so it survives Divi/theme styles.
 * Same card geometry as the auth modal (radius, shadow, motion), but a blue
 * accent instead of the emerald: these are the two brand blues already used
 * by the cart drawer (--nef-cart-accent) and the menu hover (--nef-menu-hover).
 * ------------------------------------------------------------------ */
#nef-shop-popup, #nef-shop-popup * { box-sizing: border-box; }

.nef-pop[hidden] { display: none; }

.nef-pop {
    --nef-accent: #2FA3F2;
    --nef-accent-weak: #2FA3F226;
    --nef-ink: #14181f;
    --nef-muted: #667085;
    --nef-surface: #ffffff;
    position: fixed;
    inset: 0;
    z-index: 99990;          /* below the auth modal (100000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* --- overlay --- */
.nef-pop__overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 16, 22, .55);
    opacity: 0;
    transition: opacity .18s ease;
}
.nef-pop.is-open .nef-pop__overlay { opacity: 1; }

/* --- box --- */
.nef-pop__box {
    position: relative;
    width: min(94vw, 420px);
    background: var(--nef-surface);
    color: var(--nef-ink);
    border-radius: 14px;
    overflow: hidden;   /* clips the ::before accent to the card's rounded corners */
    padding: 34px 30px 28px;
    text-align: center;
    box-shadow: 0 24px 60px -12px rgba(12, 16, 22, .45);
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
    font-family: inherit;
}
.nef-pop.is-open .nef-pop__box { opacity: 1; transform: none; }

/* Thin accent rule along the top edge.
 * No border-radius of its own: a 4px-tall box can't carry a 14px radius —
 * the browser scales every corner down to ~4px, so the bar's near-square ends
 * poked out past the card's much rounder corners (two blue nubs either side).
 * The card's own overflow:hidden does the clipping correctly instead.
 * Flat colour, not a gradient: over 4px the previous blue→cyan ramp was
 * invisible anyway. */
.nef-pop__box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--nef-accent);
}

.nef-pop__x {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    font-size: 22px; line-height: 1; color: var(--nef-muted);
    border-radius: 8px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.nef-pop__x:hover { background: #f2f4f6; color: var(--nef-ink); }

.nef-pop__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-bottom: 18px;
    font-size: 26px; border-radius: 50%;
    background: var(--nef-accent-weak);
}

.nef-pop__title {
    margin: 0 0 22px;
    font-size: 1.16rem; font-weight: 600; line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--nef-ink);
    text-wrap: balance;
}

/* !important: Divi themes buttons aggressively. */
#nef-shop-popup .nef-pop__btn {
    display: block !important; width: 100% !important; float: none !important;
    padding: 14px 16px !important;
    font-size: 1rem !important; font-weight: 600; font-family: inherit;
    line-height: 1.2 !important;
    color: #fff !important;
    background: var(--nef-ink) !important;
    border: 0 !important; border-radius: 9px !important;
    text-transform: none !important; letter-spacing: normal !important;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
#nef-shop-popup .nef-pop__btn:hover { background: #000 !important; }
#nef-shop-popup .nef-pop__btn:active { transform: translateY(1px); }

@media (max-width: 480px) {
    .nef-pop__box { padding: 30px 22px 24px; }
    .nef-pop__title { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nef-pop__overlay,
    .nef-pop__box { transition: none; }
    .nef-pop__box { transform: none; }
}