/* ==================================================
   GLOBAL
================================================== */

* {
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
}

body {
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #252b35;
    background: #fff8ef;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}


/* ==================================================
   HEADER
================================================== */

.quiz-header {
    width: 100%;
    min-height: 68px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quiz-header-inner {
    width: 100%;
    max-width: 1200px;
    min-height: 68px;
    margin: 0 auto;
    padding: 12px 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.quiz-logo {
    color: #d92820;
    text-decoration: none;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
}


/* ==================================================
   MAIN
================================================== */

.quiz-main {
    width: 100%;
    max-width: 767px;
    margin: 35px auto;
    padding: 0 20px;
}

.quiz-card {
    width: 100%;
    padding: 25px 30px;
    background: #ffffff;
    border: 1px solid #e5e9ed;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}


/* ==================================================
   QUESTION
================================================== */

.quiz-question {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: 25px;
    margin-bottom: 30px;
}

.question-content {
    min-width: 0;
}

.question-number {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #303846;
    font-size: 19px;
}

.question-number svg {
    flex-shrink: 0;
}

.question-title {
    margin: 0;
    color: #17191d;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
}

.question-image-wrap {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e1e5e8;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.question-image {
    width: 100%;
    height: 270px;
    object-fit: cover;
}


/* ==================================================
   OPTIONS
================================================== */

.quiz-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 25px 0;
}

.quiz-option {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(110deg,
            #e3f7fc,
            #c6e8f0);

    color: #202833;
    border: 1px solid #b9cbd1;
    border-radius: 10px;

    font-size: 20px;
    font-weight: 600;
    text-align: center;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
    position: relative;
}

.quiz-option:hover:not(:disabled) {
    background: #b6e2ee;
    border-color: #3295b4;
    transform: translateY(-1px);
}

.quiz-option:focus-visible {
    outline: 3px solid #1683ad;
    outline-offset: 3px;
}

.option-number {
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid #8aa9b3;

    color: #1683ad;
    font-size: 21px;
}

.option-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.option-status {
    display: none;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 1.4rem;
    z-index: 3;
    pointer-events: none;
}


/* ==================================================
   CORRECT ANSWER
================================================== */

.quiz-option.correct {
    background: #e9f8eb;
    border: 2px solid #22a447;
    color: #16813a;
}

.quiz-option.correct .option-number {
    border-right-color: #22a447;
    color: #22a447;
}

.quiz-option.correct .option-status {
    display: block;
}

.quiz-option.correct .option-status .wrong_arrow {
    display: none;
}

.quiz-option.correct .option-status .correct_arrow {
    display: block;
}



/* ==================================================
   WRONG ANSWER
================================================== */

.quiz-option.wrong {
    background: #fff0f1;
    border: 2px solid #ed4b5a;
    color: #d92335;
}

.quiz-option.wrong .option-number {
    border-right-color: #ed4b5a;
    color: #d92335;
}

.quiz-option.wrong .option-status {
    display: block;
}

.quiz-option.wrong .option-status .wrong_arrow {
    display: block;
}

.quiz-option.wrong .option-status .correct_arrow {
    display: none;
}


.AnswerButton_answerButton::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.5);
    animation: AnswerButton_pulse__uBuzs 1s ease-in-out 0s infinite normal none running;
}

.quiz-option.wrong .AnswerButton_answerButton:before {
    background: rgb(212, 8, 45);
}

.quiz-option.correct .AnswerButton_answerButton:before {
    background: rgb(0, 177, 2);
}


/* .AnswerButton_answerButton {
    background: rgb(0, 177, 2);
} */


/* ==================================================
   DISABLED OPTIONS
================================================== */

.quiz-option:disabled {
    cursor: default;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.quiz-option.correct:disabled,
.quiz-option.wrong:disabled {
    opacity: 1;
}


/* ==================================================
   ANSWER FEEDBACK
================================================== */

.answer-feedback {
    margin: 20px 0;
    padding: 15px 18px;

    border: 2px solid #8bdc58;
    border-radius: 14px;

    background: #f2ffec;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.answer-feedback[hidden] {
    display: none;
}

.answer-feedback h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #19843a;
}

.answer-feedback p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #202833;
}

.answer-feedback.wrong-feedback {
    border-color: #ff6b76;
    background: #fff0f1;
}

.answer-feedback.wrong-feedback h3 {
    color: #d92335;
}


/* ==================================================
   NAVIGATION
================================================== */

.quiz-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
    scroll-margin-top: 25px;
}

.next-form {
    width: 100%;
    max-width: 900px;
}

.next-button {
    padding: 12px 45px;
    box-shadow: -3px 5px 17px rgba(0, 0, 0, .5);
    font-style: italic;
    border: none;
    display: flex;
    font-size: 2.5rem;
    width: 100%;
    max-width: 646px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 300px;
    cursor: pointer;
    height: 90px;
    transition: .5s cubic-bezier(.55, .085, .68, .53);
    background-color: #e0e0e0;
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff;
    background: radial-gradient(107.08% 85.59% at 86.3% 87.5%, rgba(0, 0, 0, .23) 0, transparent 86.18%), radial-gradient(83.94% 83.94% at 26.39% 20.83%, hsla(0, 0%, 100%, .41) 0, hsla(0, 0%, 100%, 0) 76.6%, hsla(0, 0%, 100%, 0) 100%), #da3d2b;
    gap: 10px;
}

.next-arrow {
    font-size: 40px;
    font-style: normal;
    line-height: 1;
}

.previous-button {
    padding: 12px 25px;
    border: 1px solid #c9d1d8;
    border-radius: 30px;
    background: #ffffff;
    color: #263443;
    text-decoration: none;
    font-size: 16px;
}

.previous-button:hover {
    background: #f1f5f8;
}


/* ==================================================
   COMPLETED
================================================== */

.quiz-completed {
    width: 100%;
    text-align: center;
    padding: 25px;
    background: #f2ffec;
    border: 1px solid #8bdc58;
    border-radius: 12px;
}

.quiz-completed h2 {
    margin-top: 0;
}

.quiz-completed a {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 25px;
    background: #d92820;
    color: #ffffff;
    text-decoration: none;
}


/* ==================================================
   STATISTICS
================================================== */

.quiz-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    margin-top: 35px;
    text-align: center;
}

