/**
 * Liquid Glass — единый рецепт стеклянных кнопок для всего сайта.
 *
 * Применяется к:
 *   .btn                              — базовая (стекло нейтральное)
 *   .btn--primary                     — стекло золотое (основной CTA)
 *   .form__submit                     — кнопка отправки форм (=primary)
 *   .cookie-notice__btn               — плашка куки
 *
 * Подход:
 *   1. На кнопке включаем isolation: isolate — псевдоэлементы живут
 *      внутри собственного stacking-контекста.
 *   2. Основа — многослойный градиент (радиальный блик + вертикаль).
 *   3. ::before — верхний «купол» блика (отражение света на стекле).
 *   4. backdrop-filter размывает фон за кнопкой (эффект стекла).
 *   5. Внутренние тени дают объём, внешние — мягкую halo.
 *
 * Акцент берётся из --color-accent (198 168 122 — тёплое золото).
 *
 * ВАЖНО: этот файл подключается ПОСЛЕ hero.css / cookie-notice.css,
 * чтобы перекрыть базовые стили. См. inc/enqueue.php.
 */

.btn,
.form__submit,
.cookie-notice__btn {
	position: relative;
	isolation: isolate;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	padding: 0.85rem 1.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
	color: rgb(var(--color-primary));

	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background:
		radial-gradient(120% 90% at 50% 115%,
			rgba(198, 168, 122, 0.22) 0%,
			rgba(198, 168, 122, 0.05) 45%,
			rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0.02) 50%,
			rgba(0, 0, 0, 0.35) 100%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3),
		0 6px 18px -6px rgba(0, 0, 0, 0.55);

	cursor: pointer;
	overflow: hidden;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1),
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

/* Верхний блик — отражение света на выпуклом стекле */
.btn::before,
.form__submit::before,
.cookie-notice__btn::before {
	content: "";
	position: absolute;
	inset: 1px 1px auto 1px;
	height: 45%;
	border-radius: 999px 999px 50% 50% / 999px 999px 100% 100%;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.08) 55%,
		rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.35s ease;
}

.btn:hover,
.form__submit:hover,
.cookie-notice__btn:hover {
	transform: translateY(-1px);
	border-color: rgba(198, 168, 122, 0.5);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -1px 0 rgba(0, 0, 0, 0.25),
		0 10px 24px -8px rgba(198, 168, 122, 0.35),
		0 0 0 1px rgba(198, 168, 122, 0.15);
}

.btn:hover::before,
.form__submit:hover::before,
.cookie-notice__btn:hover::before {
	opacity: 1;
}

.btn:active,
.form__submit:active,
.cookie-notice__btn:active {
	transform: translateY(0);
}

.btn:focus-visible,
.form__submit:focus-visible,
.cookie-notice__btn:focus-visible {
	outline: 2px solid rgb(var(--color-accent));
	outline-offset: 3px;
}

/* Отключённое состояние */
.btn:disabled,
.form__submit:disabled,
.cookie-notice__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.btn:disabled:hover,
.form__submit:disabled:hover,
.cookie-notice__btn:disabled:hover {
	transform: none;
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3),
		0 6px 18px -6px rgba(0, 0, 0, 0.55);
}

/* =====================================================================
   Primary — золотая стеклянная капсула
   ===================================================================== */
.btn--primary,
.form__submit,
.cookie-notice__btn {
	color: #fffaf0;
	background:
		radial-gradient(120% 120% at 50% 110%,
			rgba(255, 216, 156, 0.55) 0%,
			rgba(198, 168, 122, 0.35) 35%,
			rgba(120, 90, 55, 0.2) 70%,
			rgba(0, 0, 0, 0.25) 100%),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.05) 50%,
			rgba(0, 0, 0, 0.15) 100%);
	border-color: rgba(198, 168, 122, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 0 rgba(0, 0, 0, 0.2),
		0 8px 22px -6px rgba(198, 168, 122, 0.5),
		0 0 0 1px rgba(198, 168, 122, 0.2);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
	font-weight: 600;
}

.btn--primary::before,
.form__submit::before,
.cookie-notice__btn::before {
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.15) 55%,
		rgba(255, 255, 255, 0) 100%);
	opacity: 1;
}

.btn--primary:hover,
.form__submit:hover,
.cookie-notice__btn:hover {
	border-color: rgba(255, 216, 156, 0.85);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15),
		0 14px 32px -8px rgba(198, 168, 122, 0.7),
		0 0 0 1px rgba(255, 216, 156, 0.35);
}

/* =====================================================================
   Модификатор для «зелёной» кнопки звонка (используется в калькуляторе)
   — оставляем зелёную гамму, но добавляем стеклянный блик.
   ===================================================================== */
.btn--call {
	color: #fff;
	background:
		radial-gradient(120% 120% at 50% 110%,
			rgba(150, 230, 160, 0.55) 0%,
			rgba(34, 160, 70, 0.4) 40%,
			rgba(18, 90, 40, 0.25) 75%,
			rgba(0, 0, 0, 0.2) 100%),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.05) 50%,
			rgba(0, 0, 0, 0.15) 100%);
	border-color: rgba(34, 160, 70, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 -1px 0 rgba(0, 0, 0, 0.2),
		0 8px 22px -6px rgba(34, 160, 70, 0.45);
}

.btn--call:hover {
	border-color: rgba(150, 230, 160, 0.85);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15),
		0 14px 32px -8px rgba(34, 160, 70, 0.65),
		0 0 0 1px rgba(150, 230, 160, 0.35);
}

/* Бегущий блик для CTA-кнопок сайта */
.button,
.btn,
.header-btn,
.btn-primary,
.cta,
button[type="submit"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.button::after,
.btn::after,
.header-btn::after,
.btn-primary::after,
.cta::after,
button[type="submit"]::after {
	content: "";
	position: absolute;
	top: -35%;
	bottom: -35%;
	left: -70%;
	width: 45%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
	transform: skewX(-20deg);
	animation: cta-shine-sweep 3s linear infinite;
}

@keyframes cta-shine-sweep {
	from {
		transform: translateX(0) skewX(-20deg);
	}

	to {
		transform: translateX(420%) skewX(-20deg);
	}
}

/* =====================================================================
   Плавающие кнопки (bottom-right «Написать в MAX / Позвонить»).
   У них свои размеры, не переопределяем всё — только добавляем стекло.
   ===================================================================== */
.floating-actions__btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	transition:
		transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1),
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.floating-actions__btn::before {
	content: "";
	position: absolute;
	inset: 1px 1px auto 1px;
	height: 45%;
	border-radius: inherit;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.35) 0%,
		rgba(255, 255, 255, 0.08) 55%,
		rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	opacity: 0.9;
	transition: opacity 0.35s ease;
}

.floating-actions__btn:hover {
	transform: translateY(-2px);
}

.floating-actions__btn:hover::before {
	opacity: 1;
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn::before,
	.form__submit,
	.form__submit::before,
	.cookie-notice__btn,
	.cookie-notice__btn::before,
	.floating-actions__btn,
	.floating-actions__btn::before {
		transition: none;
	}

	.btn:hover,
	.form__submit:hover,
	.cookie-notice__btn:hover,
	.floating-actions__btn:hover {
		transform: none;
	}

	.button::after,
	.btn::after,
	.header-btn::after,
	.btn-primary::after,
	.cta::after,
	button[type="submit"]::after {
		animation: none;
	}
}