/*==============================================================================
//	Проект "VOM.cash"
// Created By : Гейт.БГ | Author : Асен Сотиров
// Contact Email : support@gate.bg
// License Agreement : https://gate.bg/license/
//==============================================================================
// Описание : CSS for VOM.cash
// Последна промяна на файла на : 11.09.2026г. / 11:43ч.
// Последна промяна на файла от : Асен Сотиров
//============================================================================*/
/*==============================================================================
// Описание : CSS 
//============================================================================*/

/* ============================================================
   1. ТОКЕНИ — единственото място, където се пипат цветове и размери
   ============================================================ */
:root{
  --r-lg:0.9996rem;
  --r-md:0.8748rem;
  --r-sm:0.75rem;
  --btn-f:1.6248rem;   /* единен шрифт на 7-те долни бутона */
  --gut:0.75rem;     /* улей на цялата мрежа */
  --foot-h:10rem;         /* височина на футъра с бутоните */
  --scan-icon-w:6rem;     /* колона на баркод-иконката в скан-полето */
  --scan-kb:3.75rem;      /* размер на бутона за ръчно въвеждане (klav.) */
  --btn-gap:0.9996rem;    /* разстояние между икона и текст във футър бутоните */
  --blogo-pad:1.375rem;   /* вътрешен отстъп на бутона с логото */
  --bs-body-font-family:"Inter","Ubuntu",system-ui,"DejaVu Sans",sans-serif;
  --bs-body-color:var(--ink);
}
.row{--bs-gutter-x:var(--gut);--bs-gutter-y:0;}

/* ============================================================
   1б. СТЪПАЛОВИДНИ BREAKPOINTS ЗА ШРИФТ + ОТСТЪПИ (не плавно)
   1920 → 1680 → 1600 → 1440 → 1366/1360 → 1280 → 1152 → 1024.
   html{font-size} смалява ПРОПОРЦИОНАЛНО всички шрифтове (целият
   дизайн е в rem). --gut смалява всички отстъпи/марджове, които го
   ползват (.work, .pane-l/.pane-r, .cats, .grid, .foot и др.).
   Всяко правило се засича при все по-малка ширина, затова коректно
   "печели" в каскадата спрямо предишното.
   ============================================================ */
@media (max-width:1920px){html{font-size:16px;}   :root{--gut:0.75rem;   --foot-h:10rem;  --scan-icon-w:6rem;  --scan-kb:3.75rem; --btn-gap:1rem;    --blogo-pad:1.375rem;}}
@media (max-width:1680px){html{font-size:15.5px;} :root{--gut:0.7rem;    --foot-h:9.6rem; --scan-icon-w:5.8rem;--scan-kb:3.6rem;  --btn-gap:0.93rem; --blogo-pad:1.283rem;}}
@media (max-width:1600px){html{font-size:15px;}   :root{--gut:0.6875rem;--foot-h:9.3rem; --scan-icon-w:5.7rem;--scan-kb:3.5rem;  --btn-gap:0.9rem;  --blogo-pad:1.26rem;}}
@media (max-width:1440px){html{font-size:14.5px;} :root{--gut:0.625rem; --foot-h:8.9rem; --scan-icon-w:5.4rem;--scan-kb:3.35rem; --btn-gap:0.83rem; --blogo-pad:1.146rem;}}
@media (max-width:1366px){html{font-size:14px;}   :root{--gut:0.5625rem;--foot-h:8.5rem; --scan-icon-w:5.2rem;--scan-kb:3.2rem;  --btn-gap:0.75rem; --blogo-pad:1.031rem;}}
@media (max-width:1280px){html{font-size:13.5px;} :root{--gut:0.5rem;   --foot-h:8.1rem; --scan-icon-w:5rem;  --scan-kb:3.05rem; --btn-gap:0.68rem; --blogo-pad:0.917rem;}}
@media (max-width:1152px){html{font-size:13px;}   :root{--gut:0.4375rem;--foot-h:7.7rem; --scan-icon-w:4.8rem;--scan-kb:2.9rem;  --btn-gap:0.6rem;  --blogo-pad:0.802rem;}}
@media (max-width:1024px){html{font-size:12.5px;} :root{--gut:0.375rem; --foot-h:7.3rem; --scan-icon-w:4.6rem;--scan-kb:2.8rem;  --btn-gap:0.5rem;  --blogo-pad:0.688rem;}}

