/* ==========================================================================
   VIRTUS — квиз «Создать свою дверь»
   ========================================================================== */

.quiz-page{
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(216,154,78,.09), transparent 60%),
    var(--ink);
  min-height:100svh;
}

/* ---------- шапка ---------- */
.qz-bar{
  position:fixed; inset:0 0 auto; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.1rem var(--pad);
  background:rgba(12,13,16,.9); backdrop-filter:blur(14px);
}
.qz-title{font-size:.6rem; font-weight:400; color:var(--steel-dk); letter-spacing:.17em}
@media(max-width:720px){ .qz-title{display:none} }
.qz-close{
  display:flex; align-items:center; gap:.7rem; font-size:.62rem; color:var(--steel);
  transition:color var(--t1) var(--e);
}
.qz-close .mono{font-size:.62rem}
.qz-close svg{
  width:14px; height:14px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round;
}
.qz-close:hover{color:var(--amber)}
.qz-progress{position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--line)}
.qz-progress i{
  display:block; height:100%; width:11.1%; background:var(--amber);
  box-shadow:0 0 14px rgba(216,154,78,.7); transition:width 520ms var(--e);
}

/* ---------- сцена вопроса ---------- */
.qz-main{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:7rem var(--pad) 7.5rem; max-width:1240px; margin-inline:auto; width:100%;
}
.q{display:none}
.q.is-active{display:block; animation:qIn 560ms var(--e) both}
@keyframes qIn{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
.q.is-leaving{animation:qOut 260ms var(--e) both}
@keyframes qOut{from{opacity:1}to{opacity:0; transform:translateY(-14px)}}

.q-head{max-width:44rem; margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.q-num{font-size:.62rem; color:var(--steel-dk); margin-bottom:1.1rem}
.q-num b{color:var(--amber); font-weight:500}
.q h2{font-size:clamp(1.7rem,3.8vw,3rem); line-height:1.1; color:#fff; margin-bottom:.9rem}
.q-hint{color:var(--steel); font-size:.98rem; max-width:min(52ch,100%)}

/* ---------- варианты ---------- */
.opts{display:grid; gap:clamp(.6rem,1.2vw,1rem)}
.cols-2{grid-template-columns:repeat(2,1fr); max-width:40rem}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-5{grid-template-columns:repeat(5,1fr)}
.cols-6{grid-template-columns:repeat(6,1fr)}

.opt{
  position:relative; text-align:left; padding:0 0 1rem;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--ink-2);
  transition:border-color var(--t1) var(--e), transform var(--t1) var(--e),
             box-shadow var(--t1) var(--e), background var(--t1) var(--e);
}
.opt-art{
  display:block; position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--ink-3); margin-bottom:.85rem;
}
.opt-art img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) brightness(.86); transition:transform var(--t3) var(--e), filter var(--t2) var(--e);
}
.opt:hover .opt-art img{transform:scale(1.06); filter:saturate(1) brightness(1)}
.opt-t{display:block; padding:0 .9rem; font-size:.9rem; color:#fff; line-height:1.35}
.opt-s{display:block; padding:.3rem .9rem 0; font-size:.56rem; color:var(--steel-dk); letter-spacing:.1em; line-height:1.6}
.opt:hover{border-color:var(--line-2); transform:translateY(-3px)}
.opt.on{
  border-color:var(--amber); background:rgba(216,154,78,.06);
  box-shadow:0 0 34px rgba(216,154,78,.2);
}
.opt.on::after{
  content:''; position:absolute; right:.7rem; top:.7rem; width:1.1rem; height:1.1rem; z-index:2;
  border-radius:50%; background:var(--amber);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l4 4 8-8' stroke='%2317120a' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:78%; background-position:center; background-repeat:no-repeat;
  animation:pop 320ms var(--e) both;
}
@keyframes pop{from{transform:scale(.4); opacity:0}to{transform:scale(1); opacity:1}}

/* иконочные варианты */
.opt-icon .opt-art{
  display:grid; place-items:center; aspect-ratio:4/3;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.opt-icon svg{width:52px; height:52px; fill:none; stroke:var(--steel); stroke-width:1.2; transition:stroke var(--t2) var(--e)}
.opt-icon:hover svg, .opt-icon.on svg{stroke:var(--amber)}

/* цветовые варианты */
.opts-color .opt-art{
  aspect-ratio:1; margin-bottom:.85rem;
  background:linear-gradient(152deg, var(--c1), var(--c2));
  position:relative;
}
.opts-color .opt-art::after{
  content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
}
.opts-color .opt-art.two{
  background:linear-gradient(105deg, var(--c1) 0 48%, var(--c2) 52% 100%);
}
.q-extra{margin-top:1.4rem}
.pick{display:inline-flex; align-items:center; gap:.8rem; cursor:pointer}
.pick input[type=color]{
  width:2.4rem; height:2.4rem; padding:0; border:1px solid var(--line); border-radius:2px;
  background:none; cursor:pointer;
}
.pick .mono{font-size:.6rem; color:var(--steel)}

/* размеры */
.dims{
  margin-top:1.6rem; max-width:44rem; display:grid; gap:1.4rem;
  border:1px solid var(--line); border-radius:3px; padding:1.5rem;
  background:rgba(19,21,26,.6);
  animation:qIn 420ms var(--e) both;
}
.dims label{display:block}
.dims label>span{display:block; font-size:.6rem; color:var(--steel); margin-bottom:.7rem}
.dims label b{color:var(--amber); font-weight:500}
.dims input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--line-2); border-radius:2px; outline:none;
}
.dims input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--amber); cursor:pointer; box-shadow:0 0 14px rgba(216,154,78,.55);
}
.dims-note{font-size:.57rem; color:var(--steel-dk)}
.dims-note.warn{color:var(--amber)}

