/* ═══════════════════════════════════════════════════════════════════════
   🎮 GAME CLUB POS — STYLE.CSS v3
   ═══════════════════════════════════════════════════════════════════════

   NEW LAYOUT:
   ┌──────────────────────────────────────┐
   │ Header                               │
   ├──────────────────────────────────────┤
   │ Shift Bar                            │
   ├──────────────────────────────────────┤
   │ Categories                           │
   ├──────────────────────────────────────┤
   │                                      │
   │ PRODUCTS GRID (full width, fills)    │
   │                                      │
   ├──────────────────────────────────────┤
   │ CART AT BOTTOM (full width, large)   │
   └──────────────────────────────────────┘

   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   DESIGN TOKENS                                                  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

:root {
    /* ── iOS Apple Dark palette ── */
    --ios-blue:    #007AFF;
    --ios-blue2:   #0A84FF;
    --ios-green:   #34C759;
    --ios-green2:  #30D158;
    --ios-red:     #FF3B30;
    --ios-orange:  #FF9500;
    --ios-yellow:  #FFCC00;
    --ios-purple:  #AF52DE;
    --ios-pink:    #FF2D55;
    --ios-teal:    #5AC8FA;
    --ios-indigo:  #5856D6;

    /* ── Backgrounds ── */
    --bg-primary:    #000000;
    --bg-secondary:  #0A0A0A;
    --bg-tertiary:   #141414;
    --bg-elevated:   #1C1C1E;
    --bg-elevated2:  #2C2C2E;

    /* ── Text ── */
    --text-primary:    #FFFFFF;
    --text-secondary:  rgba(235, 235, 245, 0.65);
    --text-tertiary:   rgba(235, 235, 245, 0.35);
    --text-muted:      rgba(235, 235, 245, 0.20);

    /* ── Borders ── */
    --border:        rgba(84, 84, 88, 0.4);
    --border-light:  rgba(84, 84, 88, 0.22);

    /* ── Glass ── */
    --glass:         rgba(28, 28, 30, 0.72);
    --glass-thick:   rgba(28, 28, 30, 0.92);

    /* ── Glow ── */
    --glow-blue:   0 0 24px rgba(0, 122, 255, 0.4);
    --glow-green:  0 0 24px rgba(52, 199, 89, 0.4);
    --glow-red:    0 0 24px rgba(255, 59, 48, 0.4);

    /* ── Gradients ── */
    --grad-blue:   linear-gradient(135deg, #007AFF, #0A84FF);
    --grad-green:  linear-gradient(135deg, #248A3D, #34C759);
    --grad-red:    linear-gradient(135deg, #D70015, #FF3B30);

    /* ── Radius ── */
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-2xl: 36px;
    --r-full: 9999px;

    /* ── Motion ── */
    --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-soft:  cubic-bezier(0.25, 1.2, 0.5, 1);
    --smooth:       cubic-bezier(0.4, 0, 0.2, 1);
    --bounce:       cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ── Layout dimensions ── */
    --header-h:    62px;
    /* Electron oynasining nativ sarlavha tasmasi (electron/main.js TITLEBAR_H) */
    --titlebar-h:  34px;
    --shift-h:     54px;
    --cats-h:      56px;
    --cart-h:      280px;

    /* ── Card ── */
    --card-min-w:  170px;
    --card-h:      230px;
    --card-gap:    18px;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   RESET + BASE                                                   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, 'SF Pro Display', 'Inter',
                 BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    line-height: 1.47;
    letter-spacing: -0.022em;
}

::selection {
    background: rgba(0, 122, 255, 0.35);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.4);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 128, 0.65);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   BACKGROUND                                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            rgba(0, 122, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%,
            rgba(52, 199, 89, 0.03) 0%, transparent 45%),
        linear-gradient(180deg, #0A0A0A 0%, #000000 60%, #050505 100%);
    z-index: 0;
    pointer-events: none;
}

/* Particles canvas — must be fixed so it doesn't take layout space */
#particles-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.22;
    width: 100vw;
    height: 100vh;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   MAIN LAYOUT                                                    ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.pos-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;        /* ← shu qatorni qo'shing */
    position: relative;
    z-index: 2;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   HEADER                                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: var(--header-h);
    background: var(--glass-thick);
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    flex-shrink: 0;
    z-index: 100;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  ELECTRON: oyna sarlavhasi tasmasi                                ║
   ╚═══════════════════════════════════════════════════════════════════╝
   Ilovada yuqoridagi 34px — oynani surish va oyna tugmalari (– ▢ ✕) uchun
   ajratilgan NATIV soha (electron/main.js: titleBarOverlay + shell.html
   dagi `-webkit-app-region: drag`). U tasmadagi sichqoncha bosishi sahifaga
   umuman yetib bormaydi — OS uni oynani surish deb qabul qiladi.

   Sarlavhani balandlatib tugmalarni tasmadan pastga surish sinab ko'rildi
   (62 -> 88px), lekin sotuv maydoni kichraygani uchun rad etildi.

   YAKUNIY YECHIM — ikki qismdan iborat, ikkalasi birga ishlaydi:
     1) electron/shell.html: surish sohasi endi `right: 380px` — o'ng chekka
        surilmaydi, ya'ni u yerdagi bosish sahifaga YETADI.
     2) shu yerda: sarlavha tugmalari o'ng chetdan 170px ichkariga suriladi,
        chunki o'sha chekkada nativ oyna tugmalari (– ▢ ✕, ~138px) turadi —
        ular ham bosishni yutadi va ularni olib tashlab bo'lmaydi.

   Natijada sarlavha 62px qoladi (sotuv maydoni yo'qotilmaydi), tugmalar esa
   to'liq bosiladi. Bo'shab qolgan 170px o'ng chekkada nativ oyna tugmalari
   ko'rinadi, ya'ni bo'sh joy emas.

   ⚠ 380 va 170 raqamlari juftlik: biri o'zgarsa ikkinchisini ham tekshiring.
   Ilova 1.1.7 dan eski bo'lsa (1) qismi yo'q — u holda tugmalar chapga
   suriladi, lekin baribir faqat pastdan bosiladi (regressiya emas).
   Brauzerda (is-electron sinfi yo'q) hech narsa o'zgarmaydi. */
html.is-electron .header {
    padding-right: 170px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: var(--grad-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,0.2);
    font-size: 18px;
}

.header-logo h1 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header-logo span {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-top: 1px;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    border-radius: var(--r-full);
    letter-spacing: 0.05em;
}

.settings-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--spring);
    font-size: 13px;
}