/* ============================================================
   2. БАЗА
   ============================================================ */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;background:var(--c-html-bg);overflow:hidden;overscroll-behavior:none;}
body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;font-variant-numeric:tabular-nums;touch-action:manipulation;padding:0;}
svg{display:block;}
:focus-visible{outline:3px solid var(--led);outline-offset:2px;}

/* Таблото е за монитори/екрани с различен размер (не за телефон/таблет),
   и трябва да запълва точно екрана: хедърът и долната лента с бутони
   остават ВИНАГИ видими, без страницата да скролва. Само работната зона
   (везна+решетка / сметка) скролва вътрешно, ако не се събере на екрана. */
#app{width:100%;max-width:1920px;height:100%;margin:0 auto;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;position:relative;overflow:hidden;}
.hdr{flex:0 0 auto;}
.work{flex:1 1 auto;min-height:0;}
.foot{flex:0 0 auto;}

/* ============================================================
   3. ГЛЕЗОТИИ — натиск, вълничка, тресене, влитане
   ============================================================ */
.tap{position:relative;overflow:hidden;transition:transform .07s ease,filter .07s ease;}
.tap:active{transform:translateY(2px) scale(.995);}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;transform:translate(-50%,-50%) scale(0);}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}

@keyframes shake{10%,90%{transform:translateX(-3px);}30%,70%{transform:translateX(6px);}
  50%{transform:translateX(-8px);}100%{transform:translateX(0);}}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97);}

@keyframes flyin{from{opacity:0;transform:translateX(46px);}to{opacity:1;transform:none;}}
.row-new{animation:flyin .28s cubic-bezier(.2,.8,.2,1);}
@keyframes flash{0%{background:var(--c-flash-bg);}100%{background:transparent;}}
.row-flash{animation:flash .9s ease-out;}

.chip-fly{position:absolute;z-index:60;pointer-events:none;font-weight:800;font-size:1.8744rem;color:var(--c-chip-fly-fg);background:var(--brand);border-radius:0.75rem;padding:0.5004rem 0.9996rem;box-shadow:0 10px 24px var(--c-chip-fly-shadow);}

@keyframes pulseled{0%{filter:brightness(1);}40%{filter:brightness(1.9);}100%{filter:brightness(1);}}
.led-pulse{animation:pulseled .35s ease-out;}

/* ============================================================
   4. ХЕДЪР
   ============================================================ */
header{background:linear-gradient(90deg,var(--brand),var(--brand-dk));color:var(--c-chip-fly-fg);padding:0.75rem 1.1256rem;}
.hdr-l{gap:1.5rem;}
.hdr-r{gap:0.75rem;}
.soft{gap:0.75rem;width:max-content;}
.logo-circ{width:2.8752rem;height:2.8752rem;border-radius:50%;background:var(--c-chip-fly-fg);display:flex;align-items:center;justify-content:center;}
.logo-circ img{width:1.7496rem;}
.soft span{font-size:0.9372rem;color:var(--c-soft-span-fg);margin-left:0.5004rem;}
.site b{font-size:1.3128rem;font-weight:600;}
.site span{display:block;font-size:0.8124rem;color:var(--gold);margin-top:0.1248rem;}
.oper{gap:0.5rem;}
.oper i{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--c-oper-i-bg);color:var(--gold);font-style:normal;font-size:0.8748rem;font-weight:700;}
.devs{gap:0.5004rem;padding-left:0.9996rem;border-left:1px solid var(--c-devs-border);}
.dev{gap:0.438rem;font-size:0.75rem;color:var(--c-dev-fg);background:var(--c-dev-bg);border-radius:0.5004rem;padding:0.438rem 0.6876rem;}
.snd{width:2.3748rem;height:2.3748rem;border-radius:0.5628rem;background:var(--c-dev-bg);color:var(--gold);}
.snd.off{opacity:.45;}
.dot{width:0.5628rem;height:0.5628rem;border-radius:50%;background:var(--ok);flex:none;}

