/* Стили страниц тарифов: /tariff/ и /tariff_test/ (карта постраничных ассетов
   в header.php). Стили табов работают только там, где есть их разметка. */

/* Верхний отступ секции меньше, чем на боевой странице (96 px): заголовок
   с переключателем — единственное, что есть над карточками, и столько воздуха
   им не нужно. */
.tariffs--centered {
	margin-top: 48px;
}

/* Шапка страницы по центру: заголовок, переключатель и подпись под ним.
   .section__header ограничен 1000 px, поэтому его ещё нужно центрировать
   в контейнере — иначе .center отцентрирует заголовок по этой коробке,
   а не по странице. */
.tariffs--centered .section__header {
	margin-inline: auto;
}

.tariffTabs__switch {
	display: flex;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 32px;
	padding: 4px;
	border-radius: 100px;
	background: rgba(0, 32, 51, 0.05);
}

.tariffTabs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: rgba(0, 32, 51, 0.60);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tariffTabs__btn:hover {
	color: #002033;
}

.tariffTabs__btn.is-active {
	background: #FFF;
	color: #002033;
	box-shadow: 0 2px 8px 0 rgba(88, 16, 10, 0.08);
	cursor: default;
}

/* Подпись под переключателем: своя у каждого таба. */
.tariffTabs__hint {
	max-width: 720px;
	margin: -8px auto 40px;
	color: rgba(0, 32, 51, 0.70);
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

.tariffTabs__btnIcon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* У активного таба значок акцентный — иначе переключение читается только по
   белой подложке. */
.tariffTabs__btn.is-active .tariffTabs__btnIcon {
	color: #FB685B;
}

/* В табе «Просто рассылки» тарифов три, а не четыре, и у карточки есть
   лишний ряд — выбор объёма базы. Поэтому своя раскладка subgrid: рядов семь
   (шапка, объём, цена, лимиты, текст, кнопка, список), карточка занимает все. */
@media (min-width: 1181px) {

	.tariffs__list--mail {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto auto auto auto auto 1fr;
	}

	.tariffs__list--mail .tariffs__item {
		grid-row: span 7;
	}
}

.tariffs__volume {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.tariffs__volumeLabel {
	color: rgba(0, 32, 51, 0.70);
	font-size: 14px;
	line-height: 1.3;
}

.tariffs__volumeSelect {
	flex: none;
	max-width: 150px;
	padding: 8px 32px 8px 12px;
	border: 1.5px solid rgba(0, 32, 51, 0.12);
	border-radius: 12px;
	background-color: #FFF;
	/* Стрелка нарисована фоном: системная у select не поддаётся стилям,
	   а в карточке нужен тот же чернильный тон, что у остальных элементов. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23002033' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: #002033;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
}

.tariffs__volumeSelect:focus-visible {
	outline: 2px solid #FB685B;
	outline-offset: 2px;
}

/* У бесплатного тарифа объём не выбирается — вместо селекта такая же по весу
   подпись, чтобы ряды карточек совпадали. */
.tariffs__volumeFixed {
	flex: none;
	padding: 8px 12px;
	border: 1.5px solid transparent;
	color: #002033;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

/* Сумма лежит в span, потому что её переписывает скрипт, — а в .tariffs__itemPrice
   любой span по умолчанию оформлен как приписка «/ месяц»: мелкий и серый.
   Возвращаем сумме вид самой цены. */
.tariffs__itemPrice .tariffs__itemPriceValue {
	padding-bottom: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Строка лимита со значком. center вместо baseline из main.css — у svg нет
   базовой линии, и значок уезжал бы вверх. */
.tariffs__itemQuota .tariffs__itemQuotaRow {
	align-items: center;
}

.tariffs__itemQuotaIcon {
	flex: none;
	width: 20px;
	height: 20px;
	color: #FB685B;
}

/* Строка без числа: «Безлимитные рассылки» вместо пары «лимит — значение».
   В main.css значение в лимитах прижато вправо и не переносится — здесь фраза
   стоит сразу за значком и переносится. */
.tariffs__itemQuota .tariffs__itemQuotaFree {
	margin-left: 0;
	white-space: normal;
}

/* У карточки без выбора объёма («Читер») нет ряда .tariffs__volume, и в subgrid
   таба рассылок её цена, лимиты и кнопка съезжали на ряд вверх. Шапка забирает
   пустой ряд себе — остальное встаёт вровень с соседями. */
@media (min-width: 1181px) {

	/* По наличию самого ряда, а не по data-tariff-calc: у карточки может быть
	   фиксированный объём (.tariffs__volumeFixed) без селекта, и тогда пустой
	   ряд забирать нельзя — карточке не хватит рядов и кнопка ляжет на список. */
	.tariffs__list--mail .tariffs__item:not(:has(.tariffs__volume)) .tariffs__itemHeader {
		grid-row: span 2;
		/* иначе шапка растянется на оба ряда и заголовок встанет по центру,
		   ниже заголовков соседних карточек */
		align-self: start;
	}
}

@media (max-width: 767px) {

	.tariffTabs__switch {
		width: 100%;
	}

	.tariffTabs__btn {
		flex: 1;
		padding: 12px 16px;
		font-size: 15px;
		white-space: normal;
	}

	.tariffs--centered {
		margin-top: 32px;
	}

	.tariffTabs__hint {
		font-size: 15px;
	}
}