:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#1f2a44;
  --accent:#3b82f6;
  --accent-2:#6366f1;
  --ring:#c7d2fe;
  --good:#10b981;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(31,42,68,.12),0 2px 12px rgba(31,42,68,.06);
  --soft-shadow:0 8px 22px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{
  background: #ffffff url('background.gif') center/cover no-repeat fixed;
  background-attachment: fixed;
height:100%;
  font-family:'Montserrat', Arial, sans-serif;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.1px;
}
[hidden]{display:none !important}

.pay-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #ddd;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Контейнер: 2 колонки (2 сверху, 2 снизу) */
.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

    .pay-btn:hover {
        border-color: #999;
        background: #f8f8f8;
    }

    /* Активные состояния */
    .pay-btn.active[data-pay="KASPI"] {
        background-color: #f04835;
        border-color: #f04835;
        color: #fff;
        box-shadow: 0 0 8px rgba(240, 72, 53, 0.6);
    }

    .pay-btn.active[data-pay="JUSAN"] {
        background-color: #e74d1f;
        border-color: #e74d1f;
        color: #fff;
        box-shadow: 0 0 8px rgba(231, 77, 31, 0.6);
    }

    .pay-btn.active[data-pay="HALYK"] {
        background-color: #02926f;
        border-color: #02926f;
        color: #fff;
        box-shadow: 0 0 8px rgba(2, 146, 111, 0.6);
    }

    .pay-btn.active[data-pay="CASH"] {
        background-color: #a1b377;
        border-color: #a1b377;
        color: #fff;
        box-shadow: 0 0 8px rgba(161, 179, 119, 0.6);
    }


/* ===== Layout ===== */
.phone-frame{
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:calc(68px + env(safe-area-inset-bottom));
}

/* ===== Header ===== */
/* ===== Header ===== */
.app-header{
  /* было: display:grid; grid-template-columns:64px 1fr 64px; align-items:flex-end; */
  display:grid;
  grid-template-columns: auto 1fr auto; /* гибкие колонки: время | заголовок растёт | языки */
  align-items:center;                   /* выравниваем по центру по вертикали */
  padding:12px 16px;                    /* чуть компактнее отступы */
}

.app-header .time{
  color:var(--brand);
  font-weight:700;
  /* опционально закрепим минимальную ширину, чтобы заголовок не прыгал */
  min-width:56px;
}

.app-header .title{
  /* было: justify-self: center; */
  justify-self:start;        /* тянем заголовок к левому краю своей колонки */
  margin-left:12px;          /* небольшой отступ от времени */
  font-weight:700;
  font-size:22px;
  letter-spacing:-.3px;
  background: linear-gradient(90deg, #b07800, #b07800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lang-switch{
  justify-self:end;          /* кнопки языка остаются справа */
  display:flex; gap:6px;
}

.app-header .status{ display:none !important }

/* ===== Screens & motion ===== */
.screen{flex:1; display:none; padding:0 18px 16px}
.screen-active{display:block; animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen-active{animation:none}
}

/* ===== Titles ===== */
.screen-title{margin:8px 2px 14px; font-weight:200; letter-spacing:-.2px}

/* ===== Search ===== */
.search-wrap{
  position:relative; margin:8px 0 14px; background:var(--surface);
  border-radius:16px; padding:12px 14px 12px 44px;
  box-shadow:var(--soft-shadow);
  display:flex; align-items:center; border:1px solid rgba(99,102,241,.12);
}
.search-wrap input{
  outline:none; border:none; background:transparent; width:100%;
  font-size:16px; color:var(--ink);
}
.search-wrap input::placeholder{color:#9ca3af}
.search-wrap:focus-within{box-shadow:0 0 0 3px var(--ring), var(--soft-shadow)}
.search-ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#334155; opacity:.9}

/* ===== Category grid ===== */
.category-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px; margin-bottom:12px;
}
.category-card{
  position:relative;
  border-radius:20px; padding:16px 12px; background:var(--surface);
  box-shadow:var(--soft-shadow);
  flex-direction:column;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  border:1px solid rgba(99,102,241,.12);
  overflow:hidden;
}
.category-card::after{ display:none !important }
.category-card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.12)}
.category-card:active{transform:translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.08)}
.category-name{font-weight:600; line-height:1.2; font-size:15px}
.category-count{color:var(--muted); font-size:12px}