.mod-btn,.mod-btn:hover,.mod-btn:focus,.mod-btn:visited{
  padding:0.6rem 1rem;border-radius:0.6252rem;background:var(--brand-dk);
  color:var(--cream);font-weight:700;font-size:0.9rem;white-space:nowrap;
  text-decoration:none;
}
.mod-btn.active{background:var(--gold);color:var(--brand-dk);}


/* ============================================================
   5. РАБОТНА ЗОНА
   ============================================================ */
/* Mobile-first: пане-л и пане-р се редят едно под друго.
   При по-широк екран (виж breakpoints по-долу) стават 2 колони. */
/* Работната зона е винаги 2 колони (не е за телефон/таблет, а за монитори
   с различна резолюция) и запълва точно наличната височина между хедъра
   и долната лента с бутони. Скролват само решетката с артикули (в лявата
   секция) и списъкът с добавени артикули в сметката (в дясната) — не и
   цялата работна зона. */
.work{display:flex;flex-direction:row;gap:var(--gut);padding:var(--gut);min-height:0;}
.pane-l,.pane-r{display:flex;flex-direction:column;gap:var(--gut);flex:1 1 0;min-width:0;height:100%;min-height:0;overflow:hidden;}

.scale{background:linear-gradient(180deg,var(--c-scale-bg),var(--c-scale-bg-2));border-radius:var(--r-lg);box-shadow:var(--sh);position:relative;padding:1.3752rem 1.6248rem;}
.scale-hd{display:flex;align-items:center;gap:1rem;}
.tag{font-size:0.8124rem;letter-spacing:0.162rem;color:var(--c-tag-fg);}
.stab{display:inline-flex;align-items:center;gap:0.5628rem;background:var(--c-stab-bg);color:var(--c-stab-fg);border-radius:0.8124rem;padding:0.312rem 0.8748rem;font-size:0.8748rem;transition:background .2s,color .2s;}
.stab.busy{background:var(--c-stab-busy-bg);color:var(--led);}
.stab.busy .dot{background:var(--led);}
.wt{display:flex;align-items:baseline;gap:0.75rem;color:var(--led);margin-top:0.2496rem;text-shadow:0 0 1.6248rem var(--c-wt-shadow);cursor:pointer;width:max-content;max-width:60%;}
.wt .n{font-size:3.5rem;font-weight:700;line-height:.94;letter-spacing:-0.1rem;}
.wt.unstable .n{opacity:.72;}
.wt .u{font-size:1.5rem;font-weight:600;color:var(--led-dim);}
.hint{font-size:1.188rem;color:var(--c-hint-fg);margin-top:0.3744rem;min-height:1.5rem;max-width:60%;}
.hint.err{color:var(--c-hint-err-fg);}
.spec{position:absolute;right:1.6248rem;top:3.3744rem;text-align:right;color:var(--c-spec-fg);font-size:0.9996rem;line-height:1.9;}

/* Категориите се пренасят свободно според наличната ширина */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:var(--gut);}
.cat{width:100%;padding:0.6rem 0.6252rem;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;overflow-wrap:break-word;hyphens:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);font-size:0.9996rem;font-weight:600;color:var(--ink2);box-shadow:var(--sh);}
.cat.on{background:linear-gradient(180deg,var(--brand),var(--brand-dk));border-color:var(--brand-dk);color:var(--cream);}

