/* ============= SLV2 Quiz -- warm, colorful, "belongs in the article" =============
   Sizing: .slv2q-scale and .slv2-pill-scale set their own font-size inline
   (from Settings -> Quiz Advanced), and every measurement below is in em/rem
   relative to that, so one slider scales the whole component consistently. */

.slv2q-scale { font-size: 18px; } /* overridden inline per-request */

.slv2q-wrap { max-width: 42em; margin: 1.8em auto; font-size: 1em; }

.slv2q-box {
    position: relative;
    padding: 1.5em 1.4em;
    background: #ffffff;
    border: 1px solid #e6e9f0;
    border-radius: 1em;
    color: #1f2430;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 0.6em 1.8em rgba(30,41,80,.08);
}

.slv2q-kicker {
    display: inline-block;
    font-size: .8em;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    border-radius: 20px;
    padding: .3em .8em;
    margin-bottom: .7em;
}

.slv2q-heading { font-size: 1.4em; font-weight: 800; margin: 0 0 .35em; color: #14172b; line-height:1.25; }
.slv2q-description { font-size: 1.02em; color: #555b6e; margin: 0 0 .6em; line-height: 1.5; }
.slv2q-mode-subtitle { font-size: .9em; color: #8a90a3; margin: 0 0 1em; }

.slv2q-progress {
    display: inline-block;
    font-size: .82em;
    font-weight: 700;
    color: #4f46e5;
    background: #eef0ff;
    border-radius: 20px;
    padding: .25em .7em;
    margin-bottom: .9em;
}

.slv2q-question { font-size: 1.18em; font-weight: 650; line-height: 1.4; margin: 0 0 .9em; color: #14172b; }

.slv2q-options { display: flex; flex-direction: column; gap: .55em; }
.slv2q-option {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .85em 1em;
    background: #f7f8fc;
    border: 1.5px solid #e6e9f0;
    border-radius: .7em;
    color: #1f2430;
    text-align: left;
    cursor: pointer;
    font-size: 1.03em;
    transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.slv2q-option:hover:not(:disabled) { background: #eef0ff; border-color: #a5b4fc; transform: translateY(-1px); }
.slv2q-option:active:not(:disabled) { transform: translateY(0); }
.slv2q-option:disabled { cursor: default; }

.slv2q-opt-letter {
    flex: none;
    width: 1.6em; height: 1.6em;
    display: flex; align-items: center; justify-content: center;
    background: #e0e4f5;
    border-radius: .4em;
    font-size: .85em;
    font-weight: 800;
    color: #4f46e5;
}
.slv2q-opt-text { flex: 1; }

.slv2q-option.slv2q-correct { background: #e9fbef; border-color: #22c55e; }
.slv2q-option.slv2q-correct .slv2q-opt-letter { background: #22c55e; color: #fff; }
.slv2q-option.slv2q-wrong   { background: #fdecec; border-color: #ef4444; }
.slv2q-option.slv2q-wrong .slv2q-opt-letter { background: #ef4444; color: #fff; }

.slv2q-status { margin-top: 1em; font-size: .92em; color: #8a90a3; min-height: 1.2em; }

.slv2q-explanation {
    margin-top: .7em;
    padding: .85em 1em;
    background: #eef2ff;
    border-left: .25em solid #6366f1;
    border-radius: .5em;
    font-size: .95em;
    color: #33395a;
    line-height: 1.5;
}

.slv2q-next, .slv2q-continue {
    margin-top: 1.2em;
    width: 100%;
    padding: .85em;
    border: none;
    border-radius: .7em;
    color: #fff;
    font-weight: 700;
    font-size: 1.05em;
    cursor: pointer;
    transition: filter .15s ease;
}
.slv2q-next      { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.slv2q-continue  { background: linear-gradient(135deg, #6366f1, #3b82f6); }
.slv2q-next:hover, .slv2q-continue:hover:not(:disabled) { filter: brightness(1.08); }
.slv2q-continue:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.slv2q-score { margin-top: 1.1em; font-weight: 700; text-align: center; font-size: 1.15em; color: #14172b; }

.slv2q-lock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,23,43,.96);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
    text-align: center;
}
.slv2q-lock-msg { color: #fff; font-size: 1.3em; font-weight: 650; max-width: 22em; line-height: 1.5; }

/* ---------- "Complete the quiz to unlock your link" info box (Safelink only) ---------- */
.slv2q-info-box {
    max-width: 42em;
    margin: 0 auto 16px;
    padding: 14px 18px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 12px;
    color: #2f3163;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
.slv2q-info-brand {
    display: block;
    margin-top: 6px;
    font-size: .74rem;
    font-weight: 700;
    opacity: .75;
    letter-spacing: .03em;
}

/* ---------- "Thanks for answering" ad-break heading ---------- */
.slv2q-ad-break-heading {
    text-align: center;
    font-size: 1.1em;
    font-weight: 700;
    color: #33395a;
    margin: .4em 0 1.1em;
}

/* ---------- Mega Quiz header bar (stage + fun fact) ---------- */
.slv2q-mega-header {
    max-width: 42em;
    margin: 1.4em auto 0;
    padding: 1em 1.3em;
    background: linear-gradient(120deg, #6366f1, #8b5cf6 55%, #ec4899);
    border-radius: 1em;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: .6em 1em;
    align-items: center;
    font-size: 1em;
    font-weight: 650;
}
.slv2q-mega-stat {
    background: rgba(255,255,255,.18);
    border-radius: 20px;
    padding: .3em .8em;
    font-size: .9em;
}
.slv2q-mega-fact { flex-basis: 100%; opacity: .95; font-weight: 500; font-size: .9em; }

/* ---------- Sticky progress pill (Safelink + Mega) ---------- */
.slv2-pill-scale { font-size: 16px; } /* overridden inline per-request */

.slv2-sticky-pill {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: .65em;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #fff;
    border-radius: 999px;
    padding: .8em 1.3em;
    box-shadow: 0 .6em 1.8em rgba(79,70,229,.35);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1em;
    max-width: 92vw;
    white-space: nowrap;
}
.slv2-sticky-pill.slv2-pill-top    { top: 14px; }
.slv2-sticky-pill.slv2-pill-bottom { bottom: 14px; }

.slv2-pill-step {
    font-weight: 800;
    font-size: .92em;
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    padding: .25em .7em;
    flex: none;
}
.slv2-pill-sub { font-size: .9em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.slv2-pill-brand {
    font-size: .74em;
    opacity: .85;
    border-left: 1px solid rgba(255,255,255,.35);
    padding-left: .7em;
    margin-left: .2em;
    flex: none;
}
.slv2-pill-close {
    flex: none;
    width: 1.5em; height: 1.5em;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    margin-left: .2em;
}
.slv2-pill-close:hover { background: rgba(255,255,255,.35); }

.slv2-mega-exit-confirm {
    position: fixed;
    inset: 0;
    background: rgba(20,23,43,.55);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.slv2-mega-exit-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    font-family: system-ui, -apple-system, sans-serif;
}
.slv2-mega-exit-card p { margin: 0 0 16px; font-size: 1rem; font-weight: 650; color: #1f2430; }
.slv2-mega-exit-actions { display: flex; gap: 10px; justify-content: center; }
.slv2-mega-exit-yes, .slv2-mega-exit-no {
    border: none; border-radius: 8px; padding: 9px 16px; font-weight: 650; font-size: .88rem; cursor: pointer;
}
.slv2-mega-exit-yes { background: #ef4444; color: #fff; }
.slv2-mega-exit-no  { background: #eef0ff; color: #4f46e5; }
@media (max-width: 480px) {
    .slv2-pill-sub { max-width: 11em; white-space: normal; }
}