/* ============================================================
   cabinet.css — личный кабинет cosori.ru (ночь 04.09.2026,
   «каркас внутрянки» по sites/cosori/docs/cabinet-build-plan.md).

   Вёрстка по макетам Figma P25e34xeCl5ayzEao1yOBt
   (docs/cabinet-figma: profile / favorites / my-recipes-empty /
   comments) и дизайн-системе tokens.css.

   Цвета ниже — ПЕРЕНОС значений из src/styles/tokens.css: Django-
   страницы не получают астро-инлайнов, поэтому переменные объявлены
   здесь ещё раз. Правило то же, что в tokens.css: значение здесь
   обязано совпадать со значением там; при правке ДС менять оба файла.

   Отступов, радиусов и высот здесь БОЛЬШЕ НЕТ (07.09.2026): их даёт
   css/cs-tokens.css, подключённый в head.html на всех серверных
   страницах. Своя копия шкалы в этом файле была ровно тем механизмом,
   что развёл зоопарк, — два независимых списка чисел без стража.

   Мобильный паттерн — cabinet-design.md §4.3 (решение F7): левое
   меню становится горизонтальной лентой пилюль под шапкой со
   скроллом вбок, контент — одной колонкой, промо-блок штабелируется,
   «Сохранить» уезжает в конец формы (правая колонка схлопывается вниз).
   ============================================================ */

:root {
  --cs-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --cs-accent:         #fe5834;
  --cs-accent-hover:   #e94b2c;
  --cs-accent-pressed: #c93f25;
  --cs-accent-soft:    #fff5f2;

  --cs-ink:    #231f20;
  --cs-ink-2:  #4a4f53;
  --cs-muted:  #717171;

  --cs-bg:       #ffffff;
  --cs-surface:  #f6f6f6;
  --cs-line:     #d9d9d9;
  --cs-hairline: #e7e7e7;
}

/* ── Каркас: меню / контент / (правая колонка у профиля) ─────────── */

.cs-cabinet {
  font-family: var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink, #231f20);
  /* Зазор до подвала — у ОБЁРТКИ страницы, а не у «последнего блока».
     До 08.09 его нёс промо-блок (.cs-cab-promo, margin-bottom 40): он был
     последним на каждой странице кабинета — пока не появились страницы без
     промо (правка и создание подборки, 07.09), и последняя панель легла на
     подвал встык (Founder 08.09: «к футеру липнет последний блок»). Правило:
     нижний отступ принадлежит странице; блоки внутри отступа до подвала не
     знают. У промо вне кабинета (/chefs/, /recipes/products/) отступ тоже
     отдан обёрткам страниц (.cs-chefs, .cs-products — ревью 08.09, А-4). */
  padding-bottom: var(--cs-s9);
}
.cs-cab-promo { margin-bottom: 0; }

.cs-cab-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas: "nav main";
  gap: var(--cs-panel-gap);
  align-items: start;
}

.cs-cab-grid--profile {
  grid-template-columns: 250px minmax(0, 1fr) 220px;
  grid-template-areas: "nav main aside";
}

/* ── Левое меню: пилюли на серой панели (макет profile.png) ──────── */