.grid{display:grid;grid-template-columns:1fr;gap:var(--gut);align-content:start;flex:0 1 auto;min-height:0;overflow-y:auto;}
.it{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh);padding:0.6252rem 0.75rem 0.6252rem 1.5rem;text-align:left;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:4.5rem;}
.it::before{content:"";position:absolute;left:0.5628rem;top:0.6876rem;bottom:0.6876rem;width:0.2496rem;border-radius:0.1248rem;background:var(--bar,var(--c-it-before-bg));}
.it .nm{font-size:1.2504rem;font-weight:600;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.it .pr{font-size:1.188rem;font-weight:700;color:var(--ink2);white-space:nowrap;}
.it .pr i{font-style:normal;font-size:0.9372rem;font-weight:600;color:var(--ink3);margin-left:0.312rem;}
.grid.locked .it{opacity:.4;pointer-events:none;}

.scan{background:var(--card);border:2px solid var(--brand);border-radius:var(--r-lg);box-shadow:var(--sh);display:grid;grid-template-columns:var(--scan-icon-w) 1fr auto;align-items:center;padding:var(--gut) var(--gut) var(--gut) 0;}
.scan-ic{display:flex;align-items:center;justify-content:center;}
.scan input{font:inherit;font-size:1.812rem;font-weight:600;border:0;outline:0;width:100%;background:transparent;color:var(--ink);}
.scan input::placeholder{color:var(--c-scan-input-placeholder-fg);font-weight:500;}
.scan .kb{width:var(--scan-kb);height:var(--scan-kb);border-radius:0.6252rem;background:linear-gradient(180deg,var(--brand),var(--brand-dk));}

/* Списъкът е закотвен абсолютно в панела: височината му не зависи
   от съдържанието, така че редовете не могат да разместят нищо. */
.bill{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;position:relative;flex:1 1 auto;min-height:0;}
.bh{position:absolute;top:0;left:0;right:0;z-index:2;display:grid;grid-template-columns:3rem 1fr 10.1256rem;padding:0 0.9996rem;height:2.1252rem;align-items:center;font-size:0.75rem;letter-spacing:0.0996rem;color:var(--ink3);border-bottom:1px solid var(--line);background:var(--c-bh-bg);}
.bh span:last-child{text-align:right;}
.rows{position:absolute;top:2.1252rem;left:0;right:0;bottom:0;overflow-y:auto;scroll-behavior:smooth;overscroll-behavior:contain;}
.rows::-webkit-scrollbar{width:0.5004rem;}
.rows::-webkit-scrollbar-thumb{background:var(--c-rows-webkit-scrollbar-thumb-bg);border-radius:0.2496rem;}
.rows::-webkit-scrollbar-track{background:transparent;}

/* индикатор за скрити редове най-горе */
.more{position:absolute;top:2.1252rem;left:0;right:0;height:2.1252rem;z-index:3;pointer-events:none;background:linear-gradient(var(--c-chip-fly-fg),var(--c-more-bg));display:flex;justify-content:center;opacity:0;transition:opacity .18s;}
.more.on{opacity:1;}
.more b{background:var(--brand);color:var(--cream);font-size:0.8124rem;font-weight:700;letter-spacing:0.3744rem;border-radius:0 0 0.6252rem 0.6252rem;padding:0.1872rem 0.8748rem 0.2496rem;box-shadow:0 3px 8px var(--c-more-b-shadow);}

.brow{display:grid;grid-template-columns:3rem 1fr 10.1256rem;padding:0.3744rem 0.9996rem;border-bottom:1px solid var(--line2);align-items:center;min-height:3.6252rem;}
.brow .ix{font-size:1.1256rem;color:var(--ink3);font-weight:700;}
.brow .nm{font-size:1.3128rem;font-weight:600;display:flex;align-items:center;gap:0.5628rem;line-height:1.15;}
.brow .nm em{font-style:normal;font-size:0.6252rem;letter-spacing:0.438rem;color:var(--ink3);background:var(--c-brow-nm-em-bg);border-radius:0.6252rem;padding:0.1872rem 0.5628rem;}
.brow .calc{font-size:1.062rem;color:var(--ink2);margin-top:0.1248rem;}
.brow .calc i{font-style:normal;color:var(--ink3);margin:0 0.312rem;}
.brow .sm{font-size:1.6248rem;font-weight:700;text-align:right;white-space:nowrap;}
.brow .sm span{font-size:0.9372rem;font-weight:600;opacity:.5;margin-left:0.312rem;}
.brow.cur{background:var(--c-brow-cur-bg);box-shadow:inset 5px 0 0 var(--led);}
.brow.prow{background:var(--c-brow-prow-bg);box-shadow:inset 5px 0 0 var(--c-brow-prow-shadow);}
.brow.prow .nm,.brow.prow .sm{color:var(--c-brow-prow-nm-fg);}
.brow.prow .ix{color:var(--c-brow-prow-shadow);font-size:1.5rem;}
.brow.chrow{background:var(--c-brow-chrow-bg);box-shadow:inset 5px 0 0 var(--led);}
.brow.chrow .nm,.brow.chrow .sm{color:var(--c-brow-chrow-nm-fg);}
.brow.crow u{text-decoration:none;font-weight:600;letter-spacing:0.2496rem;font-size:1.062rem;opacity:.75;}
.brow.crow{display:flex;align-items:center;justify-content:center;gap:0.75rem;background:var(--c-brow-crow-bg);border-top:2px solid var(--c-brow-prow-shadow);border-bottom:0;color:var(--c-brow-prow-nm-fg);font-weight:800;letter-spacing:0.162rem;font-size:1.188rem;min-height:3.9996rem;}
.locknote{background:var(--c-locknote-bg);border:1px solid var(--c-locknote-border);border-radius:0.75rem;padding:0.9996rem 1.1256rem;color:var(--c-brow-prow-nm-fg);font-size:1.188rem;line-height:1.35;margin-bottom:0.75rem;}

.total{background:linear-gradient(180deg,var(--brand),var(--brand-dk));color:var(--c-chip-fly-fg);border-radius:var(--r-lg);box-shadow:var(--sh);display:grid;grid-template-columns:1fr auto;align-items:center;padding:1.25rem 1.6248rem;}
.total .lb{font-size:0.9996rem;letter-spacing:0.162rem;color:var(--gold);}
.total .ct{font-size:1.188rem;color:var(--c-total-ct-fg);margin-top:0.312rem;}
.total .vl{font-size:4.8744rem;font-weight:700;letter-spacing:-0.1248rem;line-height:1;}
.total .vl span{font-size:2.0004rem;font-weight:600;color:var(--gold);margin-left:0.75rem;letter-spacing:0;}

/* ============================================================
   6. ДОЛНА ЛЕНТА
   ============================================================ */
.foot{padding:0 var(--gut) var(--gut);height:var(--foot-h);}
.foot .row{height:100%;}
.sv,.pay{border-radius:var(--r-md);box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--btn-gap);height:100%;width:100%;font-size:var(--btn-f);font-weight:700;white-space:nowrap;}
.sv{background:linear-gradient(180deg,var(--brand),var(--brand-dk));color:var(--cream);}
.pay{color:var(--c-chip-fly-fg);}
.p1{background:linear-gradient(180deg,var(--c-p1-bg),var(--c-brow-prow-nm-fg));}
.p2{background:linear-gradient(180deg,var(--c-p2-bg),var(--c-p2-bg-2));}
.p3{background:linear-gradient(180deg,var(--c-p3-bg),var(--c-p3-bg-2));}
.blogo{background:var(--c-blogo-bg);border-radius:var(--r-md);box-shadow:var(--sh);display:grid;place-items:center;padding:var(--blogo-pad);height:100%;}