/* свободный текст */
.q textarea{
  width:100%; max-width:52rem; background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line); border-radius:3px; padding:1.1rem 1.2rem;
  font-family:var(--f-txt); font-size:1rem; font-weight:300; line-height:1.6; resize:vertical;
  transition:border-color var(--t1) var(--e);
}
.q textarea:focus{border-color:var(--amber); outline:none}
.q-actions{display:flex; gap:.8rem; margin-top:1.6rem; flex-wrap:wrap}

/* ---------- нижняя навигация ---------- */
.qz-nav{
  position:fixed; inset:auto 0 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--pad);
  background:linear-gradient(180deg, transparent, rgba(12,13,16,.94) 40%);
  border-top:1px solid var(--line);
}
.qz-nav button{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.64rem; color:var(--steel); padding:.55rem 0;
  transition:color var(--t1) var(--e), opacity var(--t1) var(--e);
}
.qz-nav button .mono{font-size:.64rem}
.qz-nav button:hover:not(:disabled){color:var(--amber)}
.qz-nav button:disabled{opacity:.3; cursor:default}
.qz-hint{font-size:.55rem; color:var(--steel-dk)}
@media(max-width:720px){ .qz-hint{display:none} }

/* ---------- REVEAL ---------- */
.reveal{
  position:fixed; inset:0; z-index:120; background:var(--ink);
  opacity:0; visibility:hidden; transition:opacity 520ms var(--e), visibility 520ms;
}
.reveal.on{opacity:1; visibility:visible}

.rv-stage{
  position:absolute; inset:0; display:grid; place-items:center; gap:2.5rem;
  grid-auto-rows:min-content; align-content:center;
  transition:opacity 620ms var(--e), visibility 620ms;
}
.reveal.done .rv-stage{opacity:0; visibility:hidden}
.rv-slit{
  width:2px; height:38vh; border-radius:3px;
  background:linear-gradient(180deg, transparent, var(--amber), transparent);
  animation:slitWork 1.5s var(--e) infinite;
}
@keyframes slitWork{0%,100%{opacity:.25; transform:scaleY(.66)}50%{opacity:1; transform:scaleY(1)}}
.rv-status{
  font-size:.62rem; color:var(--steel); max-width:min(46ch,86vw); text-align:center;
  line-height:1.9; transition:opacity 300ms var(--e);
}
/* экран ошибки: показываем, только если генерация не удалась */
.rv-fail{display:none; gap:.8rem; flex-wrap:wrap; justify-content:center}
.reveal.failed .rv-fail{display:flex}
.reveal.failed .rv-slit{animation:none; opacity:.2}
.reveal.failed .rv-status{color:var(--paper)}