.settings-btn:hover {
    background: rgba(0, 122, 255, 0.12);
    border-color: rgba(0, 122, 255, 0.35);
    color: var(--ios-blue);
    transform: scale(1.08);
}

.header-actions a {
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 18px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-full);
    background: rgba(120, 120, 128, 0.18);
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.3s var(--spring);
}

.header-actions a:hover {
    color: var(--ios-blue);
    border-color: rgba(0, 122, 255, 0.35);
    background: rgba(0, 122, 255, 0.08);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   SHIFT BAR                                                      ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.shift-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: var(--shift-h);
    background: var(--glass);
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(20px) saturate(180%);
    flex-shrink: 0;
    gap: 12px;
}

.shift-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.shift-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ios-red);
    box-shadow: 0 0 10px var(--ios-red);
}

.shift-timer-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    border-radius: var(--r-full);
    letter-spacing: 0.06em;
}

.shift-actions {
    display: flex;
    gap: 8px;
}

.shift-btn,
.scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s var(--spring);
}

.shift-btn.start-btn {
    background: var(--grad-green);
    color: #FFFFFF;
    box-shadow: var(--glow-green);
}

.shift-btn.finish-btn {
    background: var(--grad-red);
    color: #FFFFFF;
    box-shadow: var(--glow-red);
}