/* ============================================================
   7. МОДАЛИ
   ============================================================ */
.veil{position:absolute;inset:0;background:var(--c-veil-overlay-bg);display:none;align-items:center;justify-content:center;z-index:50;}
.veil.on{display:flex;animation:fade .18s ease-out;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.sheet{background:var(--card);border-radius:var(--r-lg);box-shadow:0 30px 70px var(--c-modal-shadow);overflow:hidden;animation:pop .22s cubic-bezier(.2,.9,.3,1.2);max-width:92vw;max-height:92vh;overflow-y:auto;}
@keyframes pop{from{transform:scale(.94) translateY(14px);opacity:0;}to{transform:none;opacity:1;}}

.pad{width:38.7504rem;height:45rem;display:grid;grid-template-rows:auto 1fr;}
.ph{padding:1.2504rem 1.5rem 0.9996rem;border-bottom:1px solid var(--line);}
.ph .t{font-size:0.9372rem;letter-spacing:0.1248rem;color:var(--ink3);}
.ph .v{font-size:3.2496rem;font-weight:700;margin-top:0.3744rem;min-height:3.75rem;}
.keys{display:grid;grid-template-columns:repeat(3,1fr) 9.3744rem;gap:0.5004rem;padding:0.75rem;}
.k{background:var(--paper);border:1px solid var(--line);border-radius:0.6252rem;font-size:2.1252rem;font-weight:600;}
.k.ok{background:var(--c-p1-bg);color:var(--c-chip-fly-fg);border-color:var(--c-brow-prow-nm-fg);grid-row:span 2;font-size:1.6248rem;}
.k.esc{background:var(--c-chip-fly-fg);color:var(--danger);border-color:var(--c-k-esc-border);font-size:1.5rem;}

.paysheet{width:62.4996rem;}
.ps-hd{background:linear-gradient(180deg,var(--brand),var(--brand-dk));color:var(--c-chip-fly-fg);padding:1.2504rem 1.8744rem;display:flex;align-items:center;justify-content:space-between;}
.ps-hd .l{font-size:0.9372rem;letter-spacing:0.15rem;color:var(--gold);}
.ps-hd .sub{color:var(--c-total-ct-fg);font-size:1.062rem;margin-top:0.3744rem;}
.ps-hd .a{font-size:3.6252rem;font-weight:700;line-height:1;}
.ps-bd{padding:1.3752rem 1.6248rem 1.6248rem;}
.ps-cols{display:grid;grid-template-columns:1fr 26.8752rem;gap:1.2504rem;}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:0.6252rem;margin-bottom:0.9996rem;}
.q{background:var(--paper);border:1px solid var(--line);border-radius:0.75rem;height:4.6248rem;font-size:1.5rem;font-weight:700;color:var(--ink2);}
.q.exact{background:var(--c-q-exact-active-bg);border-color:var(--c-locknote-border);color:var(--c-brow-prow-nm-fg);font-size:1.2504rem;}
.mbox{border:1px solid var(--line);border-radius:0.75rem;padding:0.8748rem 1.1256rem;margin-bottom:0.75rem;}
.mbox .l{font-size:0.8124rem;letter-spacing:0.1128rem;color:var(--ink3);}
.mbox .v{font-size:2.8752rem;font-weight:700;margin-top:0.1248rem;}
.mbox.entry{background:var(--c-mbox-entry-bg);border-color:var(--c-mbox-entry-border);}
.mbox.change{background:var(--c-locknote-bg);border-color:var(--c-locknote-border);}
.mbox.change .v{color:var(--c-brow-prow-nm-fg);}
.mbox.rest{background:var(--c-mbox-rest-bg);border-color:var(--c-k-esc-border);}
.mbox.rest .v{color:var(--danger);}
.ps-pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:0.6252rem;}
.pk3{background:var(--paper);border:1px solid var(--line);border-radius:0.75rem;font-size:2.0004rem;font-weight:600;height:6rem;}
.pk3.alt{font-size:1.3128rem;color:var(--ink3);font-weight:700;}
.ps-ft{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}
.pbtn{height:6rem;border-radius:0.75rem;font-size:1.6248rem;font-weight:700;}
.pbtn.cancel{background:var(--c-chip-fly-fg);border:1px solid var(--c-k-esc-border);color:var(--danger);}
.pbtn.done{background:linear-gradient(180deg,var(--c-p1-bg),var(--c-brow-prow-nm-fg));color:var(--c-chip-fly-fg);}
.pbtn.danger{background:linear-gradient(180deg,var(--c-pbtn-danger-bg),var(--c-pbtn-danger-bg-2));color:var(--c-chip-fly-fg);}
.pbtn:disabled{opacity:.4;}
.confirm .cb{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}

