/* =========================
POPUP BACKGROUND
========================= */
#fitquiz-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:15px;
backdrop-filter: blur(4px);
}

/* =========================
BOX DESIGN
========================= */
.fitquiz-box{
background:#ffffff;
width:100%;
max-width:420px;
padding:28px 22px;
border-radius:16px;
position:relative;
box-shadow:0 15px 40px rgba(0,0,0,0.25);
animation:fitquizFade 0.35s ease;
font-family: 'Segoe UI', sans-serif;
}

/* =========================
ANIMATION
========================= */
@keyframes fitquizFade{
from{
opacity:0;
transform:translateY(25px) scale(0.98);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

/* =========================
CLOSE BUTTON
========================= */
#fitquiz-close{
position:absolute;
right:14px;
top:12px;
cursor:pointer;
font-size:22px;
font-weight:bold;
color:#777;
transition:0.25s;
}

#fitquiz-close:hover{
color:#000;
transform:rotate(90deg) scale(1.1);
}

/* =========================
HEADINGS
========================= */
.fitquiz-box h3{
margin-bottom:18px;
font-size:22px;
font-weight:700;
text-align:center;
color:#111;
}

/* =========================
LABELS
========================= */
.fitquiz-box label{
font-size:13px;
font-weight:600;
color:#444;
display:block;
margin-bottom:3px;
}

/* =========================
INPUTS & SELECT
========================= */
.fitquiz-box input,
.fitquiz-box select{
width:100%;
padding:12px;
margin:4px 0 14px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
background:#fafafa;
transition:all 0.25s ease;
}

/* FOCUS EFFECT */
.fitquiz-box input:focus,
.fitquiz-box select:focus{
border-color:#000;
background:#fff;
box-shadow:0 0 0 2px rgba(0,0,0,0.05);
outline:none;
}

/* =========================
BUTTON
========================= */
#fitquiz-calc{
width:100%;
padding:13px;
background:linear-gradient(135deg,#000,#333);
color:#fff;
border:none;
border-radius:10px;
cursor:pointer;
font-size:15px;
font-weight:600;
transition:all 0.3s ease;
letter-spacing:0.5px;
}

#fitquiz-calc:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

/* =========================
RESULT TEXT
========================= */
#fitquiz-result{
margin-top:15px;
font-weight:600;
text-align:center;
font-size:16px;
color:#111;
padding:10px;
background:#f5f5f5;
border-radius:8px;
}

/* =========================
MOBILE RESPONSIVE
========================= */
@media(max-width:480px){

.fitquiz-box{
padding:22px 16px;
border-radius:12px;
}

.fitquiz-box h3{
font-size:19px;
}

#fitquiz-calc{
font-size:14px;
padding:11px;
}

#fitquiz-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.fitquiz-box{
background:#fff;
padding:25px;
border-radius:12px;
width:350px;
}

#fitquiz-close{
float:right;
cursor:pointer;
font-size:20px;
}

input{
width:100%;
margin-bottom:10px;
padding:8px;
}

button{
width:100%;
padding:10px;
background:#000;
color:#fff;
border:none;
cursor:pointer;
}

}