/* ============================================================
   Единый стандарт для страниц существующего сайта клуба.

   Подключается ПОСЛЕДНИМ (после zd-ui.css и site-chrome.css) и приводит
   кнопки и переходы к тем же правилам, что на главной и на страницах ролей,
   не меняя сами файлы сайта:

     • кнопка действия  — бархат занавеса, размер 264 × 46;
     • кнопка роли      — чёрное с белым;
     • плитка-переход   — чёрное с белым;
     • тихие кнопки     — контур, свой цвет (на тёмных секциях они белые);
     • телефон          — ничего не шире экрана: таблицы прокручиваются
                          внутри себя, картинки сжимаются, плашка переносится.

   Селекторы начинаются с `:root` намеренно: у сайта есть свои правила
   с `!important` (например, `footer a { min-height: 0 !important }`),
   и без повышенной специфичности они перебивали бы стандарт.
   ============================================================ */

/* Ни одна страница сайта не уезжает за край экрана по горизонтали.
   `clip` (а не `hidden`) не создаёт контейнер прокрутки — липкая шапка работает. */
:root {
  overflow-x: clip;
}

/* Единая плашка заменяет старые шапки сайта (topnav и site-header). */
:root .topnav,
:root .site-header {
  display: none !important;
}

/* ------------------------------ 1. Кнопки: один размер ------------------------------ */

/* Атрибут `data-zd-btn` ставит скрипт плашки: только на те элементы, у которых
   уже есть своя заливка (то есть это кнопка, а не текстовая ссылка).
   Так стандарт не превращает ссылки в кнопки и не ломает шапку сайта. */
:root [data-zd-btn] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  box-sizing: border-box !important;
  min-height: var(--zd-btn-h) !important;
  height: auto !important;
  padding: 0 var(--zd-btn-pad-x) !important;
  border-radius: var(--zd-radius-pill) !important;
  font-family: var(--zd-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

:root [data-zd-btn='small'] {
  min-width: 0 !important;
  min-height: var(--zd-btn-small-h) !important;
  padding: 0 16px !important;
  font-size: 0.88rem !important;
}

/* ------------------------------ 2. Цвет: действие — бархат занавеса ------------------------------ */

/* Только настоящие кнопки с заливкой (их пометил скрипт) — цвет занавеса. */
:root [data-zd-btn] {
  background: linear-gradient(180deg, var(--zd-wine-1), var(--zd-wine-2)) !important;
  background-image: linear-gradient(180deg, var(--zd-wine-1), var(--zd-wine-2)) !important;
  color: var(--zd-cream) !important;
  border: 1px solid var(--zd-wine-3) !important;
  box-shadow: 0 6px 16px rgba(51, 6, 13, 0.26);
}

:root [data-zd-btn]:hover {
  transform: translateY(-2px);
}

/* Текстовые ссылки остаются ссылками: меняем только цвет на цвет действия. */
:root [data-zd-link] {
  color: var(--zd-wine-1) !important;
}

/* переход-плитка: чёрное с белым — как иконки на главном экране */
:root .door-card,
:root .door-company,
:root .fchip,
:root .gal-fbtn,
:root .role-btn,
:root .ncard__cta--pdf {
  background: var(--zd-black) !important;
  color: var(--zd-white) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
}

:root .ncard__cta--pdf {
  min-height: var(--zd-btn-small-h) !important;
  font-size: 0.88rem !important;
}

/* тихие кнопки: размер наш, цвет оставляем */
:root .btn-outline,
:root .btn--ghost,
:root .btn-ghost {
  border-width: 2px;
}

:root [data-zd-btn] svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------ 3. Телефон: ничего не шире экрана ------------------------------ */

@media (max-width: 720px) {
  /* Широкие таблицы (открытые данные, даты, расписания) прокручиваются
     внутри себя, а не растягивают страницу. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Кнопки не шире экрана */
  :root .btn,
  :root [class^='btn-'],
  :root [class*=' btn-'],
  :root .site-nav__cta,
  :root .header-cta,
  :root .topnav__cta,
  :root .door,
  :root .door-card,
  :root .door-company,
  :root .fchip,
  :root .ncard__cta,
  :root .gal-fbtn,
  :root .intro-stage__btn,
  :root .role-btn {
    max-width: 100%;
  }

  /* На телефоне кнопка сворачивания встаёт под заголовок отдельной строкой */
  .zd-fold__toggle {
    display: inline-flex;
    margin: 10px 0 0;
  }
}

/* ------------------------------ 5. Вторичные разделы: свернуть/развернуть ------------------------------ */

/* Кнопка у заголовка вторичного раздела: чёрное с белым — как прочие переходы. */
.zd-fold__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 0 0 0 12px;
  padding: 0 14px;
  vertical-align: middle;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--zd-radius-pill);
  background: var(--zd-black);
  color: var(--zd-white);
  font-family: var(--zd-font);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.zd-fold__toggle:hover,
.zd-fold__toggle:focus-visible {
  transform: translateY(-1px);
  background: #1b0207;
}

.zd-fold__toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.zd-fold__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* Свёрнутый раздел: на виду остаётся только заголовок с кнопкой.
   Прячем по классу, без перестановки узлов — сетки и flex не ломаются. */
.zd-fold-closed .zd-fold-after {
  display: none !important;
}

.zd-fold__body {
  animation: zd-fold-in 0.2s ease;
}

@keyframes zd-fold-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------ 6. Плашка роли на телефоне ------------------------------ */

