/*
Theme Name: Hello Elementor Child
Description: Дочірня тема Hello Elementor для сайту TCK. Тут лежать усі власні стилі лендінгу: те, чого не виражають налаштування віджетів Elementor. Класи з префіксом tck- ставляться на елементи в редакторі.
Author: Bohdan Dryhval
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

.tck-accent-strong strong, .tck-accent-strong b {
	color: var(--txt-green);
	font-weight: 600;
}

.tck-hide-mobile {
	flex-shrink: 0;
}

.tck-btn {
	transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
	white-space: nowrap;
}

.tck-btn-fluid {
	flex-shrink: 0;
}

/* Наведення — на саму кнопку, не на картку чи рядок, у якому вона лежить. */
.tck-btn-outline:hover {
	color: var(--txt-white);
	border-color: var(--grad-green-end);
	background-image: linear-gradient(90deg, var(--btn-green) 0%, var(--grad-green-end) 100%);
	box-shadow: 0 7px 29px 0 var(--shadow-btn-soft);
}

.tck-btn-phone {
	transition: background .25s ease, border-color .25s ease;
	white-space: nowrap;
}

.tck-field {
	outline: none;
	box-sizing: border-box;
	transition: border-color .2s ease, background .2s ease;
}

.tck-field-dark::placeholder {
	color: var(--txt-white);
	opacity: 1;
}

.tck-field-line::placeholder {
	color: var(--txt-gray-02);
	opacity: 1;
}

.tck-field-area {
	resize: vertical;
}

.tck-svc-card {
	transition: background .25s ease, box-shadow .25s ease;
}

.tck-svc-card:hover .tck-svc-title {
	color: var(--txt-green);
}

.tck-svc-img {
	max-width: 100%;
}

.tck-svc-title {
	transition: color .25s ease;
}

@media (max-width: 1024px) {
	.tck-cta-card {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.tck-cta-card {
		grid-column: auto;
	}
}

.tck-field-light::placeholder {
	color: var(--txt-dark-gray);
	opacity: 1;
}

@media (max-width: 1024px) {
	.tck-steps-scroll {
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.tck-steps-scroll::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 767px) {
	.tck-steps-scroll {
		overflow: visible;
	}
}

.tck-steps::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 86px;
	height: 1px;
	background: var(--elem-gray);
}

@media (max-width: 767px) {
	.tck-steps::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.tck-step .tck-step-dot {
		position: absolute;
		left: 0;
		top: 15px;
	}

	.tck-step:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 10px;
		top: 35px;
		bottom: -45px;
		width: 1px;
		background: var(--elem-gray);
	}
}

@media (max-width: 767px) {
	.tck-stats {
		row-gap: 30px;
	}
}

.tck-counter .elementor-counter-number-wrapper {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--elem-green);
}

.tck-counter .elementor-counter-number-suffix {
	color: var(--txt-green);
}

.tck-reviews {
	max-height: 697px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--elem-green) var(--bg-gray);
}

@media (max-width: 1024px) {
	.tck-reviews {
		max-height: none;
		overflow: visible;
	}
}

.tck-review-foot {
	border-top: 1px solid var(--elem-dark-green-02);
}

.tck-rate-star svg {
	width: 100%;
	height: 100%;
}

.tck-rate-star svg * {
	fill: transparent;
	stroke: var(--elem-yellow);
	stroke-width: 1.2px;
	transition: fill .15s ease;
}

.tck-rate-star.is-on svg * {
	fill: var(--elem-yellow);
}

.tck-rate-star:focus-visible {
	outline: 2px solid var(--focus-green);
	outline-offset: 2px;
}

.tck-visually-hidden {
	opacity: 0;
	pointer-events: none;
	border: 0;
}

.tck-field-group-rel {
	position: relative;
}

.tck-price-head {
	border-bottom: 1px solid var(--elem-green);
}

.tck-price-row {
	border-bottom: 1px solid var(--elem-light-green-02);
	transition: background .25s ease;
}

