/* ============================================================
   Устройства (монитор, POS, телефон, киоск) — изцяло с CSS.
   Всички размери са в em → мащабират се от font-size на .devices
   ============================================================ */
.devices { position: relative; width: 100%; height: 100%; font-size: clamp(5px, .62vw, 8.6px); font-family: var(--body); color: #0F172A; }
.devices * { box-sizing: border-box; }
.devices b { font-weight: 700; }
.dv { position: absolute; }

/* ---------- обща рамка ---------- */
.bezel { background: linear-gradient(145deg, #1E2638, #0A0F1C 60%); border-radius: 1.8em; padding: .9em; box-shadow: 0 0 0 .12em rgba(255,255,255,.08) inset, 0 3em 6em rgba(0, 0, 0, .55), 0 0 8em rgba(47, 107, 255, .25); }
.scr { position: relative; overflow: hidden; background: #F4F6FB; border-radius: .9em; }
.scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%); pointer-events: none; }

/* ---------- Монитор ---------- */
.monitor { width: 64em; }
.monitor .scr { aspect-ratio: 16 / 10; }
.monitor .neck { width: 9em; height: 7em; margin: -.2em auto 0; background: linear-gradient(90deg, #121826, #2A3346 50%, #121826); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.monitor .base { width: 26em; height: 1.4em; margin: 0 auto; border-radius: 1em; background: linear-gradient(180deg, #2A3346, #0E1320); box-shadow: 0 1.6em 3em rgba(0, 0, 0, .5); }

/* ---------- POS терминал на стойка ---------- */
.pos { width: 64em; }
.pos .scr { aspect-ratio: 16 / 10.6; }
.pos .stand { width: 16em; height: 9em; margin: -1em auto 0; background: linear-gradient(90deg, #0E1320, #283147 50%, #0E1320); clip-path: polygon(35% 0, 65% 0, 80% 100%, 20% 100%); }
.pos .foot { width: 30em; height: 2.2em; margin: -.2em auto 0; border-radius: 1.2em 1.2em 2em 2em; background: linear-gradient(180deg, #2A3346, #0B101C); box-shadow: 0 2em 3em rgba(0, 0, 0, .5); }

/* ---------- Телефон ---------- */
.phone { width: 22em; aspect-ratio: 9 / 19; background: linear-gradient(145deg, #2A3346, #0A0F1C 50%); border-radius: 3.6em; padding: .8em; box-shadow: 0 0 0 .14em rgba(255,255,255,.1) inset, 0 3em 6em rgba(0, 0, 0, .55), 0 0 6em rgba(47, 107, 255, .2); }
.phone .scr { height: 100%; border-radius: 2.9em; display: flex; flex-direction: column; }
.phone .island { position: absolute; top: 1.4em; left: 50%; transform: translateX(-50%); width: 6.6em; height: 1.9em; border-radius: 2em; background: #05070D; z-index: 3; }
.sbar { display: flex; justify-content: space-between; align-items: center; padding: 1.5em 2.2em .6em; font-size: 1.1em; font-weight: 700; }
.sbar i { font-style: normal; letter-spacing: .1em; font-size: .8em; }

/* ---------- Киоск ---------- */
.kiosk { width: 24em; }
.kiosk .head { background: linear-gradient(145deg, #F8FAFF, #DCE3F0); border-radius: 1.6em 1.6em .6em .6em; padding: 1em; box-shadow: 0 3em 6em rgba(0, 0, 0, .45); }
.kiosk .scr { aspect-ratio: 9 / 15; border-radius: .7em; border: .5em solid #0B1020; }
.kiosk .body { width: 82%; margin: 0 auto; background: linear-gradient(90deg, #C9D2E3, #F4F7FC 45%, #C9D2E3); padding: 1.6em 1.4em 2.2em; display: grid; gap: 1.2em; justify-items: center; }
.kiosk .reader { width: 7em; height: 4.4em; border-radius: .8em; background: #0B1020; display: grid; place-items: center; color: #7FA6FF; font-size: 1em; }
.kiosk .reader svg { width: 2.6em; height: 2.6em; stroke-width: 2; }
.kiosk .slot { width: 70%; height: .6em; border-radius: 1em; background: #0B1020; }
.kiosk .print { width: 60%; height: 7em; border-radius: .6em; background: linear-gradient(180deg, #E8EDF6, #FFFFFF); box-shadow: inset 0 0 0 .15em #C3CCDD; }
.kiosk .base { width: 120%; margin-left: -10%; height: 2em; border-radius: 1em; background: linear-gradient(180deg, #273046, #0B101C); box-shadow: 0 2em 3em rgba(0, 0, 0, .45); }

/* ============================================================
   Интерфейси (екрани)
   ============================================================ */
.ui { position: absolute; inset: 0; display: flex; font-size: 1em; }

/* ---------- POS интерфейс ---------- */
.ui-order { width: 31%; background: #fff; display: flex; flex-direction: column; border-right: .1em solid #E4E8F1; padding: 1.4em 1.2em; gap: .8em; }
.uo-head { display: flex; justify-content: space-between; align-items: center; }
.uo-head b { font-size: 1.5em; }
.uo-head span { font-size: 1em; font-weight: 700; color: #2F6BFF; background: #EAF0FF; padding: .3em .8em; border-radius: 2em; }
.uo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; flex: 1; align-content: start; }
.uo-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 .6em; padding: .45em .6em; border-radius: .6em; font-size: 1em; line-height: 1.25; }
.uo-list li:nth-child(odd) { background: #F5F7FC; }
.uo-list li.sel { background: #EAF0FF; box-shadow: inset .25em 0 0 #2F6BFF; }
.uo-list span { font-weight: 600; }
.uo-list em { grid-column: 1; font-style: normal; color: #64708A; font-size: .9em; }
.uo-list b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; }
.uo-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .8em; border-top: .12em dashed #DCE2EE; }
.uo-total span { color: #64708A; font-weight: 600; }
.uo-total b { font-size: 2.4em; letter-spacing: -.02em; }
.uo-pay { display: grid; place-items: center; height: 3.6em; border-radius: .9em; background: linear-gradient(135deg, #2F6BFF, #4F46E5); color: #fff; font-weight: 800; font-size: 1.25em; letter-spacing: .04em; box-shadow: 0 .8em 1.6em rgba(47, 107, 255, .4); }
.ui-main { flex: 1; display: flex; flex-direction: column; padding: 1.2em; gap: 1em; min-width: 0; }
.ui-cats { display: flex; gap: .5em; flex-wrap: wrap; }
.ui-cats span { font-size: .95em; font-weight: 700; padding: .5em .9em; border-radius: 2em; background: #fff; color: #475069; box-shadow: 0 0 0 .1em #E2E7F1 inset; white-space: nowrap; }
.ui-cats span.on { background: #0F172A; color: #fff; box-shadow: none; }
.ui-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; flex: 1; }
.ui-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: .9em; border-radius: 1em; background: #fff; box-shadow: 0 .2em .6em rgba(15, 23, 42, .06); overflow: hidden; }
.ui-tile i { font-style: normal; font-size: 2.6em; line-height: 1; }
.ui-tile span { font-size: .95em; font-weight: 600; line-height: 1.2; margin-top: .4em; }
.ui-tile b { font-size: 1.1em; color: #2F6BFF; }
.ui-tile.hot::before { content: ""; position: absolute; right: .7em; top: .7em; width: .8em; height: .8em; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 .3em rgba(34, 197, 94, .2); }
.ui-rail { width: 8.4em; background: #0F172A; display: flex; flex-direction: column; padding: 1em .7em; gap: .6em; }
.ui-rail span { display: grid; justify-items: center; gap: .3em; padding: .7em .2em; border-radius: .8em; color: #C7D2E8; font-size: .8em; font-weight: 600; text-align: center; line-height: 1.15; }
.ui-rail span i { font-style: normal; font-size: 1.9em; line-height: 1; }
.ui-rail span.on { background: #2F6BFF; color: #fff; }

/* ---------- Телефон: вход в Zamboo ---------- */
.ui-login { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1.4em 2em 2em; background: radial-gradient(60em 30em at 50% -10%, #3B7BFF 0%, #1A2B6B 45%, #0B1330 80%); color: #fff; }
.ui-login .zb { font: 800 3em/1 var(--head); letter-spacing: -.03em; margin: 1.3em 0 .2em; }
.ui-login .zb b { color: #7FB0FF; }
.ui-login small { color: rgba(255, 255, 255, .7); font-size: 1.05em; }
.pin { display: flex; gap: 1em; margin: 1.6em 0 1.8em; }
.pin i { width: 1.2em; height: 1.2em; border-radius: 50%; box-shadow: 0 0 0 .15em rgba(255, 255, 255, .6) inset; }
.pin i.f { background: #fff; box-shadow: 0 0 1em rgba(127, 176, 255, .8); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; width: 100%; }
.keys span { display: grid; place-items: center; aspect-ratio: 1.35; border-radius: 1em; background: rgba(255, 255, 255, .1); font-size: 1.7em; font-weight: 600; }
.keys span.go { background: #2F6BFF; font-size: 1.1em; font-weight: 800; }

/* ---------- Телефон: мобилно маркиране ---------- */
.ui-mob { flex: 1; display: flex; flex-direction: column; padding: .4em 1.4em 1.6em; gap: 1em; min-height: 0; }
.mob-h { display: flex; justify-content: space-between; align-items: center; }
.mob-h b { font-size: 1.7em; }
.mob-h span { font-size: .95em; color: #64708A; font-weight: 600; }
.mob-cats { display: flex; gap: .5em; overflow: hidden; }
.mob-cats span { flex: none; font-size: .9em; font-weight: 700; padding: .5em .9em; border-radius: 2em; background: #fff; color: #475069; box-shadow: 0 0 0 .1em #E2E7F1 inset; }
.mob-cats span.on { background: #2F6BFF; color: #fff; box-shadow: none; }
.mob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; flex: 1; align-content: start; }
.mob-list li { display: grid; grid-template-columns: 3em 1fr auto; gap: .2em .8em; align-items: center; padding: .8em; border-radius: 1em; background: #fff; box-shadow: 0 .2em .6em rgba(15, 23, 42, .05); }
.mob-list i { grid-row: 1 / span 2; font-style: normal; font-size: 2em; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: .4em; background: #F1F4FA; }
.mob-list span { font-weight: 600; font-size: 1em; line-height: 1.2; }
.mob-list em { font-style: normal; color: #64708A; font-size: .9em; }
.mob-list b { grid-row: 1 / span 2; grid-column: 3; font-size: 1.1em; }
.mob-foot { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.2em; border-radius: 1.2em; background: #0F172A; color: #fff; }
.mob-foot small { display: block; color: #94A3C4; font-size: .85em; }
.mob-foot b { font-size: 1.6em; }
.mob-foot span { background: #2F6BFF; padding: .7em 1.2em; border-radius: .8em; font-weight: 800; font-size: 1em; }

/* ---------- Киоск: начален екран ---------- */
.ui-kiosk { flex-direction: column; align-items: center; justify-content: space-between; padding: 2.4em 1.6em; background: radial-gradient(40em 30em at 50% 30%, #3B7BFF, #12205A 60%, #0A1230); color: #fff; text-align: center; }
.ui-kiosk .k-logo { font: 800 1.6em/1 var(--head); opacity: .9; }
.ui-kiosk .k-hero { font-size: 9em; line-height: 1; filter: drop-shadow(0 .1em .15em rgba(0, 0, 0, .4)); }
.ui-kiosk .k-title { font: 800 2.1em/1.15 var(--head); }
.ui-kiosk .k-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; width: 100%; }
.ui-kiosk .k-btns span { padding: 1em .4em; border-radius: 1em; background: rgba(255, 255, 255, .14); font-weight: 700; font-size: 1.05em; }
.ui-kiosk .k-btns span:first-child { background: #fff; color: #12205A; }
.ui-kiosk .k-pay { font-size: .95em; color: rgba(255, 255, 255, .7); }
/* Киоск: меню */
.ui-kmenu { flex-direction: column; padding: 1.6em 1.2em; gap: 1em; background: #F4F6FB; }
.ui-kmenu .km-h { font: 800 1.6em/1.1 var(--head); }
.ui-kmenu .ui-cats span { font-size: .85em; }
.km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; flex: 1; align-content: start; }
.km-grid div { background: #fff; border-radius: 1em; padding: .8em; display: grid; gap: .2em; box-shadow: 0 .2em .6em rgba(15, 23, 42, .06); }
.km-grid i { font-style: normal; font-size: 3em; line-height: 1.1; }
.km-grid span { font-size: .9em; font-weight: 600; }
.km-grid b { font-size: 1em; color: #2F6BFF; }
.km-cart { display: flex; justify-content: space-between; align-items: center; padding: .9em 1em; border-radius: 1em; background: #2F6BFF; color: #fff; font-weight: 700; }

/* ---------- Мобилни справки ---------- */
.ui-rep { flex: 1; display: flex; flex-direction: column; padding: .4em 1.4em 1.4em; gap: 1em; min-height: 0; }
.rep-h { display: flex; justify-content: space-between; align-items: center; }
.rep-h b { font-size: 1.6em; }
.rep-date { font-size: .9em; font-weight: 600; color: #475069; background: #fff; padding: .5em .8em; border-radius: .8em; box-shadow: 0 0 0 .1em #E2E7F1 inset; }
.rep-card { background: #fff; border-radius: 1.2em; padding: 1.2em; box-shadow: 0 .2em .8em rgba(15, 23, 42, .06); }
.rep-card h5 { margin: 0 0 .9em; font: 700 1em/1.2 var(--body); color: #64708A; letter-spacing: 0; }
.kpi { font: 800 2.6em/1 var(--head); letter-spacing: -.02em; }
.kpi small { font-size: .4em; color: #16A34A; font-weight: 700; margin-left: .4em; vertical-align: middle; }
.donut { width: 13em; height: 13em; border-radius: 50%; margin: .4em auto 1em; background: conic-gradient(#2F6BFF 0 36.72%, #22D3EE 0 64.3%, #818CF8 0 84.71%, #F59E0B 0 97.21%, #CBD5E1 0); display: grid; place-items: center; }
.donut::after { content: attr(data-c); width: 8em; height: 8em; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 1.5em/1 var(--head); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.legend li { display: flex; align-items: center; gap: .6em; font-size: .95em; font-weight: 600; }
.legend li i { width: .9em; height: .9em; border-radius: .25em; }
.legend li b { margin-left: auto; color: #475069; }
.bars { display: flex; align-items: flex-end; gap: .7em; height: 20em; padding-top: 2em; }
.bars div { flex: 1; position: relative; border-radius: .6em .6em .2em .2em; background: linear-gradient(180deg, #5B8CFF, #2F6BFF); }
.bars div:nth-child(even) { background: linear-gradient(180deg, #67E8F9, #22D3EE); }
.bars div span { position: absolute; left: 50%; bottom: calc(100% + .3em); transform: translateX(-50%); font-size: .85em; font-weight: 700; white-space: nowrap; color: #334155; }
.bars-x { display: flex; gap: .7em; margin-top: .5em; }
.bars-x span { flex: 1; text-align: center; font-size: .8em; color: #64708A; font-weight: 600; }
.rep-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.rep-table th { text-align: left; color: #64708A; font-weight: 600; padding: .4em 0; border-bottom: .1em solid #E4E8F1; }
.rep-table td { padding: .5em 0; border-bottom: .1em solid #F1F4FA; font-variant-numeric: tabular-nums; }
.rep-table td:last-child, .rep-table th:last-child { text-align: right; font-weight: 700; }
.line { width: 100%; height: 14em; display: block; }

/* ---------- плаващи елементи ---------- */
.float { position: absolute; z-index: 5; display: flex; align-items: center; gap: 1em; padding: 1.2em 1.6em; border-radius: 1.4em; background: rgba(255, 255, 255, .95); color: #0F172A; box-shadow: 0 2em 4em rgba(0, 0, 0, .35); font-size: 1.3em; animation: bob 5s ease-in-out infinite; backdrop-filter: blur(8px); }
.float .fi { width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; background: linear-gradient(135deg, #2F6BFF, #4F46E5); color: #fff; }
.float .fi svg { width: 1.5em; height: 1.5em; }
.float b { display: block; font-size: 1.15em; }
.float small { color: #64708A; font-size: .85em; }
@keyframes bob { 50% { transform: translateY(-.8em); } }
.glow-ring { position: absolute; border-radius: 50%; border: .2em solid rgba(127, 176, 255, .35); animation: ring 3.2s ease-out infinite; }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* Телефони със снимки от zamboo.bg */
.phone .scr.scr-photo { padding: 0; background: #111; }
.phone .scr.scr-photo::after { display: none; }
.phone .scr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: inherit; }
.phone-photos { position: relative; width: 100%; height: 100%; }
.phone-photos .pp { position: absolute; top: 50%; height: 92%; width: auto; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .5)); }
.phone-photos .pp-main { left: 50%; height: 100%; transform: translate(-50%, -50%); z-index: 2; }
.phone-photos .pp-left { left: 2%; transform: translateY(-46%) rotate(-7deg) scale(.86); }
.phone-photos .pp-right { right: 2%; transform: translateY(-46%) rotate(7deg) scale(.86); }
/* POS/монитор със снимка */
.monitor .scr.scr-photo, .pos .scr.scr-photo { padding: 0; background: #2a2a2a; }
.monitor .scr-photo img, .pos .scr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }