/* ============================================================
   Флагман-тур — Подарочный сертификат
   Кнопка в шапке (рядом с логотипом) + модальная форма заявки.
   Стиль: праздничный золотой градиент; размеры и шрифты — из
   дизайн-токенов темы delaisait (--font-head, --hover-ease и т.д.).
   ============================================================ */

.gift-btn {
	--gift-light: #ffe59a;
	--gift: #ffc93c;
	--gift-deep: #e8a200;
	--gift-ink: #5c3a00;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	padding: 9px 16px;
	border: 0;
	border-radius: 12px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--gift-ink);
	background: linear-gradient(135deg, var(--gift-light) 0%, var(--gift) 48%, var(--gift-deep) 100%);
	box-shadow:
		0 6px 16px rgba(232, 162, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 -1px 0 rgba(140, 84, 0, 0.18);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		transform var(--hover-dur) var(--hover-ease),
		box-shadow var(--hover-dur) var(--hover-ease),
		filter var(--hover-dur) var(--hover-ease);
}

.gift-btn > * {
	position: relative;
	z-index: 1;
}

.gift-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: #8a5300;
}

.gift-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow:
		0 9px 22px rgba(232, 162, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(140, 84, 0, 0.18);
}

.gift-btn:active {
	transform: none;
}

.gift-btn:focus-visible {
	outline: 2px solid #b45309;
	outline-offset: 3px;
}

/* Блик света, проходящий по кнопке раз в ~4.6 секунды */
.gift-btn::after {
	content: "";
	position: absolute;
	top: -25%;
	bottom: -25%;
	left: 0;
	width: 36%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0) 32%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 68%,
		transparent 100%
	);
	transform: translateX(-260%) skewX(-14deg);
	animation: gift-shine 4.6s var(--hover-ease) infinite;
}

/* ------------------------------------------------------------
   Кнопка в шапке: видна только когда открыто меню (≥1200px).
   На узких экранах вход на форму — кнопка в мобильном меню.
   ------------------------------------------------------------ */

.header .gift-btn {
	display: none;
	/* Логотип-накладка живёт в padding-зоне шапки и подходит к потоку
	   почти вплотную — даём кнопке воздух, как у остальных элементов шапки. */
	margin-left: 10px;
}

@media (min-width: 1200px) {
	.header .gift-btn {
		display: inline-flex;
	}
}

/* Узкие десктопы и «плотное» меню (html.is-nav-tight): кнопка
   сворачивается в круглую иконку, чтобы не теснить меню. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.header .gift-btn {
		padding: 9px 12px;
		font-size: 13px;
	}
}

html.is-nav-tight .header .gift-btn {
	padding: 0;
	width: 38px;
	height: 38px;
	gap: 0;
	border-radius: 50%;
}

html.is-nav-tight .header .gift-btn .gift-btn__label {
	display: none;
}

html.is-nav-tight .header .gift-btn svg {
	width: 19px;
	height: 19px;
}

/* ------------------------------------------------------------
   Кнопка в мобильном меню: на всю ширину, крупная
   ------------------------------------------------------------ */

.mnav__gift {
	width: 100%;
	padding: 14px 20px;
	font-size: 16px;
	border-radius: var(--radius);
}

/* ------------------------------------------------------------
   Модальное окно: тёплый праздничный акцент поверх базовой
   .modal/.form темы (кремовая карточка, золотая лента, чипы)
   ------------------------------------------------------------ */

.modal--gift .modal__box {
	position: relative;
	background: #fffdf6;
	border: 1px solid rgba(232, 162, 0, 0.25);
	overflow: hidden;
}

/* Золотая «лента» по верхней кромке */
.modal--gift .modal__box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, #ffe59a, #ffc93c 40%, #e8a200 75%, #ffe59a);
}

.gift-modal-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 6px;
}

.gift-modal-head__badge {
	flex: none;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	color: #8a5300;
	background: linear-gradient(135deg, #ffe59a, #ffc93c 55%, #e8a200);
	box-shadow:
		0 8px 18px rgba(232, 162, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.gift-modal-head__badge svg {
	width: 26px;
	height: 26px;
}

.gift-modal-head__title {
	margin: 0;
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #3a2a00;
}

.modal--gift .modal__subtitle {
	color: #6b5d45;
}

/* --- Номинал: чипы-радио --- */

.gift-amount {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gift-chip {
	position: relative;
	display: inline-flex;
	padding: 9px 15px;
	border: 1.5px solid rgba(232, 162, 0, 0.35);
	border-radius: 999px;
	background: #fff;
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 600;
	color: #5c3a00;
	cursor: pointer;
	transition:
		background var(--hover-dur) var(--hover-ease),
		border-color var(--hover-dur) var(--hover-ease),
		box-shadow var(--hover-dur) var(--hover-ease),
		transform var(--hover-dur) var(--hover-ease);
}

.gift-chip:hover {
	border-color: #e8a200;
	background: #fff7e0;
}

.gift-chip:focus-within {
	outline: 2px solid #b45309;
	outline-offset: 2px;
}

.gift-chip__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gift-chip__input:checked + .gift-chip__text {
	background: linear-gradient(135deg, #ffe59a, #ffc93c 55%, #e8a200);
	border-radius: 999px;
	padding: 3px 9px;
	margin: -3px -9px;
}

.gift-chip:has(> .gift-chip__input:checked) {
	border-color: transparent;
	box-shadow: 0 4px 10px rgba(232, 162, 0, 0.32);
}

/* «Другая сумма»: поле появляется при выборе соответствующего чипа */
.gift-own {
	display: none;
	width: 100%;
	margin-top: 4px;
	animation: gift-rise 0.3s var(--hover-ease) both;
}

.gift-amount:has(.gift-chip__input[value="own"]:checked) .gift-own {
	display: block;
}

/* Запасной вариант для браузеров без :has(): поле доступно всегда,
   но визуально приглушено, пока не выбрана «Другая сумма». */
@supports not (selector(:has(*))) {
	.gift-own {
		display: block;
		opacity: 0.55;
	}
}

/* --- Золотая кнопка отправки --- */

.btn--gift {
	color: #5c3a00;
	background: linear-gradient(135deg, #ffe59a 0%, #ffc93c 48%, #e8a200 100%);
	box-shadow:
		0 8px 20px rgba(232, 162, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.btn--gift:hover,
.btn--gift:focus-visible {
	color: #4a2f00;
	background: linear-gradient(135deg, #ffeaad 0%, #ffd257 48%, #f0ad05 100%);
	box-shadow: 0 10px 26px rgba(232, 162, 0, 0.45);
}

/* --- Анимации --- */

@keyframes gift-shine {
	0% {
		transform: translateX(-260%) skewX(-14deg);
		opacity: 0;
	}
	4% {
		opacity: 1;
	}
	24% {
		transform: translateX(430%) skewX(-14deg);
		opacity: 0;
	}
	100% {
		transform: translateX(430%) skewX(-14deg);
		opacity: 0;
	}
}

@keyframes gift-rise {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Доступность: отключение анимаций */
@media (prefers-reduced-motion: reduce) {
	.gift-btn::after,
	.gift-own {
		animation: none !important;
	}
	.gift-btn,
	.gift-chip,
	.btn--gift {
		transition: none !important;
	}
}