/*
Doable Yoga Quiz Styling
*/


#dyquiz {

max-width:760px;
margin:40px auto;
padding:35px;
background:#FAFAFA;
border-radius:28px;
box-shadow:
0 15px 40px rgba(0,0,0,.08);

font-family:
inherit;

}


/* Question image */

.dy-question-image {

width:100%;
height:auto;
max-height:420px;
object-fit:cover;

border-radius:22px;

margin-bottom:20px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

}

/* Quiz title (Question 1 only) */

.dy-quiz-title {

text-align:center;

margin-bottom:25px;

}

.dy-quiz-title h1 {

font-size:36px;

line-height:1.2;

color:#7cad9b;

margin-bottom:12px;

}

.dy-quiz-title p {

font-size:18px;

line-height:1.5;

color:#7cad9b;

max-width:600px;

margin:0 auto;

}



/* Lead image */

.dy-lead-image {

width:100%;

height:auto;

max-height:350px;

object-fit:cover;

border-radius:22px;

margin-bottom:25px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

display:block;

}

/* Progress bar */

#dy-progress {

height:12px;

background:#e8dfd4;

border-radius:30px;

overflow:hidden;

margin-bottom:30px;

}


#dy-progress div {

height:100%;

width:0%;

background:#7cad9b;

border-radius:30px;

transition:.3s ease;

}


/* Question counter */

.dy-progress-text {

font-size:14px;

color:#8b7b6d;

margin-bottom:10px;

font-weight:600;

}


/* Questions */

#dy-question h3 {

font-size:15px;
color:#8b7b6d;
margin-bottom:10px;

}


#dy-question h2 {

font-size:28px;
line-height:1.3;

color:#42382f;

margin-bottom:25px;

}


/* Layout */

#dyquiz {

display:flex;
flex-direction:column;

}


#dy-question {

display:flex;
flex-direction:column;

}


/* Image first */

.dy-question-image {

order:1;

}


/* Question number */

.dy-progress-text {

order:2;

}

/* Progress bar */

#dy-progress {
    order:3;
}

/* Question text */

#dy-question h2 {

order:3;

}


/* Answers */

.dy-options {

order:4;

}


/* Buttons */

#dy-buttons {

order:5;

}


/* Answer cards */

.dy-options {

display:flex;
flex-direction:column;
gap:15px;

}


.dy-answer {

width:100%;

text-align:left;

background:#ffffff;

border:2px solid #dfd2c3;

padding:22px;

border-radius:22px;

font-size:17px;

line-height:1.4;

color:#4a4037;

cursor:pointer;

transition:
all .25s ease;

box-shadow:
0 5px 15px rgba(0,0,0,.04);

}


.dy-answer:hover {

border-color:#7cad9b;

transform:translateY(-3px);
background:#f5fff7;
}


.dy-answer.selected {

background:#9b3c8c;

border-color:#9b3c8c;

color:white;

}


/* Navigation */

#dy-buttons {

order:6;

display:flex;

justify-content:space-between;

gap:20px;

margin-top:30px;

}


#dy-buttons button,
#dy-submit {

border:none;

padding:16px 30px;

border-radius:40px;

font-size:17px;

cursor:pointer;

transition:.25s;

}


#dy-next,
#dy-submit {

background:#7cad9b;

color:white;

}


#dy-next:hover,
#dy-submit:hover {

background:#9b3c8c;

transform:translateY(-2px);

}


#dy-back {

background:#7cad9b;

color:white;

transition:.25s;

}


#dy-back:hover {

background:#9b3c8c;

transform:translateY(-2px);

}


/* Lead form */

#dy-lead {

padding-top:20px;

}


#dy-lead h2 {

font-size:30px;
color:#42382f;

}
#dy-lead p {

color:#6b5b4e;
line-height:1.6;

}


#dy-lead input[type="text"],
#dy-lead input[type="email"],
#dy-lead input {

width:100%;

padding:16px;

margin:10px 0;

border-radius:15px;

border:1px solid #d8c9b8;
background:#ffffff;

font-size:16px;

box-sizing:border-box;

}


/* Consent */
#dy-lead label {

display:flex;

align-items:flex-start;

gap:10px;

margin:20px 0;

font-size:14px;

color:#6b5b4e;

line-height:1.5;

width:100%;

box-sizing:border-box;

}


#dy-lead label input {

width:auto;

margin-top:4px;

flex-shrink:0;

}


/* Fix autofill for name + email fields */

#dy-lead input:-webkit-autofill,
#dy-lead input:-webkit-autofill:hover,
#dy-lead input:-webkit-autofill:focus,
#dy-lead input:-webkit-autofill:active {

    background-color:#ffffff;
    -webkit-box-shadow:0 0 0px 1000px #ffffff inset;
    -webkit-text-fill-color:#4a4037;
    caret-color:#4a4037;

}


/* Mobile */

@media(max-width:600px){


#dyquiz {

margin:10px 0;

padding:16px;

border-radius:18px;

}

.dy-quiz-title h1 {

font-size:28px;

}

.dy-quiz-title p {

font-size:16px;

}

#dy-question h2 {

font-size:22px;

}


.dy-answer {

padding:18px;

font-size:15px;

}


#dy-buttons {

flex-direction:column-reverse;

}


#dy-buttons button {

width:100%;

}

}