/* ============================================================
   Business Language — Level tests (premium redesign)
   Shared across uk / ru / en. Markup: new/partials/quiz-render.php
   Engine: /new/js/quiz.js
   ============================================================ */

.quiz-app{
  --q-bg:#f7f5f1;
  --q-card:#ffffff;
  --q-ink:#14233c;
  --q-muted:#5b6b80;
  --q-line:rgba(20,35,60,.08);
  --q-line-2:rgba(20,35,60,.14);
  --q-blue:#2F6075;
  --q-blue-d:#234A5C;
  --q-blue-soft:#EAF1F3;
  --q-ok-bg:#e8f7ee;
  --q-ok-ink:#137a3d;
  --q-ok-bd:#a6dcbb;
  --q-err-bg:#fdecec;
  --q-err-ink:#b42318;
  --q-err-bd:#f0b3ad;
  --q-r:var(--bl-radius-xl,32px);
  --q-shadow:0 14px 44px rgba(20,35,60,.10);
  --q-shadow-sm:0 4px 16px rgba(20,35,60,.06);

  max-width:640px;
  margin:8px auto 0;
  padding:20px 16px 28px;
  background:var(--q-bg);
  border-radius:var(--q-r);
  border:1px solid var(--q-line);
  box-sizing:border-box;
  text-align:left;
  color:var(--q-ink);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.quiz-app *{box-sizing:border-box;}

/* Hide site distractions while taking the test */
body.quiz-active .cta-unified,
body.quiz-active .social-bottom{display:none!important;}

/* ---------- typography helpers ---------- */
.quiz-app h1.quiz-h1{
  font-size:26px;line-height:1.2;font-weight:800;margin:0 0 12px;
  color:var(--q-ink);text-align:left;letter-spacing:-.02em;
}
.quiz-lead-text{font-size:16px;line-height:1.55;color:var(--q-muted);margin:0 0 20px;}
.quiz-eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--q-blue);
  background:var(--q-blue-soft);padding:4px 12px;border-radius:999px;margin:0 0 16px;
}

/* ---------- start screen ---------- */
.quiz-meta{
  list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.quiz-meta li{
  display:flex;align-items:center;gap:8px;
  background:var(--q-card);border:1px solid var(--q-line);
  border-radius:var(--bl-radius-sm,14px);padding:12px 16px;font-size:15px;font-weight:600;color:var(--q-ink);
}
.quiz-meta li svg{flex:0 0 20px;width:20px;height:20px;color:var(--q-blue);}

.quiz-btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:56px;padding:16px 24px;
  font-size:18px;font-weight:700;font-family:inherit;line-height:1.2;
  color:#fff;background:var(--q-blue);
  border:1px solid var(--q-blue);border-radius:var(--bl-radius-sm,14px);
  box-shadow:0 8px 22px rgba(47,96,117,.26);
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;
  text-decoration:none;text-align:center;
}
.quiz-btn:hover{background:var(--q-blue-d);box-shadow:0 10px 26px rgba(47,96,117,.32);}
.quiz-btn:active{transform:translateY(1px);}
.quiz-btn--ghost{
  color:var(--q-ink);background:var(--q-card);
  border:1px solid var(--q-line-2);box-shadow:none;font-weight:600;
}
.quiz-btn--ghost:hover{background:#f3f4f6;border-color:var(--q-line-2);box-shadow:none;}

.quiz-hint{font-size:13px;line-height:1.5;color:var(--q-muted);margin:24px 2px 0;}

/* ---------- runtime stage ---------- */
.quiz-stage,.quiz-result{display:none;}
.quiz-app.is-running .quiz-start{display:none;}
.quiz-app.is-running .quiz-stage{display:block;}
.quiz-app.is-finished .quiz-stage{display:none;}
.quiz-app.is-finished .quiz-start{display:none;}
.quiz-app.is-finished .quiz-result{display:block;}

.quiz-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
}
.quiz-level-tag{
  font-size:12px;font-weight:700;color:var(--q-blue);
  background:var(--q-blue-soft);padding:4px 12px;border-radius:999px;white-space:nowrap;
}
.quiz-counter{font-size:14px;font-weight:700;color:var(--q-muted);}
.quiz-counter b{color:var(--q-ink);}

.quiz-progress-track{
  width:100%;height:8px;border-radius:999px;background:#e7e3db;overflow:hidden;margin:0 0 20px;
}
.quiz-progress-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#2F6075,#3D7E99);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* question card */
.quiz-card{
  background:var(--q-card);border:1px solid var(--q-line);
  border-radius:24px;box-shadow:var(--q-shadow);
  padding:24px 20px;
}
.quiz-q{
  font-size:20px;line-height:1.4;font-weight:700;color:var(--q-ink);
  margin:0 0 16px;
}
.quiz-q .quiz-blank{color:var(--q-blue);font-weight:800;letter-spacing:.04em;}

