/**
 * Блок тарифа: переключатели темы и формы CTA.
 * px/clamp — :root { font-size: 1vw }.
 */

.tariff-zone {
  --tz-blue: #7088a1;
  --tz-bg: #fff;
  --tz-fg: #101010;
  --tz-border: #101010;
  --tz-muted: rgba(0, 0, 0, 0.42);
  --tz-card-bg: rgba(255, 255, 255, 0.96);
  --tz-card-border: rgba(16, 16, 16, 0.18);
  --tz-link-btn-bg: #101010;
  --tz-link-btn-fg: #fff;
  position: relative;
  background: var(--tz-bg);
  color: var(--tz-fg);
  overflow: visible;
}

#tariff.tariff-zone.tariff-section {
  background-color: var(--tz-bg) !important;
}

#tariff.tariff-zone[data-theme="blue"].tariff-section {
  background-color: #7088a1 !important;
}

#tariff.tariff-zone[data-theme="light"].tariff-section {
  background-color: #fff !important;
}

.tariff-zone[data-theme="blue"] {
  --tz-bg: #7088a1;
  --tz-fg: #fff;
  --tz-border: #fff;
  --tz-muted: rgba(255, 255, 255, 0.72);
  --tz-card-bg: rgba(255, 255, 255, 0.1);
  --tz-card-border: rgba(255, 255, 255, 0.38);
  --tz-link-btn-bg: #fff;
  --tz-link-btn-fg: #101010;
}

/* —— Переключатели —— */
.tariff-zone__switchers {
  position: absolute;
  top: clamp(10px, 1vw, 16px);
  right: max(clamp(16px, 2.5vw, 48px), env(safe-area-inset-right, 0px));
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(8px, 0.7vw, 12px);
  pointer-events: auto;
}

.tariff-zone__switcher {
  display: flex;
  gap: clamp(6px, 0.5vw, 10px);
}

.tariff-zone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.35vw, 6px);
  padding: clamp(6px, 0.5vw, 8px) clamp(8px, 0.65vw, 12px);
  border: 1px solid var(--tz-border);
  border-radius: 999px;
  background: var(--tz-bg);
  color: var(--tz-fg);
  font-family: inherit;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.tariff-zone-btn:hover {
  opacity: 0.82;
}

.tariff-zone-btn.is-active {
  opacity: 1;
}

.tariff-zone-btn__swatch {
  flex-shrink: 0;
  border: 1px solid var(--tz-border);
}

.tariff-zone-btn__swatch--light {
  width: clamp(14px, 1.1vw, 18px);
  height: clamp(14px, 1.1vw, 18px);
  border-radius: 50%;
  background: #fff;
  border-color: #101010;
}

.tariff-zone-btn__swatch--blue {
  width: clamp(14px, 1.1vw, 18px);
  height: clamp(14px, 1.1vw, 18px);
  border-radius: 50%;
  background: var(--tz-blue);
  border-color: rgba(255, 255, 255, 0.65);
}

.tariff-zone[data-theme="blue"] .tariff-zone-btn__swatch--light {
  border-color: rgba(255, 255, 255, 0.55);
}

.tariff-zone[data-theme="light"] .tariff-zone-btn__swatch--blue {
  border-color: var(--tz-blue);
}

.tariff-zone-btn__swatch--pill {
  width: clamp(22px, 1.8vw, 28px);
  height: clamp(10px, 0.85vw, 13px);
  border-radius: 999px;
  background: var(--tz-fg);
  opacity: 0.85;
}

.tariff-zone-btn__swatch--circle {
  width: clamp(14px, 1.1vw, 18px);
  height: clamp(14px, 1.1vw, 18px);
  border-radius: 50%;
  background: var(--tz-fg);
  opacity: 0.85;
}

