/* =====================================================================
   FastDriver Plugin 1323 - Practice Test Tool
   Scoped under .fdpt-section. Colours/fonts from theme variables:
     --primary-color-one (#C1F11D)  --primary-color-two (#141414)
     --creote-family-one (Spartan)  --creote-family-two (Inter)
     --font-size-base (17px)        --text-color-dark
   ===================================================================== */
.fdpt-section, .fdpt-section *, .fdpt-section *::before, .fdpt-section *::after{ box-sizing:border-box; }
.fdpt-section{
  background:#F7F7F4; padding:0 0 96px;
  font-family: var(--creote-family-two, "Inter", sans-serif);
  font-size: var(--font-size-base, 17px);
  color: var(--text-color-dark, #4a4e56);
  -webkit-font-smoothing:antialiased;
}
.fdpt-container{ max-width:1280px; }
.fdpt-loading{ padding:60px 0; text-align:center; color:#999; }
.fdpt-section button{ font-family:inherit; }

/* ── Shared card ── */
.fdpt-card{ margin-top:48px; border-radius:20px; overflow:hidden; position:relative; }
.fdpt-start, .fdpt-results{ background:#fff; border:1px solid rgba(20,20,20,0.09); box-shadow:0 18px 50px rgba(20,20,20,0.09); }

/* ── START ── */
.fdpt-start__head{ padding:32px 36px; border-bottom:1px solid rgba(20,20,20,0.1); display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.fdpt-start__title{ margin:0; font-family: var(--creote-family-one,"Spartan",sans-serif); font-size:30px; font-weight:600; letter-spacing:-0.02em; text-transform:uppercase; color: var(--primary-color-two,#141414); }
.fdpt-start__note{ font-weight:500; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(20,20,20,0.5); }
.fdpt-steps{ display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:1px; background:rgba(20,20,20,0.12); }
.fdpt-steps--2{ grid-template-columns:1fr 1.25fr; }
.fdpt-step{ background:#fff; padding:28px 24px; }
.fdpt-step__lbl{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(20,20,20,0.5); }
.fdpt-step__num{ background: var(--primary-color-two,#141414); color: var(--primary-color-one,#C1F11D); width:22px; height:22px; display:grid; place-items:center; border-radius:100px; font-size:11px; }
.fdpt-step__hint{ margin:14px 0 0; font-size:14px; line-height:1.5; color:rgba(20,20,20,0.55); }
.fdpt-select{ margin-top:20px; width:100%; padding:16px 14px; font-size:16px; background:#F7F7F4; border:1px solid rgba(20,20,20,0.2); border-radius:12px; color: var(--primary-color-two,#141414); }
.fdpt-chips{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.fdpt-chip{ padding:14px 20px; font-size:16px; font-weight:500; border-radius:12px; cursor:pointer; background:transparent; color: var(--primary-color-two,#141414); border:1px solid rgba(20,20,20,0.22); }
.fdpt-chip.is-on{ background: var(--primary-color-two,#141414); color: var(--primary-color-one,#C1F11D); border-color: var(--primary-color-two,#141414); }
.fdpt-cats{ margin-top:20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
.fdpt-cat{ text-align:left; padding:12px; border-radius:12px; cursor:pointer; background:#F7F7F4; color: var(--primary-color-two,#141414); border:1px solid rgba(20,20,20,0.12); }
.fdpt-cat.is-on{ background: var(--primary-color-two,#141414); color:#fff; border-color: var(--primary-color-two,#141414); }
.fdpt-cat__code{ display:block; font-size:17px; font-weight:600; letter-spacing:-0.01em; }
.fdpt-cat__desc{ display:block; margin-top:2px; font-size:12px; opacity:0.62; line-height:1.3; }
.fdpt-start__foot{ padding:26px 36px; border-top:1px solid rgba(20,20,20,0.1); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.fdpt-pool{ font-weight:500; font-size:12px; letter-spacing:0.06em; color:rgba(20,20,20,0.55); }
.fdpt-startbtn{ padding:18px 40px; border:none; border-radius:100px; font-size:17px; font-weight:600; cursor:pointer; background:rgba(20,20,20,0.12); color:rgba(20,20,20,0.4); }
.fdpt-startbtn.is-ready{ background: var(--primary-color-one,#C1F11D); color: var(--primary-color-two,#141414); }

/* ── TEST (dark) ── */
.fdpt-test{ background: var(--primary-color-two,#141414); color:#fff; box-shadow:0 18px 50px rgba(20,20,20,0.16); }
.fdpt-test__head{ padding:26px 36px; border-bottom:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fdpt-test__ctx{ font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--primary-color-one,#C1F11D); }
.fdpt-test__meta{ display:flex; align-items:center; gap:20px; }
.fdpt-test__ans{ font-weight:500; font-size:12px; color:rgba(255,255,255,0.6); }
.fdpt-quit{ background:none; border:1px solid rgba(255,255,255,0.28); color:rgba(255,255,255,0.75); padding:9px 18px; border-radius:100px; font-size:13px; cursor:pointer; }
.fdpt-progress{ height:4px; background:rgba(255,255,255,0.12); }
.fdpt-progress__bar{ height:4px; background: var(--primary-color-one,#C1F11D); transition:width .25s ease; }
.fdpt-test__body{ padding:44px 28px 36px; max-width:900px; margin:0 auto; }
.fdpt-qcounter{ font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.fdpt-qtext{ margin:18px 0 0; font-family: var(--creote-family-one,"Spartan",sans-serif); font-size:clamp(24px,2.6vw,34px); line-height:1.25; font-weight:500; letter-spacing:-0.015em; color:#fff; }
.fdpt-opts{ margin-top:36px; display:flex; flex-direction:column; gap:10px; }
.fdpt-opt{ display:flex; align-items:center; gap:16px; text-align:left; padding:18px 20px; font-size:17px; line-height:1.4; cursor:pointer; border-radius:12px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.22); }
.fdpt-opt.is-on{ background: var(--primary-color-one,#C1F11D); color: var(--primary-color-two,#141414); border-color: var(--primary-color-one,#C1F11D); }
.fdpt-opt__mark{ flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:100px; font-weight:500; font-size:12px; background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.7); }
.fdpt-opt.is-on .fdpt-opt__mark{ background:rgba(20,20,20,0.14); color: var(--primary-color-two,#141414); }
.fdpt-nav{ margin-top:36px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.fdpt-prev{ background:none; border:1px solid rgba(255,255,255,0.28); color:#fff; padding:15px 28px; border-radius:100px; font-size:15px; cursor:pointer; }
.fdpt-next{ background: var(--primary-color-one,#C1F11D); border:none; color: var(--primary-color-two,#141414); padding:15px 32px; border-radius:100px; font-size:15px; font-weight:600; cursor:pointer; }

/* ── RESULTS ── */
.fdpt-results__head{ padding:48px 36px; display:flex; flex-wrap:wrap; align-items:center; gap:48px; border-bottom:1px solid rgba(20,20,20,0.1); }
.fdpt-ring{ flex:none; width:180px; height:180px; border-radius:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#F7F7F4; border:8px solid rgba(20,20,20,0.2); }
.fdpt-ring.is-pass{ background:rgba(193,241,29,0.18); border-color: var(--primary-color-one,#C1F11D); }
.fdpt-ring__pct{ font-family: var(--creote-family-one,"Spartan",sans-serif); font-size:52px; font-weight:600; letter-spacing:-0.03em; line-height:1; color: var(--primary-color-two,#141414); text-align:center; }
.fdpt-ring__lbl{ font-weight:500; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(20,20,20,0.5); text-align:center; }
.fdpt-results__info{ flex:1; min-width:260px; }
.fdpt-badge{ display:inline-block; padding:8px 16px; border-radius:100px; font-weight:500; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:rgba(20,20,20,0.08); color: var(--primary-color-two,#141414); }
.fdpt-badge.is-pass{ background: var(--primary-color-one,#C1F11D); }
.fdpt-results__title{ margin:18px 0 0; font-family: var(--creote-family-one,"Spartan",sans-serif); font-size:34px; font-weight:600; letter-spacing:-0.02em; text-transform:uppercase; color: var(--primary-color-two,#141414); }
.fdpt-results__detail{ margin:12px 0 0; font-size:17px; line-height:1.6; color:rgba(20,20,20,0.6); }
.fdpt-results__cta{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.fdpt-retry{ background: var(--primary-color-two,#141414); color: var(--primary-color-one,#C1F11D); border:none; padding:16px 30px; border-radius:100px; font-size:15px; font-weight:600; cursor:pointer; }
.fdpt-newsetup{ background:none; border:1px solid rgba(20,20,20,0.24); color: var(--primary-color-two,#141414); padding:16px 28px; border-radius:100px; font-size:15px; cursor:pointer; }
.fdpt-results__body{ padding:36px; }
.fdpt-review__title{ margin:0; font-weight:500; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(20,20,20,0.5); }
.fdpt-reviews{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.fdpt-review{ border:1px solid rgba(20,20,20,0.14); border-left:3px solid var(--primary-color-two,#141414); padding:22px 24px; background:#F7F7F4; }
.fdpt-review__n{ font-weight:500; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(20,20,20,0.45); }
.fdpt-review__q{ margin-top:10px; font-size:18px; font-weight:500; line-height:1.4; color: var(--primary-color-two,#141414); }
.fdpt-review__ans{ margin-top:16px; display:flex; flex-direction:column; gap:6px; font-size:15px; }
.fdpt-review__yours{ color:#8A1F1F; }
.fdpt-review__correct{ color:#4A6109; font-weight:500; }
.fdpt-review__exp{ margin-top:14px; font-size:15px; line-height:1.6; color:rgba(20,20,20,0.62); }

/* ── Responsive ── */
@media(max-width:900px){ .fdpt-steps{ grid-template-columns:1fr; } }
@media(max-width:768px){
  .fdpt-section{ padding:0 0 56px; }
  .fdpt-card{ margin-top:32px; }
  .fdpt-start__head, .fdpt-start__foot, .fdpt-test__head{ padding-left:20px; padding-right:20px; }
  .fdpt-results__head{ padding:32px 20px; gap:28px; }
  .fdpt-results__body{ padding:24px 20px; }
}