/* Панель и окно кабинета главной сайта (план 2026-10-03-сайт-всё-внутри-главной,
   П6). Вход, оформление и кабинет открываются на главной: панель справа
   (тот же <dialog>, что у корзины) и окно кабинета по центру - как в макете
   владельца yamal-gurme.html. Содержимое - страницы витрины без оболочки
   (webapp/_panel_base.html, корень .panel-page): разметка у страницы и у
   панели одна, поэтому здесь оформляются классы шаблонов витрины.

   Файл подключается только на главной, после site.css. Стили страниц витрины
   (webapp/style.css, desktop.css) сюда не подключить: их общие правила для
   body, h1 и button сломали бы главную - поэтому свой набор, и всё, что
   касается содержимого, живёт под .panel-page. Цвета и шрифты - макета
   (переменные site.css). Корзина (корень .drawer-cart) оформлена в site.css. */

/* ---- Панель справа --------------------------------------------------------
   Поля - на внутреннем блоке: нажатие по самому <dialog> бывает только мимо
   панели (подложка), и случайный промах рядом с полем панель не закрывает. */
.cart-dialog { padding: 0; overflow: hidden; }
/* Прокручивается содержимое, а не сама панель: крестик остаётся на месте. */
.cart-dialog > #cart-dialog-body { height: 100%; overflow-y: auto; padding: 30px 30px 40px; }
.cart-dialog > .panel-close { position: absolute; right: 16px; top: 16px; z-index: 2; background: #f0f2f4e6; }
.cart-dialog > .panel-close[hidden] { display: none; }

/* Запрос в полёте: содержимое не принимает нажатий (один запрос за раз), но
   закрыть панель можно всегда - зависшая связь не запирает человека. */
dialog[aria-busy="true"] .panel-page,
dialog[aria-busy="true"] .drawer-cart { opacity: .55; pointer-events: none; transition: opacity .15s; }
dialog[aria-busy="true"] [data-close-dialog] { pointer-events: auto; }
/* Сообщение в корзине панели (город сменили в другой вкладке). */
.cart-dialog .drawer-cart .flash { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--berry); background: var(--paper); color: var(--ink-text); font-size: 14px; }