.tariff-zone-btn__swatch--link {
  width: clamp(22px, 1.8vw, 28px);
  height: clamp(10px, 0.85vw, 13px);
  border-radius: 0;
  background: var(--tz-fg);
  opacity: 0.85;
  align-self: center;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.tariff-zone-btn__check {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.tariff-zone-btn.is-active .tariff-zone-btn__check {
  width: auto;
  opacity: 1;
  transform: scale(1);
}

/* —— Тема: голубой фон —— */
.tariff-zone[data-theme="blue"] .tariff-card {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

.tariff-zone[data-theme="blue"] .tariff-card__checkout-panel {
  background: var(--tz-card-bg);
  border-color: var(--tz-card-border);
}

.tariff-zone[data-theme="blue"] .tariff-card__label,
.tariff-zone[data-theme="blue"] .tariff-card__program-title,
.tariff-zone[data-theme="blue"] .tariff-card__price,
.tariff-zone[data-theme="blue"] .tariff-card__includes-text,
.tariff-zone[data-theme="blue"] .tariff-card__block-title {
  color: #fff !important;
}

.tariff-zone[data-theme="blue"] .tariff-card__label {
  color: var(--tz-muted) !important;
}

.tariff-zone[data-theme="blue"] .tariff-card__col--main {
  border-right-color: rgba(255, 255, 255, 0.22);
}

.tariff-zone[data-theme="blue"] .tariff-card__includes-icon--check {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.tariff-zone[data-theme="blue"] .tariff-card__includes-icon--infinity {
  background: #fff;
  color: var(--tz-blue);
}

/* Кнопки pill + circle — белые в голубой теме */
.tariff-zone[data-theme="blue"][data-cta-layout="pill"] .tariff-card__price-zone .tariff-card__cta,
.tariff-zone[data-theme="blue"][data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__cta {
  background: #fff !important;
  background-image: none !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}

.tariff-zone[data-theme="blue"][data-cta-layout="pill"] .tariff-card__price-zone .tariff-card__cta:hover,
.tariff-zone[data-theme="blue"][data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__cta:hover {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

.tariff-zone[data-theme="blue"][data-cta-layout="pill"] .tariff-card__cta-arrow svg path {
  fill: #101010;
}

#tariff.tariff-zone[data-theme="blue"][data-cta-layout="pill"] .ecosystem-button--checkout.tariff-card__cta,
#tariff.tariff-zone[data-theme="blue"][data-cta-layout="circle"] .ecosystem-button--checkout.tariff-card__cta {
  background: #fff !important;
  background-image: none !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}

#tariff.tariff-zone[data-theme="blue"][data-cta-layout="pill"] .ecosystem-button--checkout.tariff-card__cta:hover,
#tariff.tariff-zone[data-theme="blue"][data-cta-layout="circle"] .ecosystem-button--checkout.tariff-card__cta:hover {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

/* —— Стек цена + кнопка —— */
.tariff-card__checkout-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}

.tariff-card__price-zone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  gap: clamp(14px, 1.8vw, 22px);
}

.tariff-card__price-zone .tariff-card__cta {
  order: 1;
  width: 100%;
}

.tariff-card__price-zone .tariff-card__price {
  order: 2;
  align-self: flex-start;
}

.tariff-card__checkout-row {
  align-items: flex-start;
}

.tariff-zone[data-cta-layout="pill"] .tariff-card__checkout-panel .tariff-card__checkout-stack,
.tariff-zone[data-cta-layout="pill"] .tariff-card__checkout-panel .tariff-card__price-zone {
  width: 100%;
  max-width: 100%;
}

.tariff-card__checkout-panel .tariff-card__price-zone .tariff-card__price {
  order: 1;
  align-self: center;
}

.tariff-card__checkout-panel .tariff-card__price-zone .tariff-card__cta {
  order: 2;
}

/* —— Вариант 1: pill — ширина = ценник (JS sync) —— */
.tariff-zone[data-cta-layout="pill"] .tariff-card__checkout-stack,
.tariff-zone[data-cta-layout="pill"] .tariff-card__price-zone {
  width: max-content;
  max-width: 100%;
}

.tariff-zone[data-cta-layout="pill"] .tariff-card__price-zone .tariff-card__cta {
  width: 100%;
  box-sizing: border-box;
}

.tariff-zone[data-cta-layout="pill"] .tariff-card__price-zone .tariff-card__price {
  width: max-content;
}

/* —— Подписи круга —— */
.tariff-card__cta-label--short {
  display: none;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__cta-label--full {
  display: none;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__cta-label--short {
  display: block;
}

/* —— Вариант 2: круг —— */
.tariff-zone[data-cta-layout="circle"] .tariff-card__col--main,
.tariff-zone[data-cta-layout="circle"] .tariff-card__main-foot,
.tariff-zone[data-cta-layout="circle"] .tariff-card {
  overflow: visible;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__checkout-row,
.tariff-zone[data-cta-layout="circle"] .tariff-card__checkout-stack {
  overflow: visible;
}

#tariff.tariff-zone[data-cta-layout="circle"].tariff-section {
  overflow: visible;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__checkout-stack {
  width: max-content;
  max-width: none;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: none;
  gap: 0;
  padding-top: clamp(88px, 10vw, 132px);
  padding-right: 0;
  overflow: visible;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__price {
  order: 2;
  margin: 0 0 -0.1em -0.03em;
  position: relative;
  z-index: 1;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__cta {
  position: absolute;
  z-index: 2;
  top: clamp(-28px, -2.4vw, -16px);
  left: calc(100% + clamp(48px, 5vw, 96px));
  right: auto;
  width: clamp(200px, 22vw, 280px) !important;
  height: clamp(200px, 22vw, 280px) !important;
  min-height: 0 !important;
  padding: clamp(20px, 2vw, 28px) !important;
  margin: 0 !important;
  border-radius: 50% !important;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 12px);
  font-size: clamp(32px, 2.8vw, 44px) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.12;
  text-align: center;
  box-shadow: 0 16px 40px rgba(16, 16, 16, 0.24) !important;
  transform: none;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__cta:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 48px rgba(16, 16, 16, 0.28) !important;
}

.tariff-zone[data-cta-layout="circle"] .tariff-card__cta-arrow {
  display: none !important;
}

/* —— Вариант 3: скошенная плашка —— */
.tariff-zone[data-cta-layout="link"] .tariff-card__checkout-panel .tariff-card__checkout-stack,
.tariff-zone[data-cta-layout="link"] .tariff-card__checkout-panel .tariff-card__price-zone {
  width: 100% !important;
  max-width: 100% !important;
}

.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone {
  gap: clamp(18px, 2vw, 28px);
}

.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__price {
  order: 1;
  width: max-content;
  align-self: center;
}

.tariff-zone[data-cta-layout="link"] .tariff-card__checkout-panel .tariff-card__price-zone .tariff-card__cta,
#tariff.tariff-zone[data-cta-layout="link"] .tariff-card__checkout-panel .ecosystem-button--checkout.tariff-card__cta {
  width: 50% !important;
  max-width: 50% !important;
  align-self: center;
  margin-inline: auto;
}

.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta {
  order: 2;
  width: 100%;
  box-sizing: border-box;
  min-height: clamp(62px, 5.5vw, 84px) !important;
  padding: clamp(20px, 2.2vw, 30px) clamp(28px, 2.8vw, 40px) !important;
  border: none !important;
  border-radius: 0 !important;
  background: #7088a1 !important;
  clip-path: polygon(clamp(14px, 1.2vw, 20px) 0, 100% 0, calc(100% - clamp(14px, 1.2vw, 20px)) 100%, 0 100%);
  box-shadow: none !important;
  filter: drop-shadow(0 10px 24px rgba(112, 136, 161, 0.32));
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  justify-content: center;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
  gap: 0;
  white-space: nowrap;
}

.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta:hover {
  background: #61788f !important;
  filter: drop-shadow(0 14px 32px rgba(112, 136, 161, 0.4));
  transform: translateY(-2px) !important;
  opacity: 1;
}

.tariff-zone[data-cta-layout="link"] .tariff-card__cta-inner,
.tariff-zone[data-cta-layout="link"] .tariff-card__cta-label {
  white-space: nowrap;
}

.tariff-zone[data-cta-layout="link"] .tariff-card__cta-arrow {
  display: none !important;
}

.tariff-zone[data-theme="blue"][data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta {
  background: #fff !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.18));
}

.tariff-zone[data-theme="blue"][data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta:hover {
  background: #fff !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010;
}

#tariff.tariff-zone[data-cta-layout="link"] .ecosystem-button--checkout.tariff-card__cta {
  background: #7088a1 !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(clamp(14px, 1.2vw, 20px) 0, 100% 0, calc(100% - clamp(14px, 1.2vw, 20px)) 100%, 0 100%) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 24px rgba(112, 136, 161, 0.32));
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  width: 100% !important;
  min-height: clamp(62px, 5.5vw, 84px) !important;
  white-space: nowrap !important;
}

#tariff.tariff-zone[data-theme="blue"][data-cta-layout="link"] .ecosystem-button--checkout.tariff-card__cta {
  background: #fff !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
}

#tariff.tariff-zone[data-cta-layout="link"] .ecosystem-button--checkout.tariff-card__cta:hover {
  background: #61788f !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 32px rgba(112, 136, 161, 0.4));
  transform: translateY(-2px) !important;
}

#tariff.tariff-zone[data-theme="blue"][data-cta-layout="link"] .ecosystem-button--checkout.tariff-card__cta:hover {
  background: #fff !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
}

#tariff.tariff-zone[data-cta-layout="circle"] .ecosystem-button--checkout.tariff-card__cta {
  position: absolute !important;
  inset: auto !important;
  top: clamp(-28px, -2.4vw, -16px) !important;
  left: calc(100% + clamp(48px, 5vw, 96px)) !important;
  right: auto !important;
  border-radius: 50% !important;
  width: clamp(200px, 22vw, 280px) !important;
  height: clamp(200px, 22vw, 280px) !important;
  min-height: 0 !important;
  transform: none !important;
}

#tariff.tariff-zone[data-cta-layout="circle"] .ecosystem-button--checkout.tariff-card__cta:hover {
  transform: translateY(-3px) !important;
}

@media screen and (max-width: 991px) {
  .tariff-zone__switchers {
    position: relative;
    top: auto;
    right: auto;
    align-items: flex-end;
    padding: 0 max(16px, env(safe-area-inset-right)) clamp(12px, 3vw, 18px);
    margin-top: clamp(-8px, -1vw, 0);
  }

  /* Круг на мобилке: внутри карточки, над ценой слева */
  .tariff-zone[data-cta-layout="circle"] .tariff-card__checkout-stack {
    width: 100%;
    max-width: 100%;
  }

  .tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    gap: clamp(10px, 2.5vw, 16px);
    overflow: visible;
  }

  .tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__cta {
    position: static !important;
    order: 1;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-start;
    width: clamp(128px, 34vw, 168px) !important;
    height: clamp(128px, 34vw, 168px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    font-size: clamp(22px, 5.8vw, 28px) !important;
  }

  #tariff.tariff-zone[data-cta-layout="circle"] .ecosystem-button--checkout.tariff-card__cta {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: clamp(128px, 34vw, 168px) !important;
    height: clamp(128px, 34vw, 168px) !important;
    min-height: 0 !important;
    transform: none !important;
  }

  #tariff.tariff-zone[data-cta-layout="circle"] .ecosystem-button--checkout.tariff-card__cta:hover {
    transform: translateY(-2px) !important;
  }

  .tariff-zone[data-cta-layout="circle"] .tariff-card__price-zone .tariff-card__price {
    order: 2;
  }

  .tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta {
    min-height: clamp(56px, 15vw, 72px) !important;
    font-size: clamp(15px, 4vw, 20px) !important;
    padding: clamp(16px, 4vw, 22px) clamp(20px, 5vw, 28px) !important;
  }

  /* Кнопка «Купить за 5 000 ₽» с ценой — по центру карточки на мобилке */
  #tariff .tariff-card__checkout-row {
    display: flex;
    justify-content: center;
  }

  #tariff .tariff-card__checkout-stack,
  #tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  #tariff .tariff-card__checkout-row .tariff-card__price,
  #tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__price {
    align-self: center;
  }
}

