/*
 * Общият светъл вид на осемте страници с услуги (Краси, 26.10.2026). Зарежда се след efv4.css и преди собствения css на услугата.
 * Обхватът е класът .sv-svetla на main (не id), затова всяка услуга го получава с един клас. Собственик: S1.
 * efv4.css не се редактира, тук се припокрива. Токените --pr-* са свързани със --sv-*, та правилата на printirane.css
 * от вида var(--pr-x, старият цвят) стават светли под .sv-svetla.
 */
/* Golos Text (SIL OFL 1.1, github.com/googlefonts/golos-text), на нашия сървър в /wp-content/uploads/shriftove/, кирилица и латиница поотделно */
@font-face{font-family:"Golos Text";src:url(/wp-content/uploads/shriftove/golos-text-cyrillic.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";src:url(/wp-content/uploads/shriftove/golos-text-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* токени: студийно сиво #ECEEF1, мастило #1C232B, оранжево #F26A1B за действието; за дребен оранжев текст #B8480C (контраст над 4,5) */
.efv4.sv-svetla{--bg:#ECEEF1;--s1:#FFFFFF;--s2:#F6F7F9;--gl:#FFFFFF;--ln:#D5DAE0;--ln2:#C3CAD1;--tx:#1C232B;--mu:#5B6673;--or:#F26A1B;--te:#0B6F86;--te2:#0B6F86;
  --sv-silen:#1C232B;--sv-tekst:#3B4652;--sv-tekst2:#1C232B;--sv-greshka:#C2311A;--sv-greshka-t:#8E2412;--sv-karta:#FFFFFF;--sv-karta2:#FFFFFF;
  --sv-zona:rgba(242,106,27,.05);--sv-zona2:rgba(242,106,27,.12);--sv-izbran:rgba(242,106,27,.08);--sv-or-tekst:#B8480C;
  /* съвместимост с printirane.css */
  --pr-silen:var(--sv-silen);--pr-tekst:var(--sv-tekst);--pr-tekst2:var(--sv-tekst2);--pr-greshka:var(--sv-greshka);--pr-greshka-t:var(--sv-greshka-t);--pr-karta:var(--sv-karta);--pr-karta2:var(--sv-karta2);
  --pr-zona:var(--sv-zona);--pr-zona2:var(--sv-zona2);--pr-izbran:var(--sv-izbran);--pr-or-tekst:var(--sv-or-tekst);
  background:var(--bg);color:var(--tx);font-family:"Golos Text",system-ui,sans-serif}
.efv4.sv-svetla::before{content:none;background:none}
.efv4.sv-svetla :is(h1,h2,h3){font-family:"Golos Text",system-ui,sans-serif;color:var(--tx);letter-spacing:-.02em}
.efv4.sv-svetla h2{font-weight:800;letter-spacing:-.03em}
.efv4.sv-svetla h3{font-weight:700}
.efv4.sv-svetla .lead{color:var(--sv-tekst)}
.efv4.sv-svetla .btn{font-family:"Golos Text",system-ui,sans-serif;border-radius:12px}
.efv4.sv-svetla .btn:active{transform:scale(.97)}
.efv4.sv-svetla .btn-p{background:var(--or);color:#1C232B}
.efv4.sv-svetla .btn-p:hover{background:#FF8A47}
.efv4.sv-svetla .btn-s{background:#FFFFFF;border-color:#1C232B;color:#1C232B}
.efv4.sv-svetla .btn-s:hover{border-color:var(--or);color:#1C232B}
.efv4.sv-svetla :is(.routes > p,.routes b,.trust b,.note strong,.list b,.teh b,.mat-spisak .tag){color:var(--tx)}
.efv4.sv-svetla .note{color:var(--sv-tekst);background:var(--s1);border-left-color:var(--or)}
.efv4.sv-svetla .tbl td{color:var(--tx)}
.efv4.sv-svetla .tbl caption{font-family:"Golos Text",system-ui,sans-serif;color:var(--tx)}
.efv4.sv-svetla .flow li::before{background:var(--s1)}
.efv4.sv-svetla .primer-izbor select{background-color:var(--s1);color:var(--tx);font-family:"Golos Text",system-ui,sans-serif}
.efv4.sv-svetla :is(p,li,td,small) a:not(.btn){color:var(--te2)}
.efv4.sv-svetla :is(p,li,td,small) a:not(.btn):hover{color:var(--tx)}
.efv4.sv-svetla :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--or);outline-offset:3px}
.efv4.sv-svetla .spec .tag{color:var(--sv-or-tekst)}
.efv4.sv-svetla .primer-tbl td[data-efpr-broi] small[data-efpr-min]{color:var(--sv-or-tekst)}
.efv4.sv-svetla :is(.doverie svg,.list p svg,.routes a > svg:first-child,.geo svg){color:var(--or)}
.efv4.sv-svetla figure img{border-color:var(--ln);background:var(--s2)}
/* рисунките на скобата не са снимки: без рамка и без фон (иначе ги хваща горното правило за figure img) */
.efv4.sv-svetla .hero.sv-geroi .sv-kadar img{border:0;border-radius:0;background:none}

/* лентите: всеки раздел е на цялата ширина, бял (клас sv-bel) или студийно сив, с въздух и отдолу */
.efv4.sv-svetla section{padding:clamp(56px,6vw,96px) 0}
.sv-svetla section.sv-bel{background:#FFFFFF}
.efv4.sv-svetla .sec-head{max-width:44em;margin-bottom:clamp(24px,3vw,40px)}
.efv4.sv-svetla .sec-head p{color:var(--mu);font-size:18px}
.efv4.sv-svetla .doverie{background:#FFFFFF;border-color:var(--ln)}
.efv4.sv-svetla .doverie .w > p > span{color:var(--tx)}
.efv4.sv-svetla .cta .box{background:#FFFFFF;border:1px solid var(--ln);border-left:4px solid var(--or);border-radius:20px}
.efv4.sv-svetla .ai-adres{background:var(--s2);color:var(--tx)}
.efv4.sv-svetla .ai-telo .ai-primer{background:var(--s2);border-left-color:var(--or)}

/* ---------- първият екран по предназначение ---------- */
.efv4.sv-svetla .hero.sv-geroi.sv-geroi{min-height:0;display:block;padding:calc(74px + clamp(28px,3.4vw,56px)) 0 clamp(44px,5vw,80px);overflow:visible;background:var(--bg)}
.efv4.sv-svetla .hero.sv-geroi.sv-geroi::after{content:none}
.efv4.sv-svetla .hero.sv-geroi .w{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"zag scena" "upr scena";column-gap:clamp(32px,4.5vw,72px);row-gap:28px;align-items:start}
.efv4.sv-svetla .hero.sv-geroi .sv-zag{grid-area:zag;padding-top:8px}
.efv4.sv-svetla .hero.sv-geroi .sv-scena{grid-area:scena;position:sticky;top:96px}
.efv4.sv-svetla .hero.sv-geroi h1{font-size:inherit;line-height:1;order:0}
.efv4.sv-svetla .hero.sv-geroi .sv-h1-tema{display:block;margin-bottom:12px;font-size:clamp(17px,1.35vw,20px);font-weight:600;letter-spacing:0;color:var(--mu)}
/* разделителят между двете фрази е в текста, но не се вижда */
.efv4.sv-svetla .hero.sv-geroi .sv-razd{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.efv4.sv-svetla .hero.sv-geroi .sv-h1-v{display:block;max-width:11em;font-size:clamp(38px,4.4vw,62px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--tx)}
.efv4.sv-svetla .hero.sv-geroi .lead{margin-top:18px;max-width:30em;font-size:19px;line-height:1.55}
.efv4.sv-svetla .hero.sv-geroi .sv-lead2{margin-top:12px;max-width:34em;font-size:15.5px;line-height:1.55;color:var(--mu)}

/* изборът: четири задачи в една лента; избраната е тъмна с оранжева черта */
.efv4.sv-svetla .hero.sv-geroi .sv-upr.pusni{grid-area:upr;display:flex;flex-direction:column;gap:20px;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0}
.efv4.sv-svetla .hero.sv-geroi .sv-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border:1px solid var(--ln);border-radius:18px;overflow:hidden;background:#FFFFFF}
.efv4.sv-svetla .hero.sv-geroi .sv-seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.efv4.sv-svetla .hero.sv-geroi .sv-opt{position:relative;display:block;cursor:pointer}
.efv4.sv-svetla .hero.sv-geroi .sv-opt + .sv-opt{border-left:1px solid var(--ln)}
.efv4.sv-svetla .hero.sv-geroi .sv-opt input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.efv4.sv-svetla .hero.sv-geroi .sv-opt-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;min-height:112px;padding:18px 16px 20px;transition:background-color .2s ease,color .2s ease}
.efv4.sv-svetla .hero.sv-geroi .sv-opt-t svg{width:30px;height:30px}
.efv4.sv-svetla .hero.sv-geroi .sv-opt-t b{font-size:17px;font-weight:700;color:inherit}
.efv4.sv-svetla .hero.sv-geroi .sv-opt-t small{font-size:13px;opacity:.72}
.efv4.sv-svetla .hero.sv-geroi .sv-opt-t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:transparent}
.efv4.sv-svetla .hero.sv-geroi .sv-opt:hover .sv-opt-t{background:var(--s2)}
.efv4.sv-svetla .hero.sv-geroi .sv-opt input:checked + .sv-opt-t{background:#1C232B;color:#FFFFFF}
.efv4.sv-svetla .hero.sv-geroi .sv-opt input:checked + .sv-opt-t::after{background:var(--or)}
.efv4.sv-svetla .hero.sv-geroi .sv-opt input:focus-visible + .sv-opt-t{outline:3px solid var(--or);outline-offset:-3px}
.efv4.sv-svetla .hero.sv-geroi .sv-zashto{max-width:36em;font-size:17px;line-height:1.55;color:var(--sv-tekst)}
.efv4.sv-svetla .hero.sv-geroi .sv-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));margin:16px 0 0;border-top:1px solid var(--ln2)}
.efv4.sv-svetla .hero.sv-geroi .sv-spec div{padding:12px 16px 0 0}
.efv4.sv-svetla .hero.sv-geroi .sv-spec dt{font-size:13.5px;color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi .sv-spec dd{margin:2px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.efv4.sv-svetla .hero.sv-geroi .sv-cena{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.efv4.sv-svetla .hero.sv-geroi .sv-cena span{font-size:14px;color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi .sv-cena b{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tx)}
/* правилата от ядрото: кратък списък с малък оранжев маркер отляво */
.efv4.sv-svetla .hero.sv-geroi ul.sv-pravila{list-style:none;margin:14px 0 0;padding:0}
.efv4.sv-svetla .hero.sv-geroi ul.sv-pravila li{position:relative;padding-left:16px;font-size:14px;color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi ul.sv-pravila li + li{margin-top:6px}
.efv4.sv-svetla .hero.sv-geroi ul.sv-pravila li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:1px;background:var(--or)}

/* файлът: зоната и бутонът на един ред; атрибутите и класовете на скрипта са същите като в efpr_l_karta() */
.efv4.sv-svetla .hero.sv-geroi .sv-fail{display:flex;gap:10px;align-items:stretch}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .zona{flex:1;flex-direction:row;justify-content:flex-start;gap:14px;min-height:64px;padding:12px 18px;text-align:left;border:2px dashed var(--ln2);border-radius:14px;background:#FFFFFF}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .zona svg{font-size:26px;color:var(--or)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .zona-t{max-width:none;font-weight:600;color:var(--tx)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .zona:hover,.efv4.sv-svetla .hero.sv-geroi .sv-upr .zona.vlachi,.efv4.sv-svetla .hero.sv-geroi .sv-upr.vlachi .zona{border-style:solid;border-color:var(--or);background:var(--sv-zona)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr.zaeto .zona{border-color:var(--ln2)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr.zaeto .zona::after{background:var(--or)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .btn{width:auto;min-height:64px;margin:0;padding:0 24px;border-radius:14px;white-space:nowrap}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .sast{margin:0}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .sast:empty{display:none}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .formati{margin:0;font-size:14px;line-height:1.5;color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .pod{margin:0;border-top:1px solid var(--ln);color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi .sv-obeshtanie{font-size:15px;color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .geo{margin:0;background:#FFFFFF;border-left-color:var(--or);color:var(--sv-tekst)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .cena-ot{margin:0;font-size:15px;font-weight:600;text-align:left;color:var(--tx)}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .tel{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin:0;font-weight:600;color:var(--tx);order:0}
.efv4.sv-svetla .hero.sv-geroi .sv-upr .tel svg{color:var(--or)}

/* сцената: кадърът, значката и вложката; сцената стои, докато изборът се превърта */
.efv4.sv-svetla .hero.sv-geroi .sv-platno{position:relative;width:100%;aspect-ratio:1/1;max-height:640px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#F6F7F9 0%,#E1E5EA 100%)}
.efv4.sv-svetla .hero.sv-geroi .sv-kadar{position:absolute;inset:0;margin:0}
.efv4.sv-svetla .hero.sv-geroi .sv-kadar picture,.efv4.sv-svetla .hero.sv-geroi .sv-kadar img{display:block;width:100%;height:100%}
.efv4.sv-svetla .hero.sv-geroi .sv-kadar img{object-fit:contain;border:0;border-radius:0;background:none}
.efv4.sv-svetla .hero.sv-geroi .sv-znachka{position:absolute;left:22px;bottom:20px;display:inline-flex;align-items:center;gap:10px;margin:0;padding:9px 14px;border-radius:10px;background:#FFFFFF;box-shadow:0 6px 18px rgba(28,35,43,.1);font-size:15px;font-weight:600}
/* цветът на маркера по задача идва от css на услугата; тук е неутралният */
.efv4.sv-svetla .hero.sv-geroi .sv-znachka span{width:22px;height:4px;border-radius:2px;background:#1C232B}
.efv4.sv-svetla .hero.sv-geroi .sv-vlozhka{position:absolute;top:18px;right:18px;width:min(236px,44%);padding:12px 12px 6px;border-radius:16px;background:#FFFFFF;box-shadow:0 10px 30px rgba(28,35,43,.12)}
.efv4.sv-svetla .hero.sv-geroi .sv-vl-h{margin:0;font-size:14px;font-weight:700}
.efv4.sv-svetla .hero.sv-geroi .sv-vl-p{margin:2px 0 4px;font-size:13px;color:var(--mu)}
.efv4.sv-svetla .hero.sv-geroi .sv-vlozhka img{display:block;width:100%;height:auto;border:0;background:none}

@media (max-width:1020px){
  .efv4.sv-svetla .hero.sv-geroi .w{grid-template-columns:minmax(0,1fr);grid-template-areas:"zag" "scena" "upr"}
  .efv4.sv-svetla .hero.sv-geroi .sv-scena{position:relative;top:auto}
}
@media (max-width:640px){
  .efv4.sv-svetla .hero.sv-geroi.sv-geroi{padding-top:calc(84px + 12px)}
  .efv4.sv-svetla .hero.sv-geroi .lead{font-size:17px}
  .efv4.sv-svetla .hero.sv-geroi .sv-seg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .efv4.sv-svetla .hero.sv-geroi .sv-opt + .sv-opt{border-left:0}
  .efv4.sv-svetla .hero.sv-geroi .sv-opt:nth-of-type(even){border-left:1px solid var(--ln)}
  .efv4.sv-svetla .hero.sv-geroi .sv-opt:nth-of-type(n+3){border-top:1px solid var(--ln)}
  .efv4.sv-svetla .hero.sv-geroi .sv-opt-t{min-height:96px;padding:14px}
  .efv4.sv-svetla .hero.sv-geroi .sv-platno{border-radius:22px}
  .efv4.sv-svetla .hero.sv-geroi .sv-vlozhka{position:static;width:auto;margin-top:12px;border:1px solid var(--ln);box-shadow:none}
  .efv4.sv-svetla .hero.sv-geroi .sv-vlozhka img{width:auto;max-width:100%;max-height:180px;margin:0 auto}
  .efv4.sv-svetla .hero.sv-geroi .sv-znachka{left:14px;bottom:14px}
  .efv4.sv-svetla .hero.sv-geroi .sv-fail{flex-direction:column}
  .efv4.sv-svetla .hero.sv-geroi .sv-upr .btn{width:100%}
  .efv4.sv-svetla .hero.sv-geroi .sv-cena b{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .efv4.sv-svetla .hero.sv-geroi .sv-opt-t{transition:none}
}

/* роботът на приставката за въвеждане (edufacturing-onboarding, #efo-launch) покрива избора при реверса и консултациите; обиколката там е за страницата „За Краси“, не за услугата */
body:has(main.sv-svetla) #efo-launch{display:none}