/* Promotional pop-ups (Missio) — self-contained, theme-agnostic, responsive.
   Namespaced with .mpromo- to avoid collisions with theme styles. */

.mpromo-overlay{
    position:fixed;inset:0;z-index:99999;
    display:none;align-items:center;justify-content:center;
    padding:20px;background:rgba(15,23,42,.55);
    opacity:0;transition:opacity .25s ease;
}
.mpromo-overlay.is-open{display:flex;opacity:1;}

.mpromo-modal{
    position:relative;width:100%;max-width:560px;
    background:#fff;border-radius:14px;overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    transform:translateY(12px) scale(.98);transition:transform .25s ease;
    font-family:inherit;
}
.mpromo-overlay.is-open .mpromo-modal{transform:none;}

.mpromo-close{
    position:absolute;top:12px;right:14px;z-index:3;
    width:34px;height:34px;border:0;border-radius:50%;
    background:rgba(0,0,0,0.065);color:#111;font-size:20px!important;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;
}
.mpromo-close:hover{background:#fff;}

.mpromo-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;}
.mpromo-content{position:relative;z-index:2;padding:40px 34px;text-align:center;}

/* ---- Background image mode: full-bleed image + gradient scrim so text stays legible ---- */
.mpromo-modal.mpromo-has-bg .mpromo-bg{opacity:1;}
.mpromo-modal.mpromo-has-bg .mpromo-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(15,23,42,.45) 0%, rgba(15,23,42,.55) 45%, rgba(15,23,42,.82) 100%);
}
.mpromo-modal.mpromo-has-bg .mpromo-title{color:#fff;}
.mpromo-modal.mpromo-has-bg .mpromo-desc{color:rgba(255,255,255,.9);}
.mpromo-modal.mpromo-has-bg .mpromo-badge{color:#fff;}
.mpromo-modal.mpromo-has-bg .mpromo-close{color:#fff;background:rgba(0,0,0,.35);}
.mpromo-modal.mpromo-has-bg .mpromo-close:hover{background:rgba(0,0,0,.55);}

.mpromo-badge{
    display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--mpromo-accent,#f39c2b);margin-bottom:10px;
}
.mpromo-title{margin:0 0 12px;font-size:34px;line-height:1.1;font-weight:800;color:#0f172a;}
.mpromo-desc{margin:0 0 22px;font-size:15px;line-height:1.55;color:#475569;}

.mpromo-cta{
    display:inline-block;margin-top:6px;padding:14px 34px;
    background:var(--mpromo-accent,#111);color:#fff;font-weight:700;font-size:15px;
    border-radius:8px;text-decoration:none;transition:filter .15s ease;
}
.mpromo-cta:hover{filter:brightness(1.08);color:#fff;text-decoration:none;}

/* ---- Countdown template ---- */
.mpromo-countdown{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 20px;}
.mpromo-unit{display:flex;flex-direction:column;align-items:center;min-width:64px;}
.mpromo-num{
    font-size:34px;font-weight:800;color:#0f172a;
    background:#f1f5f9;border-radius:10px;padding:10px 0;width:100%;
    font-variant-numeric:tabular-nums;
}
.mpromo-label{margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;}
.mpromo-sep{font-size:28px;font-weight:700;color:#cbd5e1;align-self:flex-start;margin-top:12px;}

.mpromo-urgency{height:8px;border-radius:6px;background:#eef2f7;overflow:hidden;margin:0 auto 22px;max-width:320px;}
.mpromo-urgency span{display:block;height:100%;width:60%;background:var(--mpromo-accent,#f39c2b);border-radius:6px;}

.mpromo-countdown.is-expired .mpromo-num{color:#cbd5e1;}

/* Dark countdown look (matches the flash-sale mock) */
.mpromo-modal.mpromo-countdown-dark{background:#0f2438;}
.mpromo-modal.mpromo-countdown-dark .mpromo-title,
.mpromo-modal.mpromo-countdown-dark .mpromo-num{color:#fff;}
.mpromo-modal.mpromo-countdown-dark .mpromo-num{background:rgba(255,255,255,.08);}

/* ---- Responsive ---- */
@media (max-width:600px){
    .mpromo-content{padding:32px 20px;}
    .mpromo-title{font-size:26px;}
    .mpromo-countdown{gap:6px;}
    .mpromo-unit{min-width:52px;}
    .mpromo-num{font-size:26px;padding:8px 0;}
    .mpromo-sep{font-size:22px;margin-top:8px;}
    .mpromo-cta{display:block;width:100%;}
}