/* ==========================================================================
   THEME-V2.CSS — Стили интерфейса кофейни «…и кофе» и доставки «Пятница»
   СЛОЙ 1 (БАЗА): базовые стили компонентов, без брендовых переопределений.
   Брендовые переопределения — public/app/core/views.js (СЛОЙ 2).
   Правила и чеклист: docs/css-architecture.md
   ========================================================================== */

:root {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --panel: #F3F8FC;
  --ink: #101418;
  --soft: #586470;
  --line: #D8DFE4;
  --flame: #123A6B;
  --flame-d: #0B2446;
  --green: #186A43;
  --esp: #101418;
  --esp2: #1B2530;
  --cream: #FFFFFF;
  --r: 18px;
  --sh: 0 10px 30px -12px rgba(16, 20, 24, 0.18);

  /* Статусы (используются в СЛОЕ 2 для переопределений) */
  --status-success: #2F7D4F;
  --status-alert: #8A6D3B;
  --status-danger: #B3372B;
  --tint-success: #E5F5E9;
  --tint-alert: #FFF3D6;
  --tint-danger: #FDE8E8;
}

/* ── Базовые сбросы ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  font: 400 15px/1.5 "Golos Text", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid rgba(18, 58, 107, 0.45);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Карточки и сетка (стабилизация CLS и памяти под iOS) ──────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (min-width: 1600px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
}

.card {
  background: #FFFFFF;
  border: 1.5px solid rgba(62, 143, 208, 0.25);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  animation: pop .5s both;
  animation-delay: var(--d);
  position: relative;
  box-shadow: 0 6px 20px rgba(18, 58, 107, 0.08);
  min-height: 340px;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(18, 58, 107, 0.15);
    border-color: #3E8FD0;
  }
  .card:hover .media img {
    transform: scale(1.07);
  }
}

body.editing .card {
  border-style: dashed;
  border-color: #9FB4C8;
}

body.editing .card:hover {
  transform: none;
}

/* ── Медиа-зона карточки ────────────────────────────────────────────────── */
.media {
  height: 150px;
  min-height: 150px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(62, 143, 208, 0.08), transparent);
  display: grid;
  place-items: center;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.media .em {
  font-size: 56px;
  text-shadow: 0 8px 10px rgba(16, 20, 24, 0.22);
  transition: transform .3s;
}

/* ── Метки / Теги (WCAG AA для .tag.hit) ────────────────────────────────── */
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font: 700 9.5px "Unbounded";
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  z-index: 2;
  background: #1B4F8A;
}

.tag.hit {
  background: #1B5E8A;
  color: #FFFFFF;
}

