.prcb-coupon,
.prcb-coupon * {
	box-sizing: border-box;
}

.prcb-coupon {
	--prcb-panel-bg: #171718;
	--prcb-panel-bg-2: #28282d;
	--prcb-main: #ffffff;
	--prcb-secondary: #d6d6dc;
	--prcb-badge-bg: #e80e20;
	--prcb-badge-bg-2: #ff4b59;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(255, 255, 255, 0.14);
	--prcb-shadow: 0 18px 45px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.18);

	position: fixed;
	left: clamp(54px, 4vw, 68px);
	bottom: clamp(12px, 2vw, 28px);
	z-index: 999990;

	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: center;

	width: min(372px, calc(100vw - 24px));
	min-height: 88px;
	padding: 0 10px 0 2px;

	color: var(--prcb-main);
	background: linear-gradient(
		135deg,
		var(--prcb-panel-bg),
		var(--prcb-panel-bg-2)
	);
	border: 1px solid var(--prcb-border);
	border-radius: 22px;
	box-shadow: var(--prcb-shadow);

	isolation: isolate;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;

	opacity: 0;
	visibility: hidden;
	translate: 0 42px;

	transform: translate3d(0, 0, 0);
	transition:
		transform 180ms ease,
		box-shadow 180ms ease;

	animation: prcb-coupon-enter 900ms cubic-bezier(.22, 1, .36, 1) 5s both;
	will-change: opacity, translate;
}

.prcb-coupon::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	border-radius: 20px;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.10),
		rgba(255, 255, 255, 0) 42%
	);
	pointer-events: none;
}

.prcb-coupon:not(.prcb-coupon--static):hover {
	transform: translate3d(0, -3px, 0);
	box-shadow:
		0 22px 52px rgba(0, 0, 0, 0.32),
		0 6px 15px rgba(0, 0, 0, 0.20);
}

.prcb-coupon:not(.prcb-coupon--static):focus-visible {
	outline: 3px solid var(--prcb-badge-bg);
	outline-offset: 4px;
}

.prcb-coupon__badge {
	position: relative;
	display: grid;
	place-items: center;

	width: 96px;
	height: 96px;
	margin-left: -45px;

	filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.28));
	transition: transform 220ms ease;
}

.prcb-coupon:not(.prcb-coupon--static):hover .prcb-coupon__badge {
	transform: rotate(-2deg) scale(1.035);
}

.prcb-coupon__shape {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;

	stroke: var(--prcb-badge-bg-2);
	stroke-width: 3;
	stroke-linejoin: round;

	transform-origin: 50% 50%;
	transform-box: fill-box;
	animation: prcb-badge-rotate 18s linear infinite;
	will-change: transform;
}

.prcb-coupon__shape-stop--start {
	stop-color: var(--prcb-badge-bg-2);
}

.prcb-coupon__shape-stop--end {
	stop-color: var(--prcb-badge-bg);
}

