/* ============================================================
   ДИЗАЙН-СИСТЕМА «7 КАЗАН»
   Один источник правды для всех приложений: клиент, менеджер,
   курьер, QR-меню. Меняем здесь — меняется везде.
   ============================================================ */
:root {
  /* --- Поверхности --- */
  --k7-cream:    #FFFFFF;   /* фон экрана и карточек */
  --k7-cream-2:  #F2F1EF;   /* серые плашки: поля, чипы, иконки */
  --k7-cream-3:  #EAE8E5;   /* нажатое состояние серой плашки */
  --k7-line:     #EDEBE8;   /* разделители */

  /* --- Текст --- */
  --k7-ink:      #141414;   /* заголовки и основной текст */
  --k7-ink-2:    #37342F;   /* вторичный текст */
  --k7-muted:    #9E9B96;   /* подписи, плейсхолдеры */

  /* --- Действия --- */
  --k7-yellow:      #FFCC00;   /* главный CTA */
  --k7-yellow-deep: #F0BE00;   /* нажатый CTA */
  --k7-accent:      #141414;   /* вторичное действие, активный чип */

  /* --- Статусы --- */
  --k7-success:  #1FA24A;   /* оплачено, доставлено, скидка */
  --k7-warning:  #E8A93B;   /* готовится, ожидание */
  --k7-danger:   #E5484D;   /* отклонён, удалить */
  --k7-info:     #5B2ED0;   /* бесплатная доставка, промо */
  --k7-green:    #1FA24A;   /* WhatsApp / success (алиас) */

  /* --- Бренд заведений (только аватары и метки, не кнопки) --- */
  --k7-terracotta:      #C44A2C;
  --k7-terracotta-deep: #9E3A21;
  --k7-terracotta-soft: #E8A389;
  --k7-gold:            #C8933A;
  --k7-badge-green:     #1FA24A;
  --k7-purple:          #5B2ED0;

  /* --- Радиусы --- */
  --k7-r-sm:   10px;   /* бейджи, мелкие плашки */
  --k7-r-md:   16px;   /* кнопки, поля, плитки */
  --k7-r-lg:   20px;   /* карточки */
  --k7-r-xl:   24px;   /* крупные карточки, баннеры */
  --k7-r-pill: 100px;  /* чипы, круглые кнопки */

  /* --- Тени --- */
  --k7-shadow-card: 0 2px 10px rgba(20,20,20,0.05);
  --k7-shadow-cta:  0 8px 24px rgba(20,20,20,0.16);
  --k7-shadow-pop:  0 20px 40px rgba(20,20,20,0.14);

  /* --- Отступы --- */
  --k7-gap-screen: 16px;   /* поля экрана */
  --k7-gap-block:  22px;   /* между секциями */
}

/* ============ ТИПОГРАФИКА ============
   h1 — заголовок экрана, h2 — секция, h3 — карточка,
   body — основной текст, cap — подпись/лейбл */
.k7-h1   { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.k7-h2   { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.k7-h3   { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.k7-body { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--k7-ink-2); }
.k7-sub  { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--k7-muted); }
.k7-cap  { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k7-muted); }
.k7-price{ font-size: 17px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ============ КНОПКИ ============ */
.k7-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 20px;
  border-radius: var(--k7-r-md); border: none;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}
.k7-btn:active { transform: scale(0.98); }
.k7-btn--primary { background: var(--k7-yellow); color: var(--k7-ink); font-weight: 800; box-shadow: var(--k7-shadow-cta); }
.k7-btn--primary:active { background: var(--k7-yellow-deep); }
.k7-btn--dark    { background: var(--k7-ink); color: #fff; font-weight: 800; }
.k7-btn--ghost   { background: var(--k7-cream-2); color: var(--k7-ink); }
.k7-btn--danger  { background: var(--k7-cream-2); color: var(--k7-danger); }
.k7-btn--block   { width: 100%; }
.k7-btn:disabled { background: var(--k7-cream-2); color: var(--k7-muted); box-shadow: none; cursor: not-allowed; }

/* Круглая иконочная кнопка (назад, сердечко, поиск) */
.k7-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--k7-cream-2); color: var(--k7-ink); border: none; cursor: pointer;
}
.k7-icon-btn--float { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.14); }