.stat-item {
    padding: 0 10px;
}

.stat-label {
    margin: 0 0 12px;
    font-size: 17px;
    font-style: italic;
}

.stat-number {
    margin: 0 0 10px;
    color: #252b35;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.15;
}

.stat-description {
    margin: 0;
    font-size: 18px;
}


/* ==================================================
   BANNER
================================================== */

.quiz-banner {
    width: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    text-align: center;

    background:
        linear-gradient(rgba(0, 155, 160, 0.78),
            rgba(0, 155, 160, 0.78)),
        url("assets/world-capitals-banner.jpg") center / cover no-repeat;
}

.quiz-banner-inner {
    width: 100%;
    max-width: 1200px;
}

.quiz-banner h2 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    font-weight: 700;
}


/* ==================================================
   ABOUT
================================================== */

.about-quiz {
    width: 100%;
    padding: 40px 25px;
    background: #ffffff;
}

.about-quiz-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.about-quiz h2 {
    margin: 0 0 18px;
    color: #252b35;
    font-size: 32px;
}

.about-quiz p {
    margin: 0;
    color: #303846;
    font-size: 18px;
    line-height: 1.6;
}


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

.quiz-footer {
    width: 100%;
    padding: 30px 20px;
    background: #f0f2f4;
    border-top: 1px solid #e1e5e8;
}

.footer-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding-bottom: 25px;
}

.footer-links a {
    color: #374151;
    text-decoration: none;
    font-size: 16px;
}

.footer-links a:hover {
    color: #d92820;
}

.footer-copyright {
    padding-top: 20px;
    border-top: 1px solid #cbd1d6;
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    color: #4b5563;
    font-size: 16px;
}

.next-button {
    text-decoration: none;
    cursor: pointer;
}

.next-form {
    width: 100%;
    max-width: 900px;
}

/* ==================================================
   RESPONSIVE TABLET
================================================== */

@media (max-width: 900px) {

    .quiz-main {
        margin: 25px auto;
        padding: 0 15px;
    }

    .quiz-card {
        padding: 25px 20px;
    }

    .quiz-question {
        gap: 20px;
    }

    .question-title {
        font-size: 25px;
    }

    .question-image {
        height: 220px;
    }

    .next-button {
        min-height: 72px;
        font-size: 1.342rem;
        padding: 6px 34px;
    }

    .stat-number {
        font-size: 48px;
    }

    .NextQuestionButton_arrowContainer__Ej2kV {
        width: 60px;
    }

}


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

