/* Dr House — конфигураторът. Идва след stil.css и ползва неговите цветове.
   Сцената стои с position:sticky; нищо не се смята при скрол.
   Над платното няма backdrop-filter и filter. */

.str-konf{background:var(--fon)}
.str-konf .glava.lepne{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,12,18,.94)}

/* ═════ РАЗПОЛОЖЕНИЕТО ═════ */
.kf{display:grid;grid-template-columns:minmax(0,1fr) 470px;align-items:start;position:relative}
.kf-scena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0f16;touch-action:none}
#kf-platno{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.kf-scena.vurti #kf-platno:active{cursor:grabbing}
.kf-rezerva{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:not(.js) .kf-rezerva,.bez-3d .kf-rezerva{display:block}
html:not(.js) #kf-platno,.bez-3d #kf-platno,html:not(.js) .kf-instr,.bez-3d .kf-instr,
html:not(.js) .kf-podskazka,.bez-3d .kf-podskazka{display:none}
.kf-scena::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,16,.55) 0%,rgba(7,10,16,0) 18%),
             linear-gradient(0deg,rgba(7,10,16,.35) 0%,rgba(7,10,16,0) 16%)}

/* зареждането */
.kf-zar{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:14px;background:#0b0f16;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8b94a3}
.kf-zar[hidden]{display:none}
.kf-zar i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--zlato);animation:kfvurti .9s linear infinite}
@keyframes kfvurti{to{transform:rotate(360deg)}}
html:not(.js) .kf-zar{display:none}

/* котите над платното */
.kf-etiketi{position:absolute;inset:0;pointer-events:none;z-index:2}
.kf-etiketi span{position:absolute;left:0;top:0;padding:4px 9px;border-radius:7px;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:rgba(8,11,17,.84);border:1px solid rgba(255,138,76,.65);transition:opacity .2s;will-change:transform}
.kf-etiketi span:empty{display:none}

/* инструментите горе вляво */
.kf-instr{position:absolute;left:24px;top:96px;z-index:3;display:flex;flex-wrap:wrap;gap:8px}
.kf-instr button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;border-radius:40px;
  background:rgba(8,11,17,.82);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13.5px;font-weight:500;
  transition:background .25s,border-color .25s,color .25s}
.kf-instr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kf-instr button:hover{border-color:rgba(255,255,255,.3)}
.kf-instr button[aria-pressed="true"]{background:var(--zlato);border-color:var(--zlato)}
.kf-podskazka{position:absolute;left:24px;bottom:22px;z-index:2;font-size:12.5px;color:rgba(255,255,255,.62);
  transition:opacity .6s;pointer-events:none}
.kf-scena.vurti .kf-podskazka{opacity:0}

/* ═════ ПАНЕЛЪТ ═════ */
.kf-panel{position:relative;z-index:3;background:var(--fon);border-left:1px solid var(--linia);min-height:100vh;
  display:flex;flex-direction:column}
.kf-glava{padding:112px 32px 8px}
.kf-glava h1{font-family:'Rubik',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.95;
  font-size:clamp(36px,3.3vw,50px);margin:14px 0 14px}
.kf-glava p{color:var(--sivo);font-size:15.5px}
.kf-forma{padding:10px 32px 24px;display:flex;flex-direction:column;gap:6px}
.kf-forma [hidden]{display:none !important}
.kf-forma .izkl{display:none !important}
.kf-stapka{border:0;margin:0;padding:22px 0 18px;border-top:1px solid var(--linia);display:flex;flex-direction:column;gap:18px;min-width:0}
.kf-stapka legend{float:left;width:100%;padding:0;margin:0 0 2px;display:flex;align-items:center;gap:12px;
  font-family:'Rubik',sans-serif;font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase}
.kf-stapka legend span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--zlato-yark);letter-spacing:.08em}
.kf-stapka legend+*{clear:both}
.kf-et{display:block;font-size:13px;color:var(--sivo);margin-bottom:9px}

/* видовете */
.kf-vidove{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kf-vid{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 13px;border-radius:14px;cursor:pointer;
  background:var(--fon-2);border:1px solid var(--linia);transition:border-color .25s,background .25s,transform .25s var(--lek)}
.kf-vid:hover{border-color:rgba(255,255,255,.22)}
.kf-vid input{position:absolute;opacity:0;pointer-events:none}
.kf-vid svg{width:48px;height:32px;fill:none;stroke:var(--stomana);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;transition:stroke .25s}
.kf-vid b{font-size:14.5px;font-weight:600;line-height:1.25}
.kf-vid small{font-size:12px;color:var(--sivo-2)}
.kf-vid:has(input:checked){border-color:var(--zlato);background:linear-gradient(160deg,rgba(226,102,43,.16),rgba(226,102,43,.04))}
.kf-vid:has(input:checked) svg{stroke:var(--zlato-yark)}
.kf-vid:has(input:focus-visible){outline:2px solid var(--zlato-yark);outline-offset:2px}

/* плъзгачите */
.kf-plzg{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:10px}
.kf-plzg label{font-size:13px;color:var(--sivo)}
.kf-plzg output{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;color:#fff}
.kf-plzg input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;margin:0;cursor:pointer;touch-action:pan-y}
.kf-plzg input::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--zlato) var(--p,50%),rgba(255,255,255,.14) var(--p,50%))}
.kf-plzg input::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.kf-plzg input::-moz-range-progress{height:4px;border-radius:4px;background:var(--zlato)}
.kf-plzg input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:#fff;border:4px solid var(--zlato);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.kf-plzg input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--zlato)}
.kf-plzg input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--zlato-yark);outline-offset:3px}

