/* ===========================================
   GOOGLE FONT
=========================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --success:#16a34a;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;
    --bg:#f8fafc;
    --card:#ffffff;
    --shadow:0 10px 35px rgba(0,0,0,.08);
    --radius:18px;
}
body{
    font-family:'Poppins',sans-serif;
    background:
    linear-gradient(
    135deg,
    #eef4ff 0%,
    #f8fafc 100%
    );

    color:var(--text);
    padding:50px 15px;
}


.grain{ background: #0B0B0B;}
.grain:before {
    content: "";
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    background-image: url(../images/download.svg);
    position: fixed;
    inset: 0;
}
/* ===========================================
   WRAPPER
=========================================== */
.survey-wrapper{
    max-width:900px;
    margin:auto;
}
/* ===========================================
   CARD
=========================================== */
.survey-card{
    background:#fff;
    border-radius:25px;
}
/* ===========================================
   HEADER
=========================================== */
.survey-header{
        position: relative;
    overflow: hidden;

    background-image: url(../images/hero-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    color: #fff;
    padding: 15px;

    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

/* Dark Overlay */
.survey-header::before{
    content: "";
    position: absolute;
    inset: 0;

    /* Dark blue overlay */
    background: rgb(15 23 42 / 80%);

    /* Optional: blue gradient overlay instead */
/*    background: linear-gradient(
        135deg,
        rgba(37,99,235,.75),
        rgba(30,64,175,.75)
    ); 
*/
    z-index: 1;
}
.survey-header > *{
    position: relative;
    z-index: 2;
}


.survey-icon{
    width:75px;
    height:75px;
    margin:auto;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin-bottom:0px;
}
.survey-header h1{
    text-align:center;
    font-weight:700;
    font-size:32px;
}
.survey-header p{
    text-align:center;
    opacity:.9;
    margin-top:3px;
    padding: 0px;
    margin-bottom: 0px;
}
.survey-meta{
    display:flex;
    justify-content:center;
    gap:35px;
    margin-top:25px;
    flex-wrap:wrap;
}
.survey-meta div{
    background:rgba(255,255,255,.12);
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
}
/* ===========================================
   PROGRESS
=========================================== */
.survey-progress{
    margin-top:10px;
    height:12px;
    border-radius:50px;
    overflow:hidden;
    background:rgba(255,255,255,.2);
}
.progress-bar{
    background:#907115;
}
.progress-text{
    margin-top:10px;
    text-align:center;
    font-size:14px;
}
/* ===========================================
   FORM
=========================================== */
.question-list{
    padding:15px 35px;
}
/* ===========================================
   QUESTION
=========================================== */
.question-item{
    padding:12px 0;
    border-bottom:1px solid var(--border);
}
.question-item:last-child{
    border-bottom:none;
}
.question-number{
    display:inline-block;
    background:#f4eedc;
    color:#907115;
    padding:5px 12px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
}
.question-title{
    font-size:19px;
    font-weight:600;
    margin-bottom:20px;
}
/* ===========================================
   INPUTS
=========================================== */
.modern-input{
    border-radius:12px;
    border:1px solid var(--border);
    padding:14px;
    font-size:15px;
    transition:.25s;
}
.modern-input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
}
/* ===========================================
   OPTIONS GRID
=========================================== */
.option-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}
/* ===========================================
   OPTION CARD
=========================================== */
.option-card{
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 16px;
    cursor:pointer;
    transition:.25s;
    background:#fff;
}
.option-card:hover{
    border-color:#907115;
    background:#f4eedc;
    transform:translateY(-2px);
}
.option-card input{
    transform:scale(1.2);
    accent-color:#f4eedc;
}
.option-card span{
    font-size:15px;
    font-weight:500;
}
/* ===========================================
   BUTTON
=========================================== */
.submit-area{
    padding:35px;
    background:#f8fafc;
    border-top:1px solid var(--border);
}
.btn-submit{
    width:100%;
    background: linear-gradient(320deg, rgba(135, 98, 38, 1) 0%, rgba(214, 165, 86, 1) 50%, rgba(237, 221, 83, 1) 100%);
    color:#fff;
    border:none;
    border-radius:15px;
    padding:16px;
    font-size:17px;
    font-weight:600;
    transition:.3s;
}
.btn-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(37,99,235,.25);
}
/* ===========================================
   MOBILE
=========================================== */
@media(max-width:768px){
    .survey-header{
        padding:30px 20px;
    }
    .question-list{
        padding:15px;
    }
    .option-grid{
        grid-template-columns:1fr;
    }
    .survey-header h1{
        font-size:26px;
    }
    .question-title{
        font-size:17px;
    }
    .survey-meta{
        gap: 5px !important;
        margin-top: 5px !important;
    }
}
/* ===========================================
   INTERACTIVE OPTION CARDS
=========================================== */
.option-card{
    position:relative;
}
.option-card input{
    display:none;
}
.option-content{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
}
/* custom circle */
.option-circle{
    width:22px;
    height:22px;
    border:2px solid #907115;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:.25s;
}
/* checkbox style */
.option-card input[type="checkbox"]
+ .option-content
.option-circle{
    border-radius:6px;
}
/* SELECTED */
.option-card input:checked 
+ .option-content
.option-circle{
    background:#907115;
    border-color:#907115;
}
.option-card input:checked 
+ .option-content
.option-circle::after{
    content:"✓";
    color:white;
    font-size:13px;
    font-weight:bold;
}
/* selected card */
.option-card:has(input:checked){
    border-color:#907115;
    background:#f4eedc;
    box-shadow:
    0 5px 15px rgba(37,99,235,.15);
}
/* ===========================================
   SUBMIT LOADING STATE
=========================================== */
.btn-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}
.spinner-border{
    margin-right:8px;
}
/* ===========================================
   STICKY PROGRESS BAR
=========================================== */
/* ===========================================
   STICKY PROGRESS BAR
=========================================== */

.sticky-progress{

    position:sticky;

    top:0;

    z-index:999;


    background:#ffffff;


    padding:15px 35px;


    border-bottom:1px solid #e2e8f0;


    box-shadow:
    0 5px 20px rgba(0,0,0,.08);


}
.progress-info{
    font-size:14px;
    font-weight:600;
    color:#475569;
    margin-bottom:8px;
}
.survey-progress{
    height:10px;
    border-radius:50px;
    background:#e2e8f0;
}
.progress-bar{
    transition:
    width .4s ease;
}

@media(max-width:576px){

    .sticky-progress{

        padding:12px 18px;

    }


    .progress-info{

        font-size:13px;

    }

}