.wait-wrap{width:39.9996rem;padding:3rem 3.3744rem 2.4996rem;text-align:center;}
.spin{width:6.5004rem;height:6.5004rem;margin:0 auto 1.6248rem;border-radius:50%;border:9px solid var(--c-spin-border);border-top-color:var(--brand);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.wait-wrap .ttl{font-size:0.9372rem;letter-spacing:0.162rem;color:var(--ink3);}
.wait-wrap .amt{font-size:3.5004rem;font-weight:700;margin:0.3744rem 0 1.1256rem;}
.wait-wrap .amt span{font-size:1.6248rem;color:var(--ink3);margin-left:0.5004rem;}
.wait-wrap .msg{font-size:1.3752rem;color:var(--ink2);min-height:1.8744rem;}
.bar{height:0.5004rem;border-radius:0.2496rem;background:var(--c-spin-border);overflow:hidden;margin:1.5rem 0 1.6248rem;}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--c-bar-i-bg));border-radius:0.2496rem;transition:width linear;}
.wait-wrap .note{font-size:0.9996rem;color:var(--ink3);margin-bottom:1.2504rem;}

.fail-wrap{width:39.9996rem;padding:3.2496rem;text-align:center;}
.xmark{width:8.25rem;height:8.25rem;margin:0 auto 1.6248rem;border-radius:50%;background:var(--c-xmark-bg);display:grid;place-items:center;}
.xmark svg path{stroke-dasharray:44;stroke-dashoffset:44;animation:draw .38s .08s forwards ease-out;}
.xmark svg path:last-child{animation-delay:.24s;}
.fail-wrap h3{font-size:2.25rem;font-weight:700;margin:0 0 0.6252rem;color:var(--danger);}
.fail-wrap p{font-size:1.3128rem;color:var(--ink3);margin:0 0 1.7496rem;}

