.sop-hidden { display:none; }

.sop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.36);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    backdrop-filter: blur(4px);
    opacity:0;
    pointer-events:none;
    transition: opacity .22s ease-out;
}
.sop-overlay.sop-visible {
    opacity:1;
    pointer-events:auto;
}

.sop-modal {
    position:relative;
    width: 420px;
    max-width: 90%;
    background: radial-gradient(circle at top left, var(--sop-modal-grad-1, #ffffff), var(--sop-modal-grad-2, #ffffff));
    border-radius: var(--sop-modal-radius, 18px);
    padding: 28px 28px 22px;
    color:#111827;
    box-shadow: 0 20px 60px rgba(15,23,42,0.2);
    text-align:center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sop-close {
    position:absolute;
    top:14px;
    right:14px;
    width:30px;
    height:30px;
    border-radius:999px;
    border:none;
    background:#e5e7eb;
    color:#4b5563;
    font-size:18px;
    cursor:pointer;
}

.sop-icon-circle {
    width:54px;
    height:54px;
    border-radius:999px;
    margin:0 auto 18px;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
}
.sop-gift {
    font-size:28px;
}

.sop-heading {
    font-size:22px;
    font-weight:700;
    margin-bottom:6px;
}
.sop-subheading {
    font-size:14px;
    color:#4b5563;
    margin-bottom:18px;
}

.sop-discount-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 18px;
    border-radius:999px;
    background:#2563eb;
    font-weight:600;
    margin-bottom:18px;
    font-size:12px;
    color:#ffffff;
}

.sop-form {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
}

.sop-email-input {
    width:100%;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid #d1d5db;
    background:#ffffff;
    color:#111827;
    outline:none;
}
.sop-email-input:focus {
    border-color:#2563eb;
    box-shadow:0 0 0 1px rgba(37,99,235,0.2);
}

.sop-main-btn {
    border:none;
    border-radius:999px;
    padding:10px 12px;
    font-weight:600;
    background:linear-gradient(90deg,var(--sop-btn-grad-1,#2563eb),var(--sop-btn-grad-2,#2563eb));
    color:white;
    cursor:pointer;
}

.sop-secondary-link {
    background:none;
    border:none;
    margin-top:6px;
    font-size:12px;
    color:#6b7280;
    cursor:pointer;
}

.sop-success {
    font-size:14px;
    color:#16a34a;
}

/* Toast */
.sop-toast {
    position:fixed;
    left:24px;
    bottom:24px;
    min-width:260px;
    max-width:320px;
    background:#ffffff;
    color:#111827;
    border-radius:12px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 16px 44px rgba(15,23,42,0.18);
    transform:translateY(14px);
    opacity:0;
    pointer-events:none;
    transition:all .22s ease;
    z-index:9999;
}
.sop-toast.sop-toast-visible {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.sop-toast-avatar {
    width:30px;
    height:30px;
    border-radius:999px;
    background:#2563eb;
}
.sop-toast-body {
    flex:1;
}
.sop-toast-name {
    font-weight:600;
    font-size:13px;
}
.sop-toast-text {
    font-size:11px;
    color:#4b5563;
}
.sop-toast-close {
    background:none;
    border:none;
    color:#9ca3af;
    cursor:pointer;
}