/**
 * Колесо подарков — фронт.
 */

.coxo-wheel {
	--coxo-wheel-size: 480px;
	--coxo-wheel-accent: #6d4aff;

	/*
	 * Где стоит стрелка: 0° — сверху, 90° — справа. Угол меняется в разных
	 * раскладках (в окне на десктопе колесо срезано слева, и стрелке сверху
	 * места нет), поэтому его же читает wheel.js — чтобы довести нужный
	 * сектор именно под стрелку.
	 */
	--coxo-pointer-angle: 0deg;

	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.coxo-wheel__test {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff4d6;
	color: #7a5a00;
	font-size: 13px;
}

.coxo-wheel__title {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.2;
}

.coxo-wheel__rules {
	margin: 0 0 24px;
	color: #6b6b76;
	font-size: 15px;
}

.coxo-wheel__empty {
	padding: 32px;
	border: 1px dashed #d5d5dd;
	border-radius: 12px;
	color: #6b6b76;
}

/* Сцена: колесо, указатель, ступица. */

.coxo-wheel__stage {
	position: relative;
	width: 100%;
	max-width: var(--coxo-wheel-size);
	margin: 0 auto;
	aspect-ratio: 1;
}

.coxo-wheel__disc {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 10px #fff, 0 0 0 13px rgba(0, 0, 0, .08), 0 18px 40px rgba(20, 20, 40, .18);
	transform: rotate(0deg);
	transform-origin: 50% 50%;
	will-change: transform;
}

.coxo-wheel__svg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* Размер шрифта задаёт разметка: он зависит от числа секторов. */
.coxo-wheel__label {
	font-family: inherit;
	font-weight: 600;
}

.coxo-wheel__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18%;
	height: 18%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 20, 40, .25);
}

/*
 * Слот стрелки — квадрат по размеру колеса: поворот вокруг его центра катит
 * стрелку по ободу, а сама стрелка внутри слота всегда «сверху» и считает
 * свою физику в собственных координатах.
 */
.coxo-wheel__pointer-slot {
	position: absolute;
	inset: 0;
	z-index: 3;
	transform: rotate(var(--coxo-pointer-angle));
	pointer-events: none;
}

/*
 * Стрелка закреплена сверху и вращается вокруг точки крепления: колышки
 * колеса отбивают её назад и подбрасывают, физику считает wheel.js.
 */
.coxo-wheel__pointer {
	/* Центр крепления: вокруг него стрелка отклоняется, на нём же кружочек. */
	--coxo-pointer-pivot: 25px;

	position: absolute;
	top: -30px;
	left: 50%;
	width: 56px;
	height: 76px;
	transform: translateX(-50%);
	transform-origin: 50% var(--coxo-pointer-pivot);
	background: linear-gradient(180deg, #9b80ff 0%, var(--coxo-wheel-accent) 45%, #4d2bc4 100%);
	clip-path: polygon(50% 100%, 0 44%, 8% 4%, 92% 4%, 100% 44%);
	filter: drop-shadow(0 5px 8px rgba(20, 20, 40, .4));
	will-change: transform;
}

.coxo-wheel__pointer::after {
	content: '';
	position: absolute;
	top: calc(var(--coxo-pointer-pivot) - 9px);
	left: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
}

/* Кнопка и статус. */

.coxo-wheel__actions {
	margin-top: 28px;
}

.coxo-wheel .coxo-wheel__button {
	display: inline-block;
	min-width: 260px;
	max-width: 100%;
	padding: 19px 46px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #8a6bff 0%, #5a2fe0 100%);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(90, 47, 224, .38);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Пульс притягивает взгляд, пока попытка доступна. */
@keyframes coxo-wheel-pulse {
	0%, 100% {
		box-shadow: 0 12px 28px rgba(90, 47, 224, .38), 0 0 0 0 rgba(109, 74, 255, .5);
	}

	60% {
		box-shadow: 0 12px 28px rgba(90, 47, 224, .38), 0 0 0 18px rgba(109, 74, 255, 0);
	}
}

.coxo-wheel .coxo-wheel__button:not(:disabled) {
	animation: coxo-wheel-pulse 2.4s ease-out infinite;
}

.coxo-wheel .coxo-wheel__button:not(:disabled):hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(90, 47, 224, .48);
}

.coxo-wheel .coxo-wheel__button:disabled {
	background: #b9b4cf;
	opacity: .7;
	cursor: default;
	transform: none;
	box-shadow: none;
	animation: none;
}

.coxo-wheel--spinning .coxo-wheel__button {
	animation: none;
}

.coxo-wheel__status {
	min-height: 22px;
	margin: 12px 0 0;
	color: #6b6b76;
	font-size: 15px;
}

/* Мои призы. */

.coxo-wheel__history {
	margin-top: 40px;
	text-align: left;
}

.coxo-wheel__history-title {
	margin: 0 0 12px;
	font-size: 18px;
}

.coxo-wheel__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.coxo-wheel__table td {
	padding: 10px 12px;
	border-bottom: 1px solid #ececf1;
	vertical-align: middle;
}

.coxo-wheel__cell-date {
	width: 140px;
	color: #8b8b96;
	white-space: nowrap;
}

.coxo-wheel__cell-status {
	width: 150px;
	color: #8b8b96;
	text-align: right;
}

.coxo-wheel__row--cancelled {
	opacity: .5;
	text-decoration: line-through;
}

.coxo-wheel__code {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 6px;
	background: #f3f3f8;
	font-size: 13px;
}

/* ------------------------------------------------------------------------
 * Окно с колесом
 *
 * На десктопе — карточка по центру экрана: колесо срезано её левым краем и
 * видно чуть больше половины, текст с кнопкой занимают правую половину.
 * На мобильном то же окно прижато к низу экрана, и колесо срезано уже его
 * нижним краем — видна верхняя половина.
 * --------------------------------------------------------------------- */

.coxo-wheel--popup {
	text-align: center;
}

.coxo-wheel__launch-title {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.2;
}

.coxo-wheel__launch-rules {
	margin: 0 0 24px;
	color: #6b6b76;
	font-size: 15px;
}

.coxo-wheel--popup .coxo-wheel__popup {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* Не полагаемся на reset темы: ширину карточки считаем вместе с полями. */
.coxo-wheel--popup .coxo-wheel__popup,
.coxo-wheel--popup .coxo-wheel__popup * {
	box-sizing: border-box;
}

.coxo-wheel--popup .coxo-wheel__popup[hidden] {
	display: none;
}

.coxo-wheel--popup .coxo-wheel__popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 30, .55);
	animation: coxo-wheel-fade .25s ease;
}

