/* =========================================================
   ДАРСИ — второй экран: квиз-калькулятор. Светлая тема.
   Палитра подобрана под розовый акцент первого экрана.
   ========================================================= */

.quiz{
  --ink:#1B1418;
  --ink-2:#4A4046;
  --ink-3:#8A7F86;
  --paper:#FFFFFF;
  --hair:#E7DDE1;
  --hair-2:#F0E8EB;
  --tint:#FBF5F6;
  --rose:#E3A9BA;
  --rose-dark:#C07E93;
  --grad:linear-gradient(90deg,#F6D6DE 0%,#E3A9BA 100%);
  --grad-hi:linear-gradient(90deg,#FAE0E6 0%,#E9B5C4 100%);

  position:relative;
  padding:clamp(56px,7vw,110px) var(--pad-x) clamp(56px,7vw,104px);
  background:
    radial-gradient(120% 90% at 88% 0%, #F7E6EA 0%, rgba(247,230,234,0) 58%),
    radial-gradient(90% 80% at 4% 100%, #EFEAE4 0%, rgba(239,234,228,0) 62%),
    #FAF6F4;
  color:var(--ink);
  letter-spacing:-.022em;
}
.quiz__inner{width:100%; max-width:var(--maxw); margin:0 auto}
.quiz [hidden]{display:none !important}

/* ---------- шапка блока ---------- */
.quiz__head{max-width:820px; margin-bottom:clamp(28px,3.4vw,48px)}
.quiz__eyebrow{
  margin:0 0 14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-dark); font-weight:600;
}
.quiz__head{max-width:none}
.quiz__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1; letter-spacing:-.015em;
  margin:0 0 16px; white-space:nowrap;
}
.quiz__lead{margin:0; font-size:16px; line-height:1.5; color:var(--ink-2); max-width:62ch}

/* ---------- карточка квиза ---------- */
.quiz__card{
  background:var(--paper);
  padding:clamp(20px,2.4vw,40px);
}

/* прогресс */
.qprogress{margin-bottom:clamp(22px,2.4vw,34px)}
.qprogress__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--ink-3); margin-bottom:10px;
}
.qprogress__step b,.qprogress__pct b{color:var(--ink); font-weight:600}
.qprogress__track{height:4px; background:var(--hair-2); overflow:hidden}
.qprogress__bar{
  height:100%; width:0; background:var(--grad);
  transition:width .5s cubic-bezier(.2,.7,.3,1);
}

/* шаги */
.qstep{display:none}
.qstep.is-active{display:block; animation:qfade .45s ease both}
@keyframes qfade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.qstep__q{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(20px,1.9vw,29px); line-height:1.12; letter-spacing:-.01em;
  margin:0 0 6px;
}
.qstep__hint{margin:0 0 4px; font-size:14px; color:var(--ink-3)}
.qstep__q + .qopts{margin-top:22px}
.qstep__hint + .qopts{margin-top:18px}

/* варианты */
.qopts{display:grid; gap:clamp(10px,1.1vw,16px)}
.qopts--img{grid-template-columns:repeat(4,1fr)}
.qopts--5{grid-template-columns:repeat(5,1fr)}
.qopts--plain{grid-template-columns:repeat(4,1fr)}

.qopt{
  position:relative; text-align:left; padding:0; border:1px solid var(--hair);
  background:var(--paper); cursor:pointer; overflow:hidden;
  transition:border-color .2s ease, box-shadow .25s ease, transform .25s ease;
  display:flex; flex-direction:column;
}
.qopt:hover{border-color:var(--rose); box-shadow:0 14px 28px -18px rgba(90,40,55,.45); transform:translateY(-2px)}
.qopt.is-sel{border-color:var(--rose-dark); box-shadow:0 0 0 1px var(--rose-dark) inset}
.qopt.is-sel::after{
  content:''; position:absolute; top:10px; right:10px; width:22px; height:22px;
  background:var(--rose-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.qopt__img{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--tint)}
.qopt__img picture{display:block; width:100%; height:100%}
.qopt__img img{width:100%; height:100%; object-fit:cover; display:block}
.qopt[data-value="winter"] .qopt__img img{object-position:50% 62%}
.qopt[data-value="country"] .qopt__img img{object-position:50% 62%}
.qopt[data-value="restaurant"] .qopt__img img{object-position:50% 58%}
.qopt[data-value="greenhouse"] .qopt__img img{object-position:50% 55%}
.qopt[data-value="manor"] .qopt__img img{object-position:50% 50%}
.qstep[data-step="4"] .qopt__img{aspect-ratio:4/5}
.qopt__label{
  display:block; padding:12px 14px 0; font-size:15px; line-height:1.28;
  font-weight:600; letter-spacing:-.025em;
}
.qopt__note{display:block; padding:4px 14px 14px; font-size:13px; color:var(--ink-3)}
.qopt__label:last-child{padding-bottom:14px}

.qopt--text{padding:18px 16px 16px; justify-content:flex-end; min-height:118px}
.qopt__big{
  font-family:var(--f-head); font-size:clamp(22px,2vw,30px); line-height:1;
  letter-spacing:-.01em; margin-bottom:8px;
}
.qopt--text .qopt__note{padding:0; font-size:13px}

.qskip{
  margin-top:16px; font-size:14px; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair);
  transition:color .2s ease;
}
.qskip:hover{color:var(--rose-dark)}

