/* Особистий кабінет «Стейки Карпат» — стилі екранів E1–E7.
   Токени взяті зі скіла steaky-karpat-design (кольори, шрифти, радіуси, тіні,
   моушн). Нічого не вигадано: значення скопійовані один-в-один, щоб кабінет
   виглядав частиною бренду, а не окремим сервісом.
   Мобайл-фьорст: базові правила — для телефона, десктоп отримує лише ширшу
   колонку і трохи більше повітря. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Golos+Text:wght@400;500;600;700;800&display=swap');

:root {
  --brand-gold: #ffc62d;
  --brand-gold-deep: #f5a623;
  --brand-red: #bc131e;
  --brand-red-deep: #96101a;

  --paper: #f5f5f5;
  --paper-warm: #faf6ee;
  --ink-900: #14110f;
  --ink-700: #3a3532;
  --ink-500: #6b625c;
  --ink-400: #938b85;
  --line-200: #e6e2dc;
  --line-300: #d6d0c8;
  --white: #ffffff;

  --success: #2f8f4e;
  --success-soft: #e5f3ea;
  --warning: #e8920c;
  --warning-soft: #fdf1dc;
  --danger: #bc131e;
  --danger-soft: #fbe6e7;
  --info: #2b6cb0;
  --info-soft: #e6eff8;

  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 17, 15, .06);
  --shadow-sm: 0 2px 8px rgba(20, 17, 15, .08);
  --shadow-md: 0 8px 22px rgba(20, 17, 15, .10);
  --shadow-red: 0 10px 26px rgba(188, 19, 30, .28);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: 0 0 0 3px rgba(188, 19, 30, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-red); text-decoration: none; }

/* --- Каркас --------------------------------------------------------------- */

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 96px;      /* знизу — місце під панель навігації */
}

.wrap--auth { padding-bottom: 32px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line-200);
}

.topbar__in {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar__logo { width: 38px; height: 38px; border-radius: var(--radius-pill); display: block; }

.topbar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.topbar__sub { font-size: 13px; color: var(--ink-500); }

.topbar__back {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-500);
  white-space: nowrap;
}

/* --- Типографіка ---------------------------------------------------------- */

.h1, .h2, .h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 600;
}

.h1 { font-size: 27px; }
.h2 { font-size: 21px; }
.h3 { font-size: 18px; }

.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0 0 8px;
}

.muted { color: var(--ink-500); }
.small { font-size: 14px; }
.caption { font-size: 13px; color: var(--ink-500); }
.strong { font-weight: 600; }
.center { text-align: center; }

.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-500);
  margin: 24px 0 10px;
}

/* --- Картки --------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 12px;
}

.card--flat { box-shadow: none; }
.card--warm { background: var(--paper-warm); }
.card--tap { display: block; color: inherit; transition: transform var(--ease) 200ms, box-shadow var(--ease) 200ms; }
.card--tap:active { transform: scale(.995); }

@media (hover: hover) {
  .card--tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.row--top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }

/* --- Кнопки --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter 120ms var(--ease), transform 120ms var(--ease);
}

.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--primary { background: var(--brand-red); color: #fff; box-shadow: var(--shadow-red); }
.btn--primary:hover { filter: brightness(.93); }

.btn--gold { background: var(--brand-gold); color: var(--ink-900); }
.btn--gold:hover { filter: brightness(.95); }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 2px solid var(--line-300);
}
.btn--ghost:hover { border-color: var(--ink-400); }

.btn--quiet {
  background: transparent;
  color: var(--ink-500);
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 500;
  min-height: 44px;
}

.btn--sm { min-height: 40px; font-size: 14px; width: auto; padding: 0 16px; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { width: auto; flex: 1; }

/* --- Форми ---------------------------------------------------------------- */

.field { margin-bottom: 16px; }

.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 17px;               /* < 16px змушує iOS зумити сторінку при фокусі */
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-md);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

