.tariffs-billing__btn {
  margin: 0;
  border: none;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Только переключатель Месяц/Год, не обёртка с заголовком «Тарифы» */
.element .tariffs-billing:has(.month):has(.year):not(:has(h2)) {
  box-sizing: border-box;
  background-color: #fbfafe;
  border: 2px solid #ffffff;
  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.1);
}

/* Бейдж «Выгоднее» — всегда #EDEBFF / #5E4CE0 */
.element .tariffs-billing .year .frame-18,
.element .tariffs-billing .year .frame-16,
.element .tariffs-billing .year .frame-17 {
  background-color: #edebff;
}

.element .tariffs-billing .year .frame-18 .text-wrapper-39,
.element .tariffs-billing .year .frame-16 .text-wrapper-40,
.element .tariffs-billing .year .frame-17 .text-wrapper-38 {
  color: #5e4ce0 !important;
}

/* Состояние «Месяц» */
.element .tariffs-billing:not(.is-year) .month.tariffs-billing__btn {
  background-color: #5e4ce0;
}

.element .tariffs-billing:not(.is-year) .month.tariffs-billing__btn > .text-wrapper-36,
.element .tariffs-billing:not(.is-year) .month.tariffs-billing__btn > .text-wrapper-37,
.element .tariffs-billing:not(.is-year) .month.tariffs-billing__btn > .text-wrapper-38 {
  color: #ffffff;
}

.element .tariffs-billing:not(.is-year) .year.tariffs-billing__btn {
  background-color: transparent;
}

.element .tariffs-billing:not(.is-year) .year.tariffs-billing__btn > .text-wrapper-37,
.element .tariffs-billing:not(.is-year) .year.tariffs-billing__btn > .text-wrapper-38,
.element .tariffs-billing:not(.is-year) .year.tariffs-billing__btn > .text-wrapper-39 {
  color: #000000;
}

/* Состояние «Год» */
.element .tariffs-billing.is-year .month.tariffs-billing__btn {
  background-color: #ffffff;
}

.element .tariffs-billing.is-year .month.tariffs-billing__btn > .text-wrapper-36,
.element .tariffs-billing.is-year .month.tariffs-billing__btn > .text-wrapper-37,
.element .tariffs-billing.is-year .month.tariffs-billing__btn > .text-wrapper-38 {
  color: #000000;
}

.element .tariffs-billing.is-year .year.tariffs-billing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #5e4ce0;
  border-radius: 30px;
  padding: 10px;
}

.element .tariffs-billing.is-year .year.tariffs-billing__btn > .text-wrapper-37,
.element .tariffs-billing.is-year .year.tariffs-billing__btn > .text-wrapper-38,
.element .tariffs-billing.is-year .year.tariffs-billing__btn > .text-wrapper-39 {
  color: #ffffff;
}

/* Все карточки тарифов — белый фон и тень как у «Бизнес» */
.element [data-tariffs-section] .frame-19 > .frame-20,
.element [data-tariffs-section] .frame-19 > .frame-27,
.element [data-tariffs-section] .view-10 > .div-26,
.element [data-tariffs-section] .view-10 > .div-30,
.element [data-tariffs-section] .view-6 > .div-23 {
  background-color: var(--white) !important;
  box-shadow: var(--blue-shadow) !important;
}

/* Мобильные карточки: CTA «7 дней бесплатно» */
@media (max-width: 767px) {
  .element [data-tariffs-section] .div-23 {
    height: auto;
    min-height: 497px;
  }

  .element [data-tariffs-section] .div-23 > .view-10 {
    display: flex !important;
    flex-shrink: 0;
    min-height: 52px;
    background-color: #5e4ce0;
  }

  .element [data-tariffs-section] .div-23 > .view-10 .text-wrapper-41 {
    color: #ffffff;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .element [data-tariffs-section] .div-26 {
    height: auto;
    min-height: 608px;
  }

  .element [data-tariffs-section] .view-12 {
    flex-shrink: 0;
    background-color: #5e4ce0;
  }
}