/* Платформа за поръчки — Мултиплейс */
:root{
  /* фонът е малко по-наситен от белите линии на мрежата — колкото да личат */
  --paper:#F8F7F3; --card:#fff; --ink:#16181D; --ink2:#4A4F58; --ink3:#8A8F99;
  --line:#E3E2DC; --mag:#C22560; --mag-s:#FBEAF1; --cyan:#0E93B5; --cyan-s:#E7F4F8;
  --amber:#B97A08; --amber-s:#FCF3DE; --ok:#2E7D52; --ok-s:#E6F2EB;
  --sh:0 8px 24px rgba(22,24,29,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Фонът е шестоъгълна мрежа — същата форма като в логото. Начертана е, не е
   снимка: няколкостотин байта в самия CSS, остра на всякакъв екран и не иска
   заявка към сървъра. Стои закрепена (fixed), за да не пълзи при превъртане. */
body{
  background:var(--paper) url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.35' height='108' viewBox='0 0 62.35 108'%3E\
%3Cg fill='none' stroke='%23fff' stroke-width='2.4'%3E\
%3Cpath d='M31.18 18 L62.35 36 L62.35 72 L31.18 90 L0 72 L0 36 Z'/%3E\
%3Cpath d='M0 -36 L31.18 -18 L31.18 18 L0 36 L-31.18 18 L-31.18 -18 Z'/%3E\
%3Cpath d='M62.35 -36 L93.53 -18 L93.53 18 L62.35 36 L31.18 18 L31.18 -18 Z'/%3E\
%3Cpath d='M0 72 L31.18 90 L31.18 126 L0 144 L-31.18 126 L-31.18 90 Z'/%3E\
%3Cpath d='M62.35 72 L93.53 90 L93.53 126 L62.35 144 L31.18 126 L31.18 90 Z'/%3E\
%3C/g%3E%3C/svg%3E") repeat fixed;
  color:var(--ink); line-height:1.5;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  padding-bottom:96px; -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}

/* --- шапка --- */
.top{
  position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
}
.brand{flex:0 0 auto; display:block; line-height:0}
.brand img{height:34px; width:auto; display:block}
/* логото „online MULTIPLACE.INFO" — показват го металните ленти (киоск и сайт) */
.brand .brand-kiosk{display:none}
@media (max-width:560px){ .brand img{height:26px} }
.steps{display:flex; gap:5px; align-items:center; color:var(--ink3); font-size:.78rem; flex-wrap:wrap}
.steps b{color:var(--ink)}

/* връзка обратно към основния сайт */
.tosite{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink2); text-decoration:none; font-size:.78rem; font-weight:600;
  transition:border-color .15s, color .15s, background .15s;
}
.tosite:hover,.tosite:focus-visible{border-color:var(--mag); color:var(--mag); background:var(--mag-s); outline:none}
.tosite .ar{font-size:.9em; line-height:1}
@media (max-width:560px){
  .top{padding:10px 12px; gap:8px}
  .tosite{padding:6px 10px; font-size:.72rem}
  .tosite .lbl-long{display:none}   /* остава само „← Сайт" */
}

.wrap{max-width:920px; margin:0 auto; padding:22px 16px 0}
h1{font-size:1.5rem; margin:0 0 6px; letter-spacing:-.01em; text-wrap:balance}
h2{font-size:.78rem; margin:0 0 12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3)}
h2 i{font-style:normal; text-transform:none; letter-spacing:0}
.sub{color:var(--ink2); margin:0 0 20px; max-width:62ch}
.hint{color:var(--ink3); font-size:.85rem; margin:10px 0 0}

/* --- избор на вид --- */
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-top:20px}
@media (max-width:900px){ .choices{grid-template-columns:repeat(2,1fr)} }

.choice{
  font:inherit; cursor:pointer; text-align:center; background:var(--card);
  border:2px solid var(--line); border-radius:14px; padding:24px 14px; color:var(--ink);
}
.choice:hover{border-color:var(--mag)}
.choice .ic{display:block; font-size:2.2rem; margin-bottom:8px}
.choice b{display:block; font-size:1.1rem}
.choice span{display:block; color:var(--ink3); font-size:.85rem; margin-top:5px}
/* Контурните икони (.ico) се показват от металните правила (киоск и сайт);
   емоджито (.ic) остава само като резерва, ако стилът не се зареди. */
.choice .ico{display:none}
/* шестата карта „Как се поръчва" — показват я металните правила (киоск и сайт) */
.kstapki{display:none}

/* --- качване --- */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  border:2px dashed var(--line); border-radius:14px; background:var(--card);
  padding:34px 18px; text-align:center;
}
.drop:hover,.drop.over{border-color:var(--mag); background:var(--mag-s)}
.dropic{font-size:1.8rem; color:var(--mag)}
.drop b{font-size:1.05rem}
.dropsub{color:var(--ink3); font-size:.85rem}
.uplist{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.uprow{
  display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:.9rem;
}
.uprow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uprow .sz{color:var(--ink3); font-size:.8rem; font-variant-numeric:tabular-nums}
.prog{height:5px; border-radius:3px; background:var(--line); overflow:hidden; width:90px}
.prog i{display:block; height:100%; background:var(--mag); width:0; transition:width .2s}
.uprow.ok .prog i{background:var(--ok)}
/* махане още от списъка при качването — без да се минава напред */
.uprm{flex:0 0 auto; font:inherit; font-size:.9rem; line-height:1; width:28px; height:28px;
  border-radius:7px; cursor:pointer; border:1px solid var(--line);
  background:var(--card); color:var(--ink3)}
.uprm:hover{border-color:var(--mag); color:var(--mag); background:var(--mag-s)}
.uprow.err{border-color:var(--mag); background:var(--mag-s)}

/* --- карти на артикулите --- */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden}
.card.bad{border-color:#EAD9AC; background:#FFFDF7}
.chead{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px}
.chead b{font-size:1rem; word-break:break-word}
.csub{display:block; color:var(--ink3); font-size:.82rem; margin-top:3px}
.cprice{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.crow{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:11px 15px;
  border-top:1px solid #EEEDE7; background:#FCFCFA}
.crow.fin{border-top-style:dashed; background:var(--card)}

.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-wrap:wrap}
.seg button{font:inherit; font-size:.85rem; font-weight:600; padding:7px 12px; border:0;
  background:var(--card); color:var(--ink2); cursor:pointer}
.seg button.on{background:var(--ink); color:var(--paper)}
.step{display:inline-flex; align-items:center; gap:9px}
.step button{width:34px; height:34px; font-size:1.1rem; font-weight:700; border-radius:8px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer}
.step output{min-width:2ch; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
/* количеството се въвежда и от клавиатурата */
.step input.qty{width:64px; height:34px; padding:0 6px; font:inherit; font-weight:700;
  text-align:center; font-variant-numeric:tabular-nums; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; background:var(--paper)}
.step input.qty:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:var(--cyan)}
.lab{font-size:.82rem; color:var(--ink3)}
.chk{display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--ink2); cursor:pointer}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:.84rem; font-weight:600; padding:7px 13px; border-radius:99px;
  border:1px solid var(--line); background:var(--card); color:var(--ink2); cursor:pointer}
.chip i{font-style:normal; font-weight:400; opacity:.6; font-size:.78rem; margin-left:4px}
.chip.on{background:var(--cyan); border-color:var(--cyan); color:#fff}
/* падащите менюта за довършителните работи */
.fsel{display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink2);
  flex:1 1 260px; min-width:0}