.prcb-coupon__badge-text {
	position: relative;
	z-index: 1;

	display: block;
	max-width: 72px;

	color: var(--prcb-badge-text);
	font-size: 20px;
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.prcb-coupon__content {
	position: relative;
	display: block;
	min-width: 0;
	padding: 14px 34px 14px 6px;
}

.prcb-coupon__title {
	display: block;
	margin: 0 !important;
	padding: 0 !important;

	color: var(--prcb-main) !important;
	font-family: inherit;
	font-size: clamp(16px, 1.2vw, 18px) !important;
	font-style: normal;
	font-weight: 800;
	line-height: 1.08 !important;
	letter-spacing: -0.015em;
	text-transform: none;
	text-wrap: balance;
}

.prcb-coupon__subtitle {
	display: block;
	margin: 5px 0 0 !important;
	padding: 0 !important;

	color: var(--prcb-secondary) !important;
	font-family: inherit;
	font-size: 12.5px !important;
	font-style: normal;
	font-weight: 300;
	line-height: 1.25 !important;
	letter-spacing: 0;
	text-transform: none;
}

.prcb-coupon__arrow {
	position: absolute;
	top: 50%;
	right: 4px;

	display: grid;
	place-items: center;

	width: 24px;
	height: 24px;
	margin-top: -12px;

	color: var(--prcb-main);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.78;

	transition:
		transform 180ms ease,
		opacity 180ms ease;
}

.prcb-coupon:hover .prcb-coupon__arrow {
	transform: translateX(2px);
	opacity: 1;
}

/* Entrance animation */

@keyframes prcb-coupon-enter {
	0% {
		opacity: 0;
		visibility: hidden;
		translate: 0 42px;
	}

	1% {
		visibility: visible;
	}

	58% {
		opacity: 1;
		visibility: visible;
		translate: 0 -9px;
	}

	75% {
		opacity: 1;
		visibility: visible;
		translate: 0 4px;
	}

	89% {
		opacity: 1;
		visibility: visible;
		translate: 0 -2px;
	}

	100% {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
	}
}

/* Gentle continuous badge rotation */

@keyframes prcb-badge-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Presets */

.prcb-preset-pro-radio-red {
	--prcb-panel-bg: #151516;
	--prcb-panel-bg-2: #2a2a2e;
	--prcb-main: #ffffff;
	--prcb-secondary: #d7d7dc;
	--prcb-badge-bg: #e80e20;
	--prcb-badge-bg-2: #ff4655;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(255, 255, 255, 0.15);
}

.prcb-preset-warm-yellow {
	--prcb-panel-bg: #17130a;
	--prcb-panel-bg-2: #332710;
	--prcb-main: #fff8dd;
	--prcb-secondary: #eadba5;
	--prcb-badge-bg: #ffca28;
	--prcb-badge-bg-2: #f39b12;
	--prcb-badge-text: #171207;
	--prcb-border: rgba(255, 214, 88, 0.28);
}

.prcb-preset-promo-green {
	--prcb-panel-bg: #0d2117;
	--prcb-panel-bg-2: #16432d;
	--prcb-main: #f4fff8;
	--prcb-secondary: #c5e6d1;
	--prcb-badge-bg: #2bd576;
	--prcb-badge-bg-2: #0ea85f;
	--prcb-badge-text: #062518;
	--prcb-border: rgba(87, 235, 151, 0.25);
}

.prcb-preset-premium-violet {
	--prcb-panel-bg: #171126;
	--prcb-panel-bg-2: #392260;
	--prcb-main: #ffffff;
	--prcb-secondary: #ded0f5;
	--prcb-badge-bg: #a85bff;
	--prcb-badge-bg-2: #6d2fda;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(190, 132, 255, 0.28);
}

.prcb-preset-coral-sunset {
	--prcb-panel-bg: #251015;
	--prcb-panel-bg-2: #4b1b26;
	--prcb-main: #fff8f8;
	--prcb-secondary: #f0c8ce;
	--prcb-badge-bg: #ff6679;
	--prcb-badge-bg-2: #ed344f;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(255, 123, 141, 0.27);
}

.prcb-preset-electric-blue {
	--prcb-panel-bg: #0c1829;
	--prcb-panel-bg-2: #12385e;
	--prcb-main: #f5fbff;
	--prcb-secondary: #c3d9ec;
	--prcb-badge-bg: #1ca7ff;
	--prcb-badge-bg-2: #006fe8;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(79, 179, 255, 0.28);
}

.prcb-preset-gold-black {
	--prcb-panel-bg: #101010;
	--prcb-panel-bg-2: #2d271c;
	--prcb-main: #fff9e7;
	--prcb-secondary: #d8cda9;
	--prcb-badge-bg: #f6c453;
	--prcb-badge-bg-2: #b9861d;
	--prcb-badge-text: #1a1306;
	--prcb-border: rgba(246, 196, 83, 0.31);
}

.prcb-preset-mint-night {
	--prcb-panel-bg: #0b1f20;
	--prcb-panel-bg-2: #17413f;
	--prcb-main: #f0fffb;
	--prcb-secondary: #bee5db;
	--prcb-badge-bg: #79f2cf;
	--prcb-badge-bg-2: #22bd99;
	--prcb-badge-text: #06231d;
	--prcb-border: rgba(121, 242, 207, 0.26);
}

.prcb-preset-crimson-cream {
	--prcb-panel-bg: #fff7ed;
	--prcb-panel-bg-2: #f3e3d5;
	--prcb-main: #57151d;
	--prcb-secondary: #7a4d4f;
	--prcb-badge-bg: #b7112a;
	--prcb-badge-bg-2: #e80e20;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(101, 30, 34, 0.18);
	--prcb-shadow:
		0 18px 45px rgba(75, 32, 27, 0.18),
		0 4px 12px rgba(75, 32, 27, 0.12);
}

.prcb-preset-summer-pink {
	--prcb-panel-bg: #28132d;
	--prcb-panel-bg-2: #542150;
	--prcb-main: #fff8ff;
	--prcb-secondary: #ebcae9;
	--prcb-badge-bg: #ff5c9e;
	--prcb-badge-bg-2: #ff7a59;
	--prcb-badge-text: #ffffff;
	--prcb-border: rgba(255, 122, 185, 0.27);
}

/* Tablet and mobile */

@media (max-width: 640px) {
	.prcb-coupon {
		left: 42px;
		bottom: 10px;

		grid-template-columns: 46px minmax(0, 1fr);

		width: min(318px, calc(100vw - 52px));
		min-height: 68px;
		padding-right: 8px;
		border-radius: 18px;
	}

	.prcb-coupon::before {
		border-radius: 16px;
	}

	.prcb-coupon__badge {
		width: 76px;
		height: 76px;
		margin-left: -36px;
	}

	.prcb-coupon__badge-text {
		max-width: 62px;
		font-size: 20px;
		line-height: 0.94;
	}

	.prcb-coupon__content {
		padding: 11px 30px 11px 5px;
	}

	.prcb-coupon__title {
		font-size: 15px !important;
		line-height: 1.08 !important;
	}

	.prcb-coupon__subtitle {
		display: none;
	}

	.prcb-coupon__arrow {
		right: 2px;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		font-size: 17px;
	}
}

@media (max-width: 360px) {
	.prcb-coupon {
		left: 39px;
		grid-template-columns: 42px minmax(0, 1fr);
		width: calc(100vw - 49px);
	}

	.prcb-coupon__badge {
		width: 70px;
		height: 70px;
		margin-left: -33px;
	}

	.prcb-coupon__badge-text {
		max-width: 58px;
		font-size: 20px;
		line-height: 0.92;
	}

	.prcb-coupon__title {
		font-size: 14px !important;
	}
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
	.prcb-coupon {
		opacity: 1;
		visibility: visible;
		translate: none;
		animation: none;
		transition: none;
	}

	.prcb-coupon__badge,
	.prcb-coupon__arrow {
		transition: none;
	}

	.prcb-coupon__shape {
		animation: none;
	}
}