/* ============================================================
   quiz.css — ONA Clinic skin quiz component
   Self-contained styles; works for both AR (rtl) and EN (ltr)
   pages by reading the [dir] attribute set by quiz.js.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --quiz-green  : #48593f;  /* --primary-dark-color  */
    --quiz-burg   : #8a3e48;  /* --primary-color       */
    --quiz-taupe  : #ae9d82;
    --quiz-off    : #f5f0e8;  /* --bg-color            */
    --quiz-gray   : #7d7d75;  /* --text-color          */
    --quiz-ink    : #1d1d1b;
    --quiz-line   : rgba(23, 23, 23, .12);
    --quiz-ease   : cubic-bezier(.16, .84, .3, 1);
}

/* ── Step entrance animation ───────────────────────────────── */
@keyframes quizPageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Section wrapper ───────────────────────────────────────── */
#s-quiz {
    background : var(--quiz-off);
    padding    : clamp(3rem, 8vh, 6rem) 0;
}

#s-quiz .wrap {
    max-width     : 1300px;
    margin-inline : auto;
    padding-inline: 15px;
}

/* ── Quiz card ─────────────────────────────────────────────── */
.quiz {
    max-width    : 880px;
    margin-inline: auto;
    background   : #ffffff;
    border       : 1px solid var(--quiz-line);
    border-radius: 20px;
    padding      : clamp(1.8rem, 4.5vw, 3.4rem);
    box-shadow   : 0 40px 90px -50px rgba(23, 23, 23, .25);
    /* Direction is set dynamically by quiz.js via [dir] attribute */
}

/* RTL layout when Arabic content is active */
.quiz[dir="rtl"] { direction: rtl; text-align: right; }

/* LTR layout when English content is active */
.quiz[dir="ltr"] { direction: ltr; text-align: left;  }

/* ── Title area ────────────────────────────────────────────── */
.quiz-title-wrap {
    text-align : center;
    max-width  : 640px;
    margin     : 0 auto 2.6rem;
}

.quiz-eyebrow {
    display      : inline-flex;
    align-items  : center;
    gap          : .9rem;
    font-size    : .74rem;
    letter-spacing: .2em;
    color        : var(--quiz-taupe);
    font-weight  : 500;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.quiz-main-title {
    font-size    : clamp(1.9rem, 4.4vw, 3rem);
    font-weight  : 500;
    line-height  : 1.4;
    color        : var(--quiz-ink);
    margin-top   : .6rem;
    margin-bottom: 0;
}

/* ── Progress bar ──────────────────────────────────────────── */
.quiz-prog {
    display      : flex;
    gap          : .5rem;
    margin-bottom: 2rem;
}

.quiz-prog i {
    height    : 2px;
    flex      : 1;
    background: var(--quiz-line);
    transition: background .5s;
}

.quiz-prog i.done { background: var(--quiz-green); }

/* ── Steps ─────────────────────────────────────────────────── */
.quiz-step          { display: none; }
.quiz-step.cur      {
    display  : block;
    animation: quizPageIn .6s var(--quiz-ease) both;
}

.quiz-step h3 {
    font-size    : clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight  : 600;
    margin-bottom: 1.6rem;
    color        : var(--quiz-ink);
}

/* ── Option pills ──────────────────────────────────────────── */
.quiz-ops {
    display  : flex;
    flex-wrap: wrap;
    gap      : .8rem;
}

.q-op {
    font-size    : .9rem;
    padding      : .85rem 1.6rem;
    min-height   : 50px;
    border       : 1px solid rgba(23, 23, 23, .2);
    border-radius: 999px;
    color        : var(--quiz-gray);
    background   : transparent;
    cursor       : pointer;
    font-family  : inherit;
    transition   : all .35s var(--quiz-ease);
}

.q-op:hover        { border-color: var(--quiz-ink); color: var(--quiz-ink); }
.q-op.sel          { background: var(--quiz-green); border-color: var(--quiz-green); color: var(--quiz-off); }
.q-op:focus-visible{ outline: 2px solid var(--quiz-burg); outline-offset: 3px; }

/* ── Navigation row ────────────────────────────────────────── */
.quiz-nav {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-top     : 2.2rem;
    gap            : 1rem;
}

/* ── Result / recommendation ───────────────────────────────── */
.quiz-reco .lbl {
    font-size     : .7rem;
    letter-spacing: .28em;
    color         : var(--quiz-taupe);
    display       : block;
    margin-bottom : .8rem;
}

.quiz-reco p.r {
    font-size    : clamp(1.15rem, 2vw, 1.5rem);
    font-weight  : 500;
    line-height  : 1.9;
    color        : var(--quiz-green);
    margin-bottom: 1rem;
}

.quiz-reco .why {
    font-size    : .9rem;
    color        : var(--quiz-gray);
    margin-bottom: 1.4rem;
    line-height  : 2;
}

.quiz-reco .disc {
    font-size    : .76rem;
    color        : var(--quiz-gray);
    border-top   : 1px solid var(--quiz-line);
    padding-top  : 1rem;
    margin-bottom: 1.6rem;
}

/* ── Buttons ───────────────────────────────────────────────── */
.quiz-btn-back {
    padding    : 0 0 .4rem;
    border     : none;
    border-bottom: 1px solid var(--quiz-taupe);
    background : transparent;
    font-size  : .9rem;
    color      : var(--quiz-gray);
    cursor     : pointer;
    font-family: inherit;
}

.quiz-btn-back:hover { border-color: currentColor; color: var(--quiz-ink); }

.quiz-btn-primary {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    background     : var(--quiz-green);
    color          : var(--quiz-off);
    border         : none;
    border-radius  : 999px;
    padding        : 1rem 2.4rem;
    font-size      : .92rem;
    font-family    : inherit;
    font-weight    : 500;
    cursor         : pointer;
    transition     : opacity .3s;
    text-decoration: none;
}

.quiz-btn-primary:hover { opacity: .88; }