/* ---- Окно кабинета (макет: account-dialog) --------------------------------- */
.account-dialog { width: min(900px, calc(100% - 40px)); overflow-y: auto; }
.account-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 32px 38px; background: #10161d; color: var(--snow);
}
.account-heading .eyebrow { font-size: 11px; color: #d398aa; margin-bottom: 8px; }
.account-heading h2 { font: 400 43px/1.15 Oswald, sans-serif; text-transform: none; letter-spacing: 0; }
.account-heading p:last-child { font-size: 13px; color: #b4bec9; margin-top: 12px; line-height: 1.7; }
.account-heading .close-dialog { color: #c2cbd5; flex-shrink: 0; }
.account-heading .close-dialog:hover { color: var(--rose); }
.account-tabs { display: flex; gap: 30px; margin: 0 38px; border-bottom: 1px solid #bdc7d1; }
.account-tabs[hidden] { display: none; }
.account-tabs a { position: relative; display: flex; align-items: center; min-height: 57px; color: #6a7784; font-size: 14px; }
.account-tabs a:hover { color: var(--berry); }
.account-tabs a[aria-current="page"] { color: #15222f; }
.account-tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--berry);
}
.account-panel { padding: 27px 38px 30px; min-height: 260px; }

/* ---- Содержимое страниц витрины ------------------------------------------- */
.panel-page { color: var(--ink-text); font-size: 15px; line-height: 1.6; }
.panel-page [hidden] { display: none !important; }
.panel-page h1 {
  margin: 0 0 18px; padding-right: 44px;
  font: 400 34px/1.1 Oswald, sans-serif; letter-spacing: -.01em; text-transform: uppercase;
}
.account-panel .panel-page h1 { padding-right: 0; font-size: 27px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.panel-page h2 { margin: 28px 0 12px; font: 400 21px/1.4 Oswald, sans-serif; letter-spacing: 0; text-transform: uppercase; }
.panel-page p { margin: 0 0 12px; }
.panel-page ul, .panel-page ol { margin: 0 0 12px; padding-left: 20px; }
.panel-page a { color: #76213a; border-bottom: 1px solid #76213a66; }
.panel-page a:hover { color: var(--berry); border-color: var(--berry); }
.panel-page .muted, .panel-page .note { font-size: 13px; line-height: 1.7; color: var(--muted-ink); }
.panel-page .section-label {
  margin: 28px 0 12px; color: #606975;
  font: 400 12px/1.8 Manrope, sans-serif; letter-spacing: .15em; text-transform: uppercase;
}
.panel-page .section-title { margin: 28px 0 0; font: 400 21px/1.4 Oswald, sans-serif; text-transform: uppercase; }
.panel-page .flash {
  margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--berry);
  background: var(--paper); color: var(--ink-text); font-size: 14px;
}
.panel-page .error-box { margin: 12px 0; padding: 12px; border-left: 0; background: #f2dce2; color: #a02141; font-size: 13px; font-weight: 500; }
/* Знак бренда и «Сменить город» - в шапке главной; кнопка контакта Telegram
   живёт только в Mini App (её скрипт в панели не исполняется). */
.panel-page .auth-brand, .panel-page #change-city, .panel-page #btn-contact { display: none; }

/* Кнопки и поля (макет: checkout-form, button berry). */
.panel-page button, .panel-page .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 15px 25px;
  border: 1px solid var(--berry); background: var(--berry); color: #fff;
  font-size: 14px; font-weight: 500; text-align: center;
  transition: background .25s, border-color .25s, color .25s;
}
.panel-page button:hover, .panel-page .btn:hover { background: var(--berry-hover); border-color: var(--berry-hover); color: #fff; }
.panel-page button:disabled { opacity: .45; cursor: default; }
.panel-page .btn-wide { display: flex; width: 100%; margin: 16px 0; }
.panel-page .btn-quiet { background: transparent; border-color: #95a2af; color: var(--ink-text); }
.panel-page .btn-quiet:hover { background: transparent; border-color: var(--berry); color: var(--berry); }
.panel-page label { display: block; margin: 18px 0 8px; font-size: 12px; color: #576f83; }
.panel-page input[type="text"], .panel-page input[type="tel"], .panel-page textarea {
  display: block; width: 100%; min-height: 50px; padding: 13px;
  border: 1px solid #aabac7; border-radius: 0; background: #f9fafb; color: #152633;
  font: inherit; font-size: 16px;
}
.panel-page label input[type="text"], .panel-page label input[type="tel"] { margin-top: 8px; }
.panel-page input:focus, .panel-page textarea:focus { outline: 0; border-color: var(--ink-text); box-shadow: 0 0 0 3px #931d3b2e; }
.panel-page .addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel-page .addr-row label { margin-top: 14px; }
.panel-page .check { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: var(--ink-text); font-size: 14px; font-weight: 500; }
.panel-page .check input { width: 17px; height: 17px; margin: 3px 0 0; flex-shrink: 0; }
.panel-page .consent { margin-top: 4px; font-size: 12px; line-height: 1.7; color: #617180; }
.panel-page .auth-form { margin-top: 18px; }
.panel-page .code-input { letter-spacing: .3em; font-size: 22px; }

/* Состав, итоги, продавец (оформление и страница заказа). */
.panel-page .cart-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.panel-page .cart-line .name { font-size: 15px; font-weight: 500; }
.panel-page .cart-line .price { font-weight: 500; white-space: nowrap; }
.panel-page .totals { margin: 16px 0; padding: 18px; border: 1px solid #c2cbd3; background: #f6f7f9; font-size: 14px; }
.panel-page .totals .row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 15px; }
.panel-page .totals .row b { font-weight: 500; }
.panel-page .totals .sub { padding: 2px 0 8px; font-size: 13px; color: var(--muted-ink); }
.panel-page .progress { height: 3px; margin: 10px 0 14px; background: #dde2e7; }
.panel-page .progress-fill { height: 100%; background: var(--berry); }

/* Шаг звонка. */
.panel-page .call-number { margin: 4px 0 14px; font-size: 30px; font-weight: 500; letter-spacing: .01em; }
.panel-page .call-status { margin: 14px 0 4px; font-weight: 500; font-variant-numeric: tabular-nums; }
.panel-page .call-note { margin: 4px 0; color: #a02141; font-size: 13px; }
.panel-page .call-note:empty { margin: 0; }
.panel-page .call-help { margin: 14px 0 0; padding: 12px 14px; background: #e4e9ed; }
.panel-page .call-help summary { font-weight: 500; cursor: pointer; }
.panel-page .call-help ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted-ink); font-size: 13px; line-height: 1.6; }

/* «Заказ принят». */
.panel-page .done { padding: 12px 0 0; text-align: center; }
.panel-page .done .mark { margin-bottom: 12px; font-size: 44px; line-height: 1; }
.panel-page .done h1 { padding-right: 0; }

/* Кабинет: заказы, заказ, бонусы, профиль (макет: account-order, bonus-summary). */
.panel-page .order-row {
  display: block; margin-bottom: 16px; padding: 22px;
  border: 1px solid #c2cbd3; background: #f6f7f9; color: inherit; transition: border-color .25s;
}
.panel-page .order-row:hover { border-color: var(--berry); color: inherit; }
.panel-page .order-row .row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-page .order-row .row b { font-size: 15px; font-weight: 500; }
.panel-page .order-row .row + .row { margin-top: 10px; font-size: 12px; color: #647484; }
.panel-page .order-row .row + .row > span:last-child { font-size: 17px; font-weight: 500; color: #172530; white-space: nowrap; }
.panel-page .state { padding: 6px 10px; background: #e2e6eb; color: #394754; font-size: 12px; white-space: nowrap; }
.panel-page .state-awaiting_payment { background: #e9dce2; color: #842a46; }
.panel-page .state-paid, .panel-page .state-delivered { background: #e1e8e8; color: #3e605c; }
.panel-page .order-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: -6px 0 18px; }
.panel-page .paid-banner { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #c2cbd3; background: #f6f7f9; }
.panel-page .actionbar { margin: 20px 0 0; }
.panel-page .actionbar .btn { max-width: 360px; margin: 0; }
.panel-page .totals#bonus-balance { padding: 25px 28px; border: 0; background: #15212c; color: #eaf0f5; }
.panel-page .totals#bonus-balance .row:first-child:not(.bonus-other) b { font: 400 44px/1.1 Oswald, sans-serif; }
.panel-page .totals#bonus-balance .sub { color: #b9c6d2; }
.panel-page .bonus-row {
  display: flex; align-items: center; justify-content: space-between; gap: 15px;
  padding: 17px 0; border-top: 1px solid #cad2da; font-size: 13px;
}
.panel-page .bonus-row .name { font-size: 14px; }
.panel-page .bonus-row .muted { font-size: 11px; color: #778593; }
.panel-page .bonus-amount { font-size: 17px; font-weight: 500; white-space: nowrap; color: #94566a; }
.panel-page .bonus-plus { color: #4c6b65; }
.panel-page .list-card { margin: 0 0 16px; padding: 0; border-top: 1px solid #c4ced7; list-style: none; }
.panel-page .list-card > p, .panel-page .list-card > li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0; padding: 16px 0; border-bottom: 1px solid #c4ced7; font-size: 14px;
}
.panel-page .list-card b { font-weight: 500; }
.panel-page .list-card.links a { border-bottom: 0; color: var(--ink-text); }
.panel-page .list-card.links a:hover { color: var(--berry); }
.panel-page #logout-form .btn-wide { max-width: 320px; }

/* ---- Узкий экран ----------------------------------------------------------- */
@media (max-width: 760px) {
  .cart-dialog > #cart-dialog-body { padding: 25px 22px 35px; }
  .account-dialog { width: calc(100% - 20px); max-height: calc(100svh - 20px); }
  .account-heading { padding: 25px 22px; }
  .account-heading h2 { font-size: 37px; }
  .account-tabs { margin: 0 22px; gap: 27px; }
  .account-panel { padding: 23px 22px; }
  .panel-page h1 { font-size: 30px; }
  .panel-page .order-row { padding: 17px; }
  .panel-page .totals#bonus-balance { padding: 21px; }
  .panel-page #logout-form .btn-wide { max-width: none; }
}
@media (max-width: 390px) {
  .account-tabs { margin-left: 16px; margin-right: 16px; }
  .account-panel { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-page button, .panel-page .btn, .panel-page .order-row { transition: none; }
}