/* Single at Heart Quiz — Stylesheet
   Version: 3.2.0
   Loaded via wp_enqueue_style — not inline.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600;700&display=swap');

:root {
    --sah-purple:      #6427b0;
    --sah-dark-purple: #4a1d84;
    --sah-bg-tint:     #f7f3fb;
}

/* -----------------------------------------------------------------------
   Container
------------------------------------------------------------------------ */

#sah-quiz {
    background:    #fff;
    padding:       24px;
    max-width:     600px;
    margin:        0 auto;
    border-radius: 12px;
    font-family:   'Inter', sans-serif;
    box-shadow:    0 0 20px rgba(0, 0, 0, 0.1);
    box-sizing:    border-box;
}

/* -----------------------------------------------------------------------
   Progress + Question
------------------------------------------------------------------------ */

#sah-progress {
    font-weight: 700;
    color:        var(--sah-purple);
    margin-bottom: 6px;
}

#sah-question {
    font-size:     18px;
    font-weight:   600;
    margin-bottom: 20px;
    line-height:   1.4;
}

/* -----------------------------------------------------------------------
   Answer options
------------------------------------------------------------------------ */

#sah-options label {
    display:        block;
    border:         1px solid #ccc;
    border-radius:  8px;
    padding:        12px;
    margin-bottom:  10px;
    cursor:         pointer;
    line-height:    1.4;
    transition:     border-color 0.15s, background 0.15s;
}

#sah-options label:hover {
    border-color: var(--sah-purple);
    background:   var(--sah-bg-tint);
}

#sah-options input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--sah-purple);
}

/* -----------------------------------------------------------------------
   Buttons
------------------------------------------------------------------------ */

#sah-start,
#sah-next,
#sah-email-send {
    background:    var(--sah-purple);
    color:         #fff;
    padding:       12px;
    border-radius: 8px;
    border:        none;
    width:         100%;
    font-size:     16px;
    font-weight:   700;
    cursor:        pointer;
    margin-top:    16px;
    box-sizing:    border-box;
    transition:    background 0.15s;
}

#sah-start:hover,
#sah-next:hover,
#sah-email-send:hover {
    background: var(--sah-dark-purple);
}

#sah-next:disabled,
#sah-email-send:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* -----------------------------------------------------------------------
   Result panel
------------------------------------------------------------------------ */

#sah-result {
    border:        2px solid var(--sah-purple);
    padding:       20px;
    border-radius: 10px;
    margin-top:    20px;
}

/* -----------------------------------------------------------------------
   Email share / opt-in block
------------------------------------------------------------------------ */

.sah-share-invite {
    margin-top:    25px;
    padding:       18px;
    border-radius: 10px;
    border:        1px solid var(--sah-purple);
    background:    var(--sah-bg-tint);
    text-align:    center;
}

#sah-email {
    width:         100%;
    padding:       12px;
    border:        1px solid #ccc;
    border-radius: 8px;
    font-size:     16px;
    box-sizing:    border-box;
    margin-top:    4px;
}

#sah-email:focus {
    outline:      2px solid var(--sah-purple);
    border-color: var(--sah-purple);
}

#sah-email-status {
    margin-top: 10px;
    font-size:  14px;
    min-height: 1.2em;
}

/* v3.3.0 — Known user results */

/* v3.4.0 — Progress bar */
.sah-progress-wrap { margin: 20px 0; }
.sah-progress-label { font-size: 13px; font-weight: 600; color: var(--sah-purple); text-align: center; margin: 0 0 8px; }
.sah-progress-bar { background: rgba(100,39,176,0.1); border-radius: 99px; height: 8px; overflow: hidden; margin-bottom: 10px; }
.sah-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--sah-purple), var(--sah-dark-purple)); border-radius: 99px; }
.sah-progress-steps { display: flex; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.sah-progress-steps .sah-step { font-size: 11px; font-weight: 500; color: #999; }
.sah-progress-steps .sah-step-done { color: var(--sah-purple); font-weight: 600; }
.sah-progress-steps .sah-step-locked { color: #ccc; }

/* v3.4.0 — Smart next CTA */
.sah-next-cta-wrap { background: var(--sah-bg-tint); border: 1px solid rgba(100,39,176,0.2); border-radius: 12px; padding: 20px 24px; margin: 20px 0; text-align: center; }
.sah-next-hook { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 16px; }
.sah-next-meta { font-size: 11px; color: #999; margin: 8px 0 0; }

.sah-btn-dashboard {
    display:         inline-block;
    background:      var(--sah-purple);
    color:           #fff;
    padding:         14px 32px;
    border-radius:   8px;
    font-size:       16px;
    font-weight:     700;
    text-decoration: none;
    transition:      background 0.2s ease, transform 0.2s ease;
}
.sah-btn-dashboard:hover {
    background: var(--sah-dark-purple);
    transform:  translateY(-1px);
    color:      #fff;
    text-decoration: none;
}

.sah-btn-google {
    display:       inline-block;
    background:    #1a1a2e;
    color:         #fff;
    padding:       12px 24px;
    border:        1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s ease, border-color 0.2s ease;
}
.sah-btn-google:hover {
    background:   #2a2a4e;
    border-color: var(--sah-purple);
}