/* Секция подбора тура: две кнопки + оценка страницы.
   Разметку строит inc/cta.php, шорткод [tourday_cta].

   Правило про инлайновый CSS Настройщика: он выводится последним и бьёт
   файлы темы при равной специфичности. Поэтому селекторы здесь ведём
   от .td-cta - своего класса, которого в Настройщике нет.

   Откат: удалить этот файл и файл inc/cta.php. */

.td-cta {
	/* Секция объявлена контейнером запросов: её ширина зависит не от окна,
	   а от места, куда её поставили. На странице с сайдбаром контент 730px
	   при окне 1440, и медиазапрос по окну тут бесполезен - он видит 1440
	   и оставляет раскладку широкой. Запросы к контейнеру ниже смотрят
	   на реальную ширину секции. */
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
	margin: 32px 0;
	padding: 24px;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	background: #fbfcfd;
}

.td-cta__col {
	min-width: 0;
}

.td-cta__col--action {
	/* 340, а не 380: сумма 340 + 24 (зазор) + 260 (карточка) = 624 должна
	   помещаться в 652 - столько остаётся секции на страницах с красивым
	   сайдбаром, где у .beautiful-bottom-content margin-right: 270px.
	   При 380 сумма выходила 664 и flex переносил колонки даже на самом
	   широком экране. Порог запроса к контейнеру ниже согласован с этим
	   числом. */
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Оценка страницы - отдельной карточкой справа. */
.td-cta__col--rating {
	flex: 0 1 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 16px;
	border: 1px solid #e6e8ec;
	border-radius: 10px;
	background: #fff;
	text-align: center;
}

.td-cta__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d2129;
}

/* ---- кнопки ---- */

.td-cta__btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.td-cta__btn:hover,
.td-cta__btn:focus-visible {
	transform: translateY(-1px);
	text-decoration: none;
}

.td-cta__btn:active {
	transform: translateY(0);
}

.td-cta__btn-label {
	display: block;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
}

.td-cta__btn-note {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	opacity: .85;
}

/* Основное действие - зелёная заливка. Цвет взят от прежней кнопки
   подбора (#009900), но затемнён до контраста с белым текстом. */
.td-cta__btn--primary,
.td-cta__btn--primary:visited {
	background: #0a8a3c;
	color: #fff;
	box-shadow: 0 2px 6px rgba(10, 138, 60, .25);
}

.td-cta__btn--primary:hover,
.td-cta__btn--primary:focus-visible {
	background: #097a35;
	color: #fff;
	box-shadow: 0 4px 12px rgba(10, 138, 60, .3);
}

/* Второе действие - тот же силуэт, но контуром: две равнозначные
   кнопки подряд конкурировали бы друг с другом. */
.td-cta__btn--quiz {
	background: #fff;
	color: #b02a63;
	box-shadow: inset 0 0 0 2px #d34085;
}

.td-cta__btn--quiz:hover,
.td-cta__btn--quiz:focus-visible {
	background: #fdf2f7;
	color: #972454;
	box-shadow: inset 0 0 0 2px #b02a63, 0 4px 12px rgba(211, 64, 133, .18);
}

/* ---- разделитель ---- */

.td-cta__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0;
	color: #8a8f98;
	font-size: 13px;
	text-align: center;
}

.td-cta__or::before,
.td-cta__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #e6e8ec;
}

/* ---- выгоды ---- */

.td-cta__perks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: #5b6472;
}

.td-cta__perks li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.td-cta__perks li::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-right: 7px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27%230a8a3c%27 d=%27M6.2 12.3 2.4 8.5l1.3-1.3 2.5 2.5 6.1-6.1 1.3 1.3z%27/%3E%3C/svg%3E");
}

/* ---- оценка страницы ---- */

.td-cta__rating-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a8f98;
}

.td-cta__rating-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #8a8f98;
}

/* Звёзды и подпись в столбик. У плагина .kk-star-ratings - flex в строку,
   поэтому оценка и число голосов стояли в одну строку со звёздами. */
.td-cta__stars .kk-star-ratings {
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
}

/* Размер самих звёзд плагин пишет инлайном, из своей настройки
   (она поднята с 20 до 24 px). Здесь - только подпись под ними:
   размер шрифта у неё тоже инлайновый, отсюда important. */
