/* ============================================================
   SOA Suite — Popup Styles
   Brand: #4f1507 (maroon) / #c9a437 (gold)
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
.soa-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 3, 0.60);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99990;
    display: grid;
    place-items: center;
    padding: 20px;
    animation: soa-overlay-in .3s ease;
}
@keyframes soa-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Popup box ───────────────────────────────────────────── */
.soa-popup {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 4px 20px rgba(79,21,7,.2);
    animation: soa-popup-in .4s cubic-bezier(.34,1.56,.64,1);
    background-size: cover;
    background-position: center;
}
@keyframes soa-popup-in {
    from { opacity: 0; transform: scale(.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Background image overlay */
.soa-popup__overlay-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(79,21,7,.82) 0%, rgba(20,6,2,.88) 100%);
}

/* ── Close button ────────────────────────────────────────── */
.soa-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    transition: background .15s, transform .1s;
}
.soa-popup__close:hover { background: rgba(255,255,255,.3); }
.soa-popup__close:active { transform: scale(.9); }

/* ── Inner content ───────────────────────────────────────── */
.soa-popup__inner {
    position: relative;
    z-index: 2;
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* No background image → light mode */
.soa-popup:not([style*="background-image"]) .soa-popup__inner {
    color: #1a1a1a;
}
.soa-popup:not([style*="background-image"]) .soa-popup__close {
    background: rgba(79,21,7,.08);
    color: #4f1507;
    border-color: rgba(79,21,7,.15);
}

/* ── Badge ───────────────────────────────────────────────── */
.soa-popup__badge {
    display: inline-block;
    width: fit-content;
    background: #c9a437;
    color: #4f1507;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 99px;
}

/* ── Title ───────────────────────────────────────────────── */
.soa-popup__title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
}
.soa-popup:not([style*="background-image"]) .soa-popup__title { color: #4f1507; }

/* ── Subtitle ────────────────────────────────────────────── */
.soa-popup__subtitle {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    margin: 0;
    line-height: 1.5;
}
.soa-popup:not([style*="background-image"]) .soa-popup__subtitle { color: #5f4a45; }

/* ── Body ────────────────────────────────────────────────── */
.soa-popup__body {
    font-size: 13.5px;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
    margin: 0;
}
.soa-popup:not([style*="background-image"]) .soa-popup__body { color: #6b5a55; }
.soa-popup__body p { margin: 0 0 8px; }
.soa-popup__body p:last-child { margin: 0; }
.soa-popup__body strong { color: #c9a437; }

/* ── Lead form ───────────────────────────────────────────── */
.soa-popup-lead-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
}
.soa-popup-form__fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.soa-popup-input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 10px;
    font-size: 13.5px;
    color: #fff;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
    font-family: inherit;
}
.soa-popup-input::placeholder { color: rgba(255,255,255,.5); }
.soa-popup-input:focus {
    outline: none;
    border-color: #c9a437;
    background: rgba(255,255,255,.18);
}
.soa-popup:not([style*="background-image"]) .soa-popup-input {
    background: #f9f5f3;
    border-color: rgba(79,21,7,.2);
    color: #1a1a1a;
}
.soa-popup:not([style*="background-image"]) .soa-popup-input::placeholder { color: #b0a098; }
.soa-popup:not([style*="background-image"]) .soa-popup-input:focus { border-color: #4f1507; background: #fff; }

/* ── Submit button ───────────────────────────────────────── */
.soa-popup-submit {
    width: 100%;
    padding: 13px;
    background: #c9a437;
    color: #4f1507;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 4px 20px rgba(201,164,55,.4);
}
.soa-popup-submit:hover {
    background: #e8c45a;
    box-shadow: 0 6px 28px rgba(201,164,55,.55);
}
.soa-popup-submit:active { transform: scale(.97); }
.soa-popup-submit:disabled { background: #ccc; color: #888; cursor: not-allowed; box-shadow: none; }

/* ── CTA link button (no form) ───────────────────────────── */
.soa-popup-cta-btn {
    display: block;
    width: 100%;
    padding: 13px;
    background: #c9a437;
    color: #4f1507;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: background .15s, transform .1s;
    box-shadow: 0 4px 20px rgba(201,164,55,.4);
    box-sizing: border-box;
}
.soa-popup-cta-btn:hover { background: #e8c45a; color: #4f1507; transform: translateY(-1px); }

/* ── Dismiss link ────────────────────────────────────────── */
.soa-popup__dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color .15s;
    font-family: inherit;
    align-self: center;
}
.soa-popup__dismiss:hover { color: rgba(255,255,255,.85); }
.soa-popup:not([style*="background-image"]) .soa-popup__dismiss { color: #b0a098; }
.soa-popup:not([style*="background-image"]) .soa-popup__dismiss:hover { color: #4f1507; }

/* ── Form response ───────────────────────────────────────── */
.soa-popup-form__response {
    font-size: 13px;
    text-align: center;
    margin-top: 8px;
    min-height: 20px;
    font-weight: 600;
    color: #c9a437;
}
.soa-popup-form__response--err { color: #ff7070; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 520px) {
    .soa-popup { border-radius: 16px; }
    .soa-popup__inner { padding: 32px 24px 28px; gap: 12px; }
    .soa-popup__title { font-size: 22px; }
}