.scan-btn {
    background: var(--grad-blue);
    color: #FFFFFF;
    box-shadow: var(--glow-blue);
}

.shift-btn:hover:not(:disabled),
.scan-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.shift-btn:disabled,
.scan-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.shift-btn:active:not(:disabled),
.scan-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.95);
    filter: brightness(1.05);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   CATEGORIES                                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.category-tabs {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    height: var(--cats-h);
    align-items: center;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-light);
    background: rgba(10, 10, 10, 0.5);
    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
    padding: 9px 18px;
    border-radius: var(--r-full);
    flex-shrink: 0;
    border: 1px solid var(--border-light);
    background: rgba(120, 120, 128, 0.15);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s var(--spring);
}

.cat-tab:hover {
    border-color: rgba(0, 122, 255, 0.3);
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.08);
    transform: translateY(-1px);
}

.cat-tab.active {
    background: var(--grad-blue);
    border-color: transparent;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,0.2);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   PRODUCTS AREA — fills available space                          ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.products-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    padding: 20px 24px;
    position: relative;
    min-height: 0;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   PRODUCTS GRID                                                  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-w), 1fr));
    gap: var(--card-gap);
    padding-bottom: 20px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-w), 1fr));
    contain: layout style;
    will-change: auto;
    transform: translateZ(0);
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   SEARCH BAR                                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.search-bar {
    position: relative;
    /* O'ng tomonga to'liq cho'ziladi, lekin chapdagidek bir xil bo'shliq qoladi —
       yon devorga tegmaydi (fokus halqasi ham yopishmaydi). */
    margin: 8px 6px 22px;
}

.search-bar input {
    width: 100%;
    background: rgba(28, 28, 30, 0.7);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 13.5px;
    padding: 11px 16px 11px 40px;
    border-radius: 12px;
    outline: none;
    backdrop-filter: blur(10px);
    transition: all 0.25s;
}

.search-bar input::placeholder {
    color: var(--text-tertiary);
}

.search-bar input:focus {
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-tertiary);
    pointer-events: none;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   CART AT BOTTOM — Wide, horizontal layout                       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.cart-bottom {
    height: var(--cart-h);
    background: var(--glass-thick);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 50;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

/* Top accent line */
.cart-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 122, 255, 0.4) 30%,
        rgba(0, 122, 255, 0.6) 50%,
        rgba(0, 122, 255, 0.4) 70%,
        transparent 100%);
}

/* ── Cart Header (top strip) ── */
.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
}

.cart-header h2 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}

.cart-header h2 .cart-icon-wrap {
    color: var(--ios-blue);
    display: inline-flex;
}

.cart-count-badge {
    background: var(--grad-blue);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-blue);
    font-family: 'JetBrains Mono', monospace;
    padding: 0 5px;
}

.cart-clear-btn {
    background: rgba(255, 59, 48, 0.08);
    border: 1px solid rgba(255, 59, 48, 0.22);
    color: var(--ios-red);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: var(--r-full);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s var(--spring);
}

.cart-clear-btn:hover {
    background: rgba(255, 59, 48, 0.16);
    transform: scale(1.04);
}

/* ── Cart Body — horizontal items + total/pay ── */
.cart-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Items area (left side) */
.cart-items-wrap {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    scrollbar-width: thin;
    position: relative;
}

.cart-items-wrap::-webkit-scrollbar {
    height: 4px;
}

.cart-items-wrap::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.3);
    border-radius: 2px;
}

/* Empty state */
.cart-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-tertiary);
}

.cart-empty-icon {
    font-size: 40px;
    opacity: 0.18;
}

.cart-empty span {
    font-size: 13px;
    font-weight: 500;
}

/* Individual cart item — horizontal card */
.cart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(44, 44, 46, 0.6);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 10px 14px;
    min-width: 130px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.25s;
}