@media (max-width: 600px) {

    .quiz-header,
    .quiz-header-inner {
        min-height: 58px;
    }

    .quiz-header-inner {
        padding: 12px 10px;
    }

    .quiz-logo {
        font-size: 18px;
    }

    .quiz-main {
        margin: 15px auto;
        padding: 0 10px;
    }

    .quiz-card {
        padding: 20px 15px;
        border-radius: 10px;
    }

    .quiz-question {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 20px;
    }

    .question-number {
        font-size: 17px;
    }

    .question-number svg {
        width: 24px;
        height: 24px;
    }

    .question-title {
        font-size: 23px;
        line-height: 1.4;
    }

    .question-image {
        height: 210px;
    }

    .quiz-options {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 20px 0;
    }

    .quiz-option {
        min-height: 62px;
        font-size: 17px;
    }

    .option-number {
        min-width: 42px;
        font-size: 19px;
    }

    .option-text {
        padding: 10px;
    }

    .answer-feedback {
        margin: 18px 0;
        padding: 14px;
    }

    .answer-feedback h3 {
        font-size: 17px;
    }

    .answer-feedback p {
        font-size: 14px;
    }

    .quiz-navigation {
        margin: 25px 0;
    }

    .next-arrow {
        font-size: 30px;
    }

    .quiz-stats {
        gap: 10px;
        margin-top: 30px;
    }

    .stat-label {
        font-size: 14px;
    }

    .stat-number {
        font-size: 38px;
    }

    .stat-description {
        font-size: 13px;
        line-height: 1.4;
    }

    .quiz-banner {
        min-height: 150px;
    }

    .quiz-banner h2 {
        font-size: 27px;
    }

    .about-quiz {
        padding: 30px 20px;
    }

    .about-quiz h2 {
        font-size: 26px;
    }

    .about-quiz p {
        font-size: 15px;
        line-height: 1.65;
    }

    .quiz-footer {
        padding: 25px 15px;
    }

    .footer-links {
        gap: 15px 20px;
        padding-bottom: 20px;
    }

    .footer-links a {
        font-size: 14px;
    }

    .footer-copyright p {
        font-size: 13px;
    }

}


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

@media (max-width: 360px) {

    .quiz-logo {
        font-size: 18px;
    }

    .question-title {
        font-size: 21px;
    }

    .stat-number {
        font-size: 32px;
    }

}

/* QUIZ COMPLETION SCREEN */
.quiz-completion {
    text-align: center;
}

.completion-heading h2 {
    margin: 0 0 20px;
    font-size: 32px;
    color: #252b35;
}

.completion-score {
    padding: 15px 0;
    border-top: 1px dashed #d6d6d6;
    border-bottom: 1px dashed #d6d6d6;
}

.score-number {
    font-size: 28px;
    font-weight: 700;
}

.score-number span {
    color: #22a447;
}

.completion-score p {
    margin: 5px 0;
    font-size: 14px;
}

.challenge-friend {
    padding: 15px 0;
}

.challenge-friend button {
    border: 0;
    background: transparent;
    color: #1683ad;
    font-size: 15px;
    cursor: pointer;
}

.completion-next {
    position: relative;
    margin: 10px 0 25px;
    padding: 20px;
    background: #def5ff;
    border: 1px solid #b5e6fa;
    border-radius: 12px;
    text-align: left;
}

.completion-next-label {
    color: #607080;
    font-size: 12px;
    font-weight: 700;
}

.completion-next h3 {
    margin: 12px 0 8px;
    font-size: 22px;
}

.completion-next p {
    font-size: 14px;
    line-height: 1.5;
}

.completion-next a {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 22px;
    border-radius: 30px;
    background: #d92820;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 600px) {
    .completion-heading h2 {
        font-size: 27px;
    }

    .completion-next h3 {
        font-size: 19px;
    }

    .next-button {
        height: 65px;
        margin: 0 5px;
    }
}

.NextQuestionButton_arrowContainer__Ej2kV {
    transition: .5s;
    width: 60px;
}

.NextQuestionButton_arrowOne__gzBQu {
    animation: NextQuestionButton_arrowOneGrouped__Kj98M 3s infinite
}

.NextQuestionButton_arrowTwo__wblkH {
    animation: NextQuestionButton_arrowTwoGrouped__e0W_l 3s infinite
}

.NextQuestionButton_arrowThree__FFGY1 {
    animation: NextQuestionButton_arrowThreeGrouped__dqj7F 3s infinite
}

@keyframes NextQuestionButton_arrowOneGrouped__Kj98M {

    0%,
    10% {
        opacity: 1;
        transform: translateX(-40%)
    }

    75% {
        opacity: 1;
        transform: translateX(30%)
    }

    85% {
        opacity: 0;
        transform: translateX(30%)
    }

    to {
        opacity: 0;
        transform: translateX(-40%)
    }
}

@keyframes NextQuestionButton_arrowTwoGrouped__e0W_l {

    0%,
    25% {
        opacity: 0;
        transform: translateX(-20%)
    }

    75% {
        opacity: 1;
        transform: translateX(30%)
    }

    85% {
        opacity: 0;
        transform: translateX(30%)
    }

    to {
        opacity: 0;
        transform: translateX(-20%)
    }
}

