/* Вкладка "Меню" витрины кафе - CAFE_PLAN.md §4. Длительности/кривые -
   docs-project/MOTION_LANGUAGE.md разд. 3, 7: анимации только внутри
   `prefers-reduced-motion: no-preference`, только transform/opacity. */
:root {
  --cafe-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --cafe-ease-out: cubic-bezier(0, 0, .2, 1);
  --cafe-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Локальные для этого файла - переиспользуемые 3+ раз цвета, которых
     нет среди уже установленных переменных в :root шаблона showcase.html. */
  --color-border-rgb: 226 232 240; /* hex e2e8f0 */
  --color-disabled-rgb: 203 213 225; /* hex cbd5e1 */
  --color-surface-1-rgb: 248 250 252; /* hex f8fafc */
  --color-text-strong-rgb: 51 65 85; /* hex 334155 */
  --color-text-secondary-rgb: 71 85 105; /* hex 475569 */
  --color-text-faint-rgb: 148 163 184; /* hex 94a3b8 */
  --color-ink-rgb: 15 23 42; /* hex 0f172a - основной текст, меняется темой */
  --color-warning-rgb: 217 119 6; /* #d97706 */
  --color-warning-strong-rgb: 180 83 9; /* #b45309 */
  --color-danger-strong-rgb: 185 28 28; /* #b91c1c */
}

/* Тема гостя, этап 2 - тот же разбор ролей, что в hotel-showcase.css (см.
   комментарий там): --color-ink-rgb здесь тоже смешивал "обычный текст" и
   "всегда тёмная подложка" (скрим, тост) - подложки переведены на общий
   --color-ink-fixed-rgb (showcase.html, не меняется темой), сюда остаётся
   только текстовая роль. "Белый текст на акценте" переведён на общий
   --accent-ink-rgb, "белая карточка/контрол" - на общий --color-surface-rgb. */
body.theme-dark {
  --color-ink-rgb: 228 228 228;
  --color-border-rgb: 72 72 72;
  --color-disabled-rgb: 90 90 90;
  --color-surface-1-rgb: 36 36 36;
  --color-text-strong-rgb: 212 212 216;
  --color-text-secondary-rgb: 196 196 202;
  --color-text-faint-rgb: 154 154 162;
  --color-warning-rgb: 251 191 36;         /* amber-400 */
  --color-warning-strong-rgb: 252 211 77;  /* amber-300 */
  --color-danger-strong-rgb: 252 165 165;  /* red-300 */
}

.cafe-paused-banner {
  background: rgb(var(--color-danger-rgb) / 0.08);
  border: 1px solid rgb(var(--color-danger-rgb) / 0.25);
  color: #991b1b;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.cafe-service-toggle {
  display: flex;
  gap: 0.5rem;
  background: rgb(var(--color-surface-2-rgb));
  border-radius: 0.9rem;
  padding: 0.25rem;
  margin-bottom: 0.75rem;
}
.cafe-toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.6rem 0.5rem;
  border-radius: 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--color-text-muted-rgb));
  cursor: pointer;
}
.cafe-toggle-btn.is-active {
  background: rgb(var(--color-surface-rgb));
  color: rgb(var(--accent-text-rgb, 194 82 0));
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.cafe-search-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cafe-search-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgb(var(--color-border-rgb));
  border-radius: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}
.cafe-search-btn {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--color-border-rgb));
  background: rgb(var(--color-surface-rgb));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-text-secondary-rgb));
  cursor: pointer;
}

