@import url(./normalize.css);
@import url(./null.css);
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
body {
	background-color: #f9f9f9;
	background-image: 
		linear-gradient(180deg, 
			rgba(134, 182, 255, 0.4) 0%, 
			rgba(134, 182, 255, 0.2) 30%, 
			rgba(134, 182, 255, 0.1) 50%, 
			rgba(134, 182, 255, 0) 70%),
		url(../public/background.png);
	background-repeat: no-repeat, repeat;
	background-position: top center, top center;
	background-size: 100% 100vh, auto;
	color: #fff;
	font-family: 'Inter', 'Roboto flex', -apple-system, BlinkMacSystemFont,
		sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
	touch-action: manipulation;
}
::-webkit-scrollbar {
	width: 12px;
}
::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 6px;
}
::-webkit-scrollbar-thumb {
	background: #518eff;
	border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
	background: #4374d9;
}
html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #518eff #f1f1f1;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}

a[href^="tel:"] {
	pointer-events: none;
	text-decoration: none;
	color: inherit;
}

input, textarea {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
.wrapper {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 24px 16px;
	max-width: 1472px;
	width: 100%;
	min-height: 100vh;
	position: relative;
}
main {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(81, 142, 255, 0.24),
		0 1px 2px 0 rgba(0, 0, 0, 0.12) inset;
}
.header__logo-block {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
}
.header__logo-container {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(180deg, #BDD4FF 0%, #518EFF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.header__logo-img {
	width: 24px;
	height: 24px;
	filter: brightness(0) saturate(100%) invert(100%);
}
.header__menu {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.header__menu-list {
	display: flex;
	gap: 6px;
}
.header__menu-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	color: #c1c4c8;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.02);
	text-decoration: none;
	transition: color 0.3s ease;
}
.header__menu-btn:hover {
	color: #518eff;
}
.header__menu-btn:hover svg {
	fill: #518eff;
}
.header__menu-btn svg {
	fill: #c7c8c9;
	transition: fill 0.3s ease;
}
.header__menu-btn.active svg {
	fill: #518eff;
}
.header__menu-btn.active {
	color: #518eff;
	background: #f1f6ff;
}
.header__socials {
	display: flex;
	align-items: center;
	gap: 12px;
}
.header__socials-block {
	display: flex;
	align-items: center;
	gap: 16px;
}
.header__my-profile {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 12px;
	background: #518eff;
	border: none;
	cursor: pointer;
}
.header__social-hr {
	width: 0;
	height: 8px;
	stroke-width: 1px;
	stroke: rgba(0, 0, 0, 0.24);
}
.burger {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid rgba(81, 142, 255, 0.3);
	cursor: pointer;
	background: none;
	display: none;
	transition: all 0.3s ease;
	z-index: 20;
}
.burger span:first-child {
	width: 20px;
	height: 2px;
	background-color: #518eff;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	top: 18px;
	border-radius: 2px;
	transition: all 0.3s ease;
}
.burger span:last-child {
	width: 20px;
	height: 2px;
	background-color: #518eff;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 18px;
	border-radius: 2px;
	transition: all 0.3s ease;
}
.burger::after {
	content: '';
	width: 20px;
	height: 2px;
	background-color: #518eff;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 14px;
	border-radius: 2px;
	transition: all 0.3s ease;
}
.burger::before {
	content: '';
	width: 20px;
	height: 2px;
	background-color: #518eff;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	top: 14px;
	border-radius: 2px;
	transition: all 0.3s ease;
}
.burger.active span:first-child {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}
.burger.active span:last-child {
	bottom: 50%;
	transform: translate(-50%, 50%) rotate(-45deg);
}
.burger.active::before {
	opacity: 0;
	top: 50%;
}
.burger.active::after {
	opacity: 0;
	bottom: 50%;
}
.burger-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	max-width: 400px;
	height: 100vh;
	background: #fff;
	z-index: 10;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	transition: right 0.3s ease;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}
.burger-menu.active {
	right: 0;
}
.burger-menu__nav {
	margin-top: 60px;
}
.burger-menu__nav-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
}
.burger-menu__nav-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	color: #c1c4c8;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.02);
	text-decoration: none;
	transition: all 0.3s ease;
}
.burger-menu__nav-btn:hover {
	background: #f1f6ff;
	color: #518eff;
}
.burger-menu__nav-btn.active {
	color: #518eff;
	background: #f1f6ff;
}
.burger-menu__nav-btn svg {
	fill: #c7c8c9;
	transition: fill 0.3s ease;
}
.burger-menu__nav-btn.active svg,
.burger-menu__nav-btn:hover svg {
	fill: #518eff;
}
.burger-menu__socials {
	margin-top: auto;
}
.burger-menu__socials-block {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: center;
	margin-bottom: 24px;
}
.burger-menu__my-profile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 12px;
	background: #518eff;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom: 20px;
}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.overlay.active {
	opacity: 1;
	visibility: visible;
}
.footer {
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 100%;
}
.footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footer__logo-block {
	display: flex;
	align-items: center;
	gap: 16px;
}
.footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
}
.footer__copyright {
	color: rgba(0, 0, 0, 0.3);
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
}
.footer__copyright-bottom {
	color: rgba(0, 0, 0, 0.3);
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
}
.footer__socials {
	display: flex;
	gap: 16px;
}
.footer__hr {
	height: 1px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.16);
}
.footer__text-block {
	display: flex;
	gap: 120px;
}
.footer__text {
	color: rgba(0, 0, 0, 0.4);
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.64px;
	flex: 1;
}
.footer__text-right {
	display: flex;
	flex-direction: column;
	gap: 48px;
	flex: 1;
}
.footer__info {
	display: flex;
	gap: 12px;
}
.footer__info-block {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.24);
	background: #fff;
}
.footer__info-text-block {
	display: flex;
	flex-direction: column;
}
.footer__info-data {
	color: #518eff;
	font-size: 24px;
	font-weight: 600;
	line-height: 150%;
	letter-spacing: -0.96px;
}
.footer__info-description {
	color: rgba(0, 0, 0, 0.4);
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.56px;
}
.footer__info-menu {
	display: flex;
	justify-content: center;
	gap: 32px;
	list-style: none;
	margin: 32px 0;
	padding: 0;
	flex-wrap: wrap;
}
.footer__info-menu-item a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(0, 0, 0, 0.6);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.64px;
	text-decoration: none;
	transition: color 0.3s ease;
}
.footer__info-menu-item a:hover {
	color: #518eff;
}
.footer__info-menu-item img {
	width: 20px;
	height: 20px;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}