.input:focus { outline: 0; border-color: var(--brand-red); box-shadow: var(--focus-ring); }

.input--code {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: .32em;
  text-align: center;
  padding-left: 26px;            /* компенсація трекінгу, щоб цифри стояли по центру */
}

.hint { font-size: 13px; color: var(--ink-500); margin-top: 6px; }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
}

.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-red); flex: none; }

/* --- Бейджі й повідомлення ------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--ok { background: var(--success-soft); color: var(--success); }
.badge--wait { background: var(--warning-soft); color: #a5670a; }
.badge--gift { background: #fdf3d8; color: #8a6206; }
.badge--off { background: #f0ede9; color: var(--ink-500); }
.badge--gold { background: var(--brand-gold); color: var(--ink-900); }

.note {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 12px;
}

.note--error { background: var(--danger-soft); color: var(--brand-red-deep); }
.note--ok { background: var(--success-soft); color: #1f6b39; }
.note--info { background: var(--info-soft); color: #1f4e80; }

/* --- Банер e-mail --------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper-warm);
  border: 1px solid #eadfc6;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.banner__x {
  background: none;
  border: 0;
  color: var(--ink-400);
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

/* --- Замовлення ----------------------------------------------------------- */

.order__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.order__num {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
}

.order__sum { font-family: var(--font-display); font-size: 19px; font-weight: 600; white-space: nowrap; }
.order__date { font-size: 13px; color: var(--ink-500); }
.order__items { font-size: 14px; color: var(--ink-700); margin: 8px 0 0; }
.order__more { color: var(--ink-400); }

.line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line-200);
}

.line:first-child { border-top: 0; }

.line__pic {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--paper-warm);
  border: 1px solid var(--line-200);
}

.line__pic--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-400);
  text-transform: uppercase;
}

.line__name { font-weight: 500; font-size: 15px; line-height: 1.3; }
.line__meta { font-size: 13px; color: var(--ink-500); margin-top: 4px; }
.line__sum { margin-left: auto; text-align: right; white-space: nowrap; font-weight: 600; font-size: 15px; }

.line__pick { display: flex; align-items: flex-start; padding-top: 15px; }
.line__pick input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand-red); }

/* Довгі рядки з CRM (адреса доставки) не мають перетворювати картку на полотно */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink-900);
  margin-top: 12px;
  padding-top: 12px;
}

.total__val { font-family: var(--font-display); font-size: 24px; font-weight: 700; }

/* --- Менеджер ------------------------------------------------------------- */

.mgr { display: flex; align-items: center; gap: 12px; }

.mgr__ava {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--brand-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.mgr__name { font-weight: 600; }

/* --- Нижня навігація ------------------------------------------------------ */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--white);
  border-top: 1px solid var(--line-200);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav__in { max-width: 560px; margin: 0 auto; display: flex; }

.nav__item {
  flex: 1;
  padding: 10px 4px 12px;
  text-align: center;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.nav__item--on { color: var(--brand-red); }
.nav__ico { display: block; font-size: 19px; line-height: 1.2; margin-bottom: 2px; }

/* --- Дрібниці ------------------------------------------------------------- */

.list-reset { list-style: none; padding: 0; margin: 0; }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-200); }
.kv:first-child { border-top: 0; }
.kv__k { color: var(--ink-500); font-size: 14px; }
.kv__v { text-align: right; font-weight: 500; word-break: break-word; }

.empty { text-align: center; padding: 48px 16px; color: var(--ink-500); }
.empty__ico { font-family: var(--font-display); font-size: 44px; color: var(--line-300); }

.foot { text-align: center; color: var(--ink-400); font-size: 12px; padding: 24px 0 8px; }

@media (min-width: 640px) {
  .wrap { max-width: 620px; padding-bottom: 40px; }
  .topbar__in { max-width: 620px; }
  .nav__in { max-width: 620px; }
}