.cafe-section-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(var(--color-surface-rgb));
  margin: 0 -1rem 0.75rem;
  padding: 0 1rem;
  box-shadow: 0 4px 8px -6px rgba(0,0,0,0.15);
}
.cafe-section-nav {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.6rem 0;
}
.cafe-section-nav::-webkit-scrollbar { display: none; }
.cafe-section-nav-btn {
  flex: none;
  border: 1px solid rgb(var(--color-border-rgb));
  background: rgb(var(--color-surface-1-rgb));
  color: rgb(var(--color-text-secondary-rgb));
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cafe-section-nav-btn.is-active {
  background: var(--accent-color, #FF7A00);
  border-color: transparent;
  color: rgb(var(--accent-ink-rgb));
}

.cafe-menu-section { margin-bottom: 1.5rem; scroll-margin-top: 4.5rem; }
.cafe-section-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; }

.cafe-item-grid { display: flex; flex-direction: column; gap: 0.65rem; }
.cafe-item-card {
  display: flex;
  gap: 0.75rem;
  text-align: left;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0.65rem;
  background: rgb(var(--color-surface-rgb));
  cursor: pointer;
  min-width: 0;
}
.cafe-item-card.is-unavailable { opacity: 0.55; }
.cafe-item-photo {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgb(var(--color-surface-2-rgb));
}
.cafe-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cafe-item-photo--empty { display: flex; align-items: center; justify-content: center; color: rgb(var(--color-disabled-rgb)); }
.cafe-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cafe-item-title { font-weight: 600; font-size: 0.92rem; }
.cafe-item-desc { font-size: 0.78rem; color: rgb(var(--color-text-muted-rgb)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cafe-item-meta { font-size: 0.72rem; color: rgb(var(--color-text-faint-rgb)); display: flex; gap: 0.5rem; }
.cafe-item-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; flex-wrap: wrap; }
.cafe-item-price { font-weight: 700; font-size: 0.9rem; color: rgb(var(--accent-text-rgb, 194 82 0)); }
.cafe-item-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgb(var(--color-warning-strong-rgb));
  background: rgb(var(--color-warning-rgb) / 0.12);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.cafe-item-badge--muted { color: rgb(var(--color-text-muted-rgb)); background: rgb(var(--color-text-muted-rgb) / 0.12); }

.cafe-empty-hint { text-align: center; color: rgb(var(--color-text-faint-rgb)); font-size: 0.85rem; padding: 2rem 0; }

/* ------------------------------------------------------------ Оверлеи -- */
.cafe-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(var(--color-ink-fixed-rgb) / 0.45);
  z-index: 1050;
}
.cafe-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 86vh;
  background: rgb(var(--color-surface-rgb));
  border-radius: 1.25rem 1.25rem 0 0;
  /* Выше .cafe-screen (корзина/статус/мои заказы, тоже 1060) - шторка
     блюда открывается и поверх меню, и поверх уже открытой корзины
     ("Уточнить выбор" при повторе заказа), а z-index при равенстве
     решает порядок в DOM, который здесь не гарантирован. */
  z-index: 1070;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
#cafe-item-sheet-backdrop { z-index: 1065; }
.cafe-sheet-handle {
  width: 2.25rem; height: 0.3rem;
  background: rgb(var(--color-border-rgb));
  border-radius: 999px;
  margin: 0.6rem auto 0.2rem;
  flex: none;
}
.cafe-sheet-close {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  border: none;
  background: rgb(var(--color-surface-2-rgb));
  color: rgb(var(--color-text-secondary-rgb));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cafe-sheet-scroll { overflow-y: auto; padding: 0.75rem 1.1rem 1.25rem; min-height: 0; }

.cafe-sheet-photo { width: 100%; height: 11rem; border-radius: 0.9rem; overflow: hidden; background: rgb(var(--color-surface-2-rgb)); margin-bottom: 0.75rem; }
.cafe-sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.cafe-sheet-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; }
.cafe-sheet-desc { font-size: 0.85rem; color: rgb(var(--color-text-secondary-rgb)); margin-bottom: 0.5rem; white-space: pre-line; }
.cafe-sheet-meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.5rem; }
.cafe-sheet-meta-row span { background: rgb(var(--color-surface-1-rgb)); border-radius: 999px; padding: 0.2rem 0.6rem; }
.cafe-sheet-allergens { font-size: 0.75rem; color: rgb(var(--color-warning-strong-rgb)); margin-bottom: 0.75rem; }
.cafe-sheet-unavailable-note {
  font-size: 0.82rem;
  color: rgb(var(--color-warning-strong-rgb));
  background: rgb(var(--color-warning-rgb) / 0.1);
  border-radius: 0.6rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.cafe-group { margin-bottom: 1rem; }
.cafe-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.cafe-group-title { font-weight: 600; font-size: 0.9rem; }
.cafe-group-badge { font-size: 0.7rem; font-weight: 700; color: rgb(var(--accent-ink-rgb)); background: var(--accent-color, #FF7A00); border-radius: 999px; padding: 0.1rem 0.5rem; }
.cafe-group-optional { font-size: 0.72rem; color: rgb(var(--color-text-faint-rgb)); }
.cafe-option-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.55rem 0.1rem;
  border-bottom: 1px solid rgb(var(--color-surface-2-rgb));
  cursor: pointer;
}
.cafe-option-row:last-child { border-bottom: none; }
.cafe-option-label { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; }
.cafe-option-control {
  width: 1.15rem; height: 1.15rem; flex: none;
  border: 2px solid rgb(var(--color-disabled-rgb));
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--accent-ink-rgb)); font-size: 0.7rem;
}
.cafe-option-control.round { border-radius: 999px; }
.cafe-option-control.square { border-radius: 0.3rem; }
.cafe-option-row.is-selected .cafe-option-control { background: var(--accent-color, #FF7A00); border-color: var(--accent-color, #FF7A00); }
.cafe-option-price { font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); white-space: nowrap; }

.cafe-sheet-comment { margin: 0.75rem 0 1rem; }
.cafe-sheet-comment label { font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); display: block; margin-bottom: 0.3rem; }
.cafe-sheet-comment textarea {
  width: 100%; border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.7rem; padding: 0.55rem 0.7rem;
  font-size: 0.85rem; resize: vertical;
}