.fsel > span{color:var(--ink3); white-space:nowrap; font-size:.8rem}
.fsel select{font:inherit; font-size:.84rem; padding:7px 9px; flex:1; min-width:0;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink)}
.fsel select:focus{outline:2px solid var(--cyan); outline-offset:1px}
.fsel i{font-style:normal}
.finlab{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); width:100%}
/* свитото поле с довършителните опции */
.finbar{gap:10px}
.finbar .fintog{color:var(--ink2); font-weight:600}
.finbar .fintog:hover{color:var(--mag)}
.finbar .finall{color:#0A6C86; border-color:var(--cyan)}
.finbar .finall:hover{background:var(--cyan-s)}
.finsum{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%}
.lab.ok2{color:var(--ok); font-weight:700}

.pill{font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap}
.pill.roll{background:var(--cyan-s); color:#0A6C86}
.pill.warn{background:var(--amber-s); color:var(--amber)}
.pill.col{background:var(--mag-s); color:var(--mag)}
.pill.bw{background:#EEEFF1; color:var(--ink2)}
.del{width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--ink3); cursor:pointer; font:inherit; flex:none}
.del:hover{border-color:var(--mag); color:var(--mag)}

.sumbox{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:9px; margin-top:4px}
.sumrow{display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink2)}
.sumrow b{margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums}

/* --- карта на снимка --- */
.card.photo{overflow:visible}
.phbody{display:flex; gap:16px; padding:14px}
.phpic{flex:0 0 190px; display:flex; flex-direction:column; align-items:center; gap:6px}
/* прегледът е самият лист — вижда се точно какво ще излезе */
.paper{position:relative; display:block; width:190px; max-width:100%; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 2px 8px rgba(22,24,29,.16); line-height:0}
.paper{background-repeat:no-repeat}
.paper img{width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none}
.zoomrow{gap:8px}
input.zoom{flex:1; min-width:110px; accent-color:var(--mag)}
.zval{font-size:.82rem; color:var(--ink3); font-variant-numeric:tabular-nums; min-width:44px}
.paper.drag{cursor:grab; touch-action:none}
.paper.dragging{cursor:grabbing}
.paper.dragging img{opacity:.92}
.paper.empty{display:flex; align-items:center; justify-content:center; height:140px;
  color:var(--ink3); font-size:.82rem; line-height:1.4}
.btn.rot{width:42px; padding:9px 0; font-size:1.1rem; line-height:1}
.btn.tiny{padding:7px 12px; font-size:.8rem; font-weight:500; color:var(--ink3)}
.orient{font-size:.75rem; color:var(--ink3)}
.phopt{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px}
.chead2{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.chead2 b{font-size:.98rem; word-break:break-word}
.phrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.phrow.tags{gap:8px}
.seg.wrap{flex-wrap:wrap}
.frsel{font:inherit; font-size:.84rem; padding:7px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink); max-width:100%;
  flex:1 1 220px}
.frsel:focus{outline:2px solid var(--cyan); outline-offset:1px}
.unit{font-size:.82rem; color:var(--ink3); font-variant-numeric:tabular-nums}
input.dim{width:76px; font:inherit; font-size:.95rem; padding:7px 9px; text-align:center;
  border:1px solid var(--line); border-radius:8px; font-variant-numeric:tabular-nums}
.pill.ok{background:var(--ok-s); color:var(--ok)}
.pill.amber{background:var(--amber-s); color:var(--amber)}
@media (max-width:560px){
  .phbody{flex-direction:column}
  .phpic{flex:none; align-self:flex-start}
  .picwrap img{max-width:150px; max-height:150px}
}

/* ── снимкова карта: заглавие отгоре, снимка вляво, икони вдясно ──────────
   Класът „ph2" е САМО на снимките. Широкоформатът и артът също носят
   „card photo" (плюс „wide" / „art") и остават с досегашната подредба —
   затова всяко правило тук е закачено за ph2, а не за .phbody.          */
.card.ph2 .phhead{display:flex; justify-content:space-between;
  align-items:flex-start; gap:12px; padding:12px 14px 0}
.card.ph2 .phhead b{font-size:.98rem; word-break:break-word}
.card.ph2 .phbody{align-items:flex-start; padding:10px 14px 12px}
.card.ph2 .phpic{flex:0 1 190px; min-width:118px}
.card.ph2 .phrow.tags{padding:0 14px 12px}
.card.ph2 .phrow.tags:empty{display:none}

/* плъзгачът е ВЕДНАГА под снимката и широк колкото нея */
/* Всичко на ЕДИН ред: плъзгач, стойност, „−"/„+" и „100%" (иконата ⟲).
   Без wrap — плъзгачът се свива, вместо бутон да пада отдолу (20.08.2026). */
.phzoom{display:flex; flex-wrap:nowrap; align-items:center; gap:5px;
  width:100%; margin-top:2px}
.phzoom input.zoom{flex:1 1 30px; min-width:0}
.phzoom .zval{flex:0 0 auto; min-width:36px; text-align:right; font-size:.74rem}

/* „−"/„+"/„⟲" — иконни бутони, всичките от еднакъв размер (03.09.2026).
   ⚠ Редът живее в колоната на МИНИАТЮРАТА (`.phpic{flex:0 1 190px}`) — 190px
   за пет органа общо. Първият опит държеше „100%" като текст с подложка и
   плъзгачът се сви до невидима точка (12px от 190, проверено на живо). Затова
   „100%" също е тясна икона, не текст — всеки пиксел отива на лентата, не на
   бутона. Затова и на киоска бутоните НЕ растат: тук пространството е по-
   скъпо от удобството на по-голям бутон. */
.phzoom .zstep{
  flex:0 0 auto; width:26px; height:26px; padding:0; line-height:1;
  font:inherit; font-size:.95rem; font-weight:700; color:var(--ink2);
  background:var(--card); border:1px solid var(--line); border-radius:7px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.phzoom .zstep.zr{ font-size:.85rem }
.phzoom .zstep:active{ background:var(--mag-s); border-color:var(--mag); color:var(--mag) }

/* двете полета, катинарчето и „мм" вървят заедно — само отметката
   „двустранно" може да падне на нов ред */
.dimset{display:flex; align-items:center; gap:6px; flex:0 0 auto}

/* бутоните вдясно — САМО икони; какво правят пише в title и aria-label */
.phicons{display:flex; flex-direction:column; gap:8px; flex:0 0 auto}
.phic{position:relative; width:46px; height:46px; padding:0; font:inherit;
  font-size:1.2rem; line-height:1; display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--ink2);
  border:1px solid var(--line); border-radius:10px; background:var(--card)}
.phic:hover{border-color:var(--cyan); color:var(--cyan)}
.phic.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* Размерът и тиражът са ОТКРИТИ — не в панел. Четат се, без да се пипа нищо;
   каквото е скрито в меню, се пропуска (искане на Траян, 17.08.2026). */
.card.ph2 .phrow.phsize{padding:0 14px 8px; gap:8px}
.card.ph2 .phrow.phcount{padding:0 14px 12px; gap:10px}
/* капси и подлепяне при широкоформата — на свой ред, под размера */
.card.ph2 .phrow.phfin{padding:0 14px 12px; display:block}

/* пейзажно и портретно стоят ЕДНО ДО ДРУГО — те са една двойка избор,
   а не две отделни решения (искане на Траян, 20.08.2026) */
.phicpair{display:flex; gap:6px}
.phic.sm{width:38px; height:38px; font-size:1rem}

/* бутонът за изрязване стои под плъзгача, в колонката на изделието */
.card.ph2 .phrow.artcrop{padding:6px 0 0; width:100%}
.card.ph2 .phrow.artcrop .btn{width:100%; text-align:center}

/* обяснението за безопасната зона е дълго — на цяла ширина, не в тясната
   колонка под изделието, където се разлива на седем реда */
.card.ph2 .phrow.safefull{padding:0 14px 10px}
.card.ph2 .phrow.safefull .safenote{max-width:none; margin:0}

/* катинарчето стои МЕЖДУ двете полета — то свързва тъкмо тях */
.chip.lockmid{padding:6px 9px; font-size:.86rem; line-height:1}

/* „Стандартни / размери" на два реда — иначе етикетът избутва полето при
   тесен екран. Еднаквата ширина държи и двата реда подравнени. */
.lab2r{min-width:74px; line-height:1.25; flex:0 0 auto}
/* размерът на широкоформата е в две полета, не от списък — те водят реда */
.card.ph2 .phrow.phsize input.dim{flex:0 1 88px; min-width:70px}
.card.ph2 .phrow.phsize .lab,
.card.ph2 .phrow.phcount .lab{min-width:48px}
/* пада надолу с цялата ширина на реда — избраното се вижда наведнъж */
.szsel{font:inherit; font-size:.9rem; font-weight:600; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--paper);
  color:var(--ink); flex:1 1 130px; max-width:100%}
.szsel:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:var(--cyan)}

/* отвореният панел — на цяла ширина, за да се съберат размерите */
.phpop{margin:0 14px 12px; padding:12px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); display:flex;
  flex-direction:column; gap:10px; box-shadow:0 4px 14px rgba(22,24,29,.07)}
.pophead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.poptitle{font-size:.86rem; font-weight:700; color:var(--ink)}

@media (max-width:560px){
  /* ТУК редът се пази: вдясно от снимката тъкмо там оставаше празно място,
     а опциите правеха картата дълга колона за превъртане. */
  .card.ph2 .phbody{flex-direction:row; gap:12px}
  .card.ph2 .phpic{align-self:flex-start}
}

/* сменил ли е клиентът разпознатото — както при страниците на документите */
.seg.changed{border-style:dashed; border-color:var(--cyan)}
.lab.chg{color:var(--cyan)}

/* --- карта на чертеж: прегледът е листът от ролката --- */
.dwbody{display:flex; gap:16px; padding:14px}
.dwpic{flex:0 0 150px; display:flex; flex-direction:column; align-items:center; gap:6px}
.dwopt{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px}
.paper.dsheet{width:150px; max-height:260px; display:flex; align-items:center;
  justify-content:center; background:#fff}
.dsheet .dwrap{position:relative; display:block; height:100%; line-height:0}
.dsheet .dwrap img{width:100%; height:100%; object-fit:contain; display:block}
/* завъртяният чертеж се обръща около центъра си — мерките му вече са разменени */
.dsheet .dwrap img.rot{position:absolute; top:50%; left:50%; object-fit:fill;
  transform:translate(-50%,-50%) rotate(90deg)}
.dsheet .nothumb{display:block; padding:10px 6px; font-size:.72rem; line-height:1.35;
  color:var(--ink3); text-align:center}
@media (max-width:560px){
  .dwbody{flex-direction:column}
  .dwpic{flex:none; align-self:flex-start}
}

/* --- решетка със страници --- */
.pagegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; margin-top:16px}
.pgcard{border:2px solid var(--line); border-radius:11px; background:var(--card); overflow:hidden;
  transition:border-color .12s}