/* ==========================================================================
   РЕЗУЛЬТАТ: ТРИ КОНЦЕПЦИИ
   ========================================================================== */
/* Появление — анимацией, а не переходом: у анимации детерминированный
   конец (forwards), она не зависит от того, успел ли браузер зафиксировать
   стартовое значение. Тот же приём, что у занавеса загрузки. */
.rv-concepts,
.rv-chosen{
  position:absolute; inset:0; overflow-y:auto;
  opacity:0; visibility:hidden;
}
.reveal.concepts .rv-concepts{animation:panelIn 560ms var(--e) forwards}
.reveal.chosen  .rv-chosen{animation:panelIn 560ms var(--e) forwards}
.reveal.chosen  .rv-concepts{animation:panelOut 260ms var(--e) forwards}
@keyframes panelIn{from{opacity:0; visibility:visible}to{opacity:1; visibility:visible}}
@keyframes panelOut{from{opacity:1; visibility:visible}to{opacity:0; visibility:hidden}}

/* ---------- шапка ---------- */
.rvc-head{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(4.5rem,7vw,6rem) var(--pad) clamp(1.5rem,3vw,2.5rem);
}
.rvc-head h2{font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.1; color:#fff; margin-bottom:.9rem}
.rvc-head h2 em{font-style:normal; color:var(--amber)}
.rvc-sub{color:var(--steel); max-width:min(56ch,100%); font-size:1rem}
.rvc-briefbox{margin-top:1.4rem}
.rvc-briefbox summary{
  display:none; cursor:pointer; list-style:none;
  font-size:.58rem; letter-spacing:.14em; color:var(--steel);
  border:1px solid var(--line); border-radius:2px; padding:.45rem .75rem;
  width:max-content;
}
.rvc-briefbox summary::-webkit-details-marker{display:none}
.rvc-briefbox summary::after{content:' ▾'; color:var(--amber)}
.rvc-briefbox[open] summary::after{content:' ▴'}
.rvc-brief{
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.rvc-brief li{
  font-size:.55rem; letter-spacing:.11em; color:var(--paper);
  border:1px solid var(--line); border-radius:2px; padding:.32rem .6rem;
}
.rvc-brief li b{color:var(--steel-dk); font-weight:400; margin-right:.4rem}

/* ---------- сетка концепций ---------- */
.rvc-grid{
  max-width:var(--max); margin-inline:auto;
  padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem);
  align-items:start;
}
.concept{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--ink-2);
  transition:border-color var(--t2) var(--e), box-shadow var(--t2) var(--e), transform var(--t2) var(--e);
  animation:conceptIn 640ms var(--e) both;
}
@keyframes conceptIn{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
.concept:hover{border-color:var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.45)}
.concept-num{
  position:absolute; z-index:3; left:0; top:0;
  padding:.5rem .8rem; background:rgba(12,13,16,.82); backdrop-filter:blur(8px);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; color:var(--amber);
}
.concept-ph{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-3);
  /* потолок по высоте: иначе кнопка выбора уходит за первый экран */
  max-height:min(50vh, 560px);
}
.concept-ph img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1100ms var(--e);
}
.concept:hover .concept-ph img{transform:scale(1.06)}
.concept-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.9rem}
.concept-body .btn{width:100%; justify-content:center}