.cart-item:hover {
    border-color: rgba(0, 122, 255, 0.35);
    background: rgba(0, 122, 255, 0.06);
    transform: translateY(-3px);
}

.cart-item-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.cart-item-emoji {
    font-size: 36px;
    line-height: 1;
}

.cart-item-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.cart-item-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--ios-blue);
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 1px;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.qty-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.qty-btn:hover {
    background: rgba(0, 122, 255, 0.15);
    color: var(--ios-blue);
}

.qty-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

/* Right side — total + payment */
.cart-checkout {
    width: 340px;
    flex-shrink: 0;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.35);
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-total-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cart-total-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.payment-methods {
    display: flex;
    gap: 6px;
}

.pay-method-btn {
    flex: 1;
    padding: 8px 6px;
    background: rgba(120, 120, 128, 0.15);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s var(--spring);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.pay-method-btn:hover {
    background: rgba(0, 122, 255, 0.08);
    border-color: rgba(0, 122, 255, 0.3);
    color: var(--ios-blue);
}

.pay-method-btn.active {
    border-color: var(--ios-blue);
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3);
}

.pay-btn {
    width: 100%;
    padding: 14px;
    background: var(--grad-green);
    border: none;
    border-radius: var(--r-md);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--glow-green), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s var(--spring);
    position: relative;
    overflow: hidden;
}

.pay-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.pay-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(120, 120, 128, 0.3);
    box-shadow: none;
}

.pay-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
    filter: brightness(1.05);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   TOAST NOTIFICATIONS                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--r-md);
    background: var(--glass-thick);
    border: 1px solid var(--border-light);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
    font-size: 13px;
    font-weight: 600;
    min-width: 260px;
    backdrop-filter: blur(40px) saturate(180%);
}

.toast.success { border-left: 3px solid var(--ios-green); }
.toast.error   { border-left: 3px solid var(--ios-red); }
.toast.info    { border-left: 3px solid var(--ios-blue); }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   MODALS                                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: var(--bg-elevated2);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px;
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85);
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.form-input {
    width: 100%;
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 14px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    outline: none;
    transition: all 0.25s;
}

.form-input:focus {
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.18s var(--spring), box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease, opacity 0.18s ease;
    user-select: none;
    -webkit-user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.97); }
.btn:disabled, .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.25);
}

.btn-primary {
    background: var(--grad-blue);
    color: #FFFFFF;
    box-shadow: var(--glow-blue);
}

.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-outline {
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: rgba(120, 120, 128, 0.28);
}

.btn-danger {
    background: rgba(255, 59, 48, 0.12);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: var(--ios-red);
}

.btn-danger:hover {
    background: rgba(255, 59, 48, 0.2);
}

.success-icon {
    text-align: center;
    margin-bottom: 14px;
}
.success-icon svg {
    filter: drop-shadow(0 6px 20px rgba(52, 199, 89, 0.45));
    animation: successPop 0.45s cubic-bezier(0.18, 1.25, 0.4, 1);
}
@keyframes successPop {
    0%   { transform: scale(0);    opacity: 0; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1);    opacity: 1; }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   LOCK OVERLAY (when shift not started)                          ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Smena yopiq ekrani.
   ⚠ Ilgari `position: absolute; inset: 0` edi — u faqat O'Z konteynerini
   (.products-area) qoplardi. Natijada mahsulot to'ri yopilsa-da, PASTDAGI
   savat ochiq qolardi: «Naqd / Karta / Click» va «To'lash» tugmalari
   smena yopiq bo'lsa ham bosilaverardi (o'lchandi: 249px ochiq soha).

   Endi viewport'ga nisbatan: smena panelidan pastdagi BUTUN sotuv sohasini
   qoplaydi — kategoriyalar, qidiruv, mahsulotlar va savat.
   Smena paneli ataylab OCHIQ qoladi — u yerda «Boshlash» tugmasi turibdi.
   Yon menyu ham ochiq: .pos-wrapper z-index:2 stacking kontekst yaratadi,
   .kn esa ildizda z-index:60 — ya'ni u ustida qoladi (navigatsiya kerak).
   position:fixed xavfsiz: .pos-wrapper/.products-area da transform,
   filter yoki will-change yo'q (bo'lsa fixed ular ichida qamalib qolardi). */