.pgcard.off{opacity:.42}
/* рамка според това КАК ще се отпечата страницата */
.pgcard.iscol{border-color:var(--mag); box-shadow:0 0 0 3px var(--mag-s)}
.pgcard.iscol .pgthumb{background:var(--mag-s)}
.pgcard.isbw .pgthumb{background:#EDEDEA}
.pgcard.changed{border-style:dashed}
.pgthumb{position:relative; background:#F1F1EE; display:flex; align-items:center; justify-content:center;
  padding:8px; min-height:120px}
.pgthumb img{max-width:100%; height:auto; display:block; box-shadow:0 1px 4px rgba(0,0,0,.18); background:#fff}
.pgnum{position:absolute; top:6px; left:6px; background:rgba(22,24,29,.78); color:#fff;
  font-size:.72rem; font-weight:700; padding:2px 7px; border-radius:5px; font-variant-numeric:tabular-nums}
.pgmeta{padding:9px 10px; display:flex; flex-direction:column; gap:7px; font-size:.82rem}
.pgprice{font-weight:700; font-variant-numeric:tabular-nums}
.seg.tiny{align-self:stretch; display:flex}
.seg.tiny button{flex:1; padding:5px 4px; font-size:.78rem}
.uptag{font-size:.68rem; color:var(--amber); background:var(--amber-s); border-radius:5px;
  padding:2px 6px; line-height:1.35}
.upnote{font-style:normal; color:var(--amber)}
.pgsum{margin-left:auto; align-self:center; font-size:.9rem; color:var(--ink2); white-space:nowrap}
.pgsum b{color:var(--ink); font-variant-numeric:tabular-nums}
.pagesbtn{font-size:.88rem; padding:9px 14px; border-color:var(--cyan); color:var(--cyan); font-weight:700}
.pagesbtn:hover{background:var(--cyan-s)}
@media (max-width:640px){
  .pagegrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px}
  .pgsum{width:100%; margin:6px 0 0; text-align:right}
}

/* --- форма --- */
.block{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px}
.fields{display:flex; flex-wrap:wrap; gap:12px}
.fld{flex:1 1 220px; display:flex; flex-direction:column; gap:5px; font-size:.83rem; font-weight:600; color:var(--ink2)}
.fld i{font-style:normal; color:var(--mag)}
.fld input,textarea{font:inherit; font-size:1rem; font-weight:400; padding:11px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); width:100%}
textarea{resize:vertical}
input:focus-visible,textarea:focus-visible,button:focus-visible,.drop:focus-within{
  outline:2px solid var(--mag); outline-offset:1px}

/* --- как да я получите: на място или по куриер --- */
.fld.wide{flex:1 1 100%}
.fld select{font:inherit; font-size:1rem; font-weight:400; padding:11px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); width:100%}

/* поле с търсене: пише се и остават само съвпадащите — 214 града и 39 офиса
   не се гледат в падащ списък */
.fld.ac{position:relative}
.fld.ac input[disabled]{background:var(--paper); color:var(--ink3); cursor:not-allowed}
.acmenu{position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px;
  max-height:264px; overflow-y:auto; background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 10px 28px rgba(22,24,29,.13); padding:4px}
.acitem{padding:9px 11px; border-radius:7px; cursor:pointer; font-weight:400;
  font-size:.95rem; color:var(--ink); line-height:1.35}
.acitem b{font-weight:700}
.acitem small{display:block; color:var(--ink3); font-size:.82rem; margin-top:1px}
.acitem.sel,.acitem:hover{background:var(--mag-s)}
.acnone{padding:10px 11px; color:var(--ink3); font-size:.9rem; font-weight:400}
.acmore{padding:7px 11px 4px; color:var(--ink3); font-size:.8rem; font-weight:400}
.dlvbox{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; gap:12px}
/* бутон с лого на куриера: логото е двуцветно и на цветен фон се губи,
   затова избраният се показва с рамка, а не с обърнати цветове */
.chip.haslogo{padding:6px 13px; display:inline-flex; align-items:center; background:#fff}
.chip.haslogo .crrlogo{height:20px; width:auto; display:block}
.chip.haslogo.on{background:#fff; color:inherit; border-color:var(--cyan);
  box-shadow:0 0 0 1.5px var(--cyan)}
.dlvrow{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.dlvlab{font-size:.83rem; font-weight:600; color:var(--ink2); flex:0 0 62px}
.dlvchk{margin-top:2px}
.dlvpay{margin:0; padding:10px 12px; background:var(--mag-s); border-radius:9px; color:var(--ink2)}
#dlvOfficeInfo{flex:1 1 100%; margin:0}
#dlvOfficeInfo:empty{display:none}
@media (max-width:560px){ .dlvlab{flex:1 1 100%} }

/* --- лента долу --- */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--card);
  border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 16px; box-shadow:0 -4px 16px rgba(22,24,29,.06)}
.btn{font:inherit; font-weight:600; padding:12px 18px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink)}
.btn.primary{background:var(--mag); border-color:var(--mag); color:#fff; font-weight:700}
.btn.big{padding:14px 26px; font-size:1.05rem}
.btn[disabled]{opacity:.45; cursor:default}
.total{text-align:center; line-height:1.2}
.total small{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3)}
.total b{font-size:1.15rem; font-variant-numeric:tabular-nums}

/* --- готово --- */
.done{text-align:center; padding:26px 0}
.tick{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--ok-s);
  color:var(--ok); font-size:2rem; display:flex; align-items:center; justify-content:center}
.ordno{font-size:2rem; font-weight:800; letter-spacing:.06em; color:var(--mag); margin:8px 0;
  font-variant-numeric:tabular-nums}
.donefacts{display:grid; grid-template-columns:auto auto; gap:6px 16px; justify-content:center;
  margin:20px 0 24px; font-size:.95rem}
.donefacts dt{color:var(--ink3); text-align:right}
.donefacts dd{margin:0; font-weight:700}

/* --- зает екран --- */
.overlay{position:fixed; inset:0; z-index:60; background:rgba(250,250,247,.88);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--ink2)}
.spinner{width:38px; height:38px; border:3px solid var(--line); border-top-color:var(--mag);
  border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* запълване: чертежът покрива листа докрай, краищата излизат извън него */
.dwrap img.fill{width:100% !important; height:100% !important; object-fit:cover}
/* --- чертежи: свой размер на печата --- */
.dwcust{display:inline-flex; align-items:center; gap:6px; color:var(--ink2); font-size:.85rem}
.qty.wide{width:78px}

/* --- преглед преди изпращане --- */
.rvbox{border:1px solid var(--line); border-radius:12px; margin-bottom:14px;
  overflow:hidden; background:var(--card)}
.rvhead{display:flex; align-items:center; gap:10px; padding:11px 14px;
  font-weight:700; font-size:.95rem; background:var(--paper);
  border-bottom:1px solid var(--line)}
.rvcount{font-weight:400; font-size:.82rem; color:var(--ink3)}
.rvedit{margin-left:auto; font-size:.82rem}
.rvitem{display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:11px 14px; border-bottom:1px solid var(--line)}
.rvbox .rvitem:last-child{border-bottom:0}
.rvname{font-weight:600; word-break:break-word}
.rvsub{grid-column:1; color:var(--ink2); font-size:.88rem}
.rvprice{grid-row:1 / span 2; align-self:center; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.rvfacts .rvhead{background:var(--card)}
.rvdl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; padding:12px 14px}
.rvdl dt{color:var(--ink3); font-size:.88rem}
.rvdl dd{margin:0; font-weight:600}
.rvdl dd.hot{color:var(--amber)}
.rvdl dd small{display:block; font-weight:400; color:var(--ink3); font-size:.82rem}
.rvsum{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:12px; background:var(--ok-s); border:1px solid #BFE0D6}
.rvsum b{font-size:1.5rem; font-variant-numeric:tabular-nums; color:var(--ok)}
.rvnote{margin-top:8px}
@media (max-width:560px){
  .rvitem{grid-template-columns:1fr}
  .rvprice{grid-row:auto; text-align:right}
  .rvdl{grid-template-columns:1fr; gap:2px 0}
  .rvdl dd{margin-bottom:8px}
}

/* --- книжка (буклет) --- */
.bkbox{margin:8px 10px 10px; padding:10px 12px; border-radius:10px;
  background:#F2EEFB; border:1px solid #D8CDEF}
.bkbox .crow{padding:3px 0; border:0}
.bkrow{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.bkbox b{color:#4A3A82}

/* --- голям изглед на страница --- */
.zoomwrap{position:fixed; inset:0; z-index:70; background:rgba(22,24,29,.92);
  display:flex; flex-direction:column}
.zoombar{display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:rgba(0,0,0,.35); color:#fff; flex:0 0 auto}
.zoomtitle{font-size:.9rem; font-weight:600; min-width:9ch; text-align:center}
.zoomlvl{font-size:.82rem; min-width:5ch; text-align:center; opacity:.85;
  font-variant-numeric:tabular-nums}
.zoomsp{flex:1}
.zbtn{font:inherit; font-size:1.1rem; line-height:1; width:38px; height:38px;
  border-radius:9px; cursor:pointer; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1); color:#fff}
.zbtn:hover{background:rgba(255,255,255,.2)}
.zbtn[disabled]{opacity:.35; cursor:default}
.zbtn.close{border-color:rgba(255,255,255,.45)}
.zoomstage{flex:1; overflow:auto; display:flex; align-items:flex-start;
  justify-content:center; padding:16px; -webkit-overflow-scrolling:touch}
.zoomstage img{display:block; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.5);
  max-width:none; height:auto}
.zoomload{position:absolute; color:#fff; opacity:.8; font-size:.9rem; align-self:center}
.pgthumb{cursor:zoom-in}

/* --- екран за изрязване ---
   Рамката се дърпа за ъглите, а вътрешността се влачи. `touch-action:none` е
   задължително: без него телефонът превърта страницата вместо да мести
   рамката и изрязването е невъзможно с пръст (20.08.2026). */
.cropwrap{position:fixed; inset:0; z-index:75; background:rgba(22,24,29,.94);
  display:flex; flex-direction:column}
.cropstage{flex:1; display:flex; align-items:center; justify-content:center;
  padding:12px; min-height:0; overflow:hidden}
/* Кутията НЯМА свои ограничения: тя трябва да е точно колкото изображението,
   защото рамката за изрязване се мери в ПРОЦЕНТИ от нея. Имаше ли и тя
   max-height, кутията излизаше по-ниска от снимката (1200×396 срещу 1200×400)
   и рамката не лягаше върху изображението — при по-високи файлове разликата
   ставаше десетки пиксели и рамката висеше настрани (23.08.2026). */
.cropbox{position:relative; line-height:0; touch-action:none; user-select:none}
/* Таванът се задава от JavaScript (cropFitStage) спрямо реалната височина на
   сцената: „max-height:100%" не важи, когато кутията е с автоматична височина,
   и изображението изскачаше извън прозореца. */
.cropbox img{display:block; width:auto; height:auto}
.cropdim{position:absolute; background:rgba(22,24,29,.62); pointer-events:none}
.cropsel{position:absolute; border:2px solid #00FF66; cursor:move;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45)}
/* Водачът за снимка на документ: къде трябва да застане лицето. Стои ВЪТРЕ в
   рамката и не пречи на влаченето — затова pointer-events са изключени. */
.cropguide{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.cropguide .cg{position:absolute; inset:0; width:100%; height:100%}
.cropguide .cgzone{fill:rgba(0,255,102,.10)}
.cropguide .cgline{stroke:#00FF66; stroke-width:1; vector-effect:non-scaling-stroke;
  opacity:.85}
.cropguide .cgline.dash{stroke-dasharray:5 4; opacity:.6}
.cropguide .cgoval{fill:none; stroke:#00FF66; stroke-width:1.4;
  vector-effect:non-scaling-stroke; stroke-dasharray:6 5; opacity:.9}
.cropguide .cgtxt{position:absolute; left:50%; transform:translateX(-50%);
  font-size:.66rem; font-weight:600; color:#0B2E17; background:rgba(0,255,102,.85);
  border-radius:5px; padding:1px 6px; white-space:nowrap; letter-spacing:.01em}
.cropguide .cgtxt.top{top:3px}
.cropguide .cgtxt.bot{bottom:3px}
.cropsel .ch{position:absolute; width:26px; height:26px; background:#00FF66;
  border:2px solid #16181D; border-radius:4px; box-sizing:border-box}
.cropsel .ch[data-h="nw"]{left:-13px; top:-13px; cursor:nwse-resize}
.cropsel .ch[data-h="ne"]{right:-13px; top:-13px; cursor:nesw-resize}
.cropsel .ch[data-h="sw"]{left:-13px; bottom:-13px; cursor:nesw-resize}
.cropsel .ch[data-h="se"]{right:-13px; bottom:-13px; cursor:nwse-resize}
.cropfoot{flex:0 0 auto; background:var(--card); padding:12px 14px;
  display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow:auto}
.cropinfo{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.croprow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.croplab{display:flex; align-items:center; gap:6px; font-size:.84rem; color:var(--ink3)}
.croplab input{width:92px; font:inherit; font-size:.95rem; padding:7px 9px;
  text-align:center; border:1px solid var(--line); border-radius:8px;
  font-variant-numeric:tabular-nums}
#cropSugg{gap:6px}
#cropSugg .chip{font-size:.78rem; padding:5px 10px}

/* --- код за потвърждаване на поръчката --- */
.codecard{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px; width:min(420px, calc(100vw - 32px)); text-align:center;
  box-shadow:0 12px 40px rgba(22,24,29,.14)}
.codecard h2{margin:0 0 6px}
.codecard .sub{margin:0 0 16px}
#codeInput{font:inherit; font-size:1.9rem; font-weight:700; letter-spacing:.35em;
  text-align:center; padding:12px 10px 12px 18px; width:100%; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:var(--card);
  font-variant-numeric:tabular-nums}
.codeerr{min-height:20px; margin:8px 0 0; font-size:.85rem; color:var(--mag); font-weight:600}
.codeerr:empty{min-height:8px}
.coderow{display:flex; gap:10px; margin-top:14px}
.coderow .btn{flex:1}
.linkbtn{font:inherit; font-size:inherit; background:none; border:0; padding:0;
  color:var(--mag); font-weight:600; cursor:pointer; text-decoration:underline}

@media (max-width:640px){
  .choices{grid-template-columns:1fr}
  .wrap{padding-top:16px}
  h1{font-size:1.28rem}
  .btn{padding:11px 14px}
  .total b{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

.gdrow{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
/* `hidden` трябва да бие display:flex (11.09.2026): иначе „Добави още файлове" се
   виждаше на сайта и без нито един качен файл — app.js го крие, CSS го показваше. */
.gdrow[hidden]{display:none}
.gdrow .hint{margin:0}

.brand{color:inherit; text-decoration:none; cursor:pointer}
.brand:hover img{opacity:.82}

/* подравняване на изображението в листа — 3×3 решетка */
.aligngrid{display:inline-grid; grid-template-columns:repeat(3,30px); gap:4px}
.algc{width:30px; height:30px; font:inherit; font-size:.9rem; line-height:1;
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--ink3); cursor:pointer; padding:0}
.algc:hover{border-color:var(--cyan); color:var(--cyan)}
.algc.on{background:var(--cyan); border-color:var(--cyan); color:#fff}
.zoomrow .btn.tiny{min-width:34px}

/* безопасна зона върху изделието (арт печат) */
.paper{position:relative}
/* електриково зелено — личи и върху тъмни, и върху пъстри изображения;
   двойната линия (светла сянка) я държи видима на всякакъв фон */
.safezone{position:absolute; border:1.5px dashed #00FF66; border-radius:1px;
  pointer-events:none; opacity:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35)}
.safenote{display:block; color:var(--ink3); font-size:.76rem; line-height:1.35;
  margin-top:6px; max-width:220px; text-align:left}
.safenote b{color:var(--ink2)}

/* ── секции по вид печат: свой фон и по-тъмна шапка ── */
.ksec{border:1px solid var(--line); border-radius:12px; margin-bottom:16px;
  overflow:hidden}
.ksec .card{margin:10px; background:#fff}
.sechead{display:flex; align-items:center; gap:10px; padding:10px 14px;
  font-weight:700; font-size:.92rem}
.sechead .seccount{font-weight:400; font-size:.8rem; opacity:.75}
.sechead .secadd{margin-left:auto; font:inherit; font-size:.8rem; font-weight:700;
  padding:6px 12px; border-radius:99px; cursor:pointer; background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.15); color:inherit}
.sechead .secadd:hover{background:#fff}

.k-docs{background:#F4F7FB} .k-docs .sechead{background:#DCE7F5; color:#1F4E79}
.k-photos{background:#F2FAFC} .k-photos .sechead{background:#D3EDF5; color:#0A6C86}
.k-draw{background:#F7F4FB} .k-draw .sechead{background:#E4DCF3; color:#4A3A82}
.k-wide{background:#FFF9F1} .k-wide .sechead{background:#FBE6C9; color:#8A5A08}
.k-art{background:#FFF5F8} .k-art .sechead{background:#F9D9E4; color:#A31A4E}

/* чертежи: пакети за окомплектоване + напомняне */
.drawpacks{padding:0 12px 10px}
.drawwarn{background:#FCF3DE; border:1px solid #EAD9AC; color:#7A5206;
  border-radius:10px; padding:10px 12px; font-size:.85rem; line-height:1.45;
  margin-bottom:10px}
.packrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.packbtn{font:inherit; font-size:.85rem; font-weight:700; padding:8px 14px;
  border-radius:99px; cursor:pointer; background:#fff; color:#4A3A82;
  border:1px solid #C9BEE8}
.packbtn:hover{background:#F2EEFB}
.packbtn.on{background:#4A3A82; border-color:#4A3A82; color:#fff}
.packbtn i{font-style:normal; font-weight:400; opacity:.75; margin-left:6px;
  font-size:.78rem}
.packbtn.clr{color:var(--ink3); border-color:var(--line)}

/* довършителните при ЧЕРТЕЖИТЕ — цветен бутон, за да не се пропускат */
.finbar .fintog.hot{background:#4A3A82; border-color:#4A3A82; color:#fff;
  font-weight:700}
.finbar .fintog.hot:hover{background:#5C49A0; border-color:#5C49A0; color:#fff}
.finsum.none{color:#8A5A08; font-weight:700}

/* ============================================================================
   КИОСКЪТ В ОФИСА — включва се само с ?kiosk=1 (app.js слага class="kiosk").
   Клиент, който отвори сайта отвън, не вижда нищо оттук.
   Пипа се с пръст: органите са едри, нищо не разчита на посочване с мишка.
   ========================================================================== */

/* На тъчскрийн голото поле „Изберете файлове" и Google Drive нямат работа —
   вместо тях идва изборът „от флашка / от телефона". Google Drive би пратил
   клиента да влиза в личния си акаунт на общ компютър. */
body.kiosk .drop,
body.kiosk .gdrow { display:none }

/* Връзката „← Основен сайт" няма работа на киоска — от там няма накъде да
   излиза клиентът, а е и път извън заключения браузър (08.09.2026). */
body.kiosk .tosite { display:none }

/* ⚠ `hidden` трябва да БИЕ стила. Атрибутът hidden значи display:none, но идва
   от браузъра, а всяко правило тук е по-силно от него. Без следващия ред
   `display:grid` и `display:flex` по-долу печелят и киоск-органите се виждат
   и при обикновения клиент — точно това стана на 02.09.2026, забеляза го
   Траян. Правилото е тясно нарочно: пипа само тези два блока. */
.kpick[hidden], .qrbox[hidden]{ display:none }

.kpick{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:20px;
}
@media (max-width:760px){ .kpick{grid-template-columns:1fr} }

.kbtn{
  font:inherit; cursor:pointer; text-align:center; color:var(--ink);
  background:var(--card); border:2px solid var(--line); border-radius:18px;
  padding:34px 18px; min-height:170px;
}
.kbtn:active{ border-color:var(--mag); background:var(--mag-s) }
.kbtn .ic{ display:block; font-size:3rem; margin-bottom:10px }
.kbtn b{ display:block; font-size:1.35rem }
.kbtn span{ display:block; color:var(--ink3); font-size:1rem; margin-top:6px }

/* --- екранът с QR кода --- */
.qrbox{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:20px;
  background:var(--card); border:2px solid var(--line); border-radius:18px; padding:24px;
}
/* Бялото поле около кода е по стандарт: четири модула. При 12 пиксела беше
   под два и телефонът не хващаше кода от гланцовия екран (29.09.2026). */
.qrimg{ flex:0 0 auto; line-height:0; background:#fff; padding:32px; border-radius:12px }
.qrimg img, .qrimg canvas{ display:block }
.qrtxt{ flex:1; min-width:260px }
.qrtxt b{ font-size:1.25rem }
.qrtxt p{ color:var(--ink2); margin:8px 0 0 }
.qrhint{ font-size:.95rem; color:var(--ink3) }

/* Кодът се чете от разстояние и се набира на ръка, ако QR-ът не хване. */
.qrcode{
  font-size:2.1rem; font-weight:700; letter-spacing:.22em;
  font-variant-numeric:tabular-nums; color:var(--mag); margin:10px 0 4px;
}
.qrstate{ color:var(--ink2); min-height:1.6em; margin-bottom:14px }

/* --- едро пипане навсякъде в киоска --- */
body.kiosk .btn,
body.kiosk .choice{ min-height:56px; font-size:1.05rem }
body.kiosk input[type="text"],
body.kiosk input[type="tel"],
body.kiosk input[type="email"],
body.kiosk input[type="date"],
body.kiosk select,
body.kiosk textarea{ min-height:52px; font-size:1.05rem }

/* --- КИОСК: фонът -------------------------------------------------------
   Сребристо-сиви меки вълни с бели прозрачни ленти и растер от точки
   (11.09.2026, образец от Траян). Само на киоска — сайтът пази шестоъгълната
   мрежа. Рисуван е в SVG тук, в самия CSS: без файл за теглене, остър на
   всеки екран. Изходникът е четим в ТЕМА_КИОСК_ТЪЧСКРИЙН.md.
   Растерът е в два тона: бели точки върху по-сивото вдясно и долу, сиви
   точки върху светлото горе вляво — иначе белите се губят на бяло. */
/* фонът е общ за киоска и сайта — един и същ SVG, държан в променлива */
:root{ --fon-vylni:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E %3Cstop offset='0' stop-color='%23F3F4F5'/%3E%3Cstop offset='.55' stop-color='%23DDE0E3'/%3E%3Cstop offset='1' stop-color='%23C2C7CB'/%3E %3C/linearGradient%3E %3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E %3Cstop offset='0' stop-color='%23fff' stop-opacity='.9'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.1'/%3E %3C/linearGradient%3E %3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='0'%3E %3Cstop offset='0' stop-color='%23fff' stop-opacity='.05'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.25'/%3E %3C/linearGradient%3E %3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='0'%3E %3Cstop offset='0' stop-color='%238E949A' stop-opacity='.05'/%3E%3Cstop offset='.6' stop-color='%238E949A' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%238E949A' stop-opacity='.3'/%3E %3C/linearGradient%3E %3CradialGradient id='f'%3E %3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E %3C/radialGradient%3E %3Cpattern id='d' width='14' height='14' patternUnits='userSpaceOnUse'%3E %3Ccircle cx='7' cy='7' r='2.3' fill='%23fff'/%3E %3C/pattern%3E %3Cpattern id='e' width='14' height='14' patternUnits='userSpaceOnUse'%3E %3Ccircle cx='7' cy='7' r='2.1' fill='%239EA4AA'/%3E %3C/pattern%3E %3Cmask id='m'%3E %3Cellipse cx='1380' cy='260' rx='560' ry='400' fill='url(%23f)'/%3E %3Cellipse cx='560' cy='690' rx='380' ry='210' fill='url(%23f)'/%3E %3C/mask%3E %3Cmask id='n'%3E %3Cellipse cx='220' cy='170' rx='440' ry='300' fill='url(%23f)'/%3E %3C/mask%3E %3C/defs%3E %3Crect width='1600' height='900' fill='url(%23g)'/%3E %3Crect width='1600' height='900' fill='url(%23d)' opacity='.9' mask='url(%23m)'/%3E %3Crect width='1600' height='900' fill='url(%23e)' opacity='.35' mask='url(%23n)'/%3E %3Cpath d='M0 230 C460 205 900 430 1600 660 L1600 760 C880 520 440 300 0 320 Z' fill='url(%23s)'/%3E %3Cpath d='M0 70 C430 25 780 270 1600 480 L1600 610 C820 400 420 160 0 200 Z' fill='url(%23w)'/%3E %3Cpath d='M260 0 C610 130 930 430 1600 790 L1600 835 C900 480 560 170 150 0 Z' fill='url(%23v)'/%3E %3Cpath d='M-40 520 C380 430 820 500 1600 300 L1600 360 C860 560 400 500 -40 590 Z' fill='%23fff' opacity='.32'/%3E %3Cpath d='M0 900 L0 770 C330 705 720 700 1120 770 C1320 805 1490 850 1600 900 Z' fill='%23fff' opacity='.9'/%3E %3Cpath d='M0 70 C430 25 780 270 1600 480' fill='none' stroke='%23fff' stroke-width='3' opacity='.85'/%3E %3Cpath d='M260 0 C610 130 930 430 1600 790' fill='none' stroke='%23fff' stroke-width='2' opacity='.7'/%3E %3C/svg%3E") }
body.kiosk{
  background:#DDE0E3 var(--fon-vylni) center / cover no-repeat fixed;
}

/* --- КИОСК: рекламният екран --------------------------------------------
   Не е скрийнсейвър на Windows, а част от самата страница. Нарочно: скрийнсейвър
   на Windows се маха с докосване и оставя човека пред работния плот, а оттам до
   бъркотия е една крачка. Този тук не може да изведе никого извън браузъра.  */
.attract[hidden]{ display:none }        /* пак: атрибутът трябва да бие стила */

.attract{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:6vh 6vw; text-align:center; cursor:pointer;
  /* антрацит с шлифовка, като бутоните (11.09.2026, Траян). Отгоре мек отблясък,
     към краищата леко потъмняване — екранът е голям и без него изглежда плосък.
     Цветовете са променливите на body.kiosk: рекламният екран е само на киоска. */
  background:
    var(--metal-shlif),
    radial-gradient(90% 60% at 50% -10%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%),
    radial-gradient(140% 100% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%),
    var(--metal-ant);
  color:#fff;
  animation:atin .5s ease-out;
}
@keyframes atin{ from{opacity:0} to{opacity:1} }

.atlogo{ width:min(46vw,540px); height:auto; margin-bottom:2vh;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)) }

.atbig{
  font-size:clamp(2rem, 5.2vw, 4rem); font-weight:800; line-height:1.15;
  max-width:22ch; letter-spacing:-.01em;
}
.atsmall{
  font-size:clamp(1rem, 2.2vw, 1.6rem); color:#C9CCD4; max-width:34ch; line-height:1.45;
}
/* Смяната е плавна — рязката смяна на едър текст дърпа окото неприятно. */
.atbig, .atsmall{ transition:opacity .45s ease }
/* Главният надпис сменя цвета си с всеки нов текст (11.09.2026, Траян). Цветовете
   са тези на иконите на картите; смяната става, докато текстът е изгаснал, затова
   не се вижда преливане. Номерът на цвета слага app.js (attractPaint), 0…4. */
.attract[data-cvyat="0"] .atbig{ color:#E85C9E }
.attract[data-cvyat="1"] .atbig{ color:#5ED3E6 }
.attract[data-cvyat="2"] .atbig{ color:#F5A04A }
.attract[data-cvyat="3"] .atbig{ color:#5CCB8A }
.attract[data-cvyat="4"] .atbig{ color:#5B9BF0 }
.attract.fading .atbig, .attract.fading .atsmall{ opacity:0 }

.atdots{ display:flex; gap:8px; margin-top:1vh }
.atdots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.28); transition:background .3s }
.atdots i.on{ background:var(--mag) }

.attap{
  margin-top:4vh; font-size:clamp(1.05rem, 2.4vw, 1.7rem); font-weight:600;
  color:#fff; border:2px solid rgba(255,255,255,.35); border-radius:999px;
  padding:14px 28px; animation:atpulse 2.4s ease-in-out infinite;
}
@keyframes atpulse{
  0%,100%{ transform:scale(1);    border-color:rgba(255,255,255,.35) }
  50%    { transform:scale(1.04); border-color:var(--mag) }
}

/* КИОСК: лентата „още ли сте тук". Стои отдолу, за да не покрива това, което
   човекът чете, и е достатъчно едра, за да се натисне с пръст без прицелване. */
.still[hidden]{ display:none }

.still{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9998;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  background:var(--card); border:2px solid var(--mag); border-radius:16px;
  padding:16px 22px; box-shadow:var(--sh); max-width:min(92vw,760px);
}
.still b{ font-size:1.15rem }
.still span{ color:var(--ink2) }
.still i{ font-style:normal; font-weight:700; color:var(--mag); font-variant-numeric:tabular-nums }

/* КИОСК: „по желание" до имейла, вместо задължителна звездичка (03.09.2026). */
.fld .opt{ font-style:normal; font-weight:400; font-size:.82em; color:var(--ink3) }

/* ============================================================================
   КИОСК: началният екран запълва целия дисплей (03.09.2026, за 27" тъчскрийн).
   Класът `body.kiosk-home` се слага само докато е показан началният екран
   (в show(), app.js) — другите екрани (файлове, страници, много редове) не се
   пипат, за да не режем съдържание, което трябва да превърта.
   ========================================================================== */
body.kiosk-home{
  height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  padding-bottom:0;                 /* мястото за долната лента тук не важи — тя е скрита на този екран */
}
body.kiosk-home .top{ flex:0 0 auto }
body.kiosk-home .wrap{
  flex:1; min-height:0; display:flex; flex-direction:column;
  max-width:1700px; width:100%; box-sizing:border-box;
  padding:clamp(14px,2vh,28px) clamp(16px,2.5vw,40px) clamp(14px,2vh,28px);
}
/* Заглавието „Какво ще печатаме?" и текстът под него са махнати от началния
   екран — на киоска и на сайта (11.09.2026, Траян; на сайта същия ден, по-късно) —
   картите говорят сами, а шестата карта „Как се поръчва" поема обяснението.
   Скрити са само на #scr-home — другите екрани си пазят заглавията. */
#scr-home > h1,
#scr-home > .sub{ display:none }
body.kiosk-home #scr-home{ flex:1; min-height:0; display:flex; flex-direction:column }

/* Два реда по три — запълва каквото остане от екрана. Пет вида печат и шеста
   карта „Как се поръчва" със стъпките (11.09.2026, Траян реши какво влиза там). */
body.kiosk-home .choices{
  flex:1; min-height:0; margin-top:0;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
  gap:clamp(12px,1.8vw,26px);
}
/* Картите на киоска: антрацит с обем (11.09.2026, Траян). Само тук — сайтът
   пази белите карти. Антрацитът е RAL 7016 (#383E42); отгоре е по-светъл,
   отдолу по-тъмен, с тънък светъл ръб горе и тъмен скос долу — така картата
   изглежда повдигната, а не нарисувана. */
:root{
  --ant:#383E42; --ant-hi:#4A5156; --ant-lo:#2D3236; --ant-edge:#262A2E;
  --ant-txt:#FFFFFF; --ant-sub:#C5CACF;
}
body:is(.kiosk-home,:not(.kiosk)) .choice,
body.kiosk .kbtn,
body:is(.kiosk-home,:not(.kiosk)) .kstapki{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:22px; padding:clamp(10px,2vh,24px);
  color:var(--ant-txt);
  background:linear-gradient(180deg, var(--ant-hi) 0%, var(--ant) 52%, var(--ant-lo) 100%);
  border:1px solid var(--ant-edge);
  /* задното осветяване е бяло (13.09.2026, Траян: в цвета на иконите ставаше „много
     шарено"). Цветът е в --glow-rgb — ако пак потрябва цветно, слага се по вид до --ico */
  --glow-rgb:255,255,255;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),         /* светъл фаскован ръб горе — металът го хвърля ярко */
    inset 0 0 0 1px rgba(255,255,255,.035),      /* едва видим метален кант наоколо */
    inset 0 -4px 0 rgba(0,0,0,.22),
    /* повдигната (13.09.2026, Траян): къса сянка за допир и дълга, мека — за височина */
    0 3px 6px rgba(22,24,29,.24),
    0 20px 36px -10px rgba(22,24,29,.5),
    /* задно осветяване: бяло сияние около ръбовете. Стои ПОД сенките (в box-shadow
       първата е най-отгоре), затова отдолу остава сянката, а отгоре и отстрани — светлината */
    0 0 16px 1px rgba(var(--glow-rgb),.9),
    0 0 44px 8px rgba(var(--glow-rgb),.6);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
  transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s, background .12s;
  /* влиза с леко изплуване при всяко връщане в началото; „backwards", а не
     „both" — иначе крайното състояние на анимацията бие натискането */
  animation:kioskKarta .42s cubic-bezier(.2,.8,.2,1) backwards;
}
/* МЕТАЛ (11.09.2026, Траян: антрацитът без карбон е по-добре, „но добави
   метален ефект"). Карбонът беше пробван и махнат същия ден.
   Две пластини над антрацитната основа, и двете под текста:
     ::before — шлифовка: хоризонтални косъмчета светлина и сянка на три
                различни стъпки (3, 5 и 11 px). Стъпките нямат общ делител,
                затова окото не хваща равни ивици, а вижда драскотини от
                шлифовъчна лента — както при анодиран алуминий;
     ::after  — метален отблясък: широко светло петно горе вляво и тясна
                вертикална ивица светлина, каквато хвърля шлифован метал.
                При натискане ивицата се плъзга — повърхността „се накланя". */
body:is(.kiosk-home,:not(.kiosk)) .choice::before,
body.kiosk .kbtn::before,
body:is(.kiosk-home,:not(.kiosk)) .kstapki::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, rgba(0,0,0,0) 1px 5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, rgba(255,255,255,0) 2px 11px);
}
body:is(.kiosk-home,:not(.kiosk)) .choice::after,
body.kiosk .kbtn::after,
body:is(.kiosk-home,:not(.kiosk)) .kstapki::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(130% 70% at 25% -10%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
    linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.10) 49%,
                            rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 64%);
  background-size:100% 100%, 260% 100%;
  background-position:0 0, 35% 0;
  background-repeat:no-repeat;
  transition:opacity .12s, background-position .35s cubic-bezier(.2,.8,.2,1);
}
body:is(.kiosk-home,:not(.kiosk)) .choice:nth-child(2){ animation-delay:.05s }
body:is(.kiosk-home,:not(.kiosk)) .choice:nth-child(3){ animation-delay:.10s }
body:is(.kiosk-home,:not(.kiosk)) .choice:nth-child(4){ animation-delay:.15s }
body:is(.kiosk-home,:not(.kiosk)) .choice:nth-child(5){ animation-delay:.20s }
@keyframes kioskKarta{
  from{ opacity:0; transform:translateY(18px) scale(.97) }
  to  { opacity:1; transform:none }
}
/* На тъчскрийн няма посочване — магентата при посочване би „залепнала" след
   докосване. Затова тук ръбът не се сменя. */
body:is(.kiosk-home,:not(.kiosk)) .choice:hover,
body.kiosk .kbtn:hover{ border-color:var(--ant-edge) }
/* Натискане: картата потъва, сянката се свива, магентен пръстен — пръстът
   вижда, че е хванал. Трае, докато пръстът е върху нея. */
body:is(.kiosk-home,:not(.kiosk)) .choice:active,
body.kiosk .kbtn:active{
  transform:translateY(4px) scale(.985);
  background:linear-gradient(180deg, #353B3F 0%, #2E3337 100%);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.40),
    0 1px 2px rgba(22,24,29,.22),
    0 0 0 3px var(--mag);
}
body:is(.kiosk-home,:not(.kiosk)) .choice:focus-visible,
body.kiosk .kbtn:focus-visible{ outline:3px solid var(--mag); outline-offset:3px }
/* Иконите: контурен лист с подгънат ъгъл, по един цвят на вид (11.09.2026 —
   образецът на Траян с PPT/DOC/PDF/TXT). Цветовете са от образеца — оранжево,
   синьо, червено, светлосиньо — но изсветлени, за да светят върху антрацита;
   петият (арт) е магентата на Мултиплейс. Емоджито (.ic) е скрито тук. */
body:is(.kiosk-home,:not(.kiosk)) .choice .ic,
body.kiosk .kbtn .ic{ display:none }
body:is(.kiosk-home,:not(.kiosk)) .choice .ico,
body.kiosk .kbtn .ico{
  display:block; width:clamp(72px,8.2vw,148px); height:auto; aspect-ratio:1;
  margin-bottom:clamp(4px,1vh,12px);
  color:var(--ico,#fff);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));
  transition:transform .12s cubic-bezier(.2,.8,.2,1);
}
body:is(.kiosk-home,:not(.kiosk)) .choice[data-kind="docs"]  { --ico:#5B9BF0 }
body:is(.kiosk-home,:not(.kiosk)) .choice[data-kind="photos"]{ --ico:#F5A04A }
body:is(.kiosk-home,:not(.kiosk)) .choice[data-kind="draw"]  { --ico:#5ED3E6 }
body:is(.kiosk-home,:not(.kiosk)) .choice[data-kind="wide"]  { --ico:#F2645C }
body:is(.kiosk-home,:not(.kiosk)) .choice[data-kind="art"]   { --ico:#E85C9E }
/* екранът за качване: флашка и телефон — два нови цвята, за да не се бъркат с видовете печат */
body.kiosk .kbtn#kUsb{ --ico:#5CCB8A }
body.kiosk .kbtn#kQr { --ico:#A78BFA }
body.kiosk .kbtn .ico{ width:clamp(64px,6.4vw,116px) }
body:is(.kiosk-home,:not(.kiosk)) .choice:active .ico,
body.kiosk .kbtn:active .ico{ transform:scale(.92) }
/* натисната картата „се накланя" — отблясъкът отслабва и ивицата светлина се
   плъзга по метала */
body:is(.kiosk-home,:not(.kiosk)) .choice:active::after,
body.kiosk .kbtn:active::after{ opacity:.55; background-position:0 0, 72% 0 }
/* сянката под буквите ги държи отчетливи върху шлифовката */
body:is(.kiosk-home,:not(.kiosk)) .choice b,
body.kiosk .kbtn b{
  font-size:clamp(1.3rem,2.2vw,1.9rem); color:var(--ant-txt); letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
body:is(.kiosk-home,:not(.kiosk)) .choice span,
body.kiosk .kbtn span{
  font-size:clamp(.9rem,1.3vw,1.15rem); margin-top:clamp(6px,1vh,12px); line-height:1.35;
  color:var(--ant-sub); text-shadow:0 1px 2px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion:reduce){
  body:is(.kiosk-home,:not(.kiosk)) .choice, body.kiosk .kbtn{ animation:none; transition:background .12s, box-shadow .12s }
  body:is(.kiosk-home,:not(.kiosk)) .choice:active, body:is(.kiosk-home,:not(.kiosk)) .choice:active .ico,
  body.kiosk .kbtn:active, body.kiosk .kbtn:active .ico{ transform:none }
  body:is(.kiosk-home,:not(.kiosk)) .choice::after, body.kiosk .kbtn::after{ transition:opacity .12s }
  body:is(.kiosk-home,:not(.kiosk)) .choice:active::after, body.kiosk .kbtn:active::after{ background-position:0 0, 35% 0 }
}

/* Заглавието и обяснителният текст на екрана за качване са махнати за ВСИЧКИ видове —
   на киоска и на сайта (11.09.2026, Траян: на киоска първо само при снимките, после
   при всички; същия ден и на сайта: „махни обяснителните текстове във всички
   категории"). С тях отпадна и предупреждението за наддаването (bleed) при
   рекламните и АРТ материалите — ако потрябва, мястото му е по-навътре, при размера.
   Подсказката за форматите вътре в полето за файлове и до Google Drive остава.
   body[data-kind] остава от app.js — полезно, ако някой вид пак поиска изключение. */
#scr-upload > #upTitle,
#scr-upload > #upSub{ display:none }

/* --- ВСИЧКИ бутони в металния стил — киоск и сайт (11.09.2026, Траян) -----
   Същият антрацит с шлифовка и отблясък като картите, но без ::before/::after:
   тук слоевете са в самия background — някои бутони ползват псевдоелементите
   си за друго, а и малък бутон не иска толкова обем.
   Три цвята за три смисъла:
     антрацит — обикновен бутон;
     магента  — главното действие („Напред");
     синьо    — избраното от няколко (чипове, превключватели, пакети).
   Чиповете с логото на куриера остават бели: логото е двуцветно и на тъмно се губи
   (същата причина, заради която и на сайта избраният е с рамка, а не с цвят). */
:root{
  --metal-shlif:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, rgba(0,0,0,0) 1px 5px);
  --metal-blyasak: radial-gradient(130% 120% at 25% -35%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%);
  --metal-ant: linear-gradient(180deg, var(--ant-hi) 0%, var(--ant) 52%, var(--ant-lo) 100%);
  --metal-mag: linear-gradient(180deg, #DA4A82 0%, #C22560 52%, #A21E50 100%);
  --metal-sin: linear-gradient(180deg, #25B3D6 0%, #0E93B5 52%, #0B7792 100%);
  --metal-mag-edge:#8C1A45; --metal-sin-edge:#09657C;
  --metal-sh: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -2px 0 rgba(0,0,0,.22),
              0 2px 4px rgba(22,24,29,.24), 0 9px 18px -7px rgba(22,24,29,.5);
  --metal-sh-down: inset 0 2px 6px rgba(0,0,0,.42), 0 1px 1px rgba(22,24,29,.2);
}
body .btn,
body .chip:not(.haslogo),
body .seg button,
body .step button,
body .packbtn,
body .uprm{
  color:#fff;
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-ant);
  border:1px solid var(--ant-edge);
  box-shadow:var(--metal-sh);
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s, filter .1s;
}
/* посочването на сайта оцветява някои бутони в светло — на тъчскрийн то
   „залепва" след докосване, затова тук те си остават метални */
body .uprm:hover,
body .packbtn:not(.on):hover,
body .pagesbtn:hover{
  color:#fff; border-color:var(--ant-edge);
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-ant);
}
body .btn.primary{
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-mag);
  border-color:var(--metal-mag-edge);
  /* бяла светлина зад главния бутон (13.09.2026) — изключеният не свети, виж [disabled] */
  box-shadow:var(--metal-sh), 0 0 12px 1px rgba(255,255,255,.85), 0 0 26px 4px rgba(255,255,255,.5);
}
body .chip.on:not(.haslogo),
body .seg button.on,
body .packbtn.on{
  color:#fff;
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-sin);
  border-color:var(--metal-sin-edge);
}
body .btn:not([disabled]):active,
body .chip:not(.haslogo):active,
body .step button:active,
body .packbtn:active,
body .uprm:active{
  transform:translateY(2px);
  box-shadow:var(--metal-sh-down), 0 0 0 2px var(--mag);
}
body .btn[disabled]{ opacity:.5; filter:saturate(.35); box-shadow:none }
body .btn.tiny,
body .pagesbtn,
body .packbtn.clr{ color:#E4E7EA }
body .chip:not(.haslogo) i,
body .packbtn i{ color:inherit; opacity:.8 }
/* превключвателят е група: бутоните са слепени в една метална лента с тънки
   тъмни прорези между тях */
body .seg{
  border-color:var(--ant-edge);
  box-shadow:0 1px 2px rgba(22,24,29,.2), 0 6px 14px -6px rgba(22,24,29,.4);
}
body .seg.changed{ border-color:var(--cyan) }
body .seg button{
  border:0; border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset -1px 0 0 rgba(0,0,0,.4);
}
body .seg button:last-child{ box-shadow:inset 0 1px 0 rgba(255,255,255,.2) }
body .seg button:active{ box-shadow:var(--metal-sh-down) }
@media (prefers-reduced-motion:reduce){
  body .btn, body .chip, body .step button,
  body .packbtn, body .uprm{ transition:none; transform:none !important }
}

/* --- КИОСК: лентата горе е метална, с логото online MULTIPLACE.INFO (11.09.2026,
   Траян: „направи лентата горе като бутоните и добави това лого"). Същите слоеве
   като бутоните. Логото е векторно в index.html; logo.png се крие. Стъпките вдясно
   стават светли, иначе сивото им се губи на тъмно. */
body.kiosk .top{
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-ant);
  border-bottom:1px solid var(--ant-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.28),
             0 6px 18px -6px rgba(22,24,29,.5);
  padding:clamp(8px,1.1vh,14px) clamp(16px,2.5vw,40px);
}
/* логото е по средата (11.09.2026, Траян): три колони — празна, логото, стъпките.
   Двете крайни са равни, затова логото стои точно в средата, каквото и да пише вдясно. */
body.kiosk .top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center }
body.kiosk .brand{ grid-column:2; justify-self:center }
body.kiosk .steps{ grid-column:3; justify-self:end }
body.kiosk .brand img{ display:none }
/* по-голямо от логото на сайта: надписът е само средната третина от височината му.
   Леко изсветлено и със сянка отдолу — магентата иначе потъва в тъмния метал */
body.kiosk .brand .brand-kiosk{
  display:block; height:clamp(56px,7.4vh,84px); width:auto;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
/* Бялата версия на логото (11.09.2026, Траян прати бялото лого за тъмната лента).
   Цветната стои в index.html; тук CSS я прави бяла — правилото бие атрибутите fill и
   stroke в SVG. За връщане към цветната стига да се махнат тези три реда. */
body .brand-kiosk [fill]:not([fill="none"]){ fill:#fff }
body .brand-kiosk [stroke]{ stroke:#fff }
body .brand-kiosk text, body .brand-kiosk tspan{ fill:#fff }
body.kiosk .brand:hover .brand-kiosk{ opacity:1 }
body.kiosk .steps{ color:#AEB4BA }
body.kiosk .steps b{ color:#fff }

/* --- КИОСК: шестата карта „Как се поръчва" (11.09.2026, Траян) ------------
   Стъпките се сменят сами, всяка стои 5 секунди — цикъл от 25. Смяната е с CSS,
   без скрипт: стъпките са една върху друга и всяка се появява със своето
   закъснение. Точките долу светват в същия ритъм. При всяко връщане в началото
   анимацията почва от стъпка 1, защото правилата важат само при body.kiosk-home. */
body:is(.kiosk-home,:not(.kiosk)) .kstapki{
  display:flex; flex-direction:column; align-items:stretch; justify-content:space-between;
  padding:clamp(14px,2.4vh,28px) clamp(14px,1.6vw,26px);
  color:#fff; cursor:default; user-select:none;
  animation-delay:.25s;
}
body:is(.kiosk-home,:not(.kiosk)) .ks-glava{
  flex:0 0 auto; text-align:center; font-size:clamp(.85rem,1.1vw,1.05rem);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#AEB4BA;
}
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta{ position:relative; flex:1 1 auto; min-height:0; margin:0; padding:0; list-style:none }
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px,1vh,12px);
  text-align:center; opacity:0;
  animation:ksStapka 25s infinite;
}
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(2){ animation-delay:5s }
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(3){ animation-delay:10s }
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(4){ animation-delay:15s }
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(5){ animation-delay:20s }
@keyframes ksStapka{
  0%   { opacity:0; transform:translateY(12px) }
  2%   { opacity:1; transform:none }
  18.5%{ opacity:1; transform:none }
  20%  { opacity:0; transform:translateY(-12px) }
  100% { opacity:0; transform:translateY(-12px) }
}
/* номерът на стъпката е магентено метално кръгче — като главния бутон */
body:is(.kiosk-home,:not(.kiosk)) .ks-n{
  display:flex; align-items:center; justify-content:center;
  width:clamp(52px,5.4vw,84px); height:clamp(52px,5.4vw,84px); border-radius:50%;
  font-size:clamp(1.6rem,2.8vw,2.6rem); font-weight:800; color:#fff;
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-mag);
  border:1px solid var(--metal-mag-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -4px rgba(0,0,0,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta b{
  display:block; font-size:clamp(1.3rem,2.2vw,1.9rem); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.65);
}
body:is(.kiosk-home,:not(.kiosk)) .ks-lenta .ks-p{
  display:block; max-width:34ch; font-size:clamp(.9rem,1.3vw,1.15rem); line-height:1.35;
  color:var(--ant-sub); text-shadow:0 1px 2px rgba(0,0,0,.7);
}
body:is(.kiosk-home,:not(.kiosk)) .ks-tochki{ flex:0 0 auto; display:flex; justify-content:center; gap:10px }
body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i{
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.28);
  animation:ksTochka 25s infinite;
}
body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(2){ animation-delay:5s }
body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(3){ animation-delay:10s }
body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(4){ animation-delay:15s }
body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(5){ animation-delay:20s }
@keyframes ksTochka{
  0%, 19.9% { background:var(--mag); transform:scale(1.3) }
  20%, 100% { background:rgba(255,255,255,.28); transform:none }
}
/* „По-малко движение" (14.09.2026). На устройство с изключени анимации в системата
   (Windows без „Показвай анимации", телефон с „Намаляване на движението") стъпките
   ПАК се сменят една по една — само без плъзгане: чисто преливане, а точката светва,
   без да расте. Преди тук стъпките се нареждаха в списък и Траян го видя като
   „развалено" — картата е направена да изброява, не да изрежда.
   !important и по-голямата тежест са нужни, за да мине анимацията през общото правило
   в началото на файла (*{animation:none !important}). Закъсненията се повтарят с
   !important, защото съкращението animation ги нулира. */
@media (prefers-reduced-motion:reduce){
  body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li{ animation:ksStapkaTiho 25s infinite !important }
  body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i{ animation:ksTochkaTiho 25s infinite !important }
  body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(2),
  body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(2){ animation-delay:5s !important }
  body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(3),
  body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(3){ animation-delay:10s !important }
  body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(4),
  body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(4){ animation-delay:15s !important }
  body:is(.kiosk-home,:not(.kiosk)) .ks-lenta li:nth-child(5),
  body:is(.kiosk-home,:not(.kiosk)) .ks-tochki i:nth-child(5){ animation-delay:20s !important }
}
@keyframes ksStapkaTiho{
  0%   { opacity:0 }
  2%   { opacity:1 }
  18.5%{ opacity:1 }
  20%  { opacity:0 }
  100% { opacity:0 }
}
@keyframes ksTochkaTiho{
  0%, 19.9% { background:var(--mag) }
  20%, 100% { background:rgba(255,255,255,.28) }
}

/* Изборът „от флашка / от телефона" и QR екранът се показват СЛЕД избора на
   вид (екран „upload"), не тук — там kiosk-home вече е свален и превъртането
   си работи нормално, ако файловете са много. */

/* ===========================================================================
   САЙТЪТ: металният вид от киоска, нагоден за клиента вкъщи (11.09.2026, Траян:
   „приложи тези промени и към клиентския сайт, но се съобрази с неговите
   особености").
   Общи с киоска са цветовете, металът, иконите, бутоните, фонът и лентата горе.
   Тук е само това, по което сайтът се различава:
     · страницата се превърта — няма 100vh и запълване на екрана;
     · телефон, таблет и компютър — картите се пренареждат;
     · има мишка — картите и бутоните отговарят на посочване (само където има
       посочване, иначе на телефон „залепва");
     · има клавиатура — видима рамка при фокус;
     · „← Основен сайт" остава; заглавието, текстовете при качването (с
       предупреждението за наддаването) и полето за пускане на файлове остават;
     · фонът не е „fixed" на самото body — на iPhone това разтяга картинката по
       цялата дължина на страницата; вместо това е закрепен отделен слой.
   =========================================================================== */
body:not(.kiosk){ background:#DDE0E3 }
body:not(.kiosk)::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--fon-vylni) center / cover no-repeat;
}

/* --- лентата горе: метал, бялото лого по средата, „← Основен сайт" вляво --- */
body:not(.kiosk) .top{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px 12px;
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-ant);
  border-bottom:1px solid var(--ant-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.28),
             0 6px 18px -6px rgba(22,24,29,.5);
}
body:not(.kiosk) .tosite{
  grid-column:1; grid-row:1; justify-self:start;
  color:#E4E7EA; border-color:rgba(255,255,255,.28); background:transparent;
}
body:not(.kiosk) .tosite:hover,
body:not(.kiosk) .tosite:focus-visible{ color:#fff; border-color:var(--mag); background:rgba(255,255,255,.08) }
body:not(.kiosk) .brand{ grid-column:2; grid-row:1; justify-self:center }
body:not(.kiosk) .brand img{ display:none }
body:not(.kiosk) .brand .brand-kiosk{
  display:block; height:46px; width:auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
body:not(.kiosk) .brand:hover .brand-kiosk{ opacity:.88 }
body:not(.kiosk) .steps{ grid-column:3; grid-row:1; justify-self:end; color:#AEB4BA }
body:not(.kiosk) .steps b{ color:#fff }

/* --- картите: три колони на компютър, две на таблет, една на телефон --- */
body:not(.kiosk) .choices{ grid-template-columns:repeat(3,1fr); gap:16px }
body:not(.kiosk) .choice{ min-height:212px; padding:22px 16px; border-radius:18px }
body:not(.kiosk) .choice .ico{ width:clamp(64px,7vw,88px); margin-bottom:8px }
body:not(.kiosk) .choice b{ font-size:1.15rem }
body:not(.kiosk) .choice span{ font-size:.85rem; margin-top:6px }

/* шестата карта: текстовете на сайта говорят за компютър и Google Drive */
body:not(.kiosk) .kstapki{ min-height:212px; padding:16px; border-radius:18px }
body:not(.kiosk) .ks-glava{ font-size:.72rem }
body:not(.kiosk) .ks-n{ width:52px; height:52px; font-size:1.5rem }
body:not(.kiosk) .ks-lenta b{ font-size:1.1rem }
body:not(.kiosk) .ks-lenta .ks-p{ font-size:.85rem }
body:not(.kiosk) .ks-k{ display:none }
body.kiosk .ks-s{ display:none }

/* --- посочване с мишка: картата се повдига, бутонът изсветлява ---
   :not(:active) — иначе повдигането бие потъването при натискане */
@media (hover:hover){
  body:not(.kiosk) .choice:hover:not(:active){
    transform:translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.035),
      inset 0 -4px 0 rgba(0,0,0,.22), 0 4px 8px rgba(22,24,29,.24), 0 26px 44px -12px rgba(22,24,29,.52),
      0 0 20px 3px rgba(var(--glow-rgb),1), 0 0 56px 12px rgba(var(--glow-rgb),.75);
  }
  body:not(.kiosk) .choice:hover:not(:active)::after{ background-position:0 0, 52% 0 }
  body:not(.kiosk) .btn:not([disabled]):hover,
  body:not(.kiosk) .chip:not(.haslogo):hover,
  body:not(.kiosk) .seg button:hover,
  body:not(.kiosk) .step button:hover,
  body:not(.kiosk) .packbtn:hover,
  body:not(.kiosk) .uprm:hover{ filter:brightness(1.14) }
}

/* --- клавиатура: ясна рамка при фокус --- */
body:not(.kiosk) .btn:focus-visible,
body:not(.kiosk) .chip:focus-visible,
body:not(.kiosk) .seg button:focus-visible,
body:not(.kiosk) .step button:focus-visible,
body:not(.kiosk) .packbtn:focus-visible,
body:not(.kiosk) .uprm:focus-visible,
body:not(.kiosk) .drop:focus-within{ outline:3px solid var(--mag); outline-offset:2px }

/* --- полето за пускане на файлове: на киоска го няма, на сайта е главното ---
   Метална плоча като картите; стрелката е в магентено кръгче като стъпките. */
body:not(.kiosk) .drop,
body:not(.kiosk) .drop:hover,
body:not(.kiosk) .drop.over{
  color:#fff; border:1px solid var(--ant-edge); border-radius:18px;
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-ant);
  box-shadow:var(--metal-sh);
}
body:not(.kiosk) .drop{ padding:30px 18px; transition:filter .12s, box-shadow .12s }
body:not(.kiosk) .drop.over{ box-shadow:var(--metal-sh), 0 0 0 3px var(--mag) }
@media (hover:hover){ body:not(.kiosk) .drop:hover{ filter:brightness(1.08) } }
body:not(.kiosk) .dropic{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; font-size:1.6rem; color:#fff;
  background:var(--metal-shlif), var(--metal-blyasak), var(--metal-mag);
  border:1px solid var(--metal-mag-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -4px rgba(0,0,0,.5);
}
body:not(.kiosk) .drop b{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6) }
body:not(.kiosk) .drop .dropsub{ color:var(--ant-sub) }

/* --- таблет --- */
@media (max-width:900px){
  body:not(.kiosk) .choices{ grid-template-columns:repeat(2,1fr) }
}
/* --- телефон: картите са хоризонтални — иконата вляво, текстът вдясно —
   иначе шест високи карти една под друга са безкрайно превъртане --- */
@media (max-width:640px){
  body:not(.kiosk) .brand .brand-kiosk{ height:36px }
  body:not(.kiosk) .steps{ grid-column:1 / -1; grid-row:2; justify-self:center; font-size:.72rem }
  body:not(.kiosk) .steps:empty{ display:none }
  body:not(.kiosk) .choices{ grid-template-columns:1fr; gap:10px }
  body:not(.kiosk) .choice{
    display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto;
    column-gap:14px; align-items:center; justify-items:start; text-align:left;
    min-height:0; padding:14px 16px; border-radius:16px;
  }
  body:not(.kiosk) .choice .ico{ grid-row:1 / span 2; width:56px; margin:0; align-self:center }
  body:not(.kiosk) .choice b{ grid-column:2; font-size:1.05rem; align-self:end }
  body:not(.kiosk) .choice span{ grid-column:2; margin-top:2px; font-size:.8rem; align-self:start }
  body:not(.kiosk) .kstapki{ min-height:196px; border-radius:16px }
}