/* слот в работе */
.concept.pending .concept-ph{display:grid; place-items:center}
.concept.pending .concept-ph::after{
  content:''; width:2px; height:34%;
  background:linear-gradient(180deg, transparent, var(--amber), transparent);
  animation:slitWork 1.5s var(--e) infinite;
}
.concept-note{
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.12em;
  color:var(--steel-dk); text-align:center; line-height:1.8;
}
/* слот с ошибкой: без большой пустой плашки */
.concept.failed{border-color:var(--danger); align-self:stretch}
.concept.failed .concept-ph{
  aspect-ratio:auto; max-height:none; height:7rem;
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.concept.failed .concept-ph::after{
  content:'✕'; font-size:1.4rem; color:var(--danger); opacity:.6;
}
.concept.failed .concept-body{justify-content:center}
.concept.failed .concept-note{color:var(--danger); text-align:left}

/* ---------- низ ---------- */
.rvc-foot{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) var(--pad) clamp(3rem,6vw,4.5rem);
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
}


/* строки брифа в выбранной концепции (стили удалились вместе со старым
   одиночным результатом — вернул, иначе подпись и значение слипались) */
.rv-brief{
  display:grid; gap:.55rem; margin:1.8rem 0 0;
  border-top:1px solid var(--line); padding-top:1.4rem;
}
.rv-brief li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  font-size:.58rem; letter-spacing:.11em; line-height:1.7;
}
.rv-brief li span:first-child{color:var(--steel-dk)}
.rv-brief li span:last-child{color:var(--paper)}
.rv-price{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.62rem; letter-spacing:.12em; color:var(--steel); line-height:1.9;
}
.rv-price b{color:var(--amber); font-weight:500; font-size:.8rem}

