/*
========================================================

Project: 3AM Sleep Assessment

Version: 1.0.0

========================================================
*/

:root{

    --primary:#2563eb;

    --primary-dark:#1d4ed8;

    --background:#f1f5f9;

    --card:#ffffff;

    --text:#0f172a;

    --text-light:#64748b;

    --border:#e2e8f0;

    --success:#16a34a;

    --shadow:0 20px 40px rgba(15,23,42,.08);

    --radius:18px;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:var(--background);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color:var(--text);

    line-height:1.6;

    padding:40px 20px;

}

img{

    display:block;

    width:100%;

}

button{

    font:inherit;

    cursor:pointer;

    border:none;

}

a{

    color:inherit;

    text-decoration:none;

}

main{

    max-width:440px;

    margin:auto;

}

.screen{

    display:none;

}

.screen.active{

    display:block;

}

.container{

    width:100%;

}

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding:32px;

    box-shadow:var(--shadow);

}

h1{

    font-size:27px;

    line-height:1.2;

    margin-bottom:22px;

    text-align:center;

}

h2{

    font-size:28px;

    line-height:1.3;

    margin-bottom:30px;

    text-align:center;

}

.subtitle{

    color:var(--text-light);

    text-align:center;

    font-size:18px;

    margin-bottom:28px;

}

.note{

    color:var(--text-light);

    text-align:center;

    margin:24px 0;

    font-size:14px;

}

/* =====================================================
   WELCOME
===================================================== */

.assessment-badge{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 16px;

    border-radius:999px;

    background:#dbeafe;

    color:var(--primary);

    font-size:11px;

    font-weight:600;

}

.hero-image{

    margin:24px 0;

}

.hero-image img{

    border-radius:16px;

}

.highlights{

    margin:30px 0;

}

.highlight{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    padding:14px 18px;

    background:#f8fafc;

    border:1px solid var(--border);

    border-radius:12px;

}

/* =====================================================
   BUTTON
===================================================== */

.primary-button{

    width:100%;

    height:62px;

    margin-top:24px;

    border-radius:16px;

    background:var(--primary);

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    transition:.25s;

}

.primary-button:hover{

    background:var(--primary-dark);

}

/* =====================================================
   QUESTIONS
===================================================== */

.question-header{

    margin-bottom:28px;

}

.question-counter{

    margin-bottom:12px;

    text-align:center;

    color:var(--text-light);

    font-size:14px;

}

.progress-bar{

    width:100%;

    height:10px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    background:var(--primary);

}

.back-button{

    margin-bottom:20px;

    background:none;

    color:var(--text-light);

    font-size:15px;

}

.answers{

    margin-top:30px;

}

.answer{

    width:100%;

    margin-bottom:16px;

    padding:18px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#ffffff;

    text-align:left;

    transition:.2s;

}

.answer:hover{

    border-color:var(--primary);

    background:#eff6ff;

}

/* =====================================================
   LOADING
===================================================== */

.text-center{

    text-align:center;

}

.loading-spinner{

    width:70px;

    height:70px;

    margin:35px auto;

    border:6px solid #e5e7eb;

    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

.loading-steps{

    margin-top:35px;

    text-align:left;

}

.loading-step{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 0;

    color:var(--text-light);

    font-size:16px;

}

.loading-icon{

    width:24px;

    text-align:center;

    font-size:18px;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* =====================================================
   RESULT
===================================================== */

.result-badge{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 16px;

    border-radius:999px;

    background:#dcfce7;

    color:var(--success);

    font-size:14px;

    font-weight:700;

}

.result-highlights{

    margin:35px 0;

}

.result-copy{

    margin:35px 0;

}

.result-copy p{

    margin-bottom:18px;

    color:var(--text-light);

    line-height:1.8;

}

.result-copy strong{

    color:var(--text);

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    body{

        padding:20px 16px;

    }

    .card{

        padding:26px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:25px;

    }

    .subtitle{

        font-size:16px;

    }

}


/* =====================================================
   FOOTER
===================================================== */

#site-footer{

    max-width:640px;

    margin:60px auto 40px;

    padding:0 20px;

    text-align:center;

}

.footer-links{

    margin-bottom:18px;

}

.footer-links a{

    color:var(--text-light);

    transition:.2s;

}

.footer-links a:hover{

    color:var(--primary);

}

#site-footer p{

    color:var(--text-light);

    font-size:13px;

    line-height:1.7;

    margin-bottom:14px;

}