.done-wrap{width:38.7504rem;padding:3.75rem;text-align:center;}
.check{width:8.25rem;height:8.25rem;margin:0 auto 1.6248rem;border-radius:50%;background:var(--c-brow-crow-bg);display:grid;place-items:center;}
.check svg path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .1s forwards ease-out;}
@keyframes draw{to{stroke-dashoffset:0;}}
.done-wrap h3{font-size:2.3748rem;font-weight:700;margin:0 0 0.5004rem;}
.done-wrap p{font-size:1.3752rem;color:var(--ink3);margin:0;}

/* ============================================================
   8. ВХОД С ПИН
   ============================================================ */
.login{position:absolute;inset:0;z-index:80;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(135deg,var(--c-login-bg),var(--c-login-bg-2));}
.login.out{animation:loginOut .32s ease-in forwards;}
@keyframes loginOut{to{opacity:0;transform:scale(1.02);visibility:hidden;}}
.login.hide{display:none;}

.lg-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.1252rem;border-right:1px solid var(--c-lg-brand-border);}
.lg-plate{background:var(--c-blogo-bg);border-radius:1.5rem;padding:2.7504rem 4.1256rem;box-shadow:0 24px 60px var(--c-lg-plate-shadow);}
.lg-plate img{width:21.2496rem;display:block;}
.lg-site{color:var(--gold);font-size:1.5rem;letter-spacing:0.2496rem;}
.lg-soft{display:flex;align-items:center;gap:0.8748rem;color:var(--c-chip-fly-fg);opacity:.9;}
.lg-soft .circ{width:2.7504rem;height:2.7504rem;border-radius:50%;background:var(--c-chip-fly-fg);display:grid;place-items:center;}
.lg-soft .circ img{width:1.6872rem;}
.lg-soft b{font-size:1.3752rem;}
.lg-soft span{font-size:0.9372rem;color:var(--c-soft-span-fg);margin-left:0.5004rem;}