.footer__info-menu-item a:hover img {
	opacity: 1;
}
.footer__legal {
	text-align: center;
	margin-bottom: 16px;
}
.footer__legal p {
	color: rgba(0, 0, 0, 0.4);
	font-size: 14px;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.56px;
}
.set-price__block {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	max-width: 814px;
	width: 100%;
	margin: auto;
}
.price__block {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	width: 100%;
	margin: 64px auto;
}
.set-price__text-block {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 8px;
}
.set-price__title {
	color: #000;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.set-price__text {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}
.set-price__price-block {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: #518eff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 12px;
	border: 1px solid #518eff;
}
.set-price__pl-block {
	width: 100%;
	aspect-ratio: 407/229;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
}
.set-price__button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 12px;
	background: #518eff;
}
.payment__block {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	width: 100%;
}
.payment {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 16px;
	flex: 1;
	width: 100%;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
}
.payment__logo {
	padding: 16px;
	border-radius: 12px;
	background: rgba(81, 142, 255, 0.12);
}
.payment:nth-child(1),
.payment:nth-child(2) {
	grid-column: span 3;
}
.payment:nth-child(3),
.payment:nth-child(4),
.payment:nth-child(5) {
	grid-column: span 2;
}
.payment__title {
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.payment__text {
	color: rgba(0, 0, 0, 0.5);
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}
.profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin: 64px 0;
}
.profile__text-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.profile__title {
	color: #000;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.profile__text {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}
.profile__orders-section {
	margin: 0 auto;
}

.profile__text {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.profile__orders-table {
	width: 100%;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.profile__table-header {
	display: flex;
	background: #518eff;
	border-radius: 12px;
}

.profile__table-header-cell {
	flex: 1;
	padding: 24px 16px;
	color: #fff;
	text-align: left;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.profile__table-body {
	display: flex;
	flex-direction: column;
}

.profile__table-row {
	display: flex;
	transition: background-color 0.2s ease;
}

.profile__table-row:nth-child(even) {
	background-color: #00000005;
}

.profile__table-cell {
	flex: 1;
	padding: 24px 16px;
	color: #333;
	font-size: 14px;
	display: flex;
	align-items: center;
}

.profile__order-id {
	color: #000;
	text-align: left;
	font-family: 'Roboto Flex';
	font-size: 18px;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.profile__order-amount {
	color: #000;
	text-align: left;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.profile__order-status {
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.64px;
	border-radius: 100px;
}

.profile__order-status--completed {
	background-color: #e5fff2;
	color: #18ec7e;
}

.profile__order-status--processing {
	background-color: #fff0e8;
	color: #ff9151;
}

.profile__order-status--cancelled {
	background-color: #ffe3e3;
	color: #ff5154;
}

.profile__order-datetime {
	display: flex;
	gap: 10px;
}

.profile__order-date {
	color: #000;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.profile__order-time {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}
.main__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 64px;
}
.banner__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	gap: 32px;
	padding-bottom: 46px;
	min-height: 312px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
	background-image: url(../public/banner-background.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: top center;
}
.banner__superpass-promo {
	display: block;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
	line-height: 0;
}
.banner__superpass-promo img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 769px) {
	.banner__superpass-promo {
		aspect-ratio: 30 / 7;
	}
	.banner__superpass-promo img {
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}
}
#superpass-summary .gamepass-price__info-value--strike {
	text-decoration: line-through;
	color: rgba(0, 0, 0, 0.42);
	font-weight: 500;
}
#superpass-summary .gamepass-price__info-value--savings {
	color: #16a34a;
	font-weight: 700;
}
#superpass-summary .gamepass-price__info-value--final-pay {
	color: #15803d;
	font-weight: 700;
	font-size: 17px;
}
.superpass-card-rub {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.superpass-rub-was {
	text-decoration: line-through;
	color: rgba(0, 0, 0, 0.42);
	font-weight: 500;
	font-size: 14px;
}
.superpass-rub-final {
	font-weight: 700;
	color: #15803d;
}
.banner__top {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.banner__text-top {
	margin: 0;
	color: #000;
	font-size: 40px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -1.6px;
}
.banner__bottom-text-block {
	display: flex;
	align-items: center;
	gap: 8px;
}
.banner__bottom-text {
	color: #000;
	font-size: 40px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -1.6px;
}
.banner__bottom-safety {
	padding: 8px 12px;
	border-radius: 12px;
	background: #518eff;
	overflow: hidden;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 160px;
	width: auto;
}
.banner__bottom-safety .word-container {
	position: relative;
	height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: translateY(0);
}
.banner__bottom-safety .word {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	height: 52px;
	width: 100%;
	flex-shrink: 0;
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -1.28px;
	background: linear-gradient(180deg, #fff 50%, rgba(255, 255, 255, 0.48) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.banner__text {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.64px;
}
.buy-robux {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}
.buy-robux__methods {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 615px;
	width: 100%;
	flex: 1;
}
.buy-robux__method {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.buy-robux__method--selected {
	border: 2px solid #518eff;
	box-shadow: 0 4px 12px rgba(81, 142, 255, 0.15);
}
.buy-robux__method--disabled {
	opacity: 0.6;
	position: relative;
	background: #f8f8f8;
	border: 1px solid #e0e0e0;
	cursor: not-allowed;
}
.buy-robux__method--disabled.shake {
	animation: shake 0.5s ease-in-out;
}
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
	20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.buy-robux__method--disabled::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	z-index: 1;
}
.buy-robux__method-status {
	padding: 10px 16px;
	color: #ff5154;
	font-family: 'Inter', 'Roboto Flex', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.48px;
	border-radius: 12px;
	background: #ffe3e3;
	position: relative;
	z-index: 2;
}
.buy-robux__method-left {
	flex-shrink: 0;
	width: 250px;
}
.buy-robux__method-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
}
.buy-robux__method-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.buy-robux__method-square {
	width: 100%;
	height: 190px;
	background-color: #F1F6FF;
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}

.robux-particles-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.robux-particle {
	position: absolute;
	top: -30px;
	width: 32px;
	height: 17px;
	animation: fall linear infinite, fallMove linear infinite;
	pointer-events: none;
	transform-origin: center center;
}

.robux-particle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: rotate(var(--rotation, 0deg)) scale(var(--scale, 1));
	transform-origin: center center;
}

@keyframes fall {
	0% {
		opacity: 0;
	}
	10% {
		opacity: var(--base-opacity, 0.5);
	}
	90% {
		opacity: var(--base-opacity, 0.5);
	}
	100% {
		opacity: 0;
	}
}

@keyframes fallMove {
	0% {
		transform: translateY(-30px);
	}
	100% {
		transform: translateY(220px);
	}
}
.buy-robux__method-character {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
	position: relative;
	z-index: 2;
}
.buy-robux__method-title {
	color: #000;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
}
.buy-robux__method-advantages {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(0, 0, 0, 0.3);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
}
.buy-robux__method-exchange-rate {
	padding: 8px 12px;
	color: #518eff;
	font-family: 'Inter', 'Roboto Flex', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.42px;
	border-radius: 8px;
	background: #f1f6ff;
	text-align: center;
	align-self: flex-start;
	margin-top: auto;
}
.buy-robux__block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    background: #fff;
    gap: 16px;
    flex: 1;
    align-self: flex-start;
}
.buy-robux__exchange-rate {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	padding: 10px 16px;
	color: #518eff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.64px;
	border-radius: 12px;
	background: #f1f6ff;
}
.buy-robux__exchange-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.buy-robux__currency-inputs {
	display: flex;
	align-items: center;
}
.buy-robux__currency-input {
	max-width: 352px;
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.02);
	background: rgba(13, 13, 13, 0.02);
	overflow: hidden;
}
.buy-robux__currency-input input {
	max-width: 352px;
	width: 100%;
	min-width: 60px;
	padding: 30px 12px;
	text-align: center;
	color: #000;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -1.6px;
	border: none;
	background: transparent;
	outline: none;
}
.buy-robux__currency-symbol {
	padding: 0 16px;
	color: #666;
	font-size: 18px;
	font-weight: 500;
	user-select: none;
	pointer-events: none;
}
.buy-robux__exchange-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 100px;
	background: #518eff;
	cursor: pointer;
	transition: background 0.2s;
}
.buy-robux__slider-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 28px;
}

