/**
 * AP-R V2 · Квиз «Тест района» — модалка на странице города (блок C2).
 * Подбор топ-3 районов по 3 вопросам. Использует переменные city-v2.css.
 *
 * Структура DOM:
 *   .apr-dq-overlay
 *     .apr-dq-modal
 *       .apr-dq-head (progress + close)
 *       .apr-dq-body (5 секций — q1/q2/q3/result/thanks)
 *
 * @file district-quiz.css — 2026-05-20
 */

/* ===== OVERLAY ===== */
.apr-dq-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,34,55,.62); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.apr-dq-overlay.is-open{ opacity:1; pointer-events:auto }
body.apr-dq-locked{ overflow:hidden }

/* ===== MODAL FRAME ===== */
.apr-dq-modal{
  width:100%; max-width:780px; max-height:calc(100vh - 48px);
  background:#fff; border-radius:24px; box-shadow:var(--shadow-lg, 0 24px 60px rgba(10,34,55,.30));
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(16px) scale(.98);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.apr-dq-overlay.is-open .apr-dq-modal{ transform:translateY(0) scale(1) }

/* ===== HEAD ===== */
.apr-dq-head{
  display:flex; align-items:center; gap:16px;
  padding:18px 24px 14px; border-bottom:1px solid var(--line,#e6e8ec);
}
.apr-dq-progress{
  flex:1; display:flex; gap:6px;
}
.apr-dq-progress span{
  flex:1; height:6px; border-radius:99px; background:#eef0f4;
  transition:background .25s ease;
}
.apr-dq-progress span.is-on{ background:var(--green,#a3d977) }
.apr-dq-progress span.is-active{ background:var(--green,#a3d977); box-shadow:0 0 0 3px rgba(163,217,119,.20) }

.apr-dq-step-num{
  font-size:13px; color:var(--muted,#6c7785); font-weight:600;
  white-space:nowrap;
}
.apr-dq-close{
  width:36px; height:36px; border-radius:10px; background:#f3f4f6;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s; flex-shrink:0;
}
.apr-dq-close:hover{ background:#e7e9ed }
.apr-dq-close svg{ width:16px; height:16px; stroke:var(--navy,#13374f) }

/* ===== BODY ===== */
.apr-dq-body{
  padding:24px 28px 28px; overflow-y:auto;
  flex:1; min-height:0;
}
.apr-dq-screen{ display:none }
.apr-dq-screen.is-active{ display:block; animation:apr-dq-fade .26s ease both }
@keyframes apr-dq-fade{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}

.apr-dq-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:99px; background:rgba(19,55,79,.06);
  color:var(--navy,#13374f); font-size:12px; font-weight:600;
  margin-bottom:12px;
}
.apr-dq-eyebrow svg{ width:14px; height:14px }
.apr-dq-screen h3{
  margin:0 0 6px; font-size:24px; line-height:1.25;
  color:var(--ink,#1a2330); font-weight:700; letter-spacing:-.01em;
}
.apr-dq-screen p.lead{
  margin:0 0 18px; color:var(--muted,#6c7785); font-size:15px; line-height:1.5;
}
.apr-dq-hint{
  font-size:12px; color:var(--muted,#6c7785); margin-top:6px;
}

/* ===== OPTIONS GRID ===== */
.apr-dq-options{
  display:grid; gap:10px;
  grid-template-columns:1fr 1fr;
}
.apr-dq-options.cols-1{ grid-template-columns:1fr }
.apr-dq-opt{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:2px solid var(--line,#e6e8ec); border-radius:14px;
  background:#fff; cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s, transform .1s;
  font-size:15px; color:var(--ink,#1a2330); font-weight:500;
  position:relative;
}
.apr-dq-opt:hover{ border-color:rgba(163,217,119,.6); background:#fcfdfa }
.apr-dq-opt:active{ transform:scale(.98) }
.apr-dq-opt.is-selected{
  border-color:var(--green,#a3d977); background:rgba(163,217,119,.10);
}
.apr-dq-opt.is-disabled{ opacity:.4; pointer-events:none; cursor:not-allowed }
.apr-dq-opt-ico{
  width:36px; height:36px; border-radius:10px;
  background:rgba(19,55,79,.06); color:var(--navy,#13374f);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.apr-dq-opt.is-selected .apr-dq-opt-ico{ background:rgba(163,217,119,.25); color:var(--green-dark,#163d10) }
.apr-dq-opt-ico svg{ width:18px; height:18px }
.apr-dq-opt-text{ flex:1 }
.apr-dq-opt-check{
  width:22px; height:22px; border-radius:50%; border:2px solid #cdd3da;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.apr-dq-opt-check svg{ width:12px; height:12px; opacity:0 }
.apr-dq-opt.is-selected .apr-dq-opt-check{
  border-color:var(--green,#a3d977); background:var(--green,#a3d977);
}
.apr-dq-opt.is-selected .apr-dq-opt-check svg{ opacity:1; stroke:#fff }

/* ===== ACTIONS ROW ===== */
.apr-dq-actions{
  display:flex; gap:10px; margin-top:18px;
  align-items:center;
}
.apr-dq-actions .apr-dq-spacer{ flex:1 }
.apr-dq-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:12px; font-size:15px; font-weight:600;
  transition:transform .12s, background .15s, box-shadow .15s;
  text-decoration:none;
}
.apr-dq-btn:active{ transform:scale(.98) }
.apr-dq-btn-ghost{ color:var(--navy,#13374f); background:transparent; padding-left:12px; padding-right:12px }
.apr-dq-btn-ghost:hover{ background:#f3f4f6 }
.apr-dq-btn-primary{
  background:var(--green,#a3d977); color:var(--navy,#13374f);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 18px rgba(163,217,119,.30);
}
.apr-dq-btn-primary:hover{ background:var(--green-press,#8cc55f) }
.apr-dq-btn-primary:disabled,.apr-dq-btn-primary[disabled]{
  background:#e6e8ec; color:#8a93a0; box-shadow:none; cursor:not-allowed;
}
.apr-dq-btn-primary svg{ width:16px; height:16px }

/* ===== RESULT SCREEN ===== */
.apr-dq-result-list{
  display:flex; flex-direction:column; gap:10px; margin-bottom:18px;
}
.apr-dq-result-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--line,#e6e8ec); border-radius:14px;
  background:#fff; transition:border-color .15s;
}
.apr-dq-result-card:hover{ border-color:rgba(19,55,79,.20) }
.apr-dq-result-num{
  width:34px; height:34px; border-radius:50%;
  background:var(--green,#a3d977); color:var(--navy,#13374f);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; flex-shrink:0;
}
.apr-dq-result-info{ flex:1; min-width:0 }
.apr-dq-result-name{
  font-weight:700; color:var(--ink,#1a2330); font-size:16px; line-height:1.3;
  margin-bottom:2px;
}
.apr-dq-result-reasons{
  font-size:13px; color:var(--muted,#6c7785); line-height:1.4;
}
.apr-dq-result-reasons span{ display:inline-block; margin-right:10px; white-space:nowrap }
.apr-dq-result-price{
  font-size:13px; color:var(--navy,#13374f); font-weight:600;
  white-space:nowrap; flex-shrink:0;
}
.apr-dq-result-price small{ display:block; font-size:11px; font-weight:500; color:var(--muted,#6c7785) }
.apr-dq-result-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:8px; background:#f0f4f8;
  color:var(--navy,#13374f); font-size:13px; font-weight:600;
  white-space:nowrap; transition:background .15s; flex-shrink:0;
}
.apr-dq-result-cta:hover{ background:#e1e9f1 }
.apr-dq-result-cta svg{ width:12px; height:12px }

.apr-dq-result-empty{
  text-align:center; padding:32px 16px;
  color:var(--muted,#6c7785); font-size:15px;
}

/* ===== LEAD FORM ===== */
.apr-dq-lead{
  padding:18px 20px; border-radius:16px;
  background:linear-gradient(180deg, var(--bg-mint,#eef7f1), #fff);
  border:1px solid rgba(163,217,119,.30);
}
.apr-dq-lead h4{
  margin:0 0 4px; font-size:17px; color:var(--ink,#1a2330); font-weight:700;
}
.apr-dq-lead p{
  margin:0 0 14px; color:var(--ink-2,#3a4754); font-size:13px; line-height:1.45;
}
.apr-dq-lead-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;
}
.apr-dq-lead input[type="text"], .apr-dq-lead input[type="tel"]{
  width:100%; padding:12px 14px; border:1.5px solid #d8dde3; border-radius:10px;
  background:#fff; font:inherit; font-size:14px; color:var(--ink,#1a2330);
  transition:border-color .15s;
}
.apr-dq-lead input:focus{ outline:none; border-color:var(--green,#a3d977) }
.apr-dq-lead input.is-error{ border-color:#e25555; background:#fff5f5 }
.apr-dq-lead-consent{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--muted,#6c7785); line-height:1.4;
  cursor:pointer; user-select:none;
  margin-bottom:12px;
}
.apr-dq-lead-consent input{ margin-top:1px; accent-color:var(--green,#a3d977) }
.apr-dq-lead-consent a{ color:var(--navy,#13374f); text-decoration:underline }
.apr-dq-lead-submit{
  width:100%; justify-content:center;
}

/* ===== THANKS SCREEN ===== */
.apr-dq-thanks{
  text-align:center; padding:24px 16px 8px;
}
.apr-dq-thanks-ico{
  width:64px; height:64px; border-radius:50%;
  background:rgba(163,217,119,.25); color:var(--green-dark,#163d10);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.apr-dq-thanks-ico svg{ width:30px; height:30px }
.apr-dq-thanks h3{ margin:0 0 8px }
.apr-dq-thanks p{ color:var(--muted,#6c7785); max-width:440px; margin:0 auto 18px }

/* ===== LOADER ===== */
.apr-dq-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 16px; gap:14px;
}
.apr-dq-spin{
  width:36px; height:36px; border:3px solid #e6e8ec; border-top-color:var(--green,#a3d977);
  border-radius:50%; animation:apr-dq-spin 1s linear infinite;
}
@keyframes apr-dq-spin{ to{transform:rotate(360deg)} }
.apr-dq-loading-text{ color:var(--muted,#6c7785); font-size:14px }

/* ===== MOBILE ===== */
@media (max-width: 640px){
  .apr-dq-overlay{ padding:0; align-items:flex-end }
  .apr-dq-modal{
    max-width:100%; max-height:92vh;
    border-radius:20px 20px 0 0;
  }
  .apr-dq-head{ padding:14px 18px 12px }
  .apr-dq-body{ padding:18px 20px 24px }
  .apr-dq-screen h3{ font-size:20px }
  .apr-dq-options{ grid-template-columns:1fr }
  .apr-dq-lead-row{ grid-template-columns:1fr }
  .apr-dq-result-card{ flex-wrap:wrap; gap:10px }
  .apr-dq-result-info{ min-width:140px }
}