@media (max-width: 560px) {
  /* Имя роли убираем: цифра на медальоне и так видна, а места нужно мало.
     Строка остаётся доступной через подпись медальона. */
  .zdbar__id {
    display: none;
  }

  .zdbar__inner {
    gap: 0.35rem 0.5rem;
    padding: 0.45rem 0.6rem;
  }

  .zdbar .zdlang__btn {
    min-width: 34px;
    padding: 0 6px;
  }

  .zdbar .zdnav {
    order: 4;
    flex: 1 1 100%;
  }

  .zdbar .zd-chip {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.82rem;
  }
}

/* ------------------------------ 7. Подменю «О клубе» ------------------------------ */

.zd-drop {
  position: relative;
}

.zd-drop__caret {
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  transition: transform 0.16s ease;
}

.zd-drop__toggle[aria-expanded='true'] .zd-drop__caret {
  transform: rotate(180deg);
}

.zd-drop__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 216px;
  padding: 6px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 12px;
  background: #12050a;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  z-index: 60;
}

.zd-drop.is-open .zd-drop__menu,
.zd-drop__toggle[aria-expanded='true'] + .zd-drop__menu {
  display: block;
}

.zd-drop__link {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #f3ece0;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}

.zd-drop__link:hover,
.zd-drop__link:focus-visible {
  background: rgba(212, 175, 55, 0.16);
  color: #ffffff;
}

/* ------------------------------ 8. Номера: детали свернуты ------------------------------ */

/* Карточка номера: на виду остаются фото, название и кнопка «заказать»,
   а поля (тема/когда/кому) и бейджи раскрываются по клику. */
.ncard--collapsed .ncard__meta,
.ncard--collapsed .ncard__badges {
  display: none !important;
}

.zd-ncard-toggle {
  margin-top: .9rem;
  padding: 8px 16px;
  border: 1px solid rgba(176, 74, 47, 0.4);
  border-radius: 999px;
  background: transparent;
  color: #B04A2F;
  font-family: inherit;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
}

.zd-ncard-toggle:hover {
  background: #FBEDE7;
}

/* ------------------------------ 9. Бархатный занавес на страницах ------------------------------ */

/* Единая палитра вместо терракоты brand.css: крем/бронза/вино (как на диске). */
:root {
  background: #F6EFE2 !important;
  --ink: #211A13;
  --muted: #7A6F5E;
  --accent: #5A0A14;
  --accent-ink: #B0894C;
  --line: #E7DCC8;
  --paper: #F6EFE2;
}

:root body {
  background:
    radial-gradient(62% 26% at 50% 0%, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0) 72%),
    #F6EFE2 !important;
  color: #211A13 !important;
}

:root h1, :root h2, :root h3, :root h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}

:root a {
  color: #5A0A14; /* ссылки — вино, а не браузерный синий */
}

/* Ссылка «к содержанию» — скрыта визуально, видна только при фокусе с клавиатуры */
:root .skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
}
:root .skip-link:focus {
  left: 8px !important;
  top: 8px !important;
  z-index: 300 !important;
  padding: 8px 16px !important;
  background: #5A0A14 !important;
  color: #fff !important;
}

.zd-curtain {
  position: relative; /* «кулиса»: видимая полоса бархата в потоке, над плашкой */
  height: 44px;
  pointer-events: none;
  overflow: visible;
  background: linear-gradient(180deg, #5a0a14 0%, #2c0409 100%);
  border-bottom: 2px solid rgba(212, 175, 55, 0.75);
}

/* Фестонный низ кулисы: ряд полукругов под золотой нитью */
.zd-curtain::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background: radial-gradient(circle at 12px 0, #2c0409 0 11px, transparent 11.5px) repeat-x;
  background-size: 24px 12px;
}

@media (max-width: 560px) {
  .zd-curtain {
    height: 30px;
  }
}

/* Складки бархата: тёмные полосы только в верхней «тёмной» части занавеса. */
.zd-curtain__fold {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 7%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.16) 24%,
    rgba(0, 0, 0, 0.52) 34%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.64) 56%, rgba(0, 0, 0, 0.24) 67%,
    rgba(0, 0, 0, 0.56) 78%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.5) 100%);
  filter: blur(3px);
  opacity: 0.9;
  animation: zd-curtain-breathe 16s ease-in-out infinite;
}

/* Частичный тёплый свет по верху занавеса. */
.zd-curtain__sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 36% at 50% 16%, rgba(255, 176, 132, 0.22), rgba(255, 120, 90, 0) 70%);
  animation: zd-sheen-drift 26s ease-in-out infinite;
}

@keyframes zd-curtain-breathe {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.04) skewX(-1.2deg); }
}

@keyframes zd-sheen-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2.5%); }
}

/* ------------------------------ Виджет «Сообщить об ошибке» ------------------------------ */
.zdfb {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #D4AF37;
  background: #5A0A14;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.zdfb:hover { transform: scale(1.06); }
.zdfb-panel {
  position: fixed;
  right: 14px;
  bottom: 72px;
  z-index: 9999;
  width: min(360px, calc(100vw - 28px));
  background: #fffdf8;
  border: 1px solid #E7DCC8;
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28);
  padding: 16px;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #211A13;
}
.zdfb-panel__head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.zdfb-cats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.85rem; }
.zdfb-cats label { cursor: pointer; }
.zdfb-panel textarea {
  width: 100%;
  min-height: 84px;
  box-sizing: border-box;
  border: 1px solid #E7DCC8;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  margin-bottom: 10px;
  resize: vertical;
}
.zdfb-panel input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #E7DCC8;
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.zdfb-panel button[type="submit"] {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: #5A0A14;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.zdfb-panel button[type="submit"]:hover { background: #6a0d19; }
.zdfb-hint {
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: #6b5a44;
}
.zdfb-hint summary {
  cursor: pointer;
  color: #5A0A14;
  font-weight: 600;
}
.zdfb-hint ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.zdfb-hint li {
  margin-bottom: 3px;
}