.coxo-wheel--popup .coxo-wheel__popup-box {
	--coxo-wheel-size: 520px;
	--coxo-pointer-angle: 90deg;

	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 860px;
	min-height: 440px;
	max-height: calc(100vh - 48px);

	/*
	 * Слева освобождаем ровно столько, сколько видно от колеса (0.62 его
	 * ширины — радиус плюс вынос центра за край), и добавляем воздух.
	 * Проценты тут не годятся: процентный padding считается от ширины
	 * родителя, то есть от всего экрана.
	 */
	padding: 48px 48px 48px calc(var(--coxo-wheel-size) * .62 + 40px);
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(15, 15, 30, .35);
	animation: coxo-wheel-pop .28s cubic-bezier(.2, .8, .3, 1);
}

/* Колесо: центр смещён за левый край карточки, наружу выходит чуть больше половины. */
.coxo-wheel--popup .coxo-wheel__stage {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--coxo-wheel-size);
	max-width: none;
	margin: 0;
	transform: translate(-38%, -50%);
}

.coxo-wheel--popup .coxo-wheel__panel {
	position: relative;
	z-index: 2;
	width: 100%;
}

.coxo-wheel--popup .coxo-wheel__title {
	margin: 0 0 12px;
	font-size: 30px;
}

.coxo-wheel--popup .coxo-wheel__rules {
	margin: 0;
}

.coxo-wheel--popup .coxo-wheel__test {
	position: relative;
	z-index: 2;
	order: -1;
	margin: 0 0 16px;
}

/*
 * Размеры задаём жёстко: тема магазина растягивает любые кнопки своими
 * min-width и padding.
 */
.coxo-wheel .coxo-wheel__popup-close {
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: auto;
	left: auto;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	max-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #f3f3f8;
	box-shadow: none;
	color: #6b6b76;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.coxo-wheel .coxo-wheel__popup-close:hover {
	background: #e8e8f0;
	color: #1d1d1f;
}

@keyframes coxo-wheel-fade {
	from {
		opacity: 0;
	}
}

@keyframes coxo-wheel-pop {
	from {
		opacity: 0;
		transform: scale(.94);
	}
}

@keyframes coxo-wheel-sheet {
	from {
		transform: translateY(100%);
	}
}

/* Пока окно открыто, страница под ним не прокручивается. */
.coxo-wheel-locked {
	overflow: hidden;
}

/* Попап результата. */

.coxo-wheel__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.coxo-wheel__modal[hidden] {
	display: none;
}

.coxo-wheel__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 30, .55);
}

.coxo-wheel__modal-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	padding: 32px 28px 28px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(15, 15, 30, .3);
	text-align: center;
}

/*
 * Размеры задаём жёстко: тема магазина растягивает любые кнопки своими
 * min-width и padding, и крестик уезжал к середине попапа.
 */
