/*
 Theme Name:   TTZ Tailwind
 Theme URI:    https://ttz.by
 Description:  Тема TTZ с Tailwind CSS
 Author:       TTZ
 Author URI:   https://ttz.by
 Version:      1.0.0
 Text Domain:  ttz-tailwind
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Дополнительные стили поверх Tailwind (при необходимости) */

/* Hero: мягкая дымка между фоном и контентом */
.ttz-hero-mist {
	overflow: hidden;
}

.ttz-hero-mist__layer {
	position: absolute;
	inset: -15%;
	opacity: 0.72;
	will-change: transform, opacity;
	animation: ttz-hero-mist-drift var(--ttz-mist-dur, 22s) ease-in-out infinite;
	animation-delay: var(--ttz-mist-delay, 0s);
}

.ttz-hero-mist__layer--a {
	--ttz-mist-dur: 20s;
	background:
		radial-gradient(ellipse 85% 70% at 18% 35%, rgba(255, 255, 255, 0.24) 0%, transparent 58%),
		radial-gradient(ellipse 60% 45% at 72% 55%, rgba(210, 225, 255, 0.18) 0%, transparent 52%);
	mix-blend-mode: soft-light;
}

.ttz-hero-mist__layer--b {
	--ttz-mist-dur: 28s;
	--ttz-mist-delay: -9s;
	background:
		radial-gradient(ellipse 75% 55% at 55% 25%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse 90% 65% at 85% 70%, rgba(255, 255, 255, 0.14) 0%, transparent 55%);
	mix-blend-mode: overlay;
	opacity: 0.58;
	animation-name: ttz-hero-mist-drift-alt;
}

.ttz-hero-mist__layer--c {
	--ttz-mist-dur: 16s;
	--ttz-mist-delay: -4s;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.1) 45%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.1) 55%,
		transparent 100%
	);
	background-size: 200% 100%;
	mix-blend-mode: soft-light;
	opacity: 0.52;
	animation-name: ttz-hero-mist-sheen;
}

@keyframes ttz-hero-mist-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.58;
	}
	40% {
		transform: translate3d(3%, -2.5%, 0) scale(1.04);
		opacity: 0.82;
	}
	70% {
		transform: translate3d(-2.5%, 2%, 0) scale(1.02);
		opacity: 0.66;
	}
}

@keyframes ttz-hero-mist-drift-alt {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);
		opacity: 0.44;
	}
	50% {
		transform: translate3d(-4%, 3%, 0) scale(1.08) rotate(-0.6deg);
		opacity: 0.68;
	}
}

@keyframes ttz-hero-mist-sheen {
	0% {
		background-position: 130% 50%;
		opacity: 0.32;
	}
	50% {
		background-position: -30% 50%;
		opacity: 0.55;
	}
	100% {
		background-position: 130% 50%;
		opacity: 0.32;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ttz-hero-mist__layer {
		animation: none;
		opacity: 0.55;
		transform: none;
	}

	.ttz-hero-mist__layer--b {
		opacity: 0.42;
	}

	.ttz-hero-mist__layer--c {
		opacity: 0.32;
	}
}

@keyframes ttz-card-fade-up {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ttz-benefit-card {
	opacity: 0;
	animation: ttz-card-fade-up 0.65s ease-out forwards;
	animation-delay: var(--ttz-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.ttz-benefit-card {
		opacity: 1;
		animation: none;
		transition: none;
	}
}

.ttz-news-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ttz-news-section .ttz-news-scrollbar .swiper-scrollbar-drag {
	background: #e32636;
	border-radius: 9999px;
}

/*
 * Кастомный чекбокс: без appearance:none браузер рисует свой фон —
 * Tailwind-классы вроде bg-transparent на невыбранном состоянии часто не работают.
 * См.: appearance: none + явный фон (moderncss.dev, SO про стилизацию checkbox).
 */
input.ttz-cta-consent {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-radius: 4px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px auto;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

input.ttz-cta-consent:hover {
	border-color: rgba(255, 255, 255, 0.7);
}

input.ttz-cta-consent:checked {
	background-color: #e32636;
	border-color: #e32636;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3 3 7-7'/%3E%3C/svg%3E");
}

input.ttz-cta-consent:focus-visible {
	outline: none;
}

/*
 * CTA-поля: Chrome при reportValidity() / :invalid и при autofill подставляет свой фон (часто белый).
 * Фиксируем тёмный фон во всех состояниях + типичный хак для -webkit-autofill.
 */
input.ttz-cta-field {
	background-color: rgba(0, 0, 0, 0.4) !important;
	color: #ffffff !important;
}

input.ttz-cta-field:is(:valid, :invalid, :focus, :focus-visible, :hover) {
	background-color: rgba(0, 0, 0, 0.4) !important;
}

input.ttz-cta-field:-moz-ui-invalid {
	background-color: rgba(0, 0, 0, 0.4) !important;
}

input.ttz-cta-field:-webkit-autofill,
input.ttz-cta-field:-webkit-autofill:hover,
input.ttz-cta-field:-webkit-autofill:focus,
input.ttz-cta-field:-webkit-autofill:active {
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff;
	box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.45) inset !important;
	transition: background-color 99999s ease-out;
}

/* CTA: один слот под ошибки — padding только у ближайшего контейнера к полю */
.ttz-cta-phone-field-inner {
	position: relative;
	display: block;
	width: 100%;
}

.ttz-cta-phone-field-inner:not(:has(.wpcf7-form-control-wrap)) {
	padding-bottom: 2.75rem;
}

.ttz-cta-field-group > .wpcf7-form-control-wrap,
.ttz-cta-phone-field-inner > .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 2.75rem;
}

p.ttz-cta-field-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	min-height: 0;
	padding-top: 0.25rem;
	font-size: 12px;
	line-height: 1.35;
	color: #ffbdbd;
}

/*
 * CF7: .wpcf7-not-valid-tip
 * cf7-phone-mask: div.cf7-phone-mask-error вставляется сразу после input (.after)
 */
.ttz-cta-field-group .wpcf7-form-control-wrap .wpcf7-not-valid-tip,
.ttz-cta-field-group .wpcf7-form-control-wrap .cf7-phone-mask-error,
.ttz-cta-phone-field-inner .cf7-phone-mask-error {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding-top: 0.25rem;
	font-size: 12px;
	line-height: 1.35;
	color: #ffbdbd;
	border: 0;
	animation: none;
	transform: none;
}

.ttz-cta-field-group .wpcf7-form-control-wrap .cf7-phone-mask-error,
.ttz-cta-phone-field-inner .cf7-phone-mask-error {
	z-index: 2;
}

.ttz-cta-phone-field-inner > p.ttz-cta-field-hint {
	z-index: 1;
}