/* ============ КАРТОЧКИ И СПИСКИ ============ */
.k7-card {
  background: var(--k7-cream); border-radius: var(--k7-r-lg);
  box-shadow: var(--k7-shadow-card); overflow: hidden;
}
.k7-card--flat  { box-shadow: none; background: var(--k7-cream-2); }
.k7-card--pad   { padding: 16px; }

/* Строка списка: иконка — текст — стрелка */
.k7-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--k7-cream);
  border: none; text-align: left; cursor: pointer;
}
.k7-row + .k7-row { border-top: 1px solid var(--k7-line); }
.k7-row__ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--k7-cream-2); color: var(--k7-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.k7-row__title { font-size: 15px; font-weight: 600; }
.k7-row__sub   { font-size: 12.5px; font-weight: 500; color: var(--k7-muted); margin-top: 2px; }

/* ============ ЧИПЫ И БЕЙДЖИ ============ */
.k7-chip {
  padding: 9px 16px; border-radius: var(--k7-r-pill); border: none;
  background: var(--k7-cream-2); color: var(--k7-ink);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background 140ms ease;
}
.k7-chip.is-on { background: var(--k7-ink); color: #fff; font-weight: 700; }

.k7-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: var(--k7-r-sm);
  font-size: 12px; font-weight: 800; line-height: 1.2;
}
.k7-badge--yellow  { background: var(--k7-yellow);  color: var(--k7-ink); }
.k7-badge--success { background: rgba(31,162,74,0.12);  color: var(--k7-success); }
.k7-badge--warning { background: rgba(232,169,59,0.16); color: #8B6420; }
.k7-badge--danger  { background: rgba(229,72,77,0.12);  color: var(--k7-danger); }
.k7-badge--info    { background: var(--k7-info); color: #fff; }
.k7-badge--solid   { background: var(--k7-success); color: #fff; font-size: 14px; padding: 4px 10px; }

/* ============ ПОЛЯ ВВОДА ============ */
.k7-input {
  width: 100%; padding: 14px 16px;
  border-radius: var(--k7-r-md); border: none;
  background: var(--k7-cream-2); color: var(--k7-ink);
  font-size: 15px; font-weight: 500; outline: none;
}
.k7-input::placeholder { color: var(--k7-muted); font-weight: 500; }
.k7-input:focus { background: var(--k7-cream-3); }

/* ============ СЧЁТЧИК КОЛИЧЕСТВА ============ */
.k7-stepper {
  display: inline-flex; align-items: center;
  background: var(--k7-yellow); border-radius: var(--k7-r-pill); height: 34px;
}
.k7-stepper button {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--k7-ink); border: none; cursor: pointer;
}
.k7-stepper__val { min-width: 18px; text-align: center; font-size: 14px; font-weight: 800; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F2F1EF; color: var(--k7-ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }

.font-serif { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.font-sans  { font-family: 'Inter', system-ui, sans-serif; }
.font-mono  { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; }

/* shared reset in the "Safari window" area */
.qr-screen {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--k7-ink);
  background: var(--k7-cream);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qr-screen::-webkit-scrollbar { display: none; }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* subtle shimmer-free image fallback */
.img-ph {
  background:
    repeating-linear-gradient(135deg, #EFEDEA 0 12px, #E4E1DD 12px 24px);
}

/* hairline */
.hair { background: var(--k7-line); height: 1px; width: 100%; }

/* suzani-inspired micro ornament (single SVG pattern as data url in CSS) */
.ornament-band {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'><g fill='none' stroke='%23C44A2C' stroke-width='1.2' opacity='0.6'><path d='M0 10 L10 4 L20 10 L30 4 L40 10 L50 4 L60 10'/><circle cx='10' cy='4' r='1.5' fill='%23C44A2C'/><circle cx='30' cy='4' r='1.5' fill='%23C44A2C'/><circle cx='50' cy='4' r='1.5' fill='%23C44A2C'/></g></svg>");
  background-repeat: repeat-x;
  background-position: center;
  height: 20px;
}

/* price tag type */
.price { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* fade in */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn 240ms ease-out both; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.slide-up { animation: slideUp 300ms cubic-bezier(0.25,1,0.4,1); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-in { animation: overlayIn 200ms ease-out; }
@keyframes pulseDot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.pulse-dot { animation: pulseDot 1.2s ease-in-out infinite; }

/* tap highlight */
.tap { transition: transform 120ms ease, background 120ms ease, opacity 120ms ease; }
.tap:active { transform: scale(0.97); opacity: 0.88; }

/* scoped quantity pill */
.qty-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--k7-cream-2); color: var(--k7-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}

/* category pill */
.cat-pill {
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid transparent;
  background: var(--k7-cream-2); color: var(--k7-ink);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: all 140ms ease;
}
.cat-pill.active {
  background: var(--k7-ink); color: #fff; border-color: var(--k7-ink);
}

/* density tweak */
.density-compact .menu-item { padding: 10px 16px; gap: 12px; }
.density-compact .menu-item img, .density-compact .menu-item .thumb { width: 64px; height: 64px; }
.density-compact .menu-item-name { font-size: 15px; }
.density-compact .menu-item-desc { display: none; }

.density-spacious .menu-item { padding: 16px 16px; gap: 14px; }
.density-spacious .menu-item img, .density-spacious .menu-item .thumb { width: 92px; height: 92px; }

/* sticky top */
.sticky-top { position: sticky; top: 0; z-index: 10; background: var(--k7-cream); }

/* WhatsApp message preview */
.wa-chat {
  background: #E5DDD5;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.04) 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.03) 1px, transparent 2px);
  background-size: 40px 40px;
}
.wa-bubble {
  background: #DCF8C6;
  border-radius: 8px 8px 2px 8px;
  padding: 8px 10px 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #1F1F1F;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}
.wa-bubble::after {
  content: '';
  position: absolute;
  right: -6px; top: 0;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: #DCF8C6;
  border-right: 0;
}
.wa-time { font-size: 10px; color: #667781; text-align: right; margin-top: 2px; }

/* Safari chrome colors */
.safari-bar { background: #F6F6F6; color: #1F1F1F; }
.safari-bottom { background: rgba(246,246,246,0.92); backdrop-filter: blur(10px); }

/* Tweaks panel */
.tweaks-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000;
  background: #fff; border: 1px solid #EDEBE8; border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
  padding: 18px 20px; min-width: 280px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1F1410;
}
.tweaks-panel h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.tweak-row { display: flex; gap: 6px; margin-bottom: 10px; }
.tweak-row:last-child { margin-bottom: 0; }
.tweak-row label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#8A7968; margin-bottom:6px; }
.tweak-chip {
  flex: 1; padding: 9px 10px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent; border-radius: 100px;
  background: #F2F1EF; color: #37342F; cursor: pointer;
  text-align: center;
}
.tweak-chip.on { background: #141414; color: #fff; border-color: #141414; }

/* Stage layout */
.stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: #F2F1EF;
}
.stage-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 1400px; width: 100%; }
.stage-title {
  font-size: 34px; font-weight: 800;
  color: #141414; letter-spacing: -0.03em; text-align: center;
}
.stage-sub {
  font-size: 11px; font-weight: 800;
  color: #141414; background: #FFCC00;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: 100px;
  margin-top: -14px;
}

/* Safari iPhone frame inside a phone device */
.safari-frame {
  background: #fff;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 48px;
  overflow: hidden;
  padding-top: 54px;
  box-sizing: border-box;
}

/* ============ ТАБЫ ПЕРЕКЛЮЧЕНИЯ МЕЖДУ ПРИЛОЖЕНИЯМИ ============
   Одинаковая шапка на всех стендах прототипа: клиент / менеджер / курьер.
   Активный таб подсвечивается чёрным. */
.app-tabs {
  display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: #fff; padding: 6px; border-radius: var(--k7-r-pill);
  box-shadow: var(--k7-shadow-card);
}
.app-tabs a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--k7-r-pill);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--k7-ink-2); white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.app-tabs a:hover { background: var(--k7-cream-2); }
.app-tabs a.on { background: var(--k7-ink); color: #fff; }
.app-tabs a.on:hover { background: var(--k7-ink); }

/* Тёмный вариант — для курьерского стенда */
.app-tabs.dark { background: rgba(255,255,255,0.06); }
.app-tabs.dark a { color: #C8D6E5; }
.app-tabs.dark a:hover { background: rgba(255,255,255,0.08); }
.app-tabs.dark a.on { background: var(--k7-yellow); color: #141414; }