.lg-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6248rem;}
.lg-title{color:var(--c-chip-fly-fg);font-size:1.8744rem;font-weight:600;}
.dots{display:flex;gap:1.3752rem;}
.dots i{width:1.6248rem;height:1.6248rem;border-radius:50%;border:3px solid var(--c-dots-i-border);transition:background .12s,transform .12s,border-color .12s;}
.dots i.f{background:var(--gold);border-color:var(--gold);transform:scale(1.14);}
.dots.bad i{border-color:var(--c-dots-bad-i-border);background:var(--c-dots-bad-i-border);}
.lg-err{color:var(--c-lg-err-fg);font-size:1.2504rem;min-height:1.6248rem;letter-spacing:0.1872rem;}
.pinpad{display:grid;grid-template-columns:repeat(3,9.3744rem);gap:0.9996rem;}
.pk{height:6.5004rem;border-radius:0.9996rem;background:var(--c-pk-bg);color:var(--c-chip-fly-fg);font-size:2.6256rem;font-weight:600;border:1px solid var(--c-pk-border);}
.pk.alt{font-size:1.6248rem;color:var(--gold);font-weight:700;}
.lg-hint{color:var(--c-lg-hint-fg);font-size:0.9996rem;letter-spacing:0.2496rem;}

/* бутон-логo с функция изход */
.blogo{position:relative;}
.blogo .lo{position:absolute;left:0;right:0;bottom:0.5628rem;display:flex;align-items:center;justify-content:center;gap:0.3744rem;font-size:0.8748rem;font-weight:700;letter-spacing:0.0876rem;color:var(--c-blogo-lo-fg);}
.blogo img{max-width:100%;max-height:100%;margin-bottom:0.8748rem;}

.confirm{width:41.25rem;padding:2.25rem 2.4996rem 2.0004rem;text-align:center;}
.confirm h3{font-size:2.0004rem;font-weight:700;margin:0 0 0.6252rem;}
.confirm p{font-size:1.3128rem;color:var(--ink3);margin:0 0 1.7496rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   9. RESPONSIVE BREAKPOINTS — за различни по размер МОНИТОРИ/прозорци
   (не е предвидено за телефон/таблет). Везна+решетка и сметка са ВИНАГИ
   една до друга (2 колони) — променя се само броят колони на артикулите
   и някои по-фини детайли според наличната ширина.
   ============================================================ */

/* по-тесен монитор/прозорец — 2 колони артикули */
@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);}
}

/* среден монитор — 3 колони артикули */
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .ps-cols{grid-template-columns:1fr 22rem;}
}

/* пълноразмерен монитор — 4 колони артикули, както в оригиналния дизайн */
@media (min-width:1440px){
  .grid{grid-template-columns:repeat(4,1fr);}
}

/* много тесен прозорец — по-малки едрите шрифтове, за да не преливат */
@media (max-width:539.98px){
  .wt .n{font-size:4.5rem;}
  .total .vl{font-size:2.75rem;}
  .ps-cols{grid-template-columns:1fr;}
  .pinpad{grid-template-columns:repeat(3,1fr);}
}
/*==============================================================================
// END of CSS FILE
//============================================================================*/