/* Единый размер изображений категорий */
.category-card .cimg {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin: 0 auto 12px;
  box-shadow: none; /* убираем тень */
}


/* ===== Back chip ===== */
.cat-chip{
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  background:#dcfce7; border:1px solid #86efac; color:#065f46;
  padding:10px 12px; border-radius:12px; font-weight:600; margin:10px 2px 12px;
  transition:transform .12s ease, box-shadow .2s ease;
  box-shadow:0 6px 12px rgba(16,185,129,.12);
}
.cat-chip:hover{transform:translateY(-1px)}
.cat-chip::before{content:"←"; font-weight:800}

/* ===== Products ===== */
.product-list{
  display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr));
  margin:8px 0 90px;
}
.product{
  background:var(--surface);
  border:1px solid rgba(99,102,241,.12);
  border-radius:18px; padding:14px;
  box-shadow:var(--soft-shadow);
  display:grid; grid-template-columns:1fr; gap:10px; align-items:center;
  transition:transform .18s ease, box-shadow .2s ease;
}
.product:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.12)}
.p-name{font-weight:600; letter-spacing:-.1px}
.p-desc{grid-column:1/-1; color:var(--muted); font-size:12px}
.price{font-weight:700; font-size:16px; color:var(--accent)}
/* === блок действий в карточке товара === */
.p-actions{
  display:flex;
  flex-direction:column;    /* цена сверху, управление снизу */
  align-items:flex-start;
  gap:8px;                  /* расстояние между ценой и контролами */
}

/* обёртка для +/– или кнопки + */
.p-controls{
  display:flex;
  align-items:center;
}

/* (необязательно) немного ужмём контрол количества, чтобы аккуратнее смотрелось */
.product .qty{ gap:8px }
.product .qty button{ width:34px; height:34px }

/* ===== Buttons ===== */
.btn{
  appearance:none; border:none; outline:none; cursor:pointer; user-select:none;
  border-radius:12px; padding:10px 14px; font-weight:600; background:#e5e7eb;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white; box-shadow:0 8px 20px rgba(59,130,246,.35), inset 0 -2px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{box-shadow:0 10px 24px rgba(59,130,246,.45), inset 0 -2px 0 rgba(255,255,255,.3)}
.btn-outline{
  background:transparent; border:2px solid #cbd5e1; color:var(--brand)
}

/* Qty control */
.qty{ display:inline-grid; grid-template-columns:32px 32px 32px; align-items:center; gap:6px }
.qty button{
  width:32px; height:32px; border-radius:50%;
  background:#eef2ff; font-weight:800; transition:transform .12s ease, background .2s ease
}
.qty button:hover{background:#e0e7ff; transform:translateY(-1px)}
.qty span{text-align:center; min-width:24px}

/* ===== Cart ===== */
.cart-list{display:grid; gap:12px; margin-bottom:96px}
.cart-item{
  background:var(--surface); border-radius:16px; padding:12px;
  display:grid; gap:6px; grid-template-columns:1fr auto; align-items:center;
  border:1px solid rgba(99,102,241,.12); box-shadow:var(--soft-shadow);
}
.cart-item .meta{color:var(--muted); font-size:12px}
.cart-item .remove{
  justify-self:end; color:var(--danger); font-weight:700;
  background:#fee2e2; border-radius:10px; padding:6px 10px;
  transition:transform .12s ease, box-shadow .2s ease;
}
.cart-item .remove:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(239,68,68,.18)}

/* ===== Empty cart ===== */
.empty-cart{display:grid; place-items:center; gap:8px; color:var(--muted); padding:40px 0}

/* ===== Checkout bar ===== */
.checkout-bar {
  position: fixed;
  left: 0;
  right: 0;
  border-radius: 10px;
  bottom: calc(70px + env(safe-area-inset-bottom)); /* было 56px, стало 66px */
  margin: 0 auto;
  max-width: 430px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,1) 35%);
  backdrop-filter: saturate(1.2) blur(10px);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -6px 18px rgba(2,6,23,.06);
}