/* ---------- выбранная концепция ---------- */
.rv-chosen{display:grid; grid-template-columns:1.05fr .95fr}
.rvch-shot{position:relative; overflow:hidden; background:var(--ink-2)}
.rvch-shot img{width:100%; height:100%; object-fit:cover}
.rvch-shot figcaption{
  position:absolute; left:1.1rem; bottom:1.1rem;
  width:max-content; max-width:calc(100% - 2.2rem);
  padding:.85rem 1rem; border-left:2px solid var(--amber);
  background:rgba(12,13,16,.8); backdrop-filter:blur(10px);
  font-size:.55rem; letter-spacing:.13em; line-height:1.9; color:var(--paper);
}
.rvch-panel{
  padding:clamp(4.5rem,7vw,6rem) clamp(1.5rem,4vw,4rem) 2.5rem;
  display:flex; flex-direction:column; justify-content:center; overflow-y:auto;
}
.rvch-panel h2{font-size:clamp(1.9rem,3.8vw,3rem); color:#fff; margin-bottom:1rem}
.rvch-lead{color:var(--steel); max-width:min(40ch,100%); font-size:.99rem}
.rvch-act{display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap}
.rvch-sec{display:flex; gap:1.6rem; margin-top:1.6rem; flex-wrap:wrap}

@media(max-width:1100px){
  .rvc-grid{grid-template-columns:repeat(3,1fr); gap:.8rem}
  .concept-body{padding:.9rem 1rem 1.1rem}
}
@media(max-width:960px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-5,.cols-6{grid-template-columns:repeat(3,1fr)}
  /* концепции складываются в вертикальный список — без карусели */
  .rvc-grid{grid-template-columns:1fr; gap:1.2rem; max-width:34rem}
  .concept-ph{aspect-ratio:3/4; max-height:none}
  /* на мобильном бриф свёрнут: сначала двери, потом подробности */
  .rvc-briefbox summary{display:block}
  .rvc-briefbox:not([open]) .rvc-brief{display:none}
  .rvc-brief{margin-top:.8rem}
  .rvc-head{padding-bottom:1.2rem}
  .rvc-sub{font-size:.94rem}
  .rv-chosen{grid-template-columns:1fr; grid-template-rows:46vh auto}
  .rvch-panel{padding-top:2rem}
  .rv-brief li{grid-template-columns:1fr; gap:.1rem}
}
@media(max-width:560px){
  .qz-main{padding:5.5rem var(--pad) 6rem}
  .cols-3{grid-template-columns:1fr}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-5,.cols-6{grid-template-columns:repeat(2,1fr)}
  .cols-2{grid-template-columns:1fr}
  /* иконочные варианты на телефоне — строки, а не высокие карточки:
     все опции видны без прокрутки */
  .opt-icon{
    display:grid; grid-template-columns:3.2rem 1fr; align-items:center;
    padding:.85rem 1rem .85rem 0; gap:.9rem;
  }
  .opt-icon .opt-art{grid-row:1 / span 2; aspect-ratio:1; margin:0; background:none}
  .opt-icon svg{width:30px; height:30px}
  .opt-icon .opt-t{grid-column:2; padding:0}
  .opt-icon .opt-s{grid-column:2; padding:.15rem 0 0}
  .opt-icon.on::after{right:.7rem; top:50%; transform:translateY(-50%); animation:none}
  .q h2{font-size:1.55rem}
  .q-hint{font-size:.9rem}
  .opt-art{aspect-ratio:4/3}
  .opts-color .opt-art{aspect-ratio:3/2}
  .opt-t{font-size:.84rem}
  .rv-brief li{grid-template-columns:1fr; gap:.1rem}
  .rv-act .btn{flex:1 1 100%; justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  .q.is-active{animation:none}
  .rv-shot img{clip-path:none; filter:none; transform:none; transition:none}
  .rv-slit{animation:none}
}

/* ---------- заявка по выбранной концепции ---------- */
.rvch-form{margin-top:clamp(1.4rem,2.6vw,2rem); border-top:1px solid var(--line); padding-top:clamp(1.3rem,2.4vw,1.8rem)}
.rvf-title{font-family:var(--f-dis); font-size:clamp(1.05rem,1.7vw,1.3rem); margin-bottom:1.1rem}
.rvf-row{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.rvf-f{display:flex; flex-direction:column; gap:.4rem}
.rvf-f span{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-dk)}
.rvf-f input{
  background:var(--ink-2); border:1px solid var(--line-2); color:var(--paper);
  font-family:var(--f-txt); font-size:.98rem; padding:.8rem .9rem;
  transition:border-color var(--t1) var(--e), background var(--t1) var(--e);
}
.rvf-f input:hover{border-color:var(--line-p)}
.rvf-f input:focus{outline:none; border-color:var(--amber); background:var(--ink-3)}
.rvf-f input::placeholder{color:var(--steel-dk)}
.rvf-agree{display:flex; align-items:flex-start; gap:.7rem; margin:1rem 0 1.3rem; font-size:.85rem; color:var(--steel); cursor:pointer}
.rvf-agree input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:1.05rem; height:1.05rem; margin-top:.15rem;
  border:1px solid var(--line-2); background:var(--ink-2); cursor:pointer;
  transition:border-color var(--t1) var(--e), background var(--t1) var(--e);
}
.rvf-agree input:checked{background:var(--amber); border-color:var(--amber)}
.rvf-agree input:checked::after{content:'✓'; display:block; color:#17120a; font-size:.72rem; line-height:1; text-align:center; margin-top:.16rem}
.rvf-msg{margin-top:.9rem; font-size:.68rem; line-height:1.5; letter-spacing:.04em; color:var(--steel); min-height:1rem}
.rvf-msg.is-err{color:#e08a6a}
.rvf-msg.is-ok{color:var(--amber-sm)}
.rvf-alt{margin-top:.75rem; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-dk)}
.rvf-alt a{color:var(--paper); border-bottom:1px solid var(--amber-2); padding-bottom:.1rem}
.rvch-form.is-sent .rvf-row,
.rvch-form.is-sent .rvf-agree,
.rvch-form.is-sent #rvLeadBtn{display:none}
@media(max-width:640px){
  .rvf-row{grid-template-columns:1fr}
}