/* навигация */
.qnav{
  display:flex; align-items:center; gap:16px;
  margin-top:clamp(18px,2vw,28px); padding-top:18px; border-top:1px solid var(--hair-2);
}
.qnav__back{font-size:14px; color:var(--ink-2); transition:color .2s ease}
.qnav__back:hover{color:var(--ink)}
.qnav__note{font-size:13px; color:var(--ink-3); margin-left:auto}

/* =========================================================
   РЕЗУЛЬТАТ
   ========================================================= */
.qresult__grid{
  display:block;
  max-width:860px;
}
.qresult__kicker{margin:0 0 8px; font-size:14px; color:var(--ink-3)}
.qresult__title{
  margin:0 0 22px;
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-.015em;
}
.qresult__price{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(34px,4.4vw,62px); line-height:1; letter-spacing:-.02em;
  margin:0 0 10px;
}
.qresult__cur{color:var(--rose-dark)}
.qresult__range{margin:0 0 22px; font-size:14px; color:var(--ink-2)}
.qresult__range b{font-weight:600}

.qresult__sum{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none;
}
.qresult__sum li{
  font-size:13px; padding:7px 12px; background:var(--tint); color:var(--ink-2);
  border:1px solid var(--hair-2);
}
.qresult__sum li b{color:var(--ink); font-weight:600}

.qresult__cta-text{margin:0 0 18px; font-size:16px; line-height:1.5; color:var(--ink-2); max-width:62ch}

