/**
 * GBN Email Campaign — Popup Style: Onyx
 *
 * Color scheme: Monochromatic dark — deep navy desaturated sequence,
 * with a single high-saturation electric blue accent.
 *   Background:  #0d1626  Near-black navy  HSL 216°  0% → 9% lightness
 *   Card:        #172132  Dark navy        HSL 216°  14% lightness
 *   Input bg:    #1e2d40  Mid navy         HSL 216°  18% lightness
 *   Border:      #2c3f58  Slate            HSL 215°  26% lightness
 *   Muted text:  #8a9ab4  Cool gray-blue   HSL 214°  62% lightness
 *   Text:        #dce6f4  Near-white       HSL 214°  91% lightness
 *   Accent:      #4a9eff  Electric blue    HSL 212°  65% lightness  ← only saturated color
 *
 * Layout: Centered modal, near-black overlay (90% opacity), sharp-edged dark card.
 * Signature: 1px electric-blue glow ring, uppercase button, technical feel.
 * Spacing: Compact (−4px vs Classic). Corner radius: 3px — sharp/technical.
 */

/* ── Overlay ──────────────────────────────────────────────────────────────── */

.gbn-ec-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 16, 0.88);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.gbn-ec-popup-box {
    background: #172132;
    border: 1px solid #2c3f58;
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(74, 158, 255, 0.1),
        0 24px 64px rgba(0, 0, 0, 0.55);
    max-width: 400px;
    width: 100%;
    padding: 28px 24px 22px;
    position: relative;

    --gbn-ec-sub-primary:       #4a9eff;
    --gbn-ec-sub-primary-hover: #2070c8;
    --gbn-ec-sub-bg:            #172132;
    --gbn-ec-sub-text:          #dce6f4;
    --gbn-ec-sub-muted:         #8a9ab4;
    --gbn-ec-sub-border:        #2c3f58;
}

/* ── Close Button ─────────────────────────────────────────────────────────── */

.gbn-ec-popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #4a5d78;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 2px;
    transition: color 0.15s;
}

.gbn-ec-popup-close:hover {
    color: #4a9eff;
}

/* ── Typography ───────────────────────────────────────────────────────────── */

.gbn-ec-popup-box .gbn-ec-subscribe-heading {
    color: #dce6f4;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gbn-ec-popup-box .gbn-ec-subscribe-subhead {
    color: #8a9ab4;
    font-size: 0.85em;
    margin-bottom: 20px;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */

.gbn-ec-popup-box .gbn-ec-sub-input {
    background: #1e2d40;
    border-color: #2c3f58;
    border-radius: 2px;
    color: #dce6f4;
    font-size: 13px;
}

.gbn-ec-popup-box .gbn-ec-sub-input::placeholder {
    color: #7090b0;
}

.gbn-ec-popup-box .gbn-ec-sub-input:focus {
    border-color: #4a9eff;
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
}

/* ── Button ───────────────────────────────────────────────────────────────── */

.gbn-ec-popup-box .gbn-ec-sub-btn {
    background: #1a5cc8;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gbn-ec-popup-box .gbn-ec-sub-btn:hover:not(:disabled) {
    background: #2070c8;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    .gbn-ec-popup-box {
        padding: 20px 16px 18px;
    }
}