/*
 * Шестте карти на 3ddesign.edufacturing.com и пътят след щракване (Краси, 28.10.2026). Светъл вид „Сцена без рамка“ от одобрения макет v5: моделите стоят на
 * страницата върху мек бял кръг светлина, без кутии и без рамки; името се подчертава в оранжево при задържане. Токените (--tx, --mu, --ln, --or, --te2, --s1)
 * са на корена .efcad-masa (uslugi-app-svetli.css); шрифтът е на страницата. Зарежда се само когато страницата има карти, между proektirane-masa.css и
 * uslugi-app-svetli.css. Всяко правило започва с .efv4.efcad-masa, за да бие общите правила за h2, h3, бутоните и списъците на светлия файл (той е зареден след този).
 * Кръговете (номерата на стъпките и отметката накрая) са тук, а не в proektirane-masa.css, където тестът пази, че няма кръгове.
 */
.efv4.efcad-masa{--k-zeleno:#1E7A4C;--k-izhod:cubic-bezier(.23,1,.32,1);--k-liniya2:#B9C1CA}
.efv4.efcad-masa :is(.karti,.potok,.masa)[hidden]{display:none}
@media (scripting:none){.efv4.efcad-masa :is(.karti,.potok){display:none}}

/* ---------------------------------------------------------------- картите */
.efv4.efcad-masa .karti{padding-top:0;padding-bottom:clamp(24px,3.4vw,48px)}   /* страничните полета са на main.efcad-masa > * (proektirane-masa.css): не се нулират */
.efv4.efcad-masa .karti-vapros{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.03em;color:var(--tx);text-wrap:balance}
.efv4.efcad-masa .karti-podsk{margin:8px 0 clamp(18px,2.6vw,30px);color:var(--mu);font-size:clamp(16px,1.4vw,18px)}
.efv4.efcad-masa .mreja{list-style:none;margin:0;padding:0;max-width:1320px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2.4vw,34px) clamp(12px,2vw,26px)}
@media (max-width:1000px){.efv4.efcad-masa .mreja{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.efv4.efcad-masa .mreja{grid-template-columns:minmax(0,1fr)}}
.efv4.efcad-masa .mreja > li{min-width:0}
/* непълният последен ред е в средата, без празно място вдясно (решение 20, 28.10.2026: картите са пет, докато машината не дойде);
   решетката е на двойни колони, ширината на картата е същата като на 3 и 2 колони */
@media (min-width:1001px){
  .efv4.efcad-masa .mreja{grid-template-columns:repeat(6,minmax(0,1fr))}
  .efv4.efcad-masa .mreja > li{grid-column:span 2}
  .efv4.efcad-masa .mreja > li:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
  .efv4.efcad-masa .mreja > li:nth-child(3n+1):last-child{grid-column:3 / span 2}
}
@media (min-width:641px) and (max-width:1000px){
  .efv4.efcad-masa .mreja{grid-template-columns:repeat(4,minmax(0,1fr))}
  .efv4.efcad-masa .mreja > li{grid-column:span 2}
  .efv4.efcad-masa .mreja > li:nth-child(odd):last-child{grid-column:2 / span 2}
}
.efv4.efcad-masa .karta{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-rows:auto 1fr;width:100%;height:100%;cursor:pointer;overflow:hidden;background:transparent}
.efv4.efcad-masa .karta:focus-visible{outline:3px solid var(--te2);outline-offset:3px}
.efv4.efcad-masa .scena{position:relative;display:block;aspect-ratio:4/3;max-width:100%}
.efv4.efcad-masa .karta .scena{background:radial-gradient(54% 42% at 50% 64%, #FFFFFF 0%, rgba(255,255,255,.6) 42%, rgba(255,255,255,0) 72%)}
/* плакатът е на мястото на модела, докато той не е готов; model-viewer идва отгоре и се показва, щом се зареди */
.efv4.efcad-masa .karta-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity 400ms ease}
.efv4.efcad-masa .scena.gotov .karta-poster{opacity:0}
.efv4.efcad-masa .scena model-viewer{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent;--poster-color:transparent;--progress-bar-height:0px;--progress-bar-color:transparent;opacity:0;transition:opacity 500ms ease}   /* без сивата лента на зареждането: плакатът е мястото на модела, докато не е готов */
.efv4.efcad-masa .scena model-viewer.vidim{opacity:1}
.efv4.efcad-masa .karta .scena model-viewer{pointer-events:none;clip-path:inset(0 0 1px 0)}   /* при дробна височина на сцената (телефон: 268,5 px) въртящият се модел оставяше тъмен ред на долния ръб на платното; там сянката е прозрачна */
.efv4.efcad-masa .tekst{display:grid;gap:4px;align-content:start;text-align:center;padding:2px 8px 0}
.efv4.efcad-masa .ime{font-size:clamp(19px,1.8vw,23px);font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--tx);text-decoration:underline 3px transparent;text-underline-offset:7px;transition:text-decoration-color 200ms ease}
.efv4.efcad-masa .karta:hover .ime,.efv4.efcad-masa .karta:focus-visible .ime{text-decoration-color:var(--or)}
.efv4.efcad-masa .red{color:var(--mu);font-size:15.5px;line-height:1.45}
.efv4.efcad-masa .karti-masa{margin:clamp(18px,2.4vw,30px) 0 0;font-size:16px}
.efv4.efcad-masa .karti-masa a{color:var(--te2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.efv4.efcad-masa .karti-masa a:hover{color:var(--tx)}
.efv4.efcad-masa #efz-app{scroll-margin-top:16px}

/* ---------------------------------------------------------------- пътят след щракване */
.efv4.efcad-masa .potok{padding-top:clamp(6px,1.4vw,16px);padding-bottom:clamp(40px,5vw,64px)}
.efv4.efcad-masa .potok-gore{display:flex;align-items:center;gap:18px;margin-bottom:clamp(18px,2.6vw,28px);min-height:44px}
.efv4.efcad-masa .vrashtane{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;border:1.5px solid var(--k-liniya2);background:#FFFFFF;color:var(--tx);font-weight:700;font-size:15px;transition:border-color 160ms ease, transform 160ms ease-out}
.efv4.efcad-masa .vrashtane:hover{border-color:var(--tx)}
.efv4.efcad-masa .vrashtane:active{transform:scale(.97)}
.efv4.efcad-masa .vrashtane:focus-visible{outline:3px solid var(--te2);outline-offset:2px}
.efv4.efcad-masa .napredak{flex:1;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--mu);font-variant-numeric:tabular-nums}
.efv4.efcad-masa .napredak[hidden]{display:none}
.efv4.efcad-masa .napredak .pista{flex:1;max-width:420px;height:6px;border-radius:3px;background:var(--ln);overflow:hidden}
.efv4.efcad-masa .napredak .pista i{display:block;height:100%;border-radius:3px;background:var(--or);transition:width 320ms var(--k-izhod)}
.efv4.efcad-masa .potok h2.vapros{margin:0;font-size:clamp(28px,3.6vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--tx);text-wrap:balance}
.efv4.efcad-masa .potok h2.vapros:focus{outline:none}
.efv4.efcad-masa .podsk{margin:8px 0 0;color:var(--mu);font-size:17px;max-width:62ch}
.efv4.efcad-masa .potok h3.malko-zag{margin:26px 0 10px;font-size:15px;font-weight:700;color:var(--mu);letter-spacing:0}
.efv4.efcad-masa .plochki{margin-top:clamp(18px,2.4vw,26px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.efv4.efcad-masa .plochki.dve{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px}
/* на телефон три избора стават редове (картинка вляво, текст вдясно): без самотна плочка на последния ред */
@media (max-width:640px){
  .efv4.efcad-masa .plochki{grid-template-columns:minmax(0,1fr)}
  .efv4.efcad-masa .plochki.dve{grid-template-columns:repeat(2,minmax(0,1fr))}
  .efv4.efcad-masa .plochki:not(.dve) .plochka{grid-template-rows:none;grid-template-columns:136px minmax(0,1fr);align-items:center}
}
.efv4.efcad-masa .plochka{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-rows:auto 1fr;background:#FFFFFF;border:2px solid #E1E5EA;border-radius:16px;overflow:hidden;transition:border-color 160ms ease, transform 160ms ease-out, box-shadow 200ms ease}
.efv4.efcad-masa .plochka:hover{border-color:var(--k-liniya2);box-shadow:0 10px 24px rgba(28,35,43,.08)}
.efv4.efcad-masa .plochka:active{transform:scale(.98)}
.efv4.efcad-masa .plochka:focus-visible{outline:3px solid var(--te2);outline-offset:2px}
.efv4.efcad-masa .plochka[aria-pressed="true"]{border-color:var(--or);box-shadow:0 0 0 3px rgba(242,106,27,.2)}
.efv4.efcad-masa .plochka.statichna{cursor:default}
.efv4.efcad-masa .plochka.statichna:hover{border-color:#E1E5EA;box-shadow:none}
.efv4.efcad-masa .plochka.statichna:active{transform:none}
.efv4.efcad-masa .kartinka{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:radial-gradient(90% 80% at 50% 35%, #FFFFFF 0%, #F1F3F5 60%, #E4E8EC 100%)}
.efv4.efcad-masa .plochka .pt{display:grid;gap:2px;padding:12px 14px 14px;align-content:start}
.efv4.efcad-masa .plochka b{font-size:17px;line-height:1.25;color:var(--tx)}
.efv4.efcad-masa .plochka small{font-size:14px;color:var(--mu);line-height:1.35}
@media (max-width:640px){.efv4.efcad-masa .plochka b{font-size:15.5px}.efv4.efcad-masa .plochka .pt{padding:10px 11px 12px}}

/* „Как става“: големият модел вляво, четирите стъпки вдясно */
.efv4.efcad-masa .ek-kak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,44px);align-items:start}
@media (max-width:900px){.efv4.efcad-masa .ek-kak{grid-template-columns:minmax(0,1fr)}}
.efv4.efcad-masa .ek-kak .scena{border-radius:18px;overflow:hidden;cursor:grab;touch-action:pan-y;background:radial-gradient(90% 80% at 50% 35%, #FFFFFF 0%, #F1F3F5 60%, #E1E6EA 100%)}
.efv4.efcad-masa .ek-kak .scena:active{cursor:grabbing}
.efv4.efcad-masa .ek-kak .scena model-viewer{pointer-events:auto}
.efv4.efcad-masa .modeli-btn{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.efv4.efcad-masa .model-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1.5px solid var(--k-liniya2);background:#FFFFFF;color:var(--tx);font-weight:600;font-size:15px}
.efv4.efcad-masa .model-btn:hover{border-color:var(--tx)}
.efv4.efcad-masa .model-btn[aria-pressed="true"]{border-color:var(--or);box-shadow:0 0 0 3px rgba(242,106,27,.2)}
.efv4.efcad-masa .model-btn:focus-visible{outline:3px solid var(--te2);outline-offset:2px}
.efv4.efcad-masa .kak-stapki{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:st}
.efv4.efcad-masa .kak-stapki li{position:relative;background:#FFFFFF;border:1px solid #E1E5EA;border-radius:14px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.efv4.efcad-masa .kak-stapki li::before{counter-increment:st;content:counter(st);position:absolute;top:10px;left:10px;z-index:1;width:28px;height:28px;border-radius:50%;background:var(--tx);color:#FFFFFF;font-weight:800;font-size:14px;display:grid;place-items:center}
.efv4.efcad-masa .kak-stapki .pt{display:grid;gap:2px;padding:10px 12px 12px;align-content:start}
.efv4.efcad-masa .kak-stapki b{font-size:16px;line-height:1.25;color:var(--tx)}
.efv4.efcad-masa .kak-stapki small{font-size:14px;color:var(--mu);line-height:1.35}

/* бутоните на пътя */
.efv4.efcad-masa .deystviya{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.efv4.efcad-masa .glaven{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:12px;background:var(--or);color:#14191F;font-weight:800;font-size:18px;transition:transform 160ms ease-out, background-color 160ms ease}
.efv4.efcad-masa .glaven:hover{background:#FF8A47}
.efv4.efcad-masa .glaven:active{transform:scale(.97)}
.efv4.efcad-masa .glaven:focus-visible{outline:3px solid var(--te2);outline-offset:3px}
.efv4.efcad-masa .glaven[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.efv4.efcad-masa .vtori{all:unset;cursor:pointer;font-weight:600;color:var(--te2);text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
.efv4.efcad-masa .vtori:focus-visible{outline:3px solid var(--te2);outline-offset:2px;border-radius:4px}
.efv4.efcad-masa .belezhka-p{color:var(--mu);font-size:14.5px;margin:10px 0 0}
.efv4.efcad-masa .deystviya .belezhka-p{margin:0}

/* снимки и файлове */
.efv4.efcad-masa .kachi{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:840px;min-height:84px;margin-top:18px;padding:12px 16px;border:2px dashed #AEB7C1;border-radius:16px;background:#F8F9FA;color:var(--tx);font-weight:700;font-size:18px;text-align:center;transition:border-color 160ms ease, background-color 160ms ease}
.efv4.efcad-masa .kachi:hover{border-color:var(--or)}
.efv4.efcad-masa .kachi:focus-visible{outline:3px solid var(--te2);outline-offset:2px}
.efv4.efcad-masa .kachi.dobaveni{border-style:solid;border-color:var(--k-zeleno);background:#EEF7F2;color:#155C39}
.efv4.efcad-masa .fayl-vhod{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.efv4.efcad-masa .fayl-spisak{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-width:840px}
.efv4.efcad-masa .fayl-spisak:empty{display:none}
.efv4.efcad-masa .fr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 8px 8px 14px;border:1px solid var(--ln);border-radius:10px;background:#FFFFFF;color:var(--tx);font-size:15px}
.efv4.efcad-masa .fr.bad{border-color:var(--sv-greshka)}
.efv4.efcad-masa .fr.ok{border-color:var(--k-zeleno)}
.efv4.efcad-masa .fr .fn{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;font-weight:600}
.efv4.efcad-masa .fr .fs,.efv4.efcad-masa .fr .fm{color:var(--mu)}
.efv4.efcad-masa .fr.bad .fm{color:var(--sv-greshka-t)}
.efv4.efcad-masa .fr .fx{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--te2);font-size:22px;line-height:1}
.efv4.efcad-masa .fr .fx:hover{background:var(--s2)}
.efv4.efcad-masa .fr .fx:focus-visible{outline:3px solid var(--te2);outline-offset:-2px}
.efv4.efcad-masa .fayl-greshka{margin:8px 0 0;color:var(--sv-greshka-t);font-weight:600;max-width:840px}
.efv4.efcad-masa .fayl-greshka:empty{display:none}

/* цената */
.efv4.efcad-masa .cena{display:grid;gap:6px;margin-top:12px}
.efv4.efcad-masa .cena-chislo{font-size:clamp(46px,7.4vw,84px);line-height:1;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--tx)}
.efv4.efcad-masa .cena-za{color:var(--mu);font-size:17px}
.efv4.efcad-masa .oferta-belezhka{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:#FFFFFF;border:1px solid #E1E5EA;max-width:760px;color:var(--sv-tekst)}

/* контактът */
.efv4.efcad-masa .forma{display:grid;gap:8px;max-width:520px;margin-top:20px}
.efv4.efcad-masa .forma label{display:block;font-weight:600;margin-top:6px;color:var(--tx)}
.efv4.efcad-masa .forma input[type=text],.efv4.efcad-masa .forma input[type=email],.efv4.efcad-masa .forma input[type=tel]{font:inherit;font-size:17px;width:100%;min-height:50px;padding:13px 14px;border:1.5px solid var(--k-liniya2);border-radius:10px;background:#FFFFFF;color:var(--tx)}
.efv4.efcad-masa .forma input:focus{outline:3px solid rgba(11,111,134,.3);border-color:var(--te2)}
.efv4.efcad-masa .forma fieldset.srok{border:0;margin:10px 0 0;padding:0;min-width:0}
.efv4.efcad-masa .forma fieldset.srok legend{padding:0;font-weight:600;margin-bottom:8px;color:var(--tx)}
.efv4.efcad-masa .srok-plochki{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:560px){.efv4.efcad-masa .srok-plochki{grid-template-columns:repeat(2,minmax(0,1fr))}}
.efv4.efcad-masa .srok-plochka{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;text-align:center;min-height:56px;padding:6px 8px;border:2px solid #E1E5EA;border-radius:12px;background:#FFFFFF;color:var(--tx);font-weight:600;font-size:15px;line-height:1.25;transition:border-color 160ms ease, box-shadow 200ms ease}
.efv4.efcad-masa .srok-plochka:hover{border-color:var(--k-liniya2)}
.efv4.efcad-masa .srok-plochka[aria-pressed="true"]{border-color:var(--or);box-shadow:0 0 0 3px rgba(242,106,27,.2)}
.efv4.efcad-masa .srok-plochka:focus-visible{outline:3px solid var(--te2);outline-offset:2px}
.efv4.efcad-masa .forma .saglasie{margin-top:10px}
.efv4.efcad-masa .forma .saglasie label{display:flex;align-items:flex-start;gap:12px;font-weight:400;font-size:15px;color:var(--sv-tekst);margin:0}
.efv4.efcad-masa .forma .saglasie input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--or)}
.efv4.efcad-masa .forma .saglasie a{color:var(--te2);text-decoration:underline;text-underline-offset:3px}
.efv4.efcad-masa .forma .err{margin:0;min-height:0;color:var(--sv-greshka-t);font-size:14.5px;font-weight:600}
.efv4.efcad-masa .forma .err:empty{display:none}
.efv4.efcad-masa .forma .forma-greshka{margin:6px 0 0;color:var(--sv-greshka-t);font-weight:600}
.efv4.efcad-masa .forma .forma-greshka:empty{display:none}
.efv4.efcad-masa .forma .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* краят */
.efv4.efcad-masa .otmetka{width:72px;height:72px;border-radius:50%;background:var(--k-zeleno);position:relative;margin-bottom:18px}
.efv4.efcad-masa .otmetka::after{content:"";position:absolute;left:26px;top:15px;width:17px;height:32px;border:solid #FFFFFF;border-width:0 6px 6px 0;transform:rotate(45deg)}
.efv4.efcad-masa .etapi-kratko{margin:14px 0 0;padding-left:22px;display:grid;gap:6px;font-size:16px;max-width:62ch;list-style:decimal;color:var(--sv-tekst)}
.efv4.efcad-masa .etapi-kratko li::marker{color:var(--te2);font-weight:700}
.efv4.efcad-masa .nomer{font-size:16px;color:var(--tx);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .efv4.efcad-masa :is(.karta,.plochka,.glaven,.vrashtane,.srok-plochka,.napredak .pista i,.karta-poster,.scena model-viewer,.ime){transition:none}
}