.buy-robux__slider-container {
	position: relative;
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
}
.buy-robux__arrow-block {
	padding: 27px;
}
.buy-robux__slider-track {
	position: absolute;
	width: 100%;
	height: 12px;
	background: #f9f9f9;
	border-radius: 6px;
}

.buy-robux__slider-progress {
	position: absolute;
	height: 12px;
	background: #518eff;
	border-radius: 6px;
}

.buy-robux__slider {
	position: absolute;
	width: 100%;
	height: 20px;
	background: transparent;
	outline: none;
	appearance: none;
	cursor: pointer;
	z-index: 2;
}

.buy-robux__slider::-webkit-slider-thumb {
	appearance: none;
	width: 0;
	height: 0;
	background: transparent;
	cursor: pointer;
}

.buy-robux__slider::-moz-range-thumb {
	width: 0;
	height: 0;
	background: transparent;
	cursor: pointer;
	border: none;
}

.buy-robux__slider-thumb {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 10px;
	border: 0.5px solid rgba(0, 0, 0, 0.06);
	padding: 6px 8px;
	white-space: nowrap;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 120px;
	background: #f9f9f9;
	transform: translateX(-6px);
	pointer-events: none;
	z-index: 3;
}

.buy-robux__slider-thumb svg {
	pointer-events: none;
}