@keyframes NextQuestionButton_arrowThreeGrouped__dqj7F {

    0%,
    50% {
        opacity: 0;
        transform: translateX(0)
    }

    75% {
        opacity: 1;
        transform: translateX(30%)
    }

    85% {
        opacity: 0;
        transform: translateX(30%)
    }

    to {
        opacity: 0;
        transform: translateX(0)
    }
}



/* MOBILE-STYLE QUIZ LAYOUT ON DESKTOP + MOBILE */
.quiz-main {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
}

.quiz-card {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

.quiz-question {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.question-image-wrap {
    order: 1;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.question-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.question-content {
    order: 2;
    width: 100%;
    padding: 18px 15px 10px;
    background: #fff;
}

.question-number {
    display: flex;
    font-size: 17px;
    margin-bottom: 12px;
    font-weight: 600;
}

.question-number svg {
    width: 24px;
    height: 24px;
}

.question-title {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.4;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 25px 20px;
    background: #fff;
}

.quiz-option {
    min-height: 62px;
    border-radius: 10px;
}

.answer-feedback {
    margin: 10px 15px;
    padding: 14px;
}

.quiz-navigation {
    margin: 20px 15px 30px;
    gap: 15px;
}

.next-form {
    width: 100%;
    max-width: 100%;
}

.next-button {
    width: 100%;
    max-width: 100%;
    min-height: 62px;
    height: 62px;
    padding: 8px 14px;
    font-size: 24px;
    white-space: normal;
}

.quiz-stats {
    padding: 20px 10px;
    gap: 10px;
}

.stat-number {
    font-size: 38px;
}

.quiz-banner {
    min-height: 150px;
}

.quiz-banner h2 {
    font-size: 26px;
}

.about-quiz {
    padding: 25px 15px;
}

.about-quiz h2 {
    font-size: 24px;
}

.about-quiz p {
    font-size: 15px;
    line-height: 1.6;
}


/* Sticky question strip while scrolling */
.sticky-question {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -110%);
    width: 100%;
    max-width: 480px;
    min-height: 58px;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
    z-index: 9999;
    transition: transform .25s ease;
}

.sticky-question.visible {
    transform: translate(-50%, 0);
}

.sticky-question-number {
    flex-shrink: 0;
    padding: 5px 8px;
    background: #d92820;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
}

.sticky-question-title {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
}

@media (min-width:768px) {
    .quiz-main {
        max-width: 480px;
        margin: 25px auto;
        padding: 0;
    }

    .quiz-card {
        padding: 0;
    }
}

@media (max-width:600px) {
    .quiz-main {
        margin: 0 auto;
        padding: 0;
    }

    .quiz-card {
        padding: 0;
        border-radius: 0;
    }

    .question-title {
        font-size: 22px;
    }

    .quiz-options {
        padding: 22px 18px;
    }

    .next-button {
        height: 62px;
        min-height: 62px;
        font-size: 22px;
    }

    .completion-heading h2 {
        font-size: 27px;
    }

    .completion-next h3 {
        font-size: 19px;
    }
}

@media (max-width:360px) {
    .question-title {
        font-size: 20px;
    }

    .quiz-options {
        padding: 20px 12px;
    }

    .next-button {
        font-size: 20px;
    }

    .sticky-question-title {
        font-size: 15px;
    }
}

/* Scroll down to answer prompt — added without changing existing quiz styles */
.scroll-to-answer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 10px 40px;
    border: 0;
    margin: 0;
    background: #fff;
    color: #d92820;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

.scroll-to-answer span[aria-hidden="true"] {
    font-size: 20px;
    line-height: 1;
}

.scroll-to-answer:hover,
.scroll-to-answer:focus-visible {
    color: #a91c17;
}

html {
    scroll-behavior: smooth;
}

#quiz-options {
    scroll-margin-top: 75px;
}

@media (max-width: 480px) {
    .scroll-to-answer {
        padding: 20px 8px;
        gap: 9px;
        letter-spacing: 1.2px;
    }
}

@keyframes AnswerButton_pulse__uBuzs {
    0% {
        transform: translate(-50%, -50%) scale(.5);
        opacity: 1
    }

    to {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0
    }
}

.Advertisement_labelText__R73n1 {
    color: #8a8a8a;
    font-weight: 400;
    font-size: 12px;
    line-height: 10px;
    padding-left: 8px;
    padding-right: 8px;
}

.Advertisement_top__h_ipw:after,
.Advertisement_top__h_ipw:before {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: #c9c9c9;
}

.mtb-15 {
    margin: 15px auto;
}

.custom-ad-wrapper {
    position: relative;
    width: 100%;
    min-height: 250px;
    margin: 0 auto;
    overflow: hidden;
}

/* .custom-fallback-ad {
    display: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.custom-ad-wrapper .adsbygoogle[data-ad-status="unfilled"]~.custom-fallback-ad {
    display: block;
}

.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.custom-fallback-ad img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
} */