.quiz-options{display:flex;flex-direction:column;gap:8px;margin:0;}
.quiz-opt{
  -webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:52px;padding:12px 16px;
  font-size:16px;font-weight:600;color:var(--q-ink);
  background:var(--q-card);border:1px solid var(--q-line-2);border-radius:var(--bl-radius-sm,14px);
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .1s ease;
}
.quiz-opt .quiz-badge{
  flex:0 0 28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--q-blue);
  background:var(--q-blue-soft);border-radius:8px;transition:inherit;
}
.quiz-opt:hover:not([disabled]){border-color:var(--q-blue);box-shadow:0 4px 14px rgba(47,96,117,.12);}
.quiz-opt:active:not([disabled]){transform:translateY(1px);}
.quiz-opt[disabled]{cursor:default;}
.quiz-opt.is-correct{
  background:var(--q-ok-bg);border-color:var(--q-ok-bd);color:var(--q-ok-ink);
}
.quiz-opt.is-correct .quiz-badge{background:#cdeed9;color:var(--q-ok-ink);}
.quiz-opt.is-wrong{
  background:var(--q-err-bg);border-color:var(--q-err-bd);color:var(--q-err-ink);
}
.quiz-opt.is-wrong .quiz-badge{background:#f7cfca;color:var(--q-err-ink);}
.quiz-opt .quiz-mark{margin-left:auto;font-size:18px;line-height:1;opacity:0;transition:opacity .15s;}
.quiz-opt.is-correct .quiz-mark,.quiz-opt.is-wrong .quiz-mark{opacity:1;}

/* skip */
.quiz-skip-wrap{margin-top:16px;text-align:left;}
.quiz-skip{
  -webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 20px;
  font-size:14px;font-weight:600;color:var(--q-muted);
  background:var(--q-card);border:1px solid var(--q-line-2);border-radius:var(--bl-radius-sm,14px);
  transition:border-color .14s ease,color .14s ease,background .14s;
}
.quiz-skip:hover{color:var(--q-ink);border-color:var(--q-muted);background:#fbfafa;}

/* explanation */
.quiz-explain{
  display:none;margin-top:16px;padding:12px 16px;
  background:#EAF1F3;border:1px solid var(--q-line);border-left:4px solid var(--q-blue);
  border-radius:var(--bl-radius-sm,14px);font-size:14px;line-height:1.55;color:var(--q-ink);
}
.quiz-explain.is-shown{display:block;animation:quizFade .35s ease;}
.quiz-explain .quiz-explain-correct{display:block;font-weight:700;margin-bottom:4px;}
.quiz-explain .quiz-explain-correct b{color:var(--q-ok-ink);}
.quiz-explain .quiz-explain-rule{display:block;color:var(--q-muted);}

/* next button row */
.quiz-next-wrap{margin-top:16px;display:none;}
.quiz-next-wrap.is-shown{display:block;animation:quizFade .35s ease;}

/* ---------- result ---------- */
.quiz-result-card{
  background:var(--q-card);border:1px solid var(--q-line);
  border-radius:24px;box-shadow:var(--q-shadow);padding:24px 24px;text-align:center;
}
.quiz-score-ring{
  width:118px;height:118px;margin:4px auto 16px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#EAF1F3,#D6E5E8);
  border:2px solid #B4CDD2;color:var(--q-blue-d);
}
.quiz-score-ring .quiz-score-num{font-size:38px;font-weight:800;line-height:1;}
.quiz-score-ring .quiz-score-of{font-size:13px;font-weight:600;color:var(--q-muted);margin-top:4px;}
.quiz-result-level{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--q-blue);margin:0 0 8px;}
.quiz-result-title{font-size:26px;font-weight:800;color:var(--q-ink);margin:0 0 12px;letter-spacing:-.02em;}
.quiz-result-desc{font-size:16px;line-height:1.6;color:var(--q-ink);margin:0 auto 16px;max-width:460px;}
.quiz-result-note{font-size:13px;line-height:1.55;color:var(--q-muted);margin:0 auto;max-width:460px;}

/* lead form */
.quiz-lead{
  margin-top:20px;background:var(--q-card);border:1px solid var(--q-line);
  border-radius:24px;box-shadow:var(--q-shadow-sm);padding:24px 24px;text-align:left;
}
.quiz-lead h3{font-size:18px;font-weight:800;color:var(--q-ink);margin:0 0 8px;}
.quiz-lead .quiz-lead-sub{font-size:14px;line-height:1.5;color:var(--q-muted);margin:0 0 16px;}
.quiz-field{margin:0 0 16px;}
.quiz-field label{display:block;font-size:13px;font-weight:700;color:var(--q-ink);margin:0 0 4px;}
.quiz-field input,.quiz-field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--q-ink);
  padding:12px 16px;background:#fbfbfa;border:1px solid var(--q-line-2);border-radius:var(--bl-radius-sm,14px);
  transition:border-color .14s ease,box-shadow .14s ease,background .14s;
}
.quiz-field input::placeholder,.quiz-field textarea::placeholder{color:#9aa6b5;}
.quiz-field input:focus,.quiz-field textarea:focus{
  outline:none;border-color:var(--q-blue);background:#fff;box-shadow:0 0 0 4px rgba(47,96,117,.14);
}
.quiz-field textarea{min-height:84px;resize:vertical;}
.quiz-lead-micro{font-size:13px;line-height:1.5;color:var(--q-muted);margin:12px 2px 0;}
.quiz-lead-or{font-size:13px;color:var(--q-muted);text-align:center;margin:16px 0 0;}
.quiz-lead-or a{color:var(--q-blue);font-weight:700;text-decoration:none;}
.quiz-lead-or a:hover{text-decoration:underline;}
.quiz-lead.is-sent .quiz-lead-form{display:none;}
.quiz-lead-thanks{display:none;text-align:center;padding:8px 0;}
.quiz-lead.is-sent .quiz-lead-thanks{display:block;animation:quizFade .35s ease;}
.quiz-lead-thanks .quiz-tick{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--q-ok-bg);color:var(--q-ok-ink);font-size:26px;
}
.quiz-lead-thanks h3{margin:0 0 8px;}
.quiz-lead-thanks p{font-size:14px;color:var(--q-muted);margin:0;}

