/* Мини-квиз посадочных страниц (/equipment/battery/, /quick-power/).
   Движок — /js/mini-quiz.js; цвета и шрифты берутся из переменных страницы. */
.mq-section{background:var(--paper-2); padding:clamp(36px,6vw,72px) clamp(16px,4vw,64px); scroll-margin-top:72px}
.mq-head{max-width:760px; margin:0 auto 22px}
.mq-head h2{font-family:var(--f-display); font-weight:900; font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.08; letter-spacing:-.01em; margin:10px 0 10px; text-wrap:balance}
.mq-head p{color:var(--ink-soft); margin:0; max-width:60ch}

.mq{max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--paper-line); padding:clamp(18px,4vw,36px); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.mq-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.mq-track{height:3px; background:var(--paper-line); border-radius:2px; overflow:hidden; margin-bottom:24px}
.mq-fill{height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-deep)); transition:width .35s ease}

.mq-q{font-family:var(--f-display); font-weight:700; font-size:clamp(1.12rem,2.4vw,1.5rem); line-height:1.2; margin:0 0 6px; text-wrap:balance}
.mq-note{font-size:.88rem; color:var(--ink-faint); margin:0 0 16px}
.mq-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:14px}
.mq-opt{font-family:var(--f-body); font-size:.98rem; text-align:left; color:var(--ink); background:var(--paper); border:1px solid var(--paper-line); padding:15px 16px; min-height:54px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:3px; transition:border-color .2s, background .2s, box-shadow .2s}
.mq-opt:hover{border-color:var(--ink-soft)}
.mq-opt.selected{border-color:var(--blue); background:#fff; box-shadow:inset 0 0 0 1px var(--blue)}
.mq-opt-sub{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint)}

.mq-field{margin-top:14px}
.mq-field label{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px}
.mq-field input{width:100%; font-family:var(--f-body); font-size:1.02rem; color:var(--ink); background:transparent; border:none; border-bottom:1px solid var(--paper-line); padding:10px 2px; border-radius:0}
.mq-field input:focus{outline:none; border-color:var(--blue)}
.mq-field .mq-opts{grid-template-columns:repeat(3,1fr); margin-top:6px}
.mq-field .mq-opt{min-height:46px; padding:10px 12px; font-size:.92rem; align-items:center; text-align:center}
.mq-consent{display:flex; align-items:flex-start; gap:10px; font-size:.82rem; color:var(--ink-soft); cursor:pointer; margin-top:16px}
.mq-consent input{margin-top:3px; flex:none}
.mq-consent a{color:inherit}

.mq-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap}
.mq-hint{font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); flex:1; text-align:center}
.mq-nav .btn[disabled]{opacity:.45; cursor:not-allowed}

.mq-pick{border:1px solid var(--blue); background:var(--paper); padding:18px 18px 16px; margin:4px 0 18px}
.mq-pick-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep)}
.mq-pick-name{font-family:var(--f-display); font-weight:900; font-size:1.5rem; margin:6px 0 2px}
.mq-pick-price{font-family:var(--f-mono); font-weight:600; font-size:1.05rem; margin-bottom:8px}
.mq-pick p{margin:0; font-size:.92rem; color:var(--ink-soft)}
.mq-done{text-align:center; padding:8px 0}
.mq-done h3{font-family:var(--f-display); font-weight:700; font-size:1.3rem; margin:10px 0 8px}
.mq-done p{color:var(--ink-soft); margin:0 auto; max-width:52ch}

@media (max-width:560px){
  .mq-opts{grid-template-columns:1fr}
  .mq-field .mq-opts{grid-template-columns:repeat(3,1fr)}
  .mq-nav .btn{padding:13px 16px}
  .mq-hint{order:3; flex-basis:100%}
}