.td-cta__stars .kksr-legend {
	align-self: flex-start;
	text-align: left;
	font-size: 13px !important;
	line-height: 1.3;
	color: #8a8f98;
}

/* ---- узкие экраны ---- */

@media (max-width: 767px) {
	.td-cta {
		gap: 18px;
		padding: 18px 16px;
		margin: 24px 0;
	}

	.td-cta__col--rating {
		flex: 1 1 100%;
	}

	.td-cta__title {
		font-size: 18px;
	}

	.td-cta__btn-label {
		font-size: 20px;
	}
}


/* ===================================================================
   Цвет текста кнопок.

   Кнопка подбора - это <a> внутри .entry-content, а там своя окраска
   ссылок, и она сильнее наших правил:

     .entry-content a:not(.wp-block-button__link)  -> синий #0744bf   (0,2,1)
     .entry-content a                              -> #1e13af + подчёркивание
     ...:hover                                     -> #dd5d5d        (0,3,1)
     .td-cta__btn--primary                         -> наш белый      (0,1,0)

   Отсюда и брались синий текст на зелёном фоне и оранжевый на наведении.
   Поэтому здесь селекторы намеренно длиннее: .entry-content .td-cta ...
   даёт (0,3,0) и (0,4,0) на hover - выше всех перечисленных.

   Кнопки квиза это не касается: она <button>, правила для ссылок
   на неё не действуют.
   =================================================================== */

.entry-content .td-cta .td-cta__btn,
.entry-content .td-cta .td-cta__btn:visited,
.entry-content .td-cta .td-cta__btn:hover,
.entry-content .td-cta .td-cta__btn:focus {
	border-bottom: 0;
	text-decoration: none;
}

.entry-content .td-cta .td-cta__btn--primary,
.entry-content .td-cta .td-cta__btn--primary:visited,
.entry-content .td-cta .td-cta__btn--primary:hover,
.entry-content .td-cta .td-cta__btn--primary:focus,
.entry-content .td-cta .td-cta__btn--primary:focus-visible,
.entry-content .td-cta .td-cta__btn--primary:active {
	color: #fff;
}

/* Наведение: только фон темнеет, текст остаётся белым. */
.entry-content .td-cta .td-cta__btn--primary:hover,
.entry-content .td-cta .td-cta__btn--primary:focus-visible {
	background: #097a35;
}


/* ===================================================================
   Раскладка по ширине самой секции, а не окна.

   Порог 623px. Идеальная сумма - 380 (левая) + 24 (зазор) + 260
   (карточка) = 664, но на страницах с красивым сайдбаром секция получает
   ровно 652px: у .beautiful-bottom-content на экранах от 1355px стоит
   margin-right: 270px (page-style.css), место справа отдано под другое.
   По строгому порогу колонки падали бы в столбик на самом широком
   экране - нелепо. Ниже 664 карточка ужимается сжатием (flex-shrink),
   до 639 это безопасно: внутри остаётся больше 200px, а пять звёзд
   занимают 175px.

   Как только места меньше 639 - карточка переносится вниз и занимает
   всю строку, иначе повисает узким столбиком у левого края. Так было
   на планшете со страницей с обычным сайдбаром: контейнер 500px,
   карточка 260px.
   =================================================================== */

@container (max-width: 623px) {
	.td-cta__col--rating {
		flex: 1 1 100%;
	}
}

/* Совсем узкая секция - мобильный или узкая колонка с сайдбаром. */
@container (max-width: 430px) {
	.td-cta__title {
		font-size: 18px;
	}

	.td-cta__btn-label {
		font-size: 20px;
	}

	.td-cta__btn-note {
		font-size: 15px;
	}

	.td-cta__perks {
		gap: 6px 14px;
	}
}


/* ===================================================================
   То же самое для страниц с "красивым сайдбаром" (page-tour_from_egypt).
   Там нет обёртки .entry-content, поэтому правила выше на них не
   действуют - но и агрессивной окраски ссылок из .entry-content там
   тоже нет. Хватает веса .td-cta + класс кнопки (0,2,0) и (0,3,0)
   на наведении: этого достаточно против a / a:hover темы.
   =================================================================== */

.td-cta .td-cta__btn,
.td-cta .td-cta__btn:visited,
.td-cta .td-cta__btn:hover,
.td-cta .td-cta__btn:focus {
	border-bottom: 0;
	text-decoration: none;
}