/* сегментите */
.kf-seg{display:flex;flex-wrap:wrap;gap:6px}
.kf-seg label{position:relative;cursor:pointer}
.kf-seg input{position:absolute;opacity:0;pointer-events:none}
.kf-seg span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:40px;font-size:13.5px;font-weight:500;
  border:1px solid var(--linia);background:var(--fon-2);color:#dfe3ea;transition:background .2s,border-color .2s,color .2s}
.kf-seg label:hover span{border-color:rgba(255,255,255,.24)}
.kf-seg input:checked+span{background:var(--zlato);border-color:var(--zlato);color:#fff}
.kf-seg input:focus-visible+span{outline:2px solid var(--zlato-yark);outline-offset:2px}

/* цветовете */
.kf-cv-red{display:flex;flex-wrap:wrap;gap:10px}
.kf-cv-red label{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.kf-cv-red input{position:absolute;opacity:0;pointer-events:none}
.kf-cv-red i{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:box-shadow .2s,transform .2s var(--lek)}
.kf-cv-red span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--sivo-2)}
.kf-cv-red input:checked+i{box-shadow:0 0 0 2px var(--fon),0 0 0 4px var(--zlato);transform:scale(1.04)}
.kf-cv-red input:checked~span{color:#fff}
.kf-cv-red input:focus-visible+i{outline:2px solid var(--zlato-yark);outline-offset:4px}

/* броячите */
.kf-broi{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kf-broi .kf-et{margin:0}
.kf-broi-k{display:flex;align-items:center;border:1px solid var(--linia);border-radius:40px;background:var(--fon-2)}
.kf-broi-k button{width:44px;height:40px;font-size:20px;line-height:1;color:#fff;border-radius:40px;transition:background .2s}
.kf-broi-k button:hover:not(:disabled){background:rgba(255,255,255,.07)}
.kf-broi-k button:disabled{color:rgba(255,255,255,.25);cursor:default}
.kf-broi-k output{min-width:26px;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700}

/* превключвателят */
.kf-prekl{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;color:#dfe3ea}
.kf-prekl input{position:absolute;opacity:0;pointer-events:none}
.kf-prekl-k{flex:0 0 44px;width:44px;height:26px;border-radius:26px;background:rgba(255,255,255,.14);position:relative;transition:background .25s}
.kf-prekl-k::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s var(--lek)}
.kf-prekl input:checked+.kf-prekl-k{background:var(--zlato)}
.kf-prekl input:checked+.kf-prekl-k::after{transform:translateX(18px)}
.kf-prekl input:focus-visible+.kf-prekl-k{outline:2px solid var(--zlato-yark);outline-offset:2px}

/* итогът, залепнал отдолу */
.kf-itog{position:sticky;bottom:0;margin-top:auto;z-index:4;background:rgba(11,15,22,.97);border-top:1px solid var(--linia);
  padding:18px 32px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -24px 40px -20px rgba(0,0,0,.6)}
.kf-itog-red{display:flex;justify-content:space-between;gap:18px;align-items:flex-end}
.kf-itog-cena,.kf-itog-srok{display:flex;flex-direction:column;gap:3px;min-width:0}
.kf-itog-srok{text-align:right;align-items:flex-end}
.kf-itog-cena>span,.kf-itog-srok>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sivo-2)}
.kf-itog-cena b{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(20px,1.9vw,26px);line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.kf-itog-srok b{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1.05}
.kf-itog small{font-size:12.5px;color:var(--zlato-yark)}
.kf-itog-srok small{color:var(--sivo)}
.kf-itog-knopki{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.kf-itog-knopki .knopka{flex:1 1 auto;justify-content:space-between}
.kf-kopirai{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:48px;border:1px solid var(--linia);
  font-size:13.5px;color:#dfe3ea;transition:border-color .2s,color .2s}
.kf-kopirai svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.kf-kopirai:hover{border-color:rgba(255,255,255,.3)}
.kf-kopirai.gotovo{border-color:var(--zlato);color:var(--zlato-yark)}

/* ═════ РАЗБИВКАТА И ГРАФИКЪТ ═════ */
.kf-razbivka{border-top:1px solid var(--linia)}
.kf-razb-red{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.kf-razbivka .glavno{margin:14px 0 18px;font-size:clamp(30px,3.6vw,50px)}
.kf-opis{color:var(--sivo);font-size:14.5px;margin-bottom:18px;max-width:560px}
.kf-tablica table{width:100%;border-collapse:collapse;font-size:15px}
.kf-tablica td{padding:11px 0;border-top:1px solid var(--linia);color:#dfe3ea}
.kf-tablica td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:16px}
.kf-tablica tfoot td{border-top:1px solid rgba(255,255,255,.22);font-weight:700;color:#fff;font-size:17px;padding-top:15px}
.kf-grafik{display:flex;flex-direction:column;gap:7px}
.kf-g-red{display:grid;grid-template-columns:170px 1fr 30px;align-items:center;gap:12px;font-size:13.5px}
.kf-g-red span{color:#dfe3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-g-red b{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sivo);text-align:right}
.kf-g-pista{position:relative;height:12px;background:rgba(255,255,255,.05);border-radius:3px}
.kf-g-pista i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--zlato);transition:left .5s var(--lek),width .5s var(--lek)}
.kf-g-red.cex span{color:var(--sivo)}
.kf-g-red.cex .kf-g-pista i{background:rgba(174,182,194,.5)}
.kf-g-skala{display:flex;justify-content:space-between;margin:6px 42px 0 182px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--sivo-2)}
.kf-kam-proces{display:flex;width:fit-content;align-items:center;gap:10px;margin-top:22px;color:var(--zlato-yark);font-weight:600;font-size:15px}
.kf-kam-proces+.kf-kam-proces{margin-top:12px}
.kf-kam-proces svg{width:18px;height:18px;transition:transform .25s var(--lek)}
.kf-kam-proces:hover svg{transform:translateX(4px)}
.kf-belejka{margin-top:36px;font-size:13px;color:var(--sivo-2);max-width:820px}
.kf-zapitvane .forma-karta{max-width:640px}
.kf-zapitvane .forma-karta .oko{margin-bottom:12px}

/* ═════ ПО-ТЕСНИ ЕКРАНИ ═════ */
@media (max-width:1240px){.kf{grid-template-columns:minmax(0,1fr) 420px}.kf-glava,.kf-forma{padding-left:26px;padding-right:26px}.kf-itog{padding-left:26px;padding-right:26px}}
@media (max-width:1040px){
  /* В една колона решетката не дава място на залепването: клетката е колкото сцената.
     Като блок сцената залепва за цялата секция и стои горе, докато се пипат контролите. */
  .kf{display:block}
  .kf-scena{height:48vh;height:48svh;z-index:5}
  .kf-panel{border-left:0;min-height:0}
  .kf-glava{padding-top:26px}
  .kf-instr{top:auto;bottom:14px;left:14px}
  .kf-instr button span{display:none}
  .kf-instr button{width:40px;padding:0;justify-content:center}
  .kf-podskazka{left:auto;right:14px;bottom:24px;max-width:48%;text-align:right;font-size:11.5px}
  .kf-razb-red{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:720px){
  .kf-scena{height:42vh;height:42svh}
  .kf-glava{padding:22px 18px 4px}
  .kf-glava h1{font-size:34px}
  .kf-forma{padding:6px 18px 18px}
  .kf-itog{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .kf-itog-cena b{font-size:19px}
  .kf-itog-srok b{font-size:21px}
  .kf-itog-knopki{margin-top:10px}
  .kf-itog-knopki .knopka{height:46px}
  .kf-kopirai span{display:none}
  .kf-kopirai{width:46px;height:46px;padding:0;justify-content:center}
  .kf-g-red{grid-template-columns:118px 1fr 26px;gap:8px;font-size:12.5px}
  .kf-g-skala{margin-left:126px;margin-right:34px}
  .kf-etiketi span{font-size:11px;padding:3px 7px}
}
@media (max-width:720px){.kf-podskazka{display:none}}
/* режимът за чисти кадри при проверка (#snimka&cisto) */
.kf-cisto .kf{display:block}
.kf-cisto .kf-etiketi,.kf-cisto .kf-panel,.kf-cisto .glava,.kf-cisto .kf-instr,.kf-cisto .kf-podskazka,.kf-cisto .kf-scena::after{display:none}
.kf-cisto .kf-scena{height:100vh}

@media (prefers-reduced-motion:reduce){
  .kf-zar i{animation:none}
  .kf-g-pista i{transition:none}
}

/* ── ЕЗИЦИТЕ И НАЙ-ТЕСНИТЕ ЕКРАНИ (стоят накрая, за да бият основните правила) ── */
/* на руски сумата е „от … до … €“, по-дълга: по-дребно число, а надписът под срока стои на един ред */
html[lang="ru"] .kf-itog-cena b{font-size:clamp(18px,1.6vw,23px)}
.kf-itog-srok small{white-space:nowrap}
@media (max-width:400px){html[lang="ru"] .kf-tablica td:last-child{white-space:normal}}
/* най-тесните телефони: цената по пера минава на два реда преди „до“, а заглавието на формата се събира */
@media (max-width:359px){.kf-tablica td:last-child{white-space:normal}.kf-zapitvane .glavno{font-size:24px}}