.coxo-wheel .coxo-wheel__modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	max-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #f3f3f8;
	box-shadow: none;
	color: #6b6b76;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.coxo-wheel .coxo-wheel__modal-close:hover {
	background: #e8e8f0;
	color: #1d1d1f;
}

.coxo-wheel__modal-image img {
	width: 120px;
	height: 120px;
	margin-bottom: 12px;
	border-radius: 12px;
	object-fit: cover;
}

.coxo-wheel__modal-title {
	margin: 0 0 10px;
	font-size: 24px;
}

.coxo-wheel__modal-text {
	margin: 0;
	color: #6b6b76;
	font-size: 15px;
}

.coxo-wheel__coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
}

.coxo-wheel__coupon[hidden] {
	display: none;
}

.coxo-wheel__coupon code {
	padding: 10px 16px;
	border: 1px dashed #c9c9d6;
	border-radius: 10px;
	font-size: 16px;
	letter-spacing: .04em;
}

.coxo-wheel__copy {
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	background: #f3f3f8;
	font-size: 14px;
	cursor: pointer;
}

.coxo-wheel__modal-link {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
}

.coxo-wheel__modal-link[hidden] {
	display: none;
}

/* Страница целиком. */

.coxo-wheel-page {
	padding: 40px 0 60px;
}

.coxo-wheel-page__content {
	max-width: 720px;
	margin: 0 auto 24px;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Плавающая вкладка
 *
 * То же колесо в миниатюре, приклеенное к боковому краю экрана на всех
 * страницах сайта. Выезжает из-за края с задержкой: сразу после загрузки оно
 * перебивало бы контент, а через пару секунд движение в углу уже читается как
 * приглашение.
 *
 * Селекторы намеренно двойные (.coxo-wheel--floating .coxo-wheel__tab): тема
 * задаёт свои правила для button в подвале, и одного класса ей мало.
 * --------------------------------------------------------------------- */

.coxo-wheel--floating {
	/* Обёртка ничего не занимает: внутри только fixed-вкладка и окно. */
	position: static;
}

.coxo-wheel--floating .coxo-wheel__tab {
	--coxo-tab-hidden: 130%;
	--coxo-tab-size: 76px;

	position: fixed;
	/* Низ правого края: 150px оставляют место кнопке «наверх» темы (50px + 20px от низа). */
	top: auto;
	bottom: 150px;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	min-height: 0;
	max-width: none;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	animation: coxo-wheel-tab-in .7s cubic-bezier(.22, .8, .3, 1) 1.4s backwards;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Тема красит любую кнопку при наведении и фокусе (--btn-bgcolor-hover), а у
 * вкладки фон рисуют сам диск и пилюля — поэтому гасим все состояния разом.
 */
.coxo-wheel--floating .coxo-wheel__tab:hover,
.coxo-wheel--floating .coxo-wheel__tab:focus,
.coxo-wheel--floating .coxo-wheel__tab:focus-visible,
.coxo-wheel--floating .coxo-wheel__tab:active {
	border: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	color: inherit;
	opacity: 1;
	outline: none;
}

/* Фокус с клавиатуры показываем кольцом у диска, а не заливкой кнопки. */
.coxo-wheel--floating .coxo-wheel__tab:focus-visible .coxo-wheel__tab-disc {
	outline: 3px solid #6d4aff;
	outline-offset: 3px;
}

.coxo-wheel--side-right .coxo-wheel__tab {
	right: 18px;
	flex-direction: row;
}

.coxo-wheel--side-left .coxo-wheel__tab {
	--coxo-tab-hidden: -130%;

	left: 18px;
	flex-direction: row-reverse;
}

/* Диск. Белая оправа отделяет колесо от любого фона страницы. */
.coxo-wheel--floating .coxo-wheel__tab-disc {
	position: relative;
	display: block;
	box-sizing: border-box;
	flex: none;
	padding: 4px;
	width: var(--coxo-tab-size);
	height: var(--coxo-tab-size);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 12px 30px rgba(45, 20, 120, .35), 0 2px 6px rgba(45, 20, 120, .2);
	transition: transform .3s cubic-bezier(.22, .8, .3, 1), box-shadow .3s ease;
}

.coxo-wheel--floating .coxo-wheel__tab-spin {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	animation: coxo-wheel-tab-spin 18s linear infinite;
}

.coxo-wheel--floating .coxo-wheel__tab-spin svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Ступица со стрелкой: без них диск читается как просто цветной кружок. */
.coxo-wheel--floating .coxo-wheel__tab-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(30, 15, 80, .35);
	transform: translate(-50%, -50%);
}

.coxo-wheel--floating .coxo-wheel__tab-pin {
	position: absolute;
	top: -3px;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 11px solid #2b2b33;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .6));
	transform: translateX(-50%);
}

/* Пульс вокруг диска — единственное, что двигается в покое, кроме вращения. */
.coxo-wheel--floating .coxo-wheel__tab-disc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: rgba(109, 74, 255, .45);
	animation: coxo-wheel-tab-pulse 3s ease-out infinite;
}

