/* ═══════════════════════════════════════════════════════════════════════════
   CABPASS — SAMPLE QUIZ ("TRY IT FREE") · Day Route skin
   Page CSS for public/sample-quiz.php. Loads AFTER marketing.css and uses
   its tokens. Styles the DOM rendered by assets/js/sample-quiz.js — every
   id/class the JS creates or queries is preserved exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO (compact variant of the marketing hero) ──────────────── */
.sq-hero .sq-hero-inner{
  position:relative;max-width:860px;
  padding:clamp(48px,8vw,92px) 0 clamp(40px,6vw,60px);
}
.sq-hero .hero-title{font-size:clamp(46px,7.6vw,88px);margin:20px 0 22px;}
.sq-hero .hero-sub{max-width:52ch;}
.sq-hint{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ochre);margin-top:26px;
}

/* ── QUIZ SECTION ──────────────────────────────────────────────── */
.sq-quiz{padding:clamp(16px,3vw,36px) 0 clamp(64px,9vw,110px);}
.sq-shell{position:relative;max-width:760px;margin:0 auto;}
.sq-noscript{
  background:var(--card);border:1px solid var(--keyline);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;color:var(--muted);
}
.sq-noscript a{color:var(--ochre);text-decoration:none;border-bottom:2px solid var(--yellow);}
.sq-noscript a:hover{color:var(--ink);border-color:var(--ink);}

/* the whole quiz becomes one Day Route card */
#sample-quiz{
  position:relative;z-index:2;
  background:var(--card);
  border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:clamp(20px,3.4vw,34px);
  box-shadow:9px 9px 0 rgba(19,19,19,.88);
}

/* header row: category · progress · counter */
#sample-quiz .quiz-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:20px;
}
#sample-quiz .quiz-header-left{display:flex;align-items:center;gap:10px;min-width:0;}
#sample-quiz .quiz-meta{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ochre);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
#sample-quiz .quiz-num{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--yellow);border:1px solid var(--ink);border-radius:20px;
  padding:4px 12px;white-space:nowrap;
  box-shadow:2px 2px 0 rgba(19,19,19,.7);
}
#sample-quiz .progress-bar{
  flex:1;min-width:110px;max-width:260px;height:8px;
  background:rgba(19,19,19,.07);
  border:1px solid var(--keyline);border-radius:6px;overflow:hidden;
}
#sample-quiz .progress-bar-inner{height:100%;background:var(--yellow);transition:width .35s ease;}

/* question */
#sample-quiz .quiz-question{margin-bottom:20px;}
#sample-quiz .q-section{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px;
}
#sample-quiz .q-text{
  font-size:clamp(19px,2.6vw,22px);font-weight:700;line-height:1.45;color:var(--ink);margin:0;
}
#sample-quiz #image-container img{border:1px solid var(--keyline);background:#fff;padding:4px;}

/* options */
#sample-quiz .quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
#sample-quiz .quiz-option{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--text);
  background:var(--card);border:1px solid var(--keyline);border-radius:10px;
  padding:13px 16px;cursor:pointer;user-select:none;
  transition:border-color .18s,background .18s,transform .12s,box-shadow .18s;
}
#sample-quiz .quiz-option:hover:not(:disabled){
  border-color:var(--ink);background:rgba(245,196,0,.12);
  transform:translateX(3px);box-shadow:3px 3px 0 rgba(19,19,19,.16);
}
#sample-quiz .quiz-option .letter{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);
  border:1px solid var(--keyline);border-radius:6px;width:26px;height:26px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:all .18s;
}
#sample-quiz .quiz-option.correct{border-color:var(--green);background:rgba(31,157,87,.09);}
#sample-quiz .quiz-option.correct .letter{background:var(--green);border-color:var(--green);color:#fff;}
#sample-quiz .quiz-option.wrong{border-color:var(--red);background:rgba(214,69,69,.08);}
#sample-quiz .quiz-option.wrong .letter{background:var(--red);border-color:var(--red);color:#fff;}
#sample-quiz .quiz-option.disabled{cursor:default;}
#sample-quiz .quiz-option.disabled:not(.correct):not(.wrong){opacity:.55;}

/* feedback (JS sets className to bare "correct"/"wrong" + inline display) */
#sample-quiz #feedback{
  display:none;font-size:15px;line-height:1.6;color:var(--text);
  border:1px solid var(--keyline);border-left-width:3px;border-radius:10px;
  padding:14px 18px;margin-bottom:18px;
}
#sample-quiz #feedback.correct{border-color:var(--green);background:rgba(31,157,87,.08);}
#sample-quiz #feedback.wrong{border-color:var(--red);background:rgba(214,69,69,.07);}
#sample-quiz #feedback strong{color:var(--ink);}