/* secondary actions under result */
.quiz-after{margin-top:20px;text-align:center;}
.quiz-after .quiz-btn{margin-bottom:16px;}
.quiz-otherlinks{font-size:14px;line-height:1.7;color:var(--q-muted);}
.quiz-otherlinks a{color:var(--q-blue);font-weight:600;text-decoration:none;}
.quiz-otherlinks a:hover{text-decoration:underline;}
.quiz-otherlinks .quiz-otherlinks-title{display:block;font-weight:700;color:var(--q-ink);margin:8px 0 4px;}

/* ---------- focus visibility (WCAG 2.2) ---------- */
.quiz-app a:focus-visible,
.quiz-btn:focus-visible,
.quiz-opt:focus-visible,
.quiz-skip:focus-visible,
.quiz-field input:focus-visible,
.quiz-field textarea:focus-visible{
  outline:3px solid #2F6075;outline-offset:2px;border-radius:14px;
}

@keyframes quizFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.quiz-fade{animation:quizFade .4s ease;}

@media (prefers-reduced-motion:reduce){
  .quiz-app *{animation:none!important;transition:none!important;}
}

/* ---------- >=769px refinements ---------- */
@media (min-width:769px){
  .quiz-app{padding:24px 32px 32px;margin-top:8px;}
  .quiz-meta{grid-template-columns:1fr 1fr;}
  .quiz-card{padding:24px 24px;}
  .quiz-btn{width:auto;min-width:240px;}
  .quiz-start .quiz-btn{width:100%;max-width:304px;}
}

/* ---------- compact desktop fit + cleaner answered state ---------- */
.quiz-app.is-running .quiz-h1,
.quiz-app.is-finished .quiz-h1{display:none;}
.quiz-question[data-answered] .quiz-skip-wrap{display:none;}
.quiz-next{min-height:48px;}

/* ---------- tighter page top on quiz pages (beats bundle 70/90 + home-fix :first-of-type max(96px,nav)) ---------- */
body.page-quiz main.main-section-article,
body.home-v2.page-quiz main.main-section-article:first-of-type{padding-top:calc(var(--nav-h,58px) + 16px)!important;padding-bottom:32px!important;}
@media (max-width:768px){
  body.page-quiz main.main-section-article,
  body.home-v2.page-quiz main.main-section-article:first-of-type{padding-top:12px!important;padding-bottom:24px!important;}
}

/* ---------- p-margins: перекриваємо redesign.css (body.home-v2 .main-section-article p) ---------- */
body.page-quiz .quiz-app .quiz-lead-text{margin:0 0 20px;}
body.page-quiz .quiz-app .quiz-hint{margin:24px 2px 0;}
body.page-quiz .quiz-app .quiz-result-desc{margin:0 auto 16px;}
body.page-quiz .quiz-app .quiz-result-note{margin:0 auto;}
body.page-quiz .quiz-app .quiz-lead-sub{margin:0 0 16px;}
body.page-quiz .quiz-app .quiz-lead-micro{margin:12px 2px 0;}
body.page-quiz .quiz-app .quiz-lead-or{margin:16px 0 0;}
body.page-quiz .quiz-app .quiz-lead-thanks p{margin:0;}