/* ===== Правки: колонки местами (слева «что входит», справа цена+кнопка)
   + плашка «Оплатить участие» в фирменном синем #7088a1 ===== */

/* Кнопка-плашка (link) — фирменный синий вместо чёрного */
#tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta,
#tariff.tariff-zone[data-cta-layout="link"] .ecosystem-button--checkout.tariff-card__cta {
  background: #7088a1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__cta:hover,
#tariff.tariff-zone[data-cta-layout="link"] .ecosystem-button--checkout.tariff-card__cta:hover {
  background: #61788f !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.tariff-zone[data-theme="blue"] .tariff-card__col--main {
  border: none !important;
}

@media screen and (min-width: 992px) {
  #tariff .tariff-card__col--details {
    padding: 0 !important;
  }

  #tariff .tariff-card__col--main {
    padding: 0 !important;
    border: none !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  #tariff .tariff-card__checkout-panel {
    min-height: 100%;
  }

  #tariff .tariff-card__checkout-row,
  #tariff .tariff-card__checkout-stack,
  #tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone {
    align-items: center !important;
    width: 100%;
  }

  #tariff .tariff-card__checkout-row .tariff-card__price,
  #tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone .tariff-card__price {
    align-self: center !important;
  }

  #tariff.tariff-zone[data-cta-layout="link"] .tariff-card__price-zone {
    gap: clamp(18px, 2vw, 28px) !important;
    width: 100%;
    max-width: 100%;
  }

  #tariff .tariff-card__price,
  #tariff .tariff-card__checkout-row .tariff-card__price {
    margin: 0 !important;
  }

  #tariff .tariff-card__includes-text {
    font-size: clamp(17px, 1.2vw, 21px) !important;
    line-height: 1.45 !important;
  }

  #tariff .tariff-card__includes-list {
    gap: clamp(10px, 0.9vw, 14px) !important;
  }

  #tariff .tariff-card__includes-icon {
    flex-basis: clamp(28px, 2.4vw, 32px) !important;
    width: clamp(28px, 2.4vw, 32px) !important;
    height: clamp(28px, 2.4vw, 32px) !important;
    margin-top: 0.12em !important;
  }
}