/* форма */
.qform__row{display:flex; gap:10px; flex-wrap:wrap}
.qform__input{
  flex:1 1 210px; min-width:0; height:56px; padding:0 18px;
  font:inherit; font-size:16px; letter-spacing:-.02em; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.qform__input::placeholder{color:#B9AEB4}
.qform__input:focus{border-color:var(--rose-dark)}
.qform__input.is-err{border-color:#D46A6A}
.qform__btn{
  height:56px; padding:0 28px; flex:0 0 auto;
  background:var(--grad); color:#2A171D;
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  transition:background .25s ease, transform .2s ease;
}
.qform__btn:hover{background:var(--grad-hi); transform:translateY(-1px)}
.qform__err{margin:8px 0 0; font-size:13px; color:#C25757}

.qcheck{display:flex; gap:10px; align-items:flex-start; margin-top:14px; cursor:pointer}
.qcheck input{position:absolute; opacity:0; width:0; height:0}
.qcheck__box{
  width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  border:1px solid var(--hair); background:var(--paper); transition:.2s ease;
}
.qcheck input:checked + .qcheck__box{
  background:var(--rose-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--rose-dark);
}
.qcheck input:focus-visible + .qcheck__box{outline:2px solid var(--rose-dark); outline-offset:2px}
.qcheck__txt{font-size:12.5px; line-height:1.4; color:var(--ink-3); max-width:none; white-space:nowrap}
.qcheck__txt a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}

.qform__done{display:flex; gap:12px; align-items:flex-start; padding:18px; background:var(--tint); border:1px solid var(--hair-2)}
.qform__done p{margin:0; font-size:15px; line-height:1.45; color:var(--ink-2)}
.qform__done b{color:var(--ink)}
.qform__done-ico{width:26px; height:26px; flex:0 0 auto; color:#fff; background:var(--rose-dark); display:grid; place-items:center}
.qform__done-ico svg{width:16px; height:16px}

/* =========================================================
   МОКАП СМЕТЫ
   ========================================================= */
.doc{margin:0}
.doc__sheet{
  background:var(--paper);
  border:1px solid var(--hair);
  box-shadow:0 40px 70px -44px rgba(70,35,48,.45);
  padding:clamp(18px,1.6vw,26px);
  position:relative;
}
.doc__sheet::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
}
.doc__head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--hair-2);
}
.doc__logo{width:96px; height:auto; display:block}
.doc__meta{display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:11.5px; color:var(--ink-3)}
.doc__no{color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}

.doc__params{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:14px 0; border-bottom:1px solid var(--hair-2);
}
.doc__params span{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.doc__params b{font-size:13.5px; font-weight:600; letter-spacing:-.02em}

.doc__table{width:100%; border-collapse:collapse; margin-top:6px}
.doc__table th{
  text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding:10px 0 8px;
}
.doc__table th:last-child,.doc__table td:last-child{text-align:right}
.doc__table td{
  padding:7px 0; font-size:12.5px; color:var(--ink-2);
  border-top:1px solid var(--hair-2); vertical-align:top;
}
.doc__table td:first-child{color:var(--ink); font-weight:500; padding-right:10px}
.doc__table td:last-child{font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; padding-left:10px}
.doc__table tr td:nth-child(2){font-size:11.5px; color:var(--ink-3); padding-right:10px}

.doc__totals{margin-top:12px; padding-top:10px; border-top:1px solid var(--hair)}
.doc__total-row{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font-size:12.5px; color:var(--ink-2); padding:4px 0;
}
.doc__total-row b{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.doc__total-row--save{color:var(--rose-dark)}
.doc__total-row--save b{color:var(--rose-dark)}
.doc__total-row--grand{
  margin-top:6px; padding-top:10px; border-top:1px solid var(--hair);
  font-size:14px; color:var(--ink);
}
.doc__total-row--grand b{font-family:var(--f-head); font-size:22px; font-weight:400; letter-spacing:-.01em}

.doc__fade{
  position:relative; margin-top:14px; display:flex; flex-direction:column; gap:7px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
}
.doc__line{display:block; height:6px; background:var(--hair-2)}
.doc__line:nth-child(1){width:92%}
.doc__line:nth-child(2){width:78%}
.doc__line:nth-child(3){width:85%}
.doc__line:nth-child(4){width:64%}

.doc__foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:10px; font-size:11.5px; color:var(--ink-3);
}
.doc__badge{
  padding:5px 10px; background:var(--tint); border:1px solid var(--hair-2);
  color:var(--ink-2); font-weight:600; letter-spacing:-.02em;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1150px){
  .qresult__cta-text{white-space:normal}
}
@media (max-width:900px){
  .quiz__title{white-space:normal}
  .qcheck__txt{white-space:normal}
  .qopts--img,.qopts--5{grid-template-columns:repeat(2,1fr)}
  .qopts--plain{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .quiz{padding-top:44px; padding-bottom:48px}
  .quiz__title{white-space:normal}
  .quiz__card{
    padding:18px var(--pad-x) 20px; margin:0 calc(var(--pad-x) * -1);
    border-left:0; border-right:0;
  }
  /* «Ещё не определились с датой» — нормальная зона нажатия */
  .qskip{min-height:44px; display:inline-flex; align-items:center; padding:4px 8px; margin-left:-8px}
  .quiz__inner{overflow:visible}
  .qstep__q{font-size:20px}
  .qopt__img{aspect-ratio:4/3}
  .qopt[data-value="winter"] .qopt__img img{object-position:50% 60%}
  .qopt[data-value="country"] .qopt__img img{object-position:50% 65%}
  .qopt[data-value="restaurant"] .qopt__img img{object-position:50% 60%}
  .qopt[data-value="greenhouse"] .qopt__img img{object-position:50% 58%}
  .qopt[data-value="manor"] .qopt__img img{object-position:50% 50%}
  .qopt__label{font-size:13.5px; padding:10px 11px 0}
  .qopt__note{font-size:11.5px; padding:3px 11px 11px}
  .qopt--text{min-height:96px; padding:14px 12px 12px}
  .qresult__cta-text{white-space:normal}
  .qform__row{flex-direction:column}
  .qform__input,.qform__btn{flex:0 0 auto; width:100%; height:52px}
  .qresult__price{font-size:38px}
  .doc__params{grid-template-columns:repeat(3,1fr); gap:6px}
  .doc__params b{font-size:12px}
  .doc__table td{font-size:11.5px}
  .doc__table tr td:nth-child(2){display:none}
  .doc__table th:nth-child(2){display:none}
}
@media (max-width:380px){
  .qopts--img,.qopts--5{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .qstep.is-active{animation:none}
  .qprogress__bar{transition:none}
}