/*
 * CNC, приложението на cncfactory: стилът на страницата и на проверката (EDi, 14.10.2026), върху общия вид efv4.css.
 * Всичко е под .efv4.cn3 (единственото извън него е нулирането на полето на body). Нови класове с представка .cn-.
 * Бутоните са правоъгълни с малък ъгъл, цели за пръст поне 44 px, фокусът се вижда, без украса. Шрифтовете и променливите са на сайта.
 * От 27.10.2026 (uslugi-dizajn S2) поддомейнът е светъл и само приложението: цветовете са светли, а горната лента, подножието и общите токени идват от
 * uslugi-app-svetli.css, който се зарежда последен. Тук няма токените на лендинга (тест cnc-celi): цветовете са от токените на efv4 (--tx, --mu, --ln, --or ...), които
 * uslugi-app-svetli.css задава светли, или са написани направо.
 */
html,body{margin:0;background:#ECEEF1}
.efv4.cn3 *,.efv4.cn3 *::before,.efv4.cn3 *::after{box-sizing:border-box}
.efv4.cn3 [hidden]{display:none !important}
.efv4.cn3 :where(b,strong){font-weight:600}
.efv4.cn3 :is(p,li,td,small,dd) a:not(.btn){color:var(--te2);text-decoration:underline;text-underline-offset:3px}
.efv4.cn3 :is(p,li,td,small,dd) a:not(.btn):hover{color:var(--tx)}

/* ---------- бутони ---------- */
.efv4.cn3 .btn{border-radius:6px;font-weight:600;min-height:48px;background:var(--or);color:#1C232B;border-color:transparent;text-align:center}
.efv4.cn3 .btn:hover{background:#FF8A47}
.efv4.cn3 .btn.ghost{background:#FFFFFF;color:var(--tx);border-color:#1C232B}
.efv4.cn3 .btn.ghost:hover{border-color:var(--or);color:var(--tx)}
.efv4.cn3 .btn[disabled]{background:#E4E7EB;color:var(--mu);border:1px solid var(--ln2);cursor:not-allowed}

/* ---------- глава: една редица (общата лента е в uslugi-app-svetli.css); по-горе е само логото, езикът и телефонът ---------- */
.efv4.cn3 header.top img{display:block;width:154px;height:auto}
/* CADslice (cadslice.com): логото А2 е със собствена пропорция (503,5 на 188,85), затова се задава височината, а не ширината от 154 px.
   Височината е 56 px (46 px на телефон), както на живата страница на CADslice (prototip.css): при 32 px надписът „инкубатор на бъдещето“ не се чете,
   а лентата е 72 px. Файлът носи чисто поле (37,25 от 188,85 единици): отрицателното поле връща буквата C на ръба на съдържанието */
.efv4.cn3.cadslice header.top img{height:56px;width:auto;margin-left:-11px}
@media (max-width:640px){
  .efv4.cn3.cadslice header.top img{height:46px;margin-left:-9px}
}
.efv4.cn3 .ezik{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:0 12px;border:1px solid var(--ln2);border-radius:6px;color:var(--tx);font-weight:600;text-decoration:none}
.efv4.cn3 .ezik:hover{border-color:var(--te2)}
.efv4.cn3 header.top .ezik{margin-left:auto}
.efv4.cn3 .ez-predlozhenie{display:flex;align-items:center;flex:1 0 100%;min-height:44px;color:var(--te2);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* лентата е една редица; само когато подсказката за другия език се покаже, тя пада на втори ред под нея */
.efv4.cn3 header.top .w:has(.ez-predlozhenie:not([hidden])){flex-wrap:wrap}

/* ---------- първи екран: проверката е самото съдържание ---------- */
.efv4.cn3 .hero{min-height:0;align-items:flex-start;padding:clamp(24px,3vw,48px) 0 clamp(36px,4vw,60px)}
.efv4.cn3 .hero .w{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}
.efv4.cn3 .hero h1{font-size:clamp(28px,3vw,42px);line-height:1.14}
.efv4.cn3 .card{padding:clamp(16px,2vw,26px);border-radius:8px;min-width:0}
.efv4.cn3 .app{min-width:0}

/* четирите входа: плочки като на лендинга (избраната е тъмна с оранжева черта), без хапчета; стоят в картата над приложението */
.efv4.cn3 .cn-vhodove{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 20px;border:1px solid var(--ln);border-radius:12px;overflow:hidden;background:var(--ln)}
.efv4.cn3 .cn-v{position:relative;min-height:64px;padding:12px 14px 14px;border:0;border-radius:0;background:#FFFFFF;color:var(--tx);font:600 15px/1.3 "Golos Text",system-ui,sans-serif;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.efv4.cn3 .cn-v:hover{background:var(--s2)}
.efv4.cn3 .cn-v[aria-pressed="true"]{background:#1C232B;color:#FFFFFF;box-shadow:inset 0 -4px 0 var(--or)}
.efv4.cn3 .cn-v:focus-visible{outline:3px solid var(--or);outline-offset:-3px}

/* ---------- приложението ---------- */
.efv4.cn3 .cn-intro{margin:0 0 16px;color:var(--tx);font-size:16px;line-height:1.55}
.efv4.cn3 .cn-bel{margin:8px 0 0;color:var(--mu);font-size:14px;line-height:1.5}
.efv4.cn3 .cn-drop{display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px;border:2px dashed var(--ln2);border-radius:8px;background:rgba(242,106,27,.05);color:var(--tx);text-align:center;cursor:pointer}
.efv4.cn3 .cn-drop:hover,.efv4.cn3 .cn-drop.cn-nad{border-color:var(--or);background:rgba(242,106,27,.12)}
.efv4.cn3 .cn-drop:focus-within{outline:3px solid var(--or);outline-offset:3px}
.efv4.cn3 .cn-drop input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.efv4.cn3 .cn-rez{margin-top:18px}
.efv4.cn3 .cn-rez:empty{display:none}
.efv4.cn3 .cn-rez h3{margin:0 0 10px;font-size:19px}
.efv4.cn3 .cn-rez h4{margin:18px 0 8px;font-size:16px;color:var(--tx)}
.efv4.cn3 .cn-failat{margin:0 0 10px;color:var(--tx);font-size:15px;overflow-wrap:anywhere}
.efv4.cn3 .cn-dl{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:0;margin:0;border-top:1px solid var(--ln)}
.efv4.cn3 .cn-dl dt,.efv4.cn3 .cn-dl dd{margin:0;padding:10px 0;border-bottom:1px solid var(--ln);font-size:16px;line-height:1.45}
.efv4.cn3 .cn-dl dt{color:var(--mu);padding-right:12px}
.efv4.cn3 .cn-dl dd{color:var(--tx);min-width:0;overflow-wrap:anywhere}
.efv4.cn3 .cn-dl small{color:var(--mu);font-size:13px}
.efv4.cn3 .cn-zashto{display:block;margin-top:4px;color:var(--mu);font-size:14px;font-weight:400}
.efv4.cn3 .cn-prov{margin:0;padding:0;list-style:none}
.efv4.cn3 .cn-prov li{margin:0 0 8px;padding:8px 12px;border-left:3px solid var(--ln2);background:#F6F7F9;color:var(--tx);font-size:15px;line-height:1.5}
.efv4.cn3 .cn-prov li.cn-p-ok{border-left-color:var(--te2)}
.efv4.cn3 .cn-prov li.cn-p-vnimanie{border-left-color:var(--or)}
.efv4.cn3 .cn-prov li.cn-p-ne{border-left-color:#C2311A}
.efv4.cn3 .cn-prov small{color:var(--mu)}
.efv4.cn3 .cn-greshka{margin:12px 0 0;color:#8E2412;font-size:15px;line-height:1.5}
.efv4.cn3 .cn-greshka:not(:empty){padding:10px 14px;border-left:3px solid #C2311A;background:rgba(194,49,26,.07)}

/* форма */
.efv4.cn3 .cn-forma{margin-top:22px;padding-top:20px;border-top:1px solid var(--ln)}
.efv4.cn3 .cn-forma h3{margin:0 0 14px;font-size:19px}
.efv4.cn3 .cn-pole{margin:14px 0 0;min-width:0}
.efv4.cn3 .cn-pole label{display:block;margin:0 0 6px;color:var(--tx);font-size:15px;font-weight:600}
.efv4.cn3 .cn-pole small{display:block;margin-top:6px;color:var(--mu);font-size:13px;line-height:1.45}
.efv4.cn3 .cn-pole :is(input,select,textarea){display:block;width:100%;min-height:48px;padding:0 12px;border:1px solid #8D97A2;border-radius:6px;background:#FFFFFF;color:var(--tx);font:400 16px/1.4 "Golos Text",system-ui,sans-serif}
.efv4.cn3 .cn-pole textarea{min-height:96px;padding:10px 12px;resize:vertical}
.efv4.cn3 .cn-pole :is(input,select,textarea):hover{border-color:var(--te2)}
.efv4.cn3 .cn-fs{margin:18px 0 0;padding:0;border:0}
.efv4.cn3 .cn-fs legend{padding:0;margin:0 0 4px;color:var(--tx);font-size:17px;font-weight:600}
.efv4.cn3 .cn-saglasie{display:flex;align-items:flex-start;gap:12px;margin-top:16px;color:var(--tx);font-size:15px;line-height:1.5}
.efv4.cn3 .cn-saglasie input{flex:none;width:24px;height:24px;margin:10px 0 0;accent-color:var(--or)}
.efv4.cn3 .cn-saglasie label{display:block;flex:1 1 auto;padding:10px 0}
.efv4.cn3 .cn-izprati{width:100%;margin-top:18px}

/* връзки към другите услуги и край */
.efv4.cn3 .cn-vrazki{display:grid;gap:10px;margin:0 0 16px}
.efv4.cn3 .cn-vrazki h3{margin:0;font-size:19px}
.efv4.cn3 .cn-vr{display:block;padding:12px 14px;border:1px solid var(--ln2);border-radius:6px;background:#FFFFFF;color:var(--tx);text-decoration:none}
.efv4.cn3 .cn-vr:hover{border-color:var(--te2)}
.efv4.cn3 .cn-vr b{display:block}
.efv4.cn3 .cn-vr small{display:block;margin-top:2px;color:var(--mu);font-size:14px}
.efv4.cn3 .cn-gotovo{padding:6px 0;outline:none}
.efv4.cn3 .cn-gotovo h3{margin:0 0 10px;font-size:21px}
.efv4.cn3 .cn-gotovo p{margin:8px 0 14px;color:var(--tx)}

/* „CADslice е част от EduFacturing“: свой малък ред под адреса и връзките (подножието е flex-wrap, 100% го слага на собствен ред), приглушен като тях */
.efv4.cn3 .chast-ot{flex:0 0 100%;margin:0;font-size:14px}

@media (max-width:900px){
	.efv4.cn3 .hero .w{grid-template-columns:minmax(0,1fr)}
	.efv4.cn3 .cn-dl{grid-template-columns:minmax(0,1fr)}
	.efv4.cn3 .cn-dl dt{padding-bottom:0;border-bottom:0}
}

/* на телефона efv4.css дава order само на h1 и lead, а връзката и картата остават с order:0 и излизат пред заглавието: редът е заглавие, връзка „Как работи“, картата с входовете */
@media (max-width:640px){
  .efv4.cn3 .hero h1{order:1}
  .efv4.cn3 .hero .sv-kak{order:2}
  .efv4.cn3 .hero .card{order:5;margin-top:18px}
  .efv4.cn3 .cn-vhodove{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .efv4.cn3 .cn-v{transition:none}
}