.coxo-wheel--floating .coxo-wheel__tab-text {
	display: block;
	padding: 9px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(45, 20, 120, .22);
	color: #2b2b33;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}

.coxo-wheel--floating .coxo-wheel__tab:hover .coxo-wheel__tab-disc,
.coxo-wheel--floating .coxo-wheel__tab:focus-visible .coxo-wheel__tab-disc {
	box-shadow: 0 16px 38px rgba(45, 20, 120, .45), 0 2px 6px rgba(45, 20, 120, .25);
	transform: scale(1.08);
}

.coxo-wheel--side-right .coxo-wheel__tab:hover .coxo-wheel__tab-text,
.coxo-wheel--side-right .coxo-wheel__tab:focus-visible .coxo-wheel__tab-text {
	transform: translateX(-4px);
}

.coxo-wheel--side-left .coxo-wheel__tab:hover .coxo-wheel__tab-text,
.coxo-wheel--side-left .coxo-wheel__tab:focus-visible .coxo-wheel__tab-text {
	transform: translateX(4px);
}

/* Пока окно открыто, вкладка под ним не нужна. */
.coxo-wheel-locked .coxo-wheel__tab {
	opacity: 0;
	pointer-events: none;
}

@keyframes coxo-wheel-tab-in {
	from {
		opacity: 0;
		transform: translateX(var(--coxo-tab-hidden));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes coxo-wheel-tab-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes coxo-wheel-tab-pulse {
	0% {
		opacity: .55;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.45);
	}
}

/*
 * Мобильная раскладка окна: та же карточка, но прижата к низу экрана —
 * колесо стоит под текстом и срезается нижним краем ровно пополам.
 */
@media (max-width: 768px) {
	.coxo-wheel--popup .coxo-wheel__popup {
		align-items: flex-end;
		padding: 0;
	}

	.coxo-wheel--popup .coxo-wheel__popup-box {
		--coxo-wheel-size: min(92vw, 400px);
		--coxo-pointer-angle: 0deg;

		max-width: none;
		min-height: 0;
		max-height: 92vh;
		padding: 40px 20px 0;
		border-radius: 24px 24px 0 0;
		animation-name: coxo-wheel-sheet;
	}

	.coxo-wheel--popup .coxo-wheel__panel {
		order: 1;
	}

	.coxo-wheel--popup .coxo-wheel__stage {
		position: relative;
		top: auto;
		left: auto;
		order: 2;
		width: var(--coxo-wheel-size);
		margin: 28px auto calc(var(--coxo-wheel-size) / -2);
		transform: none;
	}

	.coxo-wheel--popup .coxo-wheel__title {
		font-size: 24px;
	}
}

@media (max-width: 600px) {
	.coxo-wheel {
		--coxo-wheel-size: 100%;
	}

	.coxo-wheel__launch-title {
		font-size: 22px;
	}

	.coxo-wheel__title {
		font-size: 22px;
	}

	.coxo-wheel__cell-date {
		width: 110px;
		font-size: 12px;
	}

	.coxo-wheel__cell-status {
		width: auto;
	}

	/*
	 * На узком экране подпись только мешает: остаётся диск, и он уходит вниз,
	 * где реже всплывают кнопки темы (корзина, чат).
	 */
	.coxo-wheel--floating .coxo-wheel__tab {
		--coxo-tab-size: 58px;

		top: auto;
		right: 14px;
		bottom: 84px;
	}

	.coxo-wheel--side-left .coxo-wheel__tab {
		right: auto;
		left: 14px;
	}

	.coxo-wheel--floating .coxo-wheel__tab-text {
		display: none;
	}

	.coxo-wheel--floating .coxo-wheel__tab-hub {
		width: 14px;
		height: 14px;
	}

	.coxo-wheel--floating .coxo-wheel__tab-pin {
		border-top-width: 9px;
		border-right-width: 6px;
		border-left-width: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coxo-wheel__disc {
		transition: none !important;
	}

	.coxo-wheel .coxo-wheel__button:not(:disabled) {
		animation: none;
	}

	.coxo-wheel--popup .coxo-wheel__popup-box,
	.coxo-wheel--popup .coxo-wheel__popup-backdrop {
		animation: none;
	}

	/* Вкладка остаётся на месте: без выезда, вращения и пульса. */
	.coxo-wheel--floating .coxo-wheel__tab,
	.coxo-wheel--floating .coxo-wheel__tab-spin {
		animation: none;
	}

	.coxo-wheel--floating .coxo-wheel__tab-disc::before {
		display: none;
	}
}