.tck-price-row:last-child {
	border-bottom: 0;
}

.tck-price-row:hover {
	background: var(--bg-light-green-02);
}

.tck-btn-fluid-m {
	flex-shrink: 0;
}

/* Рамку і заокруглення малює сам пункт, а не заголовок та відповідь окремо:
   інакше під час анімації низ лишається розімкнутим, з боків ростуть дві
   окремі рамки, а нижня зʼявляється ривком у кінці. Рамка — накладкою
   ::after, щоб не входити у висоту, за якою Elementor рахує анімацію. */
.tck-faq .e-n-accordion-item {
	overflow: hidden;
	border-radius: 100px;
	transition: border-radius 400ms ease;
}

.tck-faq .e-n-accordion-item[open] {
	border-radius: 22px;
}

.tck-faq .e-n-accordion-item::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--e-global-color-tck_green_soft);
	border-radius: inherit;
	pointer-events: none;
	transition: border-color .2s ease;
}

.tck-faq .e-n-accordion-item:hover::after,
.tck-faq .e-n-accordion-item[open]::after {
	border-color: var(--e-global-color-tck_green);
}

/* Абзац відповіді тягне нижній відступ із типографіки теми. */
@media (max-width: 767px) {
	.tck-faq .e-n-accordion-item[open] {
		border-radius: 20px;
	}
}

.tck-faq .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.tck-map-inner {
	pointer-events: none;
}

.tck-map-inner > * {
	pointer-events: auto;
}

.tck-contact-meta {
	border-top: 1px solid var(--elem-gray);
	border-bottom: 1px solid var(--elem-gray);
}

.tck-footer-brand-text {
	max-width: 274px;
}

.tck-footer-link {
	transition: color .2s ease;
}

.tck-footer-link a {
	color: inherit;
	text-decoration: none;
}

.tck-footer-bottom {
	border-top: 1px solid var(--elem-gray-for-bg);
}

.tck-mobile-menu.is-open {
	display: flex;
}

body .tck-menu-links {
	border-top: 1px solid var(--elem-light-green-02);
	border-bottom: 1px solid var(--elem-light-green-02);
}

.tck-icon-current svg * {
	stroke: currentColor;
}

/* Позиції стрілок і смуги — у налаштуваннях віджета. Тут лише те, чого
	   в них немає: смуга з рівних сегментів на всю ширину, поворот лівої
	   стрілки і зелена права (колір у віджета один на обидві стрілки). */
/* Подвоєний клас: у правила Elementor для фону стрілок специфічність 0,4,0. */
/* Swiper вішає -lock, коли гортати нема чого, але його display: none
	   слабший за правила Elementor — звідси подвоєні класи. */
/* Слайдів менше, ніж видно: керування сховане, місце під нього теж. */
body .tck-carousel {
	width: 100%;
}

body .tck-carousel .swiper-slide {
	height: auto;
}

body .tck-carousel .swiper-pagination-bullet {
	flex: 1 1 0;
	width: auto;
	margin: 0;
	border-radius: var(--radius-pill);
	opacity: 1;
}

body .tck-carousel .swiper-pagination.swiper-pagination {
	display: flex;
	gap: 20px;
	width: 100%;
}

body .tck-carousel .elementor-swiper-button-prev svg {
	transform: rotate(180deg);
}

body .tck-carousel :is(.elementor-swiper-button-prev, .elementor-swiper-button-next).swiper-button-disabled.swiper-button-disabled {
	--e-n-carousel-arrow-normal-color: var(--elem-black);
	background-color: var(--btn-white);
	opacity: 1;
}

body .tck-carousel .swiper-pagination.swiper-pagination.swiper-pagination-lock, body .tck-carousel .swiper-button-lock.swiper-button-lock {
	display: none;
}

body .tck-carousel:has(.swiper-pagination-lock) .e-n-carousel {
	padding-bottom: 0;
}