.cs-cab-nav {
  grid-area: nav;
  background: var(--cs-surface, #f6f6f6);
  border-radius: var(--cs-r-panel);
  padding: var(--cs-s2);
  display: flex;
  flex-direction: column;
  gap: var(--cs-s2);
}

.cs-cab-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cs-h-sm);
  padding: 0 var(--cs-s5);
  background: var(--cs-bg, #ffffff);
  border: 1px solid var(--cs-bg, #ffffff);
  border-radius: var(--cs-r-pill);
  font: 500 15px/1.2 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink-2, #4a4f53);
  text-decoration: none;
  white-space: nowrap;
}

.cs-cab-nav__item:hover {
  border-color: var(--cs-hairline, #e7e7e7);
  color: var(--cs-accent, #fe5834);
}

.cs-cab-nav__item.is-active {
  border-color: var(--cs-accent, #fe5834);
  color: var(--cs-accent, #fe5834);
  font-weight: 600;
  pointer-events: none;
}

/* стрелка активного пункта — как в макете */
.cs-cab-nav__item.is-active::after {
  content: "";
  position: absolute;
  right: var(--cs-s5);
  top: 50%;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--cs-accent, #fe5834);
}

/* ── Контентная зона ─────────────────────────────────────────────── */

.cs-cab-main { grid-area: main; min-width: 0; }

.cs-cab-panel {
  background: var(--cs-surface, #f6f6f6);
  border-radius: var(--cs-r-panel);
  padding: var(--cs-panel-pad);
}
/* Панели одной колонки — через --cs-panel-gap (макет: 20). На странице подборки
   панели шли встык (замер 07.09: 0 px между четырьмя панелями). */
.cs-cab-panel + .cs-cab-panel { margin-top: var(--cs-panel-gap); }

/* ── Профиль: аватар + форма (макет profile.png) ─────────────────── */

.cs-profile-head {
  display: flex;
  align-items: center;
  gap: var(--cs-s5);
  margin-bottom: var(--cs-block-gap);
}

.cs-avatar {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 50%;
  border: 1.5px solid var(--cs-accent, #fe5834);
  background: var(--cs-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-avatar__initials {
  font: 600 26px/1 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-accent, #fe5834);
  text-transform: uppercase;
}

.cs-avatar-link {
  font: 500 14px/1.3 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-muted, #717171);
  text-decoration: none;
  cursor: pointer;
  max-width: 140px;
}

.cs-avatar-link:hover { color: var(--cs-accent, #fe5834); }

.cs-field { margin-bottom: var(--cs-s5); }

.cs-field label {
  display: block;
  font: 500 13px/1.3 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-muted, #717171);
  margin: 0 0 var(--cs-s1) var(--cs-s5);
}

.cs-field input[type="text"],
.cs-field input[type="email"],
.cs-field input[type="date"],
.cs-field input[type="tel"] {
  width: 100%;
  height: var(--cs-h-md);
  padding: 0 var(--cs-s7);
  background: var(--cs-bg, #ffffff);
  border: 1px solid var(--cs-hairline, #e7e7e7);
  border-radius: var(--cs-r-pill);
  font: 400 15px/1.2 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink, #231f20);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.cs-field input:focus {
  border-color: var(--cs-accent, #fe5834);
}

.cs-field input:disabled {
  color: var(--cs-muted, #717171);
  background: var(--cs-surface, #f6f6f6);
  border-color: var(--cs-surface, #f6f6f6);
}

.cs-field .text-danger {
  font: 400 13px/1.3 var(--cs-font, 'Manrope', sans-serif);
  margin: var(--cs-s1) 0 0 var(--cs-s5);
}

/* Пол — радио в один ряд */
.cs-gender-row {
  display: flex;
  gap: var(--cs-s7);
  padding: var(--cs-s2) var(--cs-s5) 0;
  flex-wrap: wrap;
}

.cs-gender-row label {
  display: flex;
  align-items: center;
  gap: var(--cs-s2);
  font: 400 15px/1.2 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink, #231f20);
  margin: 0;
  cursor: pointer;
}

.cs-gender-row input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cs-accent, #fe5834);
}

/* ── Правая колонка профиля: Сохранить + Выйти ───────────────────── */

.cs-cab-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cs-row-gap);
  text-align: center;
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cs-h-md);
  padding: 0 var(--cs-s8);
  border: none;
  border-radius: var(--cs-r-pill);
  background: var(--cs-accent, #fe5834);
  color: #ffffff;
  font: 600 15px/1.2 var(--cs-font, 'Manrope', sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}

.cs-btn:hover { background: var(--cs-accent-hover, #e94b2c); color: #ffffff; }
.cs-btn:active { background: var(--cs-accent-pressed, #c93f25); }

.cs-btn:disabled {
  background: var(--cs-line, #d9d9d9);
  cursor: default;
}

.cs-btn--ghost {
  background: var(--cs-bg, #ffffff);
  border: 1px solid var(--cs-accent, #fe5834);
  color: var(--cs-accent, #fe5834);
}

.cs-btn--ghost:hover {
  background: var(--cs-accent-soft, #fff5f2);
  color: var(--cs-accent, #fe5834);
}

.cs-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-s2);
  font: 500 14px/1.2 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-muted, #717171);
  text-decoration: none;
}

.cs-logout:hover { color: var(--cs-accent, #fe5834); }

/* ── Пустые состояния (паттерн my-recipes-empty.png) ─────────────── */

.cs-empty {
  display: flex;
  align-items: center;
  gap: var(--cs-s8);
  padding: var(--cs-s8) var(--cs-s9);
}

.cs-empty__icon {
  flex: 0 0 auto;
  color: var(--cs-accent, #fe5834);
}

.cs-empty__icon svg { display: block; }

.cs-empty__title {
  font: 600 20px/1.3 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink, #231f20);
  margin: 0 0 var(--cs-s2);
}

.cs-empty__text {
  font: 400 14px/1.5 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-muted, #717171);
  margin: 0 0 var(--cs-s5);
  max-width: 480px;
}

.cs-empty__body { min-width: 0; }

/* ── Комментарии: вкладки (макет comments.png) ───────────────────── */

.cs-tabs {
  display: flex;
  gap: var(--cs-s2);
  flex-wrap: wrap;
  margin-bottom: var(--cs-s5);
}

.cs-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--cs-h-sm);
  padding: 0 var(--cs-s5);
  border: 1px solid var(--cs-hairline, #e7e7e7);
  border-radius: var(--cs-r-pill);
  background: var(--cs-bg, #ffffff);
  font: 500 14px/1.2 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink-2, #4a4f53);
  cursor: pointer;
}

.cs-tab:hover { color: var(--cs-accent, #fe5834); }

.cs-tab.is-active {
  background: var(--cs-accent, #fe5834);
  border-color: var(--cs-accent, #fe5834);
  color: #ffffff;
  cursor: default;
}

/* ── Форма «предложить рецепт» внутри пустых «Моих рецептов» ─────── */

.cs-suggest {
  margin-top: var(--cs-s7);
  padding: var(--cs-s7) var(--cs-s9) var(--cs-s8);
  border-top: 1px solid var(--cs-hairline, #e7e7e7);
}

.cs-suggest[hidden] { display: none; }

.cs-suggest h3 {
  font: 600 17px/1.3 var(--cs-font, 'Manrope', sans-serif);
  margin: 0 0 var(--cs-s5);
}

.cs-suggest .form-group { margin-bottom: var(--cs-s5); }

.cs-suggest .form-group label {
  display: block;
  font: 500 13px/1.3 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-muted, #717171);
  margin: 0 0 var(--cs-s1) var(--cs-s5);
}

.cs-suggest input[type="text"],
.cs-suggest input[type="email"],
.cs-suggest textarea {
  width: 100%;
  max-width: 480px;
  background: var(--cs-bg, #ffffff);
  border: 1px solid var(--cs-hairline, #e7e7e7);
  font: 400 15px/1.4 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink, #231f20);
  outline: none;
}

.cs-suggest input[type="text"],
.cs-suggest input[type="email"] {
  height: var(--cs-h-md);
  padding: 0 var(--cs-s7);
  border-radius: var(--cs-r-pill);
}

.cs-suggest textarea {
  padding: var(--cs-s4) var(--cs-s7);
  border-radius: var(--cs-r-btn);
}

.cs-suggest input:focus,
.cs-suggest textarea:focus { border-color: var(--cs-accent, #fe5834); }

.cs-suggest .form-submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cs-h-md);
  padding: 0 var(--cs-s8);
  border: none;
  border-radius: var(--cs-r-pill);
  background: var(--cs-accent, #fe5834);
  color: #ffffff;
  font: 600 15px/1.2 var(--cs-font, 'Manrope', sans-serif);
  cursor: pointer;
}

.cs-suggest .form-submit button:hover { background: var(--cs-accent-hover, #e94b2c); }

/* ── Промо-блоки под экранами (паттерн всех макетов) ─────────────── */

.cs-cab-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cs-s7);
  margin-top: var(--cs-s8);
  padding-top: var(--cs-s8);
  border-top: 1px solid var(--cs-hairline, #e7e7e7);
}

.cs-promo-card {
  position: relative;
  overflow: hidden;
  background: var(--cs-surface, #f6f6f6);
  border-radius: var(--cs-r-panel);
  padding: var(--cs-s8);
  min-height: 230px;
  display: flex;
  flex-direction: column;
}

.cs-promo-card__title {
  font: 700 20px/1.3 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink, #231f20);
  margin: 0 0 var(--cs-s4);
}

.cs-promo-card__text {
  font: 400 14px/1.5 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-ink-2, #4a4f53);
  margin: 0 0 var(--cs-s5);
}

.cs-promo-card__text strong { color: var(--cs-accent, #fe5834); }

.cs-promo-card--discount .cs-promo-card__title,
.cs-promo-card--discount .cs-promo-card__text { max-width: 60%; }

.cs-promo-card--discount .cs-btn { align-self: flex-start; margin-top: auto; }

/* декоративный оранжевый круг — как в макете (фото-ассетов Figma
   в нужном разрешении нет, декор воспроизведён средствами CSS) */
.cs-promo-card--discount::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--cs-accent, #fe5834);
  opacity: .92;
}

.cs-promo-card--discount .cs-promo-card__badge {
  position: absolute;
  right: 44px;
  top: 34px;
  transform: rotate(8deg);
  background: linear-gradient(160deg, var(--cs-accent, #fe5834), var(--cs-accent-pressed, #c93f25));
  color: #ffffff;
  border-radius: var(--cs-r-field);
  padding: 10px 16px;
  font: 700 12px/1.1 var(--cs-font, 'Manrope', sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(35, 31, 32, .18);
}

.cs-promo-card--subscribe { text-align: center; align-items: center; }

.cs-promo-card--subscribe .cs-promo-card__text { max-width: 420px; }

.cs-subscribe-form {
  display: flex;
  gap: var(--cs-s2);
  width: 100%;
  max-width: 420px;
  margin-top: auto;
}

.cs-subscribe-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--cs-h-md);
  padding: 0 var(--cs-s7);
  background: var(--cs-bg, #ffffff);
  border: 1px solid var(--cs-hairline, #e7e7e7);
  border-radius: var(--cs-r-pill);
  font: 400 14px/1.2 var(--cs-font, 'Manrope', sans-serif);
  outline: none;
}

.cs-subscribe-form .cs-btn { padding: 0 var(--cs-s7); }

.cs-promo-card__note {
  font: 400 12px/1.4 var(--cs-font, 'Manrope', sans-serif);
  color: var(--cs-muted, #717171);
  margin: var(--cs-s2) 0 0;
}

/* ── Планшет и мобильный (cabinet-design §4.3, решение F7) ───────── */

@media (max-width: 991.98px) {
  .cs-cab-grid,
  .cs-cab-grid--profile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nav" "main" "aside";
  }

  /* меню — горизонтальная лента пилюль со скроллом вбок,
     как фильтры каталога */
  .cs-cab-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--cs-s2);
  }

  .cs-cab-nav::-webkit-scrollbar { display: none; }

  .cs-cab-nav__item { flex: 0 0 auto; }

  .cs-cab-nav__item.is-active { padding-right: var(--cs-s8); }

  /* «Сохранить» — в конце формы, не третьей колонкой */
  .cs-cab-aside { margin-top: var(--cs-s1); }

  .cs-cab-promo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .cs-empty {
    flex-direction: column;
    text-align: center;
    padding: var(--cs-s8) var(--cs-s5);
  }

  .cs-empty__text { margin-left: auto; margin-right: auto; }

  .cs-suggest { padding-left: var(--cs-s5); padding-right: var(--cs-s5); }

  .cs-promo-card { padding: var(--cs-s7) var(--cs-s5); }

  .cs-promo-card--discount .cs-promo-card__title,
  .cs-promo-card--discount .cs-promo-card__text { max-width: 100%; }

  .cs-promo-card--discount .cs-promo-card__badge { display: none; }

  .cs-promo-card--discount::after {
    right: -140px;
    bottom: -180px;
  }

  .cs-subscribe-form { flex-direction: column; }
}