.buy-robux__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.buy-robux__profile-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.buy-robux__profile-text {
	color: #000;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}
.buy-robux__profile {
	padding: 16px 76px;
	width: 100%;
	text-align: center;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.02);
	background: rgba(13, 13, 13, 0.02);
	box-sizing: border-box;
}
.buy-robux__profile::placeholder {
	color: rgba(0, 0, 0, 0.4);
	opacity: 1;
	-webkit-text-fill-color: rgba(0, 0, 0, 0.4);
}

/* Spacing for superpass summary nickname block */
#superpass-summary .buy-robux__profile-block { margin-bottom: 8px; }
.buy-robux__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 16px 12px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	border-radius: 10px;
	background: #518eff;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}
.buy-robux__button:hover {
	background: #4374d9;
}
.buy-robux__reserve {
	color: rgba(0, 0, 0, 0.3);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.64px;
	text-align: center;
}
.buy-robux__amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	justify-content: center;
}
.buy-robux__amount-block {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #518eff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.64px;
}
.buy-robux__amount-block:hover {
	border-color: #518eff;
	box-shadow: 0 2px 8px rgba(81, 142, 255, 0.1);
}
.buy-robux__amount-block.active {
	border-color: #518eff;
	background: #f1f6ff;
	box-shadow: 0 4px 12px rgba(81, 142, 255, 0.15);
}
.buy-robux__amount-block.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: #f8f8f8;
	border-color: #e0e0e0;
}
.buy-robux__amount-block.disabled:hover {
	border-color: #e0e0e0;
	box-shadow: none;
}
.buy-robux__amount-block svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.why-us-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-top: 64px;
}
.section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.section-title {
	color: #000;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.section-subtitle {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
	max-width: 518px;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.feature-card {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 16px;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
}
.feature-card.featured {
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #518eff;
}
.feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 12px;
	background: rgba(81, 142, 255, 0.12);
}
.feature-card.featured .feature-icon {
	background: #ffffff3d;
}
.feature-stat {
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.feature-card.featured .feature-stat {
	color: #fff;
}
.feature-description {
	padding: 16px;
	color: #00000080;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: rgba(0, 0, 0, 0.02);
}
.feature-card.featured .feature-description {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.24);

	background: rgba(255, 255, 255, 0.04);
}

.amounts {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-top: 64px;
}
.amounts__text-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.amounts__title {
	color: #000;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.amounts__text {
	color: rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
	max-width: 450px;
}
.amounts__content {
	display: flex;
	gap: 16px;
	padding: 16px;
	width: 100%;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #518eff;
}
.amounts__block {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	width: 100%;
	border-radius: 12px;
	min-height: 128px;
	border: 1px solid rgba(255, 231, 231, 0.12);
	background: rgba(255, 255, 255, 0.12);
}
.amounts__icon {
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.24);
}
.amounts__amount {
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.amounts__description {
	color: rgba(255, 255, 255, 0.5);
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.proposal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	gap: 12px;
	width: 100%;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
	min-height: 356px;
	padding: 42px 12px;
	margin-top: 64px;
}
.proposal__text {
	max-width: 823px;
	color: #000;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
}
.proposal__button {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.72px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #518eff;
}
.buy-steps-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-top: 64px;
}
.steps-wrapper {
	display: flex;
	align-self: start;
	gap: 16px;
}
.step-with-arrow {
	position: relative;
	flex: 1;
}
.step-without-arrow {
	flex: 1;
}
.step-item {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 16px;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: #fff;
	flex: 1;
	height: 100%;
}
.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 16px 0 17px;
	color: #518eff;
	font-size: 24px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.96px;
	border-radius: 12px;
	border: 1px solid rgba(81, 142, 255, 0.24);
	background: rgba(81, 142, 255, 0.06);
}
.step-title {
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.96px;
}
.step-description {
	padding: 16px;
	height: 100%;
	color: rgba(0, 0, 0, 0.5);
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	background: rgba(0, 0, 0, 0.02);
}
.arrow-separator {
	border-radius: 100px;
	padding: 8px;
	background: rgba(81, 142, 255, 0.18);
	backdrop-filter: blur(8px);
	position: absolute;
	bottom: 50px;
	right: -36px;
	z-index: 10;
}
.arrow-background {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 100px;
	background: #518eff;
}
.faq {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin: 64px 0;
}
.faq__title {
	color: #000;
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -1.28px;
}
.faq__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 980px;
	width: 100%;
}
.faq__block {
	overflow: hidden;
	transition: all 0.3s ease;
	padding: 24px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #fff;
}

.faq__block.collapsed {
	height: auto;
}