.cafe-sheet-qty { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.cafe-qty-btn {
  width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid rgb(var(--color-border-rgb));
  background: rgb(var(--color-surface-rgb)); font-size: 1.1rem; cursor: pointer; color: rgb(var(--color-text-strong-rgb));
}
.cafe-qty-value { font-weight: 700; min-width: 1.5rem; text-align: center; }

.cafe-sheet-missing { font-size: 0.78rem; color: rgb(var(--color-danger-rgb)); margin-bottom: 0.5rem; min-height: 1.1em; }

.cafe-add-btn {
  width: 100%; padding: 0.85rem 1rem; border-radius: 0.9rem; border: none;
  background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); font-weight: 700; font-size: 0.9rem;
  cursor: pointer;
}
/* Раньше цвет текста не переопределялся на disabled - оставался белым
   (accent-ink может быть тёмным для некоторых цветов) поверх серого
   disabled-фона. Явный тёмный текст здесь безопасен в обеих темах -
   disabled-фон везде светло-серый. */
.cafe-add-btn:disabled { background: rgb(var(--color-disabled-rgb)); color: #1e293b; cursor: not-allowed; }
body.theme-dark .cafe-add-btn:disabled { color: rgb(228 228 228); }

/* ------------------------------------------------------------- Корзина -- */
.cafe-cart-bar {
  position: fixed;
  left: 0.75rem; right: 0.75rem;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 900;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--accent-color, #FF7A00);
  color: rgb(var(--accent-ink-rgb));
  border: none;
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  font-weight: 700;
  cursor: pointer;
}
.cafe-cart-bar-count {
  background: rgb(var(--color-overlay-rgb) / 0.25);
  border-radius: 999px;
  min-width: 1.5rem;
  height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.cafe-cart-bar-label { flex: 1; text-align: left; font-size: 0.9rem; }
.cafe-cart-bar-sum { font-size: 0.9rem; }

.cafe-screen {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgb(var(--color-surface-rgb));
  display: flex;
  flex-direction: column;
}
.cafe-screen-header {
  flex: none;
  display: flex; align-items: center; gap: 0.6rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem;
  border-bottom: 1px solid rgb(var(--color-surface-2-rgb));
}
.cafe-screen-header h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.cafe-my-orders-clear-btn {
  margin-left: auto; border: none; background: none; color: rgb(var(--color-text-faint-rgb));
  font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0.4rem 0.1rem;
}
.cafe-screen-back {
  width: 2.2rem; height: 2.2rem; border-radius: 999px; border: none;
  background: rgb(var(--color-surface-2-rgb)); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgb(var(--color-text-strong-rgb));
}
.cafe-screen-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1rem; }
.cafe-screen-footer {
  flex: none;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--color-surface-2-rgb));
  display: flex; flex-direction: column; gap: 0.5rem;
}