.td-cta .td-cta__btn--primary,
.td-cta .td-cta__btn--primary:visited,
.td-cta .td-cta__btn--primary:hover,
.td-cta .td-cta__btn--primary:focus,
.td-cta .td-cta__btn--primary:focus-visible,
.td-cta .td-cta__btn--primary:active {
	color: #fff;
}

.td-cta .td-cta__btn--primary:hover,
.td-cta .td-cta__btn--primary:focus-visible {
	background: #097a35;
}

/* Старый контейнер оценки в этом шаблоне остался в разметке пустым -
   оценку теперь выводит сама секция. Убираем его отступы, чтобы
   под секцией не висел пустой блок. */
.beautiful-bottom-content .rating-beautiful:empty {
	display: none;
}

/* ===================================================================
   Одиночная кнопка [tourday_btn] - та же стилистика, что у кнопок
   секции, но сама по себе: ширина по содержимому, не на всю строку.

   Селекторы намеренно длинные. В .entry-content ссылки красит тема
   (.entry-content a:not(.wp-block-button__link), вес 0,2,1) и
   Настройщик (.entry-content a, 0,2,0) - у них синий цвет и нижняя
   граница, а на наведении оранжевый. Пара классов на самой ссылке
   даёт 0,3,1 и 0,4,1 на наведении, этого хватает с запасом. Второй
   набор, без .entry-content, нужен страницам с красивым сайдбаром:
   такой обёртки там нет.
   =================================================================== */

.td-btn-wrap {
	margin: 24px 0;
	text-align: center;
}

.td-btn-wrap--left {
	text-align: left;
}

.entry-content a.td-btn,
a.td-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	padding: 13px 26px;
	border: 0;
	border-bottom: 0;
	border-radius: 8px;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.entry-content a.td-btn:hover,
.entry-content a.td-btn:focus,
a.td-btn:hover,
a.td-btn:focus {
	border-bottom: 0;
	text-decoration: none;
}

.entry-content a.td-btn:hover,
a.td-btn:hover {
	transform: translateY(-1px);
}

.td-btn__label {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.td-btn__note {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	opacity: .85;
}

/* Зелёная заливка - то же действие, что у главной кнопки секции. */
.entry-content a.td-btn.td-btn--primary,
.entry-content a.td-btn.td-btn--primary:visited,
.entry-content a.td-btn.td-btn--primary:hover,
.entry-content a.td-btn.td-btn--primary:focus,
.entry-content a.td-btn.td-btn--primary:active,
a.td-btn.td-btn--primary,
a.td-btn.td-btn--primary:visited,
a.td-btn.td-btn--primary:hover,
a.td-btn.td-btn--primary:focus,
a.td-btn.td-btn--primary:active {
	background: #0a8a3c;
	color: #fff;
	box-shadow: 0 2px 6px rgba(10, 138, 60, .25);
}

.entry-content a.td-btn.td-btn--primary:hover,
.entry-content a.td-btn.td-btn--primary:focus-visible,
a.td-btn.td-btn--primary:hover,
a.td-btn.td-btn--primary:focus-visible {
	background: #097a35;
	box-shadow: 0 4px 12px rgba(10, 138, 60, .3);
}

/* Контурный вариант - для второстепенных действий. */
.entry-content a.td-btn.td-btn--outline,
.entry-content a.td-btn.td-btn--outline:visited,
.entry-content a.td-btn.td-btn--outline:hover,
.entry-content a.td-btn.td-btn--outline:focus,
a.td-btn.td-btn--outline,
a.td-btn.td-btn--outline:visited,
a.td-btn.td-btn--outline:hover,
a.td-btn.td-btn--outline:focus {
	background: #fff;
	color: #0a8a3c;
	box-shadow: inset 0 0 0 2px #0a8a3c;
}

/* Стрелка возврата: раньше её рисовала иконка icon: rotate-left
   у su_button. Рисуем сами, чтобы не тянуть шрифт иконок. */
.td-btn--back .td-btn__label::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 9px;
	vertical-align: -2px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M13 8H3m4-4-4 4 4 4%27/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.entry-content a.td-btn,
	a.td-btn {
		width: 100%;
		padding: 13px 18px;
	}

	.td-btn__label {
		font-size: 18px;
	}
}