/* извор: /home/dc/AI/dc-avtentikator/komplet/js/dcav.css — не менувај тука, промената оди во изворот */
/* komplet/js/dcav.css — изгледот на JS комплетот за најава, по одобрените макети (komplet/ikoni/maketi.html, Зоран 07.11.2026).
   Бара komplet/ikoni/ikoni.css (боите на иконите, анимациите, вртелешката) и color-scheme на :root (light dark, или
   light/dark по темата). Производот ги менува токените --dcav-* (своите бои и фонт), не класите. Само од нашиот сервер. */
:root{
  --dcav-kutija:light-dark(#fff,#16222e);
  --dcav-kutija2:light-dark(#f3f6f9,#1c2b39);
  --dcav-kutija3:light-dark(#e4ebf1,#243545);
  --dcav-poz2:light-dark(#e4ebf1,#0b131b);
  --dcav-tekst:light-dark(#1f2d3a,#e6edf3);
  --dcav-matno:light-dark(#566779,#9fb1c2);
  --dcav-akcent:#0f7cad;
  --dcav-akcent2:light-dark(#0c6690,#4cbaeb);
  --dcav-na-akcent:#fff;
  --dcav-linija:light-dark(#d2dce5,#2c3e50);
  --dcav-vlez:light-dark(#fff,#0b131b);
  --dcav-vlez-rub:light-dark(#7b8b9c,#60768b);
  --dcav-senka-1:0 10px 30px light-dark(rgba(10,30,45,.14),rgba(0,0,0,.45)),0 2px 6px rgba(10,30,45,.08);
  --dcav-senka-2:0 24px 64px light-dark(rgba(10,30,45,.26),rgba(0,0,0,.6));
  --dcav-pozadina:light-dark(rgba(6,18,28,.45),rgba(0,0,0,.6));
  --dcav-mono:ui-monospace,"DejaVu Sans Mono",Menlo,monospace;
  --dcav-font:inherit;
}
.dcav-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dcav-ok{color:var(--dc-ok)}.dcav-ne{color:var(--dc-ne)}.dcav-mat{color:var(--dcav-matno)}.dcav-br{color:var(--dcav-akcent2)}
.dcav-ik-46{width:46px!important;height:46px!important}
.dcav-ik-56{width:56px!important;height:56px!important}
.dcav-ik-84{width:84px!important;height:84px!important}
.dcav-kopce-g[hidden],.dcav-kopce-v[hidden],.dcav-kopce-app[hidden],.dcav-kopce-telefon[hidden],.dcav-sovet[hidden]{display:none!important}

/* ── полиња и копчиња (иконата наместо натпис; зборот е во aria-label) ── */
.dcav-pole{display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--dcav-vlez-rub);border-radius:8px;padding:0 12px;
  background:var(--dcav-vlez);color:var(--dcav-tekst);min-width:0;cursor:text}
.dcav-pole>.dc-ik{color:var(--dcav-matno)}
/* Секој input во полето (и во обвивка на производот, на пр. „око“ за лозинка): работ, позадината, сенката и padding-от ги има
   САМО .dcav-pole. !important е тука намерно — стилот на производот за `form input`/`input[type=…]` има поголема специфичност
   и инаку дава „двојна кутија“. */
.dcav-pole input{flex:1;min-width:0;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;border-radius:0!important;
  margin:0!important;color:inherit;font:15px/1.4 var(--dcav-font);padding:0!important;height:100%}
.dcav-pole input[name=kod],.dcav-pole input[name=toasiti_kod]{font:600 19px/1 var(--dcav-mono);letter-spacing:.2em}
/* Обвивката на производот околу полето (дете што не е input ни икона, а содржи input): без своја кутија, го зазема просторот.
   !important по иста причина: производот ја става во рамка/позадина. */
.dcav-pole>:not(input):not(.dc-ik):has(input){flex:1 1 0!important;min-width:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important;height:100%}
.dcav-pole:focus-within{outline:2px solid var(--dcav-akcent2);outline-offset:1px}
/* „Око“ во полето за лозинка (D.oko): уште еден член во редот, десно. !important по иста причина како кај input — стилот на
   производот за `button` (позадина, раб, ширина) инаку го прави вистинско копче во полето. */
.dcav-oko{flex:0 0 32px!important;width:32px!important;min-width:0!important;height:32px!important;margin:0 -6px 0 0!important;padding:0!important;
  border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important;color:var(--dcav-matno);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.dcav-oko:hover,.dcav-oko[aria-pressed=true]{color:var(--dcav-tekst)}
.dcav-oko:focus-visible{outline:2px solid var(--dcav-akcent2);outline-offset:1px}
.dcav-oko>.dc-ik{width:20px;height:20px}
.dcav-pole input::-ms-reveal,.dcav-pole input::-ms-clear{display:none}   /* Edge има свое око — да не се две */
.dcav-kopce-g,.dcav-kopce-v,.dcav-kopce-app{height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;box-sizing:border-box;font:inherit;cursor:pointer;text-decoration:none}  /* border-box: и надвор од попапот (екранот за 2ФА) — padding+раб не прелеваат на 390 */
.dcav-kopce-g{border:0;background:var(--dcav-akcent);color:var(--dcav-na-akcent)}
.dcav-kopce-v{border:1px solid var(--dcav-linija);background:var(--dcav-kutija2);color:var(--dcav-tekst)}
.dcav-kopce-g .dc-ik,.dcav-kopce-v .dc-ik{width:26px;height:26px}
.dcav-kopce-g:disabled{opacity:.55;cursor:default}
.dcav-kopce-g:focus-visible,.dcav-kopce-v:focus-visible,.dcav-kopce-app:focus-visible,.dcav-vrti:focus-visible,
.dcav-zatvori:focus-visible,.dcav-kopce-telefon:focus-visible{outline:3px solid var(--dcav-akcent2);outline-offset:2px}
.dcav-razdel{height:1px;background:var(--dcav-linija);margin:6px 0}

/* ── картичката за најава со две лица (dcpanel najava-rezim, „Превртување“, 0,6 s) ── */
.dcav-kartica{display:grid;perspective:1400px;width:340px;max-width:100%;color:var(--dcav-tekst)}
.dcav-lice{position:relative;background:var(--dcav-kutija);border-radius:12px;box-shadow:var(--dcav-senka-1);padding:52px 24px 26px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.dcav-kartica[data-rezim=telefon]>.dcav-lice{padding-top:26px}
.dcav-kartica>.dcav-lice{grid-area:1/1;backface-visibility:hidden;transition:transform .6s cubic-bezier(.3,.7,.2,1),visibility 0s .6s}
.dcav-kartica>.dcav-lice-qr{transform:rotateY(180deg);visibility:hidden;justify-content:center}
.dcav-kartica.prevrteno>.dcav-lice-qr{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.dcav-kartica.prevrteno>.dcav-lice-l{transform:rotateY(-180deg);visibility:hidden}
.dcav-kartica:not(.prevrteno)>.dcav-lice-l{transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.dcav-kartica.dcav-bez-prelaz>.dcav-lice{transition:none!important}
/* Замката (beauty): глобален `input,button{transition:all}` ја анимира наследената visibility и фокусот по вртењето
   не стига. Елементите во лицата го задржуваат траењето на производот, но без visibility. */
.dcav-kartica .dcav-lice :is(input,button,select,textarea,a,label){transition-property:color,background-color,border-color,outline-color,box-shadow,opacity}
.dcav-vrti{position:absolute;top:10px;right:10px;display:flex;gap:2px;align-items:center;height:38px;padding:0 9px 0 7px;border-radius:999px;
  border:1px solid var(--dcav-linija);background:var(--dcav-kutija2);color:var(--dcav-tekst);cursor:pointer}
.dcav-vrti .dcav-vrti-znak{width:20px;height:20px;color:var(--dcav-matno)}
.dcav-vrti:hover{border-color:var(--dcav-akcent2)}
.dcav-qr-mesto{display:flex;flex-direction:column;align-items:center}

/* ── QR: бојата е РАМКАТА, обликот е мал знак до кодот (без име на бојата); состојбите — иконата врз избледениот код ── */
.dcav-qr-blok{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.dcav-qr-ram{position:relative;border:4px solid var(--dc-ik-boja,var(--dcav-linija));border-radius:10px;padding:6px;background:#fff;line-height:0}
.dcav-qr-ram.dcav-bez-boja{border-color:var(--dcav-vlez-rub)}
.dcav-qr-slika,.dcav-qr-prazno{display:block;width:200px;height:200px}
.dcav-qr-mal .dcav-qr-slika{width:150px;height:150px}
.dcav-qr-oblik{position:absolute;right:-30px;bottom:-4px;width:20px;height:20px;color:var(--dc-ik-boja)}
.dcav-qr-oblik .dc-ik{width:20px;height:20px}
.dcav-prekriv{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.dcav-prekriv .dc-ik{width:76px;height:76px}
.dcav-qr-blok:not([data-sostojba=ceka]) .dcav-qr-slika{opacity:.12}
.dcav-nasoka{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--dcav-matno)}
.dcav-nasoka .dc-ik{width:28px;height:28px}
.dcav-nasoka .dcav-ik-logo{width:36px;height:36px}
.dcav-qr-blok>.dcav-kopce-g{width:auto;padding:0 28px}

/* ── прозорецот (<dialog>; глобалниот CSS на производот ја брише маргината — fixed + margin:auto) ── */
.dcav-dijalog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100% - 24px);overflow:auto;border:0;border-radius:16px;
  padding:20px;width:min(560px,calc(100% - 24px));background:var(--dcav-kutija);color:var(--dcav-tekst);box-shadow:var(--dcav-senka-2);
  font:15px/1.5 var(--dcav-font);box-sizing:border-box}
.dcav-dijalog *,.dcav-dijalog *::before,.dcav-dijalog *::after{box-sizing:border-box}
.dcav-dijalog::backdrop{background:var(--dcav-pozadina)}
.dcav-dijalog.dcav-toasiti{width:min(400px,calc(100% - 24px))}
.dcav-telo{display:grid;gap:14px}
.dcav-zatvori{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--dcav-matno);cursor:pointer;z-index:1}
.dcav-zatvori::before,.dcav-zatvori::after{content:"";position:absolute;left:9px;right:9px;top:16px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.dcav-zatvori::after{transform:rotate(-45deg)}
.dcav-zatvori:hover{background:var(--dcav-kutija2);color:var(--dcav-tekst)}
.dcav-forma{display:grid;gap:12px}
.dcav-glava-sredina{display:flex;justify-content:center;padding:4px 0 2px}
.dcav-glava-qr{display:flex;justify-content:space-between;align-items:center;padding-right:30px}
.dcav-greska{margin:0;min-height:1.2em;color:var(--dc-ne);font-size:14px}
.dcav-greska:empty{display:none}
.dcav-poraka{margin:0;color:var(--dcav-matno);font-size:14px;text-align:center}
.dcav-poraka:empty{display:none}
.dcav-tekst-mal{margin:0;color:var(--dcav-matno);font-size:13px}

/* „телефонот бара“: кој бара (модел крупно, IP, прстенот), „ако боја → истата“, „ако нема боја → Не сум јас“ */
.dcav-popap-glava{display:grid;grid-template-columns:auto 1fr auto;gap:2px 14px;align-items:center;padding-right:30px}
.dcav-popap-glava>.dc-ik{width:46px;height:46px;color:var(--dcav-akcent2);grid-row:span 2}
.dcav-model{font-size:21px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.dcav-ip{font:14px/1.4 var(--dcav-mono);color:var(--dcav-matno);display:flex;gap:6px;align-items:center;min-height:1.4em}
.dcav-ip .dc-ik{width:16px;height:16px}
.dcav-rok{position:relative;width:52px;height:52px;grid-row:span 2;display:grid;place-items:center;flex:none}
.dcav-rok svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dcav-rok circle{fill:none;stroke-width:3.5}
.dcav-rok .poz{stroke:var(--dcav-kutija3)}
.dcav-rok .ost{stroke:var(--dcav-akcent2);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:var(--dcav-rok-pom,0);transition:stroke-dashoffset 1s linear}
.dcav-rok b{font:700 15px/1 var(--dcav-mono)}
.dcav-ako{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--dcav-kutija2)}
.dcav-ako>.dcav-slika{width:84px;height:84px;color:var(--dcav-matno)}
.dcav-ako>.dcav-strelka{width:30px;height:30px;color:var(--dcav-matno)}
.dcav-boi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dcav-boja-k{height:62px;border:0;border-radius:10px;background:var(--dc-ik-boja);display:grid;place-items:center;color:var(--dc-na-boja);cursor:pointer}
.dcav-boja-k .dc-ik{width:30px;height:30px}
.dcav-ne-k{height:62px;border:0;border-radius:10px;background:var(--dc-ne);color:var(--dc-na-ne);display:grid;place-items:center;width:100%;cursor:pointer}
.dcav-ne-k .dc-ik{width:42px;height:42px}
/* „Не сум јас“ е почетниот фокус — се гледа и без тастатура (макетата: .ne-k.fokus) */
.dcav-boja-k:hover,.dcav-ne-k:hover,.dcav-boja-k:focus-visible,.dcav-ne-k:focus{outline:3px solid var(--dcav-tekst);outline-offset:2px}
.dcav-boja-k:disabled,.dcav-ne-k:disabled{cursor:default;opacity:.45}
.dcav-boja-k[aria-pressed=true]{opacity:1;outline:3px solid var(--dcav-tekst);outline-offset:2px}

/* исходот: истиот попап, мало тело; моделот останува */
.dcav-mal{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:14px 0 6px}
.dcav-mal .dcav-model{font-size:17px}
.dcav-podatok{display:flex;align-items:center;gap:6px;font-size:15px}
.dcav-podatok .dc-ik{width:18px;height:18px;color:var(--dcav-matno)}
.dcav-dvojka{display:flex;align-items:center;gap:6px}
.dcav-dvojka .dc-ik{width:56px;height:56px}
.dcav-golema-br{font:800 44px/1 var(--dcav-mono)}
.dcav-mal>.dcav-kopce-g,.dcav-mal>.dcav-kopce-v{width:auto;min-width:160px;padding:0 26px}

/* „Тоа си ти“: иконата, дејството НАПИШАНО крупно (cel_tekst од серверот), прстенот */
.dcav-toasiti-glava{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding-right:30px}
.dcav-toasiti-glava>.dc-ik{width:46px;height:46px}
.dcav-cel-tekst{font-size:19px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.dcav-toasiti-glava>.dcav-rok{grid-row:auto}
.dcav-kopce-app{height:62px;border:2px solid var(--dcav-akcent2);background:var(--dcav-kutija);color:var(--dcav-tekst)}
.dcav-kopce-app .dcav-ik-logo{width:38px;height:38px}
.dcav-kopce-app .dc-ik:not(.dcav-ik-logo){width:30px;height:30px}

/* ── телефон (§3.9): големото копче [логото + отпечаток] и тивкиот совет ── */
.dcav-kopce-telefon{display:flex;align-items:center;justify-content:center;gap:10px;height:64px;border:2px solid var(--dcav-akcent2);
  border-radius:8px;background:var(--dcav-kutija);color:var(--dcav-tekst);text-decoration:none}
.dcav-kopce-telefon .dcav-ik-logo{width:38px;height:38px}
.dcav-kopce-telefon .dc-ik:not(.dcav-ik-logo){width:30px;height:30px}
.dcav-sovet{margin:-4px 0 0;color:var(--dcav-matno);display:flex;justify-content:center}

/* ── по најавата (popap-boja, toa-si-ti, telefoni): икона + ВИДЛИВ збор на јазикот на сметката (Зоран 07.11) ── */
.dcav-zbor{font-weight:600;line-height:1.2}
.dcav-pole>input::placeholder{color:var(--dcav-matno);opacity:1}
.dcav-pole>input[name=kod]::placeholder,.dcav-pole>input[name=toasiti_kod]::placeholder{font-size:15px;font-weight:400;letter-spacing:normal}
.dcav-tekst{margin:0;text-align:center;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.dcav-nasoka-zbor{flex-wrap:wrap;text-align:center}
.dcav-nasoka-zbor>.dcav-zbor{flex-basis:100%;font-weight:500;font-size:14px}
.dcav-kopce-g.dcav-so-zbor,.dcav-kopce-v.dcav-so-zbor{font-size:16px;line-height:1.2;padding-left:14px;padding-right:14px}
.dcav-kopce-g.dcav-so-zbor .dc-ik,.dcav-kopce-v.dcav-so-zbor .dc-ik{width:22px;height:22px;flex:none}
.dcav-boja-k.dcav-so-zbor,.dcav-ne-k.dcav-so-zbor{height:auto;min-height:62px;padding:6px 4px;align-content:center;gap:3px;font:inherit}
.dcav-boja-k.dcav-so-zbor .dc-ik,.dcav-ne-k.dcav-so-zbor .dc-ik{width:26px;height:26px}
.dcav-boja-k .dcav-zbor{font-size:13px}
.dcav-ne-k .dcav-zbor{font-size:15px}
.dcav-kopce-app.dcav-so-zbor{height:auto;min-height:62px;padding:6px 12px;flex-wrap:wrap;font-weight:600}
.dcav-mal>.dcav-tekst{max-width:38ch}
/* telefoni.js — листата телефони со Автологин во профилот */
.dcav-telefoni{display:grid;gap:10px;color:var(--dcav-tekst);font:15px/1.5 var(--dcav-font)}
.dcav-tel-sostojba{display:flex;align-items:center;gap:8px;margin:0}
.dcav-tel-sostojba:empty{display:none}
.dcav-tel-sostojba>.dc-ik{width:28px;height:28px;flex:none}
.dcav-tel-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dcav-tel-lista[hidden]{display:none}
.dcav-tel-red{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid var(--dcav-linija);border-radius:10px;
  background:var(--dcav-kutija2)}
.dcav-tel-red>.dc-ik{width:28px;height:28px;color:var(--dcav-matno);flex:none}
.dcav-tel-opis{flex:1 1 160px;min-width:0}
.dcav-tel-ime{display:block;font-weight:700;overflow-wrap:anywhere}
.dcav-tel-pod{display:block;font-size:13px;color:var(--dcav-matno)}
.dcav-tel-red>.dcav-kopce-v{width:auto;height:auto;min-height:44px;padding:6px 14px;flex:0 1 auto;font-size:15px;background:var(--dcav-kutija)}
.dcav-tel-red>.dcav-kopce-v:disabled{opacity:.55;cursor:default}
.dcav-tel-poraka{margin:0;font-size:14px;color:var(--dcav-matno)}
.dcav-tel-poraka:empty{display:none}
.dcav-tel-poraka.dcav-ne{color:var(--dc-ne)}

/* ── §3.8в истиот телефон: бојата крупно (ја избира човекот во апликацијата), копчето за апликацијата, напомената ── */
.dcav-ist-boja{width:min(180px,52vw);aspect-ratio:1;margin:0 auto;border-radius:14px;background:var(--dc-ik-boja);color:var(--dc-na-boja);
  display:grid;place-items:center}
.dcav-ist-boja>.dc-ik{width:42%;height:42%}
.dcav-ist-tekst{margin:0;text-align:center;font-size:16px;font-weight:600}
.dcav-ist-sovet{gap:6px;align-items:center;font-size:14px;text-align:left}
.dcav-ist-sovet>.dc-ik{width:22px;height:22px;flex:none}
.dcav-ist-kopce{height:auto;min-height:62px;padding:6px 12px;flex-wrap:wrap;font-weight:600;text-decoration:none}

/* ── §3.8в т.11: понудата по најава на телефон (ponuda-avtologin.js) — лента на врвот на страницата по најавата. Распоредот
   по ШИРИНАТА НА ЛЕНТАТА (container query), не на екранот: тесна (телефон, или тесна колона на широк екран) — текстот горе,
   „Вклучи“ преку цела ширина, другите две до него; широка — текстот лево, копчињата десно во ред. ── */
.dcav-ponuda{container-type:inline-size;width:100%;max-width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid var(--dcav-linija);
  border-left:4px solid var(--dcav-akcent);border-radius:12px;background:var(--dcav-kutija);color:var(--dcav-tekst);
  font:15px/1.45 var(--dcav-font);box-shadow:var(--dcav-senka-1)}
.dcav-ponuda[hidden]{display:none!important}
.dcav-ponuda-telo{display:grid;gap:12px;min-width:0}
.dcav-ponuda-glava{display:flex;align-items:flex-start;gap:12px;min-width:0}
.dcav-ponuda-glava>.dc-ik{width:40px;height:40px;flex:none}
.dcav-ponuda-opis{min-width:0}
.dcav-ponuda-naslov{margin:0;font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.dcav-ponuda-pod{margin:3px 0 0;font-size:13px;color:var(--dcav-matno);overflow-wrap:anywhere}
.dcav-ponuda-kopcinja{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.dcav-ponuda-kopcinja>button{width:auto;height:auto;min-height:44px;flex:1 1 auto;min-width:0;padding:6px 14px}
.dcav-ponuda-kopcinja>.dcav-kopce-g{flex-basis:100%}
@container (min-width:780px){
  .dcav-ponuda-telo{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px}
  .dcav-ponuda-kopcinja{flex-wrap:nowrap}
  .dcav-ponuda-kopcinja>button,.dcav-ponuda-kopcinja>.dcav-kopce-g{flex:0 0 auto}
}

@media (max-width:700px){
  .dcav-dijalog{padding:14px}
  .dcav-telo{gap:12px}
  .dcav-ako{gap:8px;padding:10px}
  .dcav-ako>.dcav-slika{width:60px;height:60px}
  .dcav-ako>.dcav-strelka{width:22px;height:22px}
  .dcav-qr-slika,.dcav-qr-prazno{width:170px;height:170px}
  .dcav-qr-mal .dcav-qr-slika{width:140px;height:140px}
  .dcav-model{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .dcav-kartica>.dcav-lice,.dcav-kartica.prevrteno>.dcav-lice-qr,.dcav-kartica:not(.prevrteno)>.dcav-lice-l{transition:none}
  .dcav-rok .ost{transition:none}
}