.tag.new  { background: var(--green); }
.tag.vegan { background: #7BA05B; }

.stopped .media img,
.stopped .media .em {
  filter: grayscale(1);
  opacity: 0.5;
}

.stopbadge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #D63939;
  color: #FFFFFF;
  font: 800 10px "Unbounded";
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* ── Тело карточки ──────────────────────────────────────────────────────── */
.cbody {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.cbody h3 {
  font: 700 15.5px/1.3 "Golos Text", sans-serif;
  color: #123A6B;
}

.cbody .desc {
  font-size: 12.5px;
  color: var(--soft);
}

.comp {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.comp i {
  font-style: normal;
  background: #EAF1F9;
  border: 1px solid rgba(62, 143, 208, 0.25);
  border-radius: 999px;
  padding: 3px 9px;
  font: 600 10.5px "Golos Text";
  color: #123A6B;
}

.cbody .vol {
  font: 600 11px "Golos Text";
  color: #5B6874;
  letter-spacing: 0.04em;
  margin-top: auto;
}

.cfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.price {
  font: 700 16px "Golos Text";
  font-variant-numeric: tabular-nums;
  color: #123A6B;
}

/* ── Корзина: тач-таргеты степпера (>= 44x44px) ────────────────────────── */
.cartItem .qty button {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E7ECF0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

/* ── Утилиты ────────────────────────────────────────────────────────────── */
.gempty {
  text-align: center;
  padding: 60px 20px;
  color: var(--soft);
}

.gempty .ee {
  font-size: 52px;
  display: block;
  margin-bottom: 12px;
}
/* ══ АУДИТ 21.09: недостающие keyframes / переменные / классы ══ */
:root { --shadow-sheet: 0 -10px 40px -12px rgba(16,20,24,.25); }

@keyframes ping {
  0%   { transform: scale(1); opacity: .6; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes stampin { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.vh { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.placebox { margin-top:12px; padding:12px 14px; border:1.5px dashed var(--line); border-radius:14px; background:#fff; font-size:12.5px; color:var(--soft); line-height:1.5; }
.placebox b { display:block; color:var(--ink); font-size:13px; margin-bottom:4px; }
.skeleton-card { pointer-events:none; }
.skeleton-shimmer, .skeleton-line { background:linear-gradient(90deg,#EDF2F6 25%,#F7FAFC 50%,#EDF2F6 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; }
.skeleton-line { border-radius:8px; }
/* ── Тумблер режима правки (единый для обоих брендов, Ф3.35) ── */
.donoff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.donoff input {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #C9D3DC;
  position: relative;
  transition: background .2s;
  cursor: pointer;
  margin: 0;
  flex: 0 0 auto;
}
.donoff input:checked { background: #2F7D4F; }
.donoff input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.donoff input:checked::after { left: 16px; }
/* ── Тумблер режима правки (база, оба бренда; было styles.js Ф3.21) ─── */
.donoff{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);border:1.5px solid var(--line);border-radius:999px;padding:4px 10px 4px 4px;font-size:11px;font-weight:700;cursor:pointer}
.donoff input{appearance:none;-webkit-appearance:none;width:34px;height:19px;border-radius:999px;background:#C9D3DC;position:relative;transition:.25s;cursor:pointer;margin:0}
.donoff input::after{content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.25s}
.donoff input:checked{background:var(--status-success)}
.donoff input:checked::after{left:17px}
/* в режиме правки метка (hit/new/vegan) не спорит с тумблем за левый верхний угол */
body.editing .card .tag{display:none}
/* ══ АУДИТ 21.09: недостающие keyframes / переменные / классы ══ */
:root { --shadow-sheet: 0 -10px 40px -12px rgba(16,20,24,.25); }
@keyframes ping {
  0%   { transform: scale(1); opacity: .6; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes stampin { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vh { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.placebox { margin-top:12px; padding:12px 14px; border:1.5px dashed var(--line); border-radius:14px; background:#fff; font-size:12.5px; color:var(--soft); line-height:1.5; }
.placebox b { display:block; color:var(--ink); font-size:13px; margin-bottom:4px; }
.skeleton-card { pointer-events:none; }
.skeleton-shimmer, .skeleton-line { background:linear-gradient(90deg,#EDF2F6 25%,#F7FAFC 50%,#EDF2F6 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; }
.skeleton-line { border-radius:8px; }

/* ── Фаза 4, чанк 1: база, перенесённая из index.html inline-<style> ── */
.cartPanel { position:fixed;bottom:0;left:0;right:0;z-index:120;background:#FFFFFF;border-radius:22px 22px 0 0;max-height:80vh;overflow-y:auto;overscroll-behavior:contain;padding:20px;box-shadow:var(--shadow-sheet);transform:translateY(100%);transition:.3s }
.cartPanel.open { transform:none }

/* ── Тикер: база (брендовые цвета — СЛОЙ 2, views.js) ── */
.ticker{overflow:hidden;max-width:100%;height:30px;line-height:30px;display:flex;align-items:center;margin-top:-1px;position:relative;z-index:1}#tickerTrack span{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;padding:0 1.2rem;font:600 11px/30px "Unbounded",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
#tickerTrack span::after{content:"〜";margin-left:1.4rem;color:var(--azure,#3E8FD0)}
@keyframes zt-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){#tickerTrack{animation:none}}
@media(max-width:400px){#tickerTrack span{font-size:10px;padding:.35rem 1rem}}
/* ── Сплэш бренда: база в СЛОЕ 1 (Ф3.54) — без FOUC в медленных WebView ── */
#brandSplash{position:fixed;inset:0;z-index:400;background:#FFFFFF;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
#brandSplashStatic{background:#FFFFFF}
#brandSplash .spInner,#brandSplashStatic .spInner{width:100%;max-width:560px;text-align:center}
#brandSplash .spTitle,#brandSplashStatic .spTitle{font:400 clamp(20px,5.5vw,30px)/1.25 Prata,serif;margin-bottom:6px;overflow-wrap:break-word}
#brandSplash .spSub,#brandSplashStatic .spSub{color:var(--soft);font-size:14px;margin-bottom:22px}
#brandSplash .spBtns,#brandSplashStatic .spBtns{display:grid;grid-template-columns:1fr;gap:12px}
#brandSplash .spBtn,#brandSplashStatic .spBtn{border-radius:22px;padding:22px 16px;font:700 16px Unbounded,sans-serif;box-shadow:var(--sh);width:100%}
#brandSplash .spBtn small,#brandSplashStatic .spBtn small{display:block;font:400 12px Golos Text,sans-serif;margin-top:6px}
#brandSplash .spPizza,#brandSplashStatic .spPizza{border:2px solid #F2D9A5;background:#FFF6E5;color:#6B4E0E}
#brandSplash .spPizza small,#brandSplashStatic .spPizza small{color:#8A6D3B}
#brandSplash .spCoffee,#brandSplashStatic .spCoffee{border:2px solid var(--line);background:#fff;color:var(--ink)}
#brandSplash .spCoffee small,#brandSplashStatic .spCoffee small{color:var(--soft)}
#brandSplash .spBtn .em,#brandSplashStatic .spBtn .em{display:block;font-size:30px;line-height:1;margin-bottom:10px}
#brandSplash .spBtn .bt,#brandSplashStatic .spBtn .bt{display:block;font:700 16px Unbounded,sans-serif}
@media(min-width:560px){#brandSplash .spBtns,#brandSplashStatic .spBtns{grid-template-columns:1fr 1fr}}
/* ── Ф3.55: компенсация плавающей шапки Telegram-WebView ── */
body.in-tg .topbar {
height: auto;
min-height: calc(var(--topbar-h, 64px) + env(safe-area-inset-top, 0px) + 56px);
padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
}