.faq__block.collapsed .faq__block-hr {
	opacity: 0;
	height: 0;
	margin: 0;
	transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.faq__block.collapsed .faq__bottom-block {
	opacity: 0;
	height: 0;
	padding: 0 8px;
	margin: 0;
	transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
	overflow: hidden;
}

.faq__block-hr {
	transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.faq__bottom-block {
	transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

.faq__top-block button {
	background: none;
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.faq__top-block button svg {
	transition: transform 0.3s ease;
}

.faq__block.collapsed .faq__top-block button svg {
	transform: rotate(180deg);
}
.faq__top-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.faq__answer {
	color: #000;
	font-family: 'Inter', 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.54px;
}
.faq__block-hr {
	margin-top: 12px;
	width: 100%;
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
}
.faq__bottom-block {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 6px;
	background: rgba(0, 100, 230, 0.12);
}
.faq__question-hr {
	width: 2px;
	height: 16px;
	border-radius: 100px;
	background: #0064e6;
}
.faq__question {
	color: rgba(0, 0, 0, 0.5);
	font-family: 'Inter', 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.54px;
}

@media (max-height: 844px) {
	.set-price__block {
		margin: 110px auto;
	}
}
@media (max-width: 1200px) {
	.header__menu {
		position: relative;
		transform: translate(0, 0);
		left: 0;
		top: 0;
	}
	.payment:nth-child(3),
	.payment:nth-child(4) {
		grid-column: span 3;
	}
	.payment:nth-child(5) {
		grid-column: span 6;
	}
	.faq__title {
		font-size: 24px;
		letter-spacing: -0.96px;
	}
	.features-grid {
		grid-template-columns: 1fr 1fr;
	}
	.arrow-separator {
		display: none;
	}
	.steps-wrapper {
		flex-direction: column;
	}
}
@media (max-width: 1000px) {
	.header__pc {
		display: none;
	}
	.header__phone {
		display: block;
	}
	.burger {
		display: block;
	}
	.header {
		padding: 0;
		background: none;
		border: none;
		box-shadow: none;
	}
	.footer__info {
		flex-direction: column;
	}
	.footer__text-block,
	.footer__text-right {
		flex-direction: column;
		gap: 20px;
	}
	.footer__info-menu {
		gap: 20px;
		margin: 28px 0;
	}
	.footer__info-menu-item a {
		font-size: 15px;
		letter-spacing: -0.6px;
	}
	.wrapper {
		padding: 16px 16px 14px 16px;
	}
	.amounts__content {
		flex-direction: column;
	}
	.amounts__block {
		padding: 8px 12px;
		gap: 12px;
		min-height: auto;
	}
	.amounts__amount,
	.amounts__title,
	.step-title {
		font-size: 18px;
		letter-spacing: -0.72px;
	}
	.amounts__description,
	.amounts__text,
	.step-subtitle {
		font-size: 14px;
		letter-spacing: -0.56px;
	}
	.amounts__icon {
		padding: 9px;
	}
	.amounts__icon svg {
		width: 24px;
		height: 24px;
	}
	.step-number {
		padding: 10px 0 11px;
		width: 42px;
		height: 42px;
		border-radius: 10px;
		font-size: 16px;
		letter-spacing: -0.64px;
	}
	.banner__block {
		gap: 50px;
		padding-bottom: 49px;
		background-image: url(../public/banner-background-mobile.png);
	}
	.banner__text-top {
		font-size: 24px;
		letter-spacing: -0.96px;
	}
	.banner__bottom-text,
	.buy-robux__currency-input input {
		font-size: 24px;
		letter-spacing: -0.96px;
	}
	.buy-robux__currency-input input {
		padding: 28px 8px;
	}
	.banner__bottom-safety .word {
		font-size: 20px;
		letter-spacing: -0.8px;
	}
	.banner__bottom-safety {
		min-width: 120px;
		height: 42px;
	}
	.banner__bottom-safety .word-container {
		height: 42px;
	}
	.banner__bottom-safety .word {
		height: 42px;
	}
	.banner__text {
		font-size: 14px;
		letter-spacing: -0.56px;
	}
	.buy-robux {
		flex-direction: column-reverse;
	}
	.buy-robux__methods {
		max-width: none;
	}
	.buy-robux__method-advantages,
	.buy-robux__reserve,
	.buy-robux__exchange-rate,
	.buy-robux__profile-text {
		font-size: 14px;
		letter-spacing: -0.56px;
	}
	.buy-robux__currency-input input,
	.buy-robux__currency-input {
		max-width: none;
	}
	.slider-thumb-text {
		font-size: 16px;
		letter-spacing: -0.64px;
	}
	.buy-robux__arrow-block {
		padding: 16px;
	}
	.buy-robux {
		margin-top: 64px;
	}
	.buy-robux__amounts {
		gap: 8px;
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.buy-robux__amounts::-webkit-scrollbar {
		display: none;
	}
	.buy-robux__amount-block {
		padding: 10px 12px;
		font-size: 14px;
		letter-spacing: -0.56px;
		flex-shrink: 0;
	}
	.buy-robux__amount-block svg {
		width: 16px;
		height: 16px;
	}
	.buy-robux__method {
		flex-direction: column;
		gap: 12px;
	}
	.buy-robux__method-left {
		width: 100%;
		align-self: center;
		max-width: 90%;
	}
	.buy-robux__method-square {
		height: 140px;
	}
	.buy-robux__method-right {
		gap: 8px;
	}
	.buy-robux__method-title {
		font-size: 16px;
	}
	.buy-robux__method-advantages {
		font-size: 13px;
	}
	.buy-robux__method-exchange-rate {
		align-self: stretch;
		text-align: center;
	}
}

@media (max-width: 767px) {
	.footer__text-block {
		display: none;
	}
	.footer__copyright {
		display: none;
	}
	.footer__logo-block svg {
		display: none;
	}
	.footer__info-menu {
		gap: 16px;
		margin: 24px 0;
		flex-direction: column;
		align-items: center;
	}
	.footer__info-menu-item a {
		font-size: 14px;
		letter-spacing: -0.56px;
	}
	.footer__info-menu-item img {
		width: 18px;
		height: 18px;
	}
	.footer__legal p {
		font-size: 12px;
		letter-spacing: -0.48px;
	}
	.payment__block {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.payment {
		grid-column: span 1 !important;
	}
	.profile__table-header-cell:not(:nth-child(1)) {
		color: #518eff;
		pointer-events: none;
		cursor: default;
		font-size: 0;
	}
	.profile__table-header-cell:not(:first-child) {
		display: none;
	}
	.profile__table-row {
		flex-wrap: wrap;
	}
	.profile__table-cell {
		min-width: 50%;
	}
	.profile__table-cell:nth-child(4n-3),
	.profile__table-cell:nth-child(4n-2) {
		padding: 6px 16px 16px;
	}
	.profile__table-cell:nth-child(4n),
	.profile__table-cell:nth-child(3n) {
		padding: 16px 16px 6px;
	}
	.profile__order-status {
		padding: 8px 12px;
	}
	.profile__order-date,
	.profile__order-time,
	.profile__order-id,
	.profile__order-amount,
	.profile__order-status {
		font-size: 14px;
		letter-spacing: -0.56px;
	}
	.profile__table-cell:nth-child(3n),
	.profile__table-cell:nth-child(4n-2) {
		justify-content: end;
	}
	.profile__table-cell:has(.profile__order-datetime) {
		order: 1 !important;
	}
	.profile__table-cell:has(.profile__order-status) {
		order: 2;
	}
	.profile__order-id {
		order: 3;
	}
	.profile__order-amount {
		order: 4;
	}
	.faq__title {
		font-size: 18px;
		letter-spacing: -0.72px;
	}
	.feature-icon {
		padding: 9px;
	}
	.feature-icon svg {
		width: 24px;
		height: 24px;
	}
	.feature-card {
		gap: 12px;
	}
	.features-grid {
		grid-template-columns: 1fr;
	}
	.feature-stat,
	.section-title {
		font-size: 18px;
		letter-spacing: -0.72px;
	}
	.feature-description,
	.section-subtitle {
		font-size: 14px;
		letter-spacing: -0.56px;
	}
}
@supports (-webkit-touch-callout: none) {
	@media (max-width: 767px) {
		.burger-menu__my-profile {
			margin-bottom: 60px;
			padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		}
	}
}

.faq {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin: 64px 0;
}
.faq__title {
	color: #000;
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -1.28px;
}
.faq__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 980px;
	width: 100%;
}
.faq__block {
	overflow: hidden;
	transition: all 0.3s ease;
	padding: 24px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #fff;
	cursor: pointer;
}
.faq__block:hover {
	border-color: #518eff;
	box-shadow: 0 2px 8px rgba(81, 142, 255, 0.1);
}

.faq__block.collapsed {
	height: auto;
}

.faq__block.collapsed .faq__block-hr {
	opacity: 0;
	height: 0;
	margin: 0;
	transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.faq__block.collapsed .faq__bottom-block {
	opacity: 0;
	height: 0;
	padding: 0 8px;
	margin: 0;
	transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
	overflow: hidden;
}

.faq__block-hr {
	transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.faq__bottom-block {
	transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

.faq__top-block button {
	background: none;
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.faq__top-block button svg {
	transition: transform 0.3s ease;
}

.faq__block.collapsed .faq__top-block button svg {
	transform: rotate(180deg);
}
.faq__top-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.faq__answer {
	color: #000;
	font-family: 'Inter', 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.54px;
}
.faq__block-hr {
	margin-top: 12px;
	width: 100%;
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
}
.faq__bottom-block {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 6px;
	background: rgba(0, 100, 230, 0.12);
}
.faq__question-hr {
	width: 2px;
	height: 16px;
	border-radius: 100px;
	background: #0064e6;
}
.faq__question {
	color: rgba(0, 0, 0, 0.5);
	font-family: 'Inter', 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.54px;
}

/* Superpass cards */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; position: relative; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; height: 100%; }
.card:hover { border-color: rgba(81,142,255,0.3); box-shadow: 0 2px 12px rgba(81,142,255,0.1); }
.card.selected { border-color: #518eff; box-shadow: 0 2px 12px rgba(81,142,255,0.2); }
.card.selected .card__title { color: #518eff; }
.card__check { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #518eff 0%, #4374d9 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(81,142,255,0.4); opacity: 0; transition: opacity .25s ease; z-index: 3; }
.card.selected .card__check { opacity: 1; }
.card.selected .card__check:hover { box-shadow: 0 6px 16px rgba(81,142,255,0.5); }
.card__check svg { width: 18px; height: 18px; }
.card__check svg path { stroke: #fff; stroke-width: 2; }
.card__image { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #f3f5f7 0%, #e8eaed 100%); overflow: hidden; flex-shrink: 0; }
.card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex-grow: 0; }
.card__title { font-weight: 600; font-size: 15px; line-height: 1.3; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 2); }
.card__subtitle { font-size: 13px; color: rgba(0,0,0,0.65); line-height: 1.3; }
.rating { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 0; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__stars svg { width: 11px; height: 11px; }
.rating__value { font-size: 11px; color: rgba(0,0,0,0.55); font-weight: 500; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; transition: transform .05s ease, background .2s ease, opacity .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: #518eff; color: #fff; }
.btn-primary:hover { background: #3d79ea; }
.btn-secondary { background: #f3f5f7; color: #111; }
.btn-secondary:hover { background: #e9edf2; }
.btn.disabled, .btn:disabled { opacity: .6; cursor: not-allowed; }

.superpass-nav.step-buttons { gap: 12px; }
#superpass-back.step-back-button.disabled { opacity: .4; pointer-events: none; }
#superpass-next.set-price__button.disabled { opacity: .6; pointer-events: none; }

/* Horizontal slider when overflow */
/* Vertical list viewport */
.superpass-list { display: flex; flex-direction: column; gap: 12px; }
.superpass-viewport { overflow-y: auto; max-height: 420px; padding-right: 4px; }
.superpass-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.superpass-language-switcher { display: flex; align-items: center; gap: 4px; background: #f7f9fc; border-radius: 12px; padding: 4px; border: 1px solid rgba(0,0,0,0.08); }
.superpass-lang-btn { background: transparent; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; color: rgba(0,0,0,0.6); min-width: 60px; }
.superpass-lang-btn img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.superpass-lang-btn:hover { background: rgba(81, 142, 255, 0.1); }
.superpass-lang-btn.active { background: #518eff; color: #fff; box-shadow: 0 2px 8px rgba(81, 142, 255, 0.3); }
.superpass-lang-btn span { line-height: 1; white-space: nowrap; }
.superpass-search { flex: 1; position: relative; }
.superpass-search input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: #f7f9fc; color: #111; font-weight: 500; }
.superpass-search input::placeholder { color: rgba(0,0,0,0.4); }

/* Compact cards for passes */
.cards-grid--compact { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; }
.cards-grid--compact .card__image { aspect-ratio: 1; background: linear-gradient(135deg, #f3f5f7 0%, #e8eaed 100%); border-radius: 8px; margin: 8px 8px 0 8px; }
.cards-grid--compact .card__image img { border-radius: 8px; }
.cards-grid--compact .card__body { padding: 8px 10px; gap: 6px; }
.cards-grid--compact .card__title { font-size: 14px; min-height: auto; font-weight: 700; }
.cards-grid--compact .card__subtitle { font-size: 12px; display: flex; flex-direction: row; gap: 6px; align-items: baseline; }
.cards-grid--compact .card__subtitle span:first-child { color: #518eff; font-weight: 600; font-size: 14px; }
.cards-grid--compact .card__subtitle span:nth-child(2) { color: rgba(81,142,255,0.4); font-weight: 500; font-size: 16px; margin: 0 2px; }
.cards-grid--compact .card__subtitle span:last-child { color: rgba(0,0,0,0.6); font-weight: 400; font-size: 12px; }

@media (max-width: 768px) {
	.cards-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; }
	.cards-grid--compact { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; }
	.card { border-radius: 12px; }
	.card__check { width: 28px; height: 28px; top: 8px; right: 8px; }
	.card__check svg { width: 16px; height: 16px; }
	.card__body { padding: 8px 10px; gap: 5px; }
	.card__title { font-size: 13px; line-height: 1.2; min-height: calc(1.2em * 2); }
	.card__subtitle { font-size: 12px; }
	.rating { gap: 4px; min-height: 16px; }
	.rating__stars svg { width: 10px; height: 10px; }
	.rating__value { font-size: 10px; }
}

/* Order section layout to keep nav at bottom */
.buy-robux__order-section { display: flex; flex-direction: column; min-height: 100%; flex: 1; }
#superpass-nav { margin-top: 12px; }
.superpass-support { display: none; margin: 4px 0; width: 100%; padding: 12px 16px; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -0.64px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: #5865F2; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; box-shadow: 0 8px 24px rgba(88, 101, 242, 0.35); transition: all 0.3s ease; }
.superpass-support:hover { background: #4752C4; box-shadow: 0 10px 28px rgba(88,101,242,0.5); }
.superpass-support svg { color: currentColor; }
#superpass-summary .superpass-note { margin-top: 6px; margin-bottom: 10px; color: #8a2d00; background: #fff5e6; border: 1px solid #ffd8a8; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.56px; text-align: center; }

@media (min-width: 1000px) {
	.buy-robux__method-exchange-rate {
		font-size: 16px;
		letter-spacing: -0.48px;
	}
	.buy-robux__exchange-rate {
		font-size: 17px;
		letter-spacing: -0.68px;
	}
}

.buy-robux__preorder-notice {
	display: none;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(81, 142, 255, 0.1);
	border: 1px solid rgba(81, 142, 255, 0.35);
	color: #1e3a5f;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.02em;
}
.buy-robux__preorder-notice svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: #518eff;
}

.purchase-legal-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0 10px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	font-size: 14px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.72);
	line-height: 1.5;
	letter-spacing: -0.02em;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.purchase-legal-row:hover {
	border-color: rgba(81, 142, 255, 0.22);
	box-shadow: 0 2px 8px rgba(81, 142, 255, 0.08);
}
.purchase-legal-row:focus-within {
	border-color: rgba(81, 142, 255, 0.32);
}
.purchase-legal-row__check {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}
.purchase-legal-row__input {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.purchase-legal-row__box {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 7px;
	border: 2px solid rgba(0, 0, 0, 0.12);
	background: #fafbff;
	box-sizing: border-box;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.purchase-legal-row:hover .purchase-legal-row__box {
	border-color: rgba(81, 142, 255, 0.45);
	background: #fff;
}
.purchase-legal-row__input:checked + .purchase-legal-row__box {
	border-color: #518eff;
	background: #518eff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2L6.4 11l6.1-6.1' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
}
.purchase-legal-row__input:focus-visible + .purchase-legal-row__box {
	outline: 2px solid rgba(81, 142, 255, 0.45);
	outline-offset: 2px;
}
.purchase-legal-row__text {
	flex: 1;
	min-width: 0;
}
.purchase-legal-row a {
	color: #518eff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(81, 142, 255, 0.35);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.purchase-legal-row a:hover {
	color: #3a7ae8;
	border-bottom-color: rgba(58, 122, 232, 0.55);
}

@media (max-width: 640px) {
	.purchase-legal-row {
		margin: 12px 0 8px;
		padding: 8px 10px;
		gap: 8px;
		border-radius: 10px;
		font-size: 13px;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}
	.purchase-legal-row__check {
		width: 19px;
		height: 19px;
		margin-top: 0;
	}
	.purchase-legal-row__box {
		border-radius: 6px;
		border-width: 1.5px;
	}
	.purchase-legal-row__input:checked + .purchase-legal-row__box {
		background-size: 12px 12px;
	}
	.purchase-legal-row__input:focus-visible + .purchase-legal-row__box {
		outline-width: 1.5px;
		outline-offset: 1px;
	}
}

.vk-reviews {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	margin-top: 64px;
	padding: 0 16px 40px;
}
.vk-reviews .section-header {
	gap: 10px;
}
.vk-reviews__lead {
	margin: 0;
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.5px;
	color: rgba(0, 0, 0, 0.55);
	max-width: 560px;
}
.vk-reviews__lead-link {
	color: #518eff;
	text-decoration: none;
	font-weight: 600;
}
.vk-reviews__lead-link:hover {
	text-decoration: underline;
}
.vk-reviews__carousel-wrap {
	display: flex;
	align-items: stretch;
	gap: 14px;
	width: 100%;
	max-width: 1120px;
}
.vk-reviews__viewport-outer {
	position: relative;
	flex: 1;
	min-width: 0;
}
.vk-reviews__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	padding: 4px 0;
}
.vk-reviews__viewport::-webkit-scrollbar {
	display: none;
}
.vk-reviews__edge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 44px;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.28s ease;
}
.vk-reviews__edge--left {
	left: 0;
	background: linear-gradient(to right, rgba(249, 249, 249, 0.95) 0%, rgba(249, 249, 249, 0.45) 50%, rgba(249, 249, 249, 0) 100%);
}
.vk-reviews__edge--right {
	right: 0;
	background: linear-gradient(to left, rgba(249, 249, 249, 0.95) 0%, rgba(249, 249, 249, 0.45) 50%, rgba(249, 249, 249, 0) 100%);
}
.vk-reviews__viewport-outer--at-start .vk-reviews__edge--left {
	opacity: 0;
}
.vk-reviews__viewport-outer--at-end .vk-reviews__edge--right {
	opacity: 0;
}
.vk-reviews__track {
	display: flex;
	flex-direction: row;
	gap: 18px;
	padding: 8px 16px 16px;
	min-width: min-content;
	box-sizing: border-box;
}
.vk-reviews__card {
	flex: 0 0 240px;
	width: 240px;
	max-width: 240px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	min-height: 260px;
	padding: 20px 16px 16px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}
.vk-reviews__card:hover {
	border-color: rgba(81, 142, 255, 0.45);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.vk-reviews__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(81, 142, 255, 0.2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
}
.vk-reviews__author {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.82);
	letter-spacing: -0.3px;
	line-height: 1.3;
}
.vk-reviews__text {
	color: rgba(0, 0, 0, 0.62);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.02em;
	margin: 0;
	text-align: center;
	align-self: stretch;
	flex: 1;
}
.vk-reviews__date {
	align-self: flex-end;
	width: 100%;
	text-align: right;
	font-size: 12px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.38);
	padding-top: 2px;
}
.vk-reviews__card-btn {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 10px 14px;
	border-radius: 10px;
	background: linear-gradient(180deg, #5c97ff 0%, #518eff 100%);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.35px;
	text-decoration: none;
	border: 1px solid rgba(81, 142, 255, 0.45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.vk-reviews__card-btn:hover {
	background: linear-gradient(180deg, #4d8af5 0%, #4374d9 100%);
	border-color: rgba(67, 116, 217, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.vk-reviews__card-btn svg {
	flex-shrink: 0;
	opacity: 0.95;
}
.vk-reviews__nav {
	flex-shrink: 0;
	align-self: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.07);
	background: #fff;
	color: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.vk-reviews__nav:hover:not(:disabled) {
	background: rgba(81, 142, 255, 0.08);
	border-color: rgba(81, 142, 255, 0.3);
	color: #518eff;
	box-shadow: 0 4px 14px rgba(81, 142, 255, 0.2);
}
.vk-reviews__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	box-shadow: none;
}
@media (max-width: 640px) {
	.vk-reviews__nav {
		display: none;
	}
}