/* footer: read-aloud + next */
#sample-quiz .quiz-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px;
}
#sample-quiz .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-radius:40px;cursor:pointer;text-decoration:none;white-space:nowrap;
  padding:12px 22px;
  transition:transform .18s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
#sample-quiz .btn.primary{
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
#sample-quiz .btn.primary:hover{transform:translate(-2px,-2px);background:var(--yellow-hi);box-shadow:6px 6px 0 var(--ink);}
#sample-quiz .btn.ghost{background:transparent;color:var(--muted);border:1.5px solid var(--keyline);}
#sample-quiz .btn.ghost:hover{border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 rgba(19,19,19,.5);}

/* ── SCORE SCREEN ──────────────────────────────────────────────── */
#sample-quiz #score-screen{text-align:center;padding:clamp(14px,3vw,28px) 0 6px;}
#sample-quiz .score-circle{
  width:112px;height:112px;border-radius:50%;margin:0 auto 24px;
  background:var(--yellow);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:5px 5px 0 rgba(19,19,19,.85);
}
#sample-quiz .score-pct{font-family:var(--display);font-size:34px;line-height:1;color:var(--ink);letter-spacing:.01em;}
#sample-quiz .score-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4vw,36px);letter-spacing:.02em;line-height:1.1;color:var(--ink);margin:0 0 10px;
}
#sample-quiz .score-sub{color:var(--muted);font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:44ch;}

/* end-of-quiz upsell card — the boldest object in the card (yellow, ink CTA) */
#sample-quiz .quiz-cta-card{
  margin-top:26px;text-align:center;
  background:linear-gradient(170deg,#ffd83d,var(--yellow) 45%,#eab900);
  border:2px solid var(--ink);border-radius:16px;
  padding:clamp(26px,4vw,36px) clamp(20px,3vw,32px);
  box-shadow:7px 7px 0 var(--ink);
}
#sample-quiz .quiz-cta-card h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,32px);letter-spacing:.02em;line-height:1.15;color:var(--ink);margin:0 0 10px;
}
#sample-quiz .quiz-cta-card p{
  font-size:15px;font-weight:600;color:rgba(19,19,19,.75);
  margin:0 auto 22px;max-width:46ch;
}
#sample-quiz .quiz-cta-card a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);text-decoration:none;
  padding:16px 26px;border-radius:12px;max-width:100%;text-align:center;
  transition:transform .18s,box-shadow .2s;
}
#sample-quiz .quiz-cta-card a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(19,19,19,.35);}

/* ── "WHAT THE FULL COURSE ADDS" STRIP ─────────────────────────── */
.sq-more{max-width:760px;margin:clamp(28px,5vw,44px) auto 0;text-align:center;}
.sq-more .lbl{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.sq-more .exam-chips{justify-content:center;margin-top:14px;}

/* closer CTA can carry a long label — let it wrap neatly */
.closer .mk-btn{max-width:100%;justify-content:center;text-align:center;flex-wrap:wrap;}

/* ── MAP MODAL (ids/classes unchanged — sample-quiz.js drives it) ─ */
#mapModal{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(19,19,19,.68);
  align-items:center;justify-content:center;padding:18px;
}
#mapModal.active{display:flex;}
.map-card{
  background:var(--card);border:1.5px solid var(--ink);border-radius:var(--radius);
  width:min(760px,100%);max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:10px 10px 0 rgba(19,19,19,.85);
}
.map-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg1);
}
.map-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:17px;letter-spacing:.03em;color:var(--ink);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.map-close{
  flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:var(--card);border:1.5px solid var(--keyline);color:var(--ink);
  font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.map-close:hover{background:var(--yellow);border-color:var(--ink);box-shadow:2px 2px 0 rgba(19,19,19,.7);}
#mapFrame{width:100%;flex:1;border:none;min-height:min(420px,60vh);}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:560px){
  #sample-quiz{box-shadow:6px 6px 0 rgba(19,19,19,.88);}
  #sample-quiz .quiz-header .progress-bar{order:3;flex-basis:100%;max-width:none;}
  #sample-quiz .quiz-footer{flex-direction:column;align-items:stretch;}
  #sample-quiz .quiz-footer > div{width:100%;}
  #sample-quiz .quiz-footer > div .btn{width:100%;}
  #sample-quiz .quiz-footer .btn{width:100%;}
}