.cafe-cart-line { display: flex; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid rgb(var(--color-surface-2-rgb)); }
.cafe-cart-line-body { flex: 1; min-width: 0; }
.cafe-cart-line-title { font-weight: 600; font-size: 0.88rem; }
.cafe-cart-line-options { font-size: 0.75rem; color: rgb(var(--color-text-muted-rgb)); margin-top: 0.1rem; }
.cafe-cart-line-comment { font-size: 0.75rem; color: rgb(var(--color-text-faint-rgb)); margin-top: 0.1rem; font-style: italic; }
.cafe-cart-line-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.cafe-cart-line-price { flex: none; font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.cafe-cart-remove { background: none; border: none; color: rgb(var(--color-danger-rgb)); font-size: 0.75rem; cursor: pointer; padding: 0; }

.cafe-cart-hint { font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); margin: -0.3rem 0 0.9rem; }

.cafe-cart-field { margin-bottom: 0.9rem; }
.cafe-cart-field label { display: block; font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.3rem; }
.cafe-cart-field input, .cafe-cart-field textarea {
  width: 100%; border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.7rem; padding: 0.55rem 0.7rem; font-size: 0.85rem;
}
.cafe-cart-field input.cafe-field-flash, .cafe-cart-field textarea.cafe-field-flash {
  outline: 2px solid var(--accent-color, #FF7A00); outline-offset: 1px;
}

.cafe-slots-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cafe-slot-btn {
  border: 1px solid rgb(var(--color-border-rgb)); background: rgb(var(--color-surface-rgb)); border-radius: 0.6rem;
  padding: 0.4rem 0.7rem; font-size: 0.82rem; cursor: pointer; color: rgb(var(--color-text-strong-rgb));
}
.cafe-slot-btn.is-selected { background: var(--accent-color, #FF7A00); border-color: transparent; color: rgb(var(--accent-ink-rgb)); }
.cafe-slot-btn:disabled { color: rgb(var(--color-disabled-rgb)); background: rgb(var(--color-surface-1-rgb)); cursor: not-allowed; text-decoration: line-through; }

.cafe-cart-summary { border-top: 1px dashed rgb(var(--color-border-rgb)); padding-top: 0.7rem; margin-top: 0.4rem; }
.cafe-cart-summary-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: rgb(var(--color-text-secondary-rgb)); padding: 0.15rem 0; }
.cafe-cart-summary-row.total { font-weight: 700; color: rgb(var(--color-ink-rgb)); font-size: 0.95rem; margin-top: 0.3rem; }

.cafe-order-error {
  color: rgb(var(--color-danger-strong-rgb)); background: rgb(var(--color-danger-rgb) / 0.08); border-radius: 0.6rem;
  padding: 0.6rem 0.75rem; font-size: 0.82rem; margin-top: 0.75rem;
}

.cafe-submit-btn {
  width: 100%; padding: 0.9rem 1rem; border-radius: 0.9rem; border: none;
  background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.cafe-submit-btn:disabled { background: rgb(var(--color-disabled-rgb)); color: #1e293b; cursor: not-allowed; }
body.theme-dark .cafe-submit-btn:disabled { color: rgb(228 228 228); }
.cafe-submit-btn.is-incomplete { opacity: 0.6; }

/* --------------------------------------------------------- Статус заказа -- */
.cafe-status-scroll { text-align: center; }
.cafe-status-number { font-size: 2rem; font-weight: 800; margin: 0.5rem 0 1rem; }
.cafe-status-steps { display: flex; justify-content: space-between; margin-bottom: 1rem; text-align: left; }
.cafe-status-step { flex: 1; font-size: 0.78rem; color: rgb(var(--color-text-faint-rgb)); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; }
.cafe-status-dot { width: 0.85rem; height: 0.85rem; border-radius: 999px; background: rgb(var(--color-border-rgb)); }
.cafe-status-step.is-done .cafe-status-dot { background: var(--accent-color, #FF7A00); }
.cafe-status-step.is-done { color: rgb(var(--color-text-strong-rgb)); font-weight: 600; }
.cafe-status-extra { font-size: 0.88rem; color: rgb(var(--color-text-secondary-rgb)); margin-bottom: 1rem; }
.cafe-status-cancelled { color: rgb(var(--color-danger-strong-rgb)); background: rgb(var(--color-danger-rgb) / 0.08); border-radius: 0.7rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; }
.cafe-status-cancel-btn {
  width: 100%; padding: 0.8rem 1rem; border-radius: 0.9rem; border: 1px solid #fca5a5;
  background: rgb(var(--color-surface-rgb)); color: rgb(var(--color-danger-strong-rgb)); font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.cafe-status-phone-btn {
  display: block; text-align: center; width: 100%; padding: 0.8rem 1rem; border-radius: 0.9rem;
  background: rgb(var(--color-call-btn-rgb)); color: rgb(var(--color-overlay-rgb)); font-weight: 700; font-size: 0.88rem; text-decoration: none;
}

/* Неброское предложение подключить уведомления - маленькая ссылка-кнопка,
   не соперничает по весу с кнопками отмены/звонка выше. */
.cafe-status-notify { margin-top: 0.9rem; text-align: center; }
.cafe-status-notify-btn {
  padding: 0.5rem 0.9rem; border-radius: 0.7rem; border: 1px solid rgb(var(--color-border-rgb));
  background: transparent; color: rgb(var(--color-text-secondary-rgb)); font-size: 0.8rem; cursor: pointer;
}
.cafe-status-notify-waiting, .cafe-status-notify-done { font-size: 0.78rem; color: rgb(var(--color-text-secondary-rgb)); margin-top: 0.4rem; }

.cafe-my-orders-link {
  display: table; margin: 0 auto 1.1rem; text-align: center; padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--accent-color, #FF7A00); border-radius: 0.9rem; background: rgb(var(--color-surface-rgb));
  color: rgb(var(--accent-text-rgb, 194 82 0)); font-weight: 700;
  font-size: 0.9rem; text-decoration: none; cursor: pointer;
}
.cafe-order-card {
  background: rgb(var(--color-surface-1-rgb)); border-radius: 0.9rem; padding: 0.8rem 0.9rem; font-size: 0.85rem;
  margin-bottom: 0.9rem;
}
.cafe-order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.cafe-order-card-number { font-weight: 800; color: rgb(var(--color-ink-rgb)); }
.cafe-order-card-status { font-size: 0.75rem; font-weight: 700; color: rgb(var(--color-text-muted-rgb)); }
.cafe-order-card .cafe-status-cancel-btn { margin-top: 0.6rem; padding: 0.6rem 1rem; font-size: 0.82rem; }
.cafe-my-orders-empty { text-align: center; color: rgb(var(--color-text-faint-rgb)); font-size: 0.85rem; padding: 2rem 1rem; }

.cafe-repeat-btn {
  width: 100%; padding: 0.6rem 1rem; margin-top: 0.6rem; border-radius: 0.9rem;
  border: 1.5px solid var(--accent-color, #FF7A00); background: rgb(var(--color-surface-rgb));
  color: rgb(var(--accent-text-rgb, 194 82 0)); font-weight: 700; font-size: 0.82rem; cursor: pointer;
}

.cafe-cart-line.needs-options { background: rgb(var(--color-warning-rgb) / 0.06); border-radius: 0.6rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.cafe-cart-line-warning { font-size: 0.75rem; color: rgb(var(--color-warning-strong-rgb)); margin-top: 0.25rem; }
.cafe-cart-line-fix-btn {
  border: none; background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); font-size: 0.75rem;
  font-weight: 700; border-radius: 0.5rem; padding: 0.3rem 0.6rem; margin-top: 0.35rem; cursor: pointer;
}

.cafe-confirm-box {
  position: fixed; left: 1rem; right: 1rem; top: 50%; transform: translateY(-50%);
  z-index: 1080; background: rgb(var(--color-surface-rgb)); border-radius: 1rem; padding: 1.1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.cafe-confirm-text { font-size: 0.9rem; color: rgb(var(--color-ink-rgb)); margin: 0 0 0.3rem; }
.cafe-confirm-btn {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.8rem; border: 1px solid rgb(var(--color-border-rgb));
  background: rgb(var(--color-surface-1-rgb)); color: rgb(var(--color-text-strong-rgb)); font-weight: 600; font-size: 0.86rem; cursor: pointer;
}
.cafe-confirm-btn--primary { background: var(--accent-color, #FF7A00); border-color: transparent; color: rgb(var(--accent-ink-rgb)); }
.cafe-confirm-btn--ghost { background: none; border: none; color: rgb(var(--color-text-faint-rgb)); }

.cafe-toast {
  position: fixed; left: 0.75rem; right: 0.75rem;
  top: calc(0.75rem + env(safe-area-inset-top));
  z-index: 1070;
  background: rgb(var(--color-ink-fixed-rgb)); color: rgb(var(--color-overlay-rgb)); border-radius: 0.9rem;
  padding: 0.75rem 0.9rem; font-size: 0.85rem;
  display: flex; align-items: flex-start; gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cafe-toast span { flex: 1; }
.cafe-toast button {
  flex: none; background: none; border: none; color: rgb(var(--color-overlay-rgb)); font-size: 1.1rem;
  line-height: 1; cursor: pointer; padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cafe-sheet, .cafe-screen { transition: transform 300ms var(--cafe-ease-spring); }
  .cafe-sheet[data-anim="enter"] { animation: cafe-sheet-in 300ms var(--cafe-ease-spring); }
  @keyframes cafe-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .cafe-screen[data-anim="enter"] { animation: cafe-screen-in 250ms var(--cafe-ease-out); }
  @keyframes cafe-screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .cafe-cart-bar[data-anim="enter"] { animation: cafe-pop-in 250ms var(--cafe-ease-spring); }
  @keyframes cafe-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .cafe-item-card, .cafe-toggle-btn, .cafe-section-nav-btn, .cafe-qty-btn, .cafe-slot-btn, .cafe-add-btn, .cafe-submit-btn {
    transition: transform 100ms var(--cafe-ease-out);
  }
  .cafe-item-card:active, .cafe-add-btn:active, .cafe-submit-btn:active { transform: scale(0.98); }
  .cafe-qty-btn:active, .cafe-slot-btn:active { transform: scale(0.94); }
}

@media (max-width: 380px) {
  .cafe-status-number { font-size: 1.6rem; }
}

/* Тема гостя, этап 2 - оставшиеся точечные литералы. */
body.theme-dark .cafe-paused-banner { color: rgb(252 165 165); }
body.theme-dark .cafe-item-card { border-color: rgb(72 72 72); }