.checkout-bar .sum {
  color: var(--brand);
  font-weight: 600;
}

/* ===== Tabbar ===== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; margin:0 auto; max-width:430px; background:var(--surface);
  border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow:0 -8px 30px rgba(31,42,68,.12);
  display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
}
.tab{
  background:transparent; border:none; display:flex; flex-direction:column;
  align-items:center; gap:4px; color:var(--muted); font-weight:600; position:relative;
  padding-top:2px;
}
.tab.active{color:var(--brand)}
.tab.active::after{
  content:""; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:40%; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.badge{
  position:absolute; transform:translate(12px,-8px);
  background:#ef4444; color:white; border-radius:999px; font-size:11px; padding:2px 6px;
  box-shadow:0 6px 12px rgba(239,68,68,.25)
}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 14px; border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.24)
}
.toast-show{opacity:1; transform:translate(-50%, -6px)}

/* ===== Modals / Success ===== */
.success{ position:fixed; z-index:9999; inset:0; background:rgba(2,6,23,.25); backdrop-filter:blur(5px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); display:grid; place-items:center }
.success-card{
  width:min(88vw, 420px); border-radius:24px; background:var(--surface); padding:28px 20px; text-align:center;
  box-shadow:var(--shadow); animation:pop .25s ease; border:1px solid rgba(99,102,241,.12)
}
@keyframes pop{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)}}
.success .check{
  width:80px;height:80px;border-radius:50%;
  background:var(--good); color:#fff; display:grid; place-items:center; font-size:40px; margin:0 auto 10px; box-shadow:0 8px 18px rgba(16,185,129,.35)
}
.success .kz{font-weight:700}
.success .en{color:var(--muted); font-size:13px; margin-bottom:10px}

/* ===== Checkout form ===== */
.form-card{ text-align:left; max-height:88vh; overflow:auto }
.form-card h3{ text-align:center; margin:0 0 10px; letter-spacing:-.2px }
.frow{ display:grid; gap:6px; margin-bottom:10px }
.frow label{ font-weight:600; color:var(--brand) }
.frow input, .frow textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#f8fafc;
  font-size:15px; outline:none; transition:box-shadow .2s ease, border-color .2s ease
}
.frow input:focus, .frow textarea:focus{ box-shadow:0 0 0 3px var(--ring) }
.form-actions{ display:flex; gap:10px; justify-content:space-between; margin-top:8px }
.order-summary{
  background:#f9fafb; border:1px dashed #e5e7eb; border-radius:12px; padding:10px 12px; margin-top:6px; color:#374151
}
.order-summary .line{ display:flex; justify-content:space-between; padding:4px 0 }
.order-summary .total{ border-top:1px dashed #e5e7eb; margin-top:6px; padding-top:6px; font-weight:800 }
.small{ font-size:12px; color:var(--muted) }
.mb8{ margin-bottom:8px }

/* ===== Utils ===== */
.hidden{display:none !important}

*, *::before, *::after{ font-family: inherit }
button, input, textarea, select{ font: inherit }

/* Tab icons size */
.tab-ic{ width:22px; height:22px; display:block; object-fit:contain }


/* Language switcher */
.lang-switch{
  justify-self:end;
  display:flex; gap:6px;
}
.lang-switch .lang-btn{
  border:1px solid rgba(99,102,241,.25);
  background:#fff;
  font-weight:700;
  font-size:12px;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
  box-shadow: var(--soft-shadow);
}
.lang-switch .lang-btn.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
}