/* ==========================================================================
   Страница тарифов (черновик, /tariffs/): четыре тарифа в одном блоке —
   первая ступень (40 000 / 90 000) и две ступени сразу, супер-оффер (110 000 / 310 000).
   Свёрстана обычной вёрсткой, масштаб — через --zoom, как остальные блоки.
   ========================================================================== */

.tariffs {
  --w: 1200px;
  scroll-margin-top: 0;
  --gold: #ddd3b2;
  --line: #2b2e31;
  background-color: #0c0d0e;
}

.tariffs__canvas {
  width: var(--w);
  margin: 0 auto;
  padding: 60px 30px 100px;
  zoom: var(--zoom);
}

.tariffs__draft {
  width: max-content;
  margin: 0 auto 36px;
  padding: 6px 12px;
  border: 1px dashed #4d5a67;
  border-radius: 100px;
  color: rgba(245, 245, 245, .55);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

.tariffs__title {
  margin: 0;
  color: #fff;
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -1.8px;
  text-align: center;
}
.tariffs__subtitle {
  margin: 20px 0 0;
  color: #f5f5f5;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------------------------------------------------------- переключатель */
.tariffs__switch {
  display: flex;
  width: max-content;
  margin: 36px auto 0;
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background-color: #141618;
}
.tariffs__chip {
  padding: 9px 18px;
  border: 0;
  border-radius: 100px;
  background: none;
  color: rgba(245, 245, 245, .6);
  font-family: inherit;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tariffs__chip:hover { color: #fff; }
.tariffs__chip.is-active { background-color: #2b2f33; color: #fff; }

/* ---------------------------------------------------------------- сетка */
.tariffs__grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

/* ---------------------------------------------------------------- карточка */
.tcard {
  display: flex;
  flex: 0 0 270px;
  flex-direction: column;
  padding: 24px 20px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #1d1f22 0%, #141618 100%);
  color: #fff;
}
.tcard[hidden] { display: none; }

/* две ступени сразу — тёплая золотая карточка */
.tcard--s2 {
  border-color: rgba(221, 211, 178, .35);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(221, 211, 178, .16) 0%, rgba(221, 211, 178, 0) 70%),
    linear-gradient(180deg, #23211c 0%, #151412 100%);
}

.tcard__head {
  min-height: 30px;
}
.tcard__name {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -1px;
}
.tcard__badge {
  flex: none;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: var(--gold);
  color: #2b2923;
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
  letter-spacing: -0.1px;
  text-transform: uppercase;
}
.tcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
  margin-top: 6px;
}
.tcard__label {
  margin: 0;
  color: rgba(245, 245, 245, .5);
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
}

/* плашка «что покупаешь» */
.tcard__panel {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .04);
}
.tcard__panel strong { font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: -0.5px; }
.tcard__panel span { color: #f5f5f5; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -0.3px; }
.tcard--s2 .tcard__panel strong { color: var(--gold); }

/* цена */
.tcard__price { position: relative; margin-top: 20px; }
.tcard__old {
  display: block;
  height: 18px;
  color: rgba(245, 245, 245, .45);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.3px;
}
.tcard__old--empty { visibility: hidden; }
.tcard__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 2px;
}
.tcard__amount b {
  color: var(--gold);
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -1.4px;
}
.tcard__amount span { color: rgba(245, 245, 245, .6); font-size: 13px; letter-spacing: -0.3px; }
.tcard__price .tcard__save {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background-color: rgba(76, 217, 100, .14);
  color: #7be08e;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-transform: uppercase;
}

/* кнопка — золотая у всех тарифов */
.tcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 18px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background-color: var(--gold);
  color: #2b2923;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
@media (hover: hover) {
  .tcard__cta:hover { border-color: #c4bda5; background-color: #c4bda5; }
}
.tcard__caption {
  margin: 10px 0 0;
  color: rgba(245, 245, 245, .55);
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  text-align: center;
}

/* счётчик мест (js/seats.js) */
.tcard__seats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background-color: rgba(43, 47, 51, .8);
  color: #fff;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.tcard__seats .seats__value { color: var(--gold); font-variant-numeric: tabular-nums; }
.seats__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4cd964;
  box-shadow: 0 0 0 0 rgba(76, 217, 100, .6);
  animation: tcard-pulse 2s infinite;
}
@keyframes tcard-pulse {
  70%  { box-shadow: 0 0 0 8px rgba(76, 217, 100, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); }
}

/* списки */
.tcard__group {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: rgba(245, 245, 245, .5);
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}
.tcard__list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -0.3px;
}
.tcard__list li { position: relative; padding-left: 22px; }
/* галочка */
.tcard__list:not(.tcard__list--plain) li::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
.tcard__list--plain li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(245, 245, 245, .45);
}
.tcard__list strong { font-weight: 600; }

/* раскрывающиеся группы: «Что входит» и «Личная работа с Артуром» свёрнуты, «Ещё больше ценности» открыта */
.tcard__more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tcard__details > .tcard__more:first-child { margin-top: 22px; }
.tcard__more summary {
  position: relative;
  display: block;
  padding-right: 24px;
  color: var(--gold);
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.tcard__more summary::-webkit-details-marker { display: none; }
.tcard__more summary::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #f5f5f5;
  border-bottom: 1.5px solid #f5f5f5;
  transform: rotate(45deg);
  transition: transform .25s;
}
.tcard__more[open] summary::after { top: 5px; transform: rotate(-135deg); }

/* ---------------------------------------------------------------- выравнивание карточек (десктоп)
   Карточки — столбцы общей сетки, строки общие (subgrid): если название в одной карточке переносится
   на две строки, плашка, цена, кнопка, счётчик мест и списки остаются на одном уровне в обеих карточках.
   Порядок строк: шапка (название + ступень), плашка, цена, кнопка, подпись, места, списки. */
@media (min-width: 960px) {
  .tariffs__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 270px;
    grid-template-rows: repeat(7, auto);
    justify-content: center;
    column-gap: 16px;
    row-gap: 0;
  }
  .tcard { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .tcard__head { grid-row: 1; }
  .tcard__panel { grid-row: 2; }
  .tcard__price { grid-row: 3; }
  .tcard__cta { grid-row: 4; }
  .tcard__caption { grid-row: 5; }
  .tcard__seats { grid-row: 6; }
  .tcard__details { grid-row: 7; }
}

/* ---------------------------------------------------------------- мобильный */
@media (max-width: 959px) {
  .tariffs { --w: 320px; }
  .tariffs__canvas { padding: 40px 10px 70px; }
  .tariffs__draft { margin-bottom: 26px; font-size: 9px; line-height: 11px; }
  .tariffs__title { font-size: 26px; line-height: 26px; letter-spacing: -1.5px; text-align: left; }
  .tariffs__subtitle { margin-top: 14px; font-size: 9px; line-height: 11px; letter-spacing: -0.3px; text-align: left; }
  .tariffs__switch { width: 100%; margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
  .tariffs__switch::-webkit-scrollbar { display: none; }
  .tariffs__chip { flex: 1 0 auto; padding: 9px 10px; font-size: 11px; white-space: nowrap; }
  .tariffs__grid { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; }
  .tcard { flex: none; padding: 20px 16px 22px; border-radius: 14px; }
  .tcard__name { font-size: 22px; line-height: 26px; }
}

/* ---------------------------------------------------------------- окно «Выберите способ оплаты»
   Десктоп — небольшое окно по центру, телефон — шторка, выезжающая снизу вверх (как окна кейсов).
   Содержимое масштабируется через --zoom, как весь сайт. */
.popup--pay .popup__bg { background-color: rgba(0, 0, 0, .6); }
.pay {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #2b2e31;
  border-radius: 16px;
  background: linear-gradient(180deg, #1f2124 0%, #151719 100%);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.97);
  transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.popup--pay.is-shown .pay { opacity: 1; transform: translate(-50%, -50%); }

.pay__inner {
  position: relative;
  width: 420px;
  padding: 30px 30px 32px;
  zoom: var(--zoom);
}
.pay__close.popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background-color: #2b2f33;
}
.pay__close.popup__close::before,
.pay__close.popup__close::after {
  top: 9px;
  left: 15.25px;
  width: 1.5px;
  height: 14px;
}
.pay__eyebrow {
  margin: 0;
  padding-right: 44px;
  color: rgba(245, 245, 245, .55);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}
.pay__title {
  margin: 12px 0 0;
  color: #fff;
  font-size: 28px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -1.3px;
}
.pay__price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; }
.pay__price s { color: rgba(245, 245, 245, .45); font-size: 14px; letter-spacing: -0.3px; }
.pay__price b { color: var(--gold, #ddd3b2); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.8px; }
.pay__list { display: grid; gap: 10px; margin-top: 24px; }
.pay__option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 44px 0 18px;
  border: 1px solid #37404a;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.pay__option::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) {
  .pay__option:hover { border-color: #4d5a67; background-color: rgba(255, 255, 255, .04); }
  .pay__option--main:hover { background-color: #c4bda5; border-color: #c4bda5; }
}
.pay__option--main { border-color: #ddd3b2; background-color: #ddd3b2; color: #2b2923; }

@media (max-width: 959px) {
  .pay {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0;
    border-radius: 15px 15px 0 0;
    opacity: 1;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }
  .popup--pay.is-shown .pay { transform: none; }
  .pay__inner { width: 320px; margin: 0 auto; padding: 24px 20px 30px; }
  .pay__title { font-size: 24px; line-height: 26px; }
}

/* счётчик мест в карточке — полупрозрачная подложка, чтобы не выбивался из цвета карточки */
.tcard__seats {
  border: 1px solid rgba(255, 255, 255, .08);
  background-color: rgba(255, 255, 255, .05);
}