.shift-lock-overlay {
    position: fixed;
    top: calc(var(--header-h) + var(--shift-h));
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.shift-lock-overlay .lock-icon {
    width: 90px;
    height: 90px;
    background: rgba(0, 122, 255, 0.08);
    border: 2px solid rgba(0, 122, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ios-blue);
    font-size: 36px;
}

.shift-lock-overlay .lock-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.shift-lock-overlay .lock-sub {
    font-size: 13px;
    color: var(--text-tertiary);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   STATUS BAR                                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid var(--border-light);
    font-size: 11px;
    color: var(--text-tertiary);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.status-bar strong {
    color: var(--ios-blue);
    font-family: 'JetBrains Mono', monospace;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    background: var(--ios-red);
}

.status-dot.online {
    background: var(--ios-green);
    box-shadow: 0 0 8px var(--ios-green);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   SPINNER + UTILITIES                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.skeleton {
    background: linear-gradient(90deg,
        rgba(44, 44, 46, 1) 25%,
        rgba(58, 58, 60, 1) 50%,
        rgba(44, 44, 46, 1) 75%);
    background-size: 200% 100%;
    animation: skeleton 2s ease-in-out infinite;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-light);
}

@keyframes skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.hidden { display: none !important; }

/* ── Confetti container ── */
#confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99996;
    overflow: hidden;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   STOCK BADGES                                                   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.stock-badge {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-full);
    white-space: nowrap;
}

.stock-badge.in-stock {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.3);
    color: var(--ios-green);
}

.stock-badge.low-stock {
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.3);
    color: var(--ios-orange);
}

.stock-badge.out-of-stock {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: var(--ios-red);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   SCANNER MODAL                                                  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.scanner-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(40px) saturate(180%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-modal {
    background: var(--bg-elevated2);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    width: 440px;
    max-width: 95vw;
    overflow: hidden;
}

.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: rgba(0, 0, 0, 0.3);
}

.scanner-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.scanner-close-btn {
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--spring);
}

.scanner-close-btn:hover {
    border-color: var(--ios-red);
    color: var(--ios-red);
    transform: rotate(90deg);
}

.scanner-body {
    padding: 20px;
}

#qr-reader {
    width: 100% !important;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border) !important;
    background: #000;
    min-height: 220px;
}

.scanner-hint {
    text-align: center;
    font-size: 13px;
    color: var(--ios-blue);
    margin: 12px 0 16px;
    padding: 11px;
    background: rgba(0, 122, 255, 0.06);
    border-radius: var(--r-sm);
    border: 1px dashed rgba(0, 122, 255, 0.25);
    font-weight: 500;
}

.scanner-manual {
    display: flex;
    gap: 8px;
}

.scanner-manual input {
    flex: 1;
    background: rgba(120, 120, 128, 0.18);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    outline: none;
    transition: all 0.25s;
}

.scanner-manual input:focus {
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.scanner-manual-btn {
    padding: 10px 16px;
    background: var(--grad-blue);
    border: none;
    border-radius: var(--r-sm);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--spring);
}

.scanner-manual-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-blue);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   RESPONSIVE                                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
    :root {
        --cart-h: 240px;
        --card-min-w: 140px;
        --card-h: 220px;
    }
    .cart-checkout {
        width: 240px;
    }
    .header,
    .shift-bar {
        padding: 0 14px;
    }
}

@media (max-width: 600px) {
    :root {
        --cart-h: 280px;
    }
    .cart-body {
        flex-direction: column;
    }
    .cart-checkout {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-light);
    }
    .header-clock { display: none; }
}