/* Radux — main.css
 * Generic base stylesheet. Brand-specific fidelity overrides live in
 * /public/<brand>/brand.css and are loaded after this file.
 */
:root {
	--color-brand-1: #E1A324;
	--color-brand-2: #926D20;
	--color-brand-3: #845E13;
	--color-surface-1: #222324;
	--color-surface-2: transparent;
	--color-surface-3: transparent;
	--color-surface-3-border: transparent;
	--color-surface-4: transparent;
	--color-separator: #1A3B38;
	--color-highlight: #AAAAFF;

	--color-link: #926D20;
	--color-input-bg: #AAAAFF;
	--color-input-border: transparent;

	--color-btn-primary: linear-gradient(180deg, #FFFF97 0%, #FFCA40 50%, #C67A1B 100%);
	--color-btn-primary-border: linear-gradient(180deg, #FFFF97 0%, #FFCA40 50%, #C67A1B 100%);
	--color-btn-primary-text: var(--color-text-dark);
	--color-btn-primary-hover: linear-gradient(180deg, #FFFF97 0%, #FFCA40 50%, #C67A1B 100%);
	--color-btn-primary-hover-border: linear-gradient(180deg, #FFFF97 0%, #FFCA40 50%, #C67A1B 100%);
	--color-btn-primary-hover-text: var(--color-text);
	--color-btn-secondary: transparent;
	--color-btn-secondary-border: #FFCA40;
	--color-btn-secondary-text: var(--color-text);
	--color-btn-secondary-hover: #FFCA40;
	--color-btn-secondary-hover-border: #FFCA40;
	--color-btn-secondary-hover-text: var(--color-text-dark);

	--color-dialog-header: #2D6560;
	--color-dialog-bg: #0E201E;
	--color-backdrop: #050B0AE6; /* 050B0A with 90% opacity*/
	--color-header-bg: linear-gradient(90deg, var(--color-text-dark) 7.21%, #34756f 100%);
	--color-header-logo-bg: transparent;
	--color-header-nav-bg: transparent;
	--color-navbar-bg: transparent;
	--color-navbar-slider-bg: transparent;
	--color-mobile-bar-bg: transparent;
	--color-mobile-bar-border: transparent;
	--color-mobile-bar-color: transparent;

	--color-vip-level-1: #915B25;
	--color-vip-level-2: #A1A1A1;
	--color-vip-level-3: #E1A324;
	--color-vip-level-4: #C8C3E8;
	--color-vip-level-5: #C3E0E8;
	--color-vip-level-6: #590098;
	--color-vip-level-1-text: #FFFFFF;
	--color-vip-level-2-text: #000000;
	--color-vip-level-3-text: #000000;
	--color-vip-level-4-text: #000000;
	--color-vip-level-5-text: #000000;
	--color-vip-level-6-text: #000000;
	--color-vip-glow-light: #47C5AE;
	--color-vip-glow-dark: #2d6560;
	--color-vip-separator: #A0D5D0;
	--color-vip-card-bg: #091514;

	--color-dialog-promo-bg: #091514;
	--color-dialog-promo-text-bg: #0E201E;

  /* Mapped from original colors.scss */
  --color-bg:            #121212;   /* $color-1 — body bg */
  --color-drawer:        #091514;   
  --color-lobby-bg:      #171614;   /* $color-20 — lobby / page bg */
  --color-border:        #404040;   /* $color-12 */
  --color-primary:       #926d20;   /* $color-11 — gold */
  --color-primary-hover: #b08030;
  --color-text:          #FDFCFA;   /* $color-16 — almost white (nav links) */
  --color-text-dark:     #000000;   
	--color-text-accent:   #FFCA40;   
  --color-text-white:    #FFFFFF;   /* $color-10 */
  --color-text-muted:    #8A8A8A;   /* $color-33 */
  --color-danger:        #D72919;   /* $color-4 */
  --color-waning:        #FFCA40;   
  --color-info:          #17a2b8;   
  --color-success:       #489727;   /* $color-6 */
  --color-footer-bg:     #09090A;   /* $color-3 */
  --font: 'Proxima Nova', 'Segoe UI', system-ui, sans-serif;
  --radius: 100px;   /* original uses 3px border-radius */
  --header-height: 64px;
	--navbar-height: 66px;
	--header-height-mob: 56px;
	--navbar-height-mob: 50px;
}

/* User/Guest content control
[isonlyforguest]/[isonlyforuser] -> pagePartComponents control
.is-logged-in -> set in head by script that checks auth cookie
data-overlay-guest/-user/user-restricted -> header navs

Shared shell:
all navs rendered with hidden except guest nav
.is-logged-in hides guest nav and reserves space for user nav - prevents cls
hydration removes hidden attr after checking auth

Non cacheable pages:
user state is known on render

user-restricted edge case:
user vs user-restricted settled client-side after request
user hidden and user-restricted shown -> cls because space was reserved for user
*/
html.is-logged-in [data-overlay-guest],
html.is-logged-in [isonlyforguest],
html:not(.is-logged-in) [isonlyforuser] {
	display: none !important;
}
html.is-logged-in [data-overlay-user][hidden] {
	visibility: hidden;
}
html:not(.is-logged-in) [data-overlay-user][hidden],
html [data-overlay-user-restricted][hidden],
html [data-overlay-guest][hidden],
html #app[data-user-state="restricted"] [data-overlay-user][hidden] {
	display: none;
}

html {
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
	scrollbar-gutter: stable;
	background-color: #000;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;  
	background: var(--color-bg);
}

body.scroll-blocked,
body.sidebar-open,
body.auth-dialog-open,
body.deposit-dialog-open,
body.withdraw-dialog-open,
body.search-dialog-open,
body.promotion-dialog-open,
body.notification-dialog-open,
body.base-notice-dialog-open,
body.wol-open {
  overflow: hidden;
}

#app {
  /* clip (not hidden) prevents horizontal overflow WITHOUT establishing a
   * scroll container, so descendant `position: sticky` (catalog bar) works. */
  overflow-x: clip;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1;
	letter-spacing: 0;
}
#app.activeRtl {
  font-family: Arial, sans-serif;
}

#main {
  padding-top: var(--header-height);
}

*::-webkit-scrollbar {
  width: 4px;
	height: 4px;
}
*::-webkit-scrollbar-track {
  background: var(--color-separator);
}
*::-webkit-scrollbar-thumb {
  background: #A6A6CE;
  border-radius: 10px;
  border: 2px solid transparent;
}

@media screen and (max-width: 768px) {
	#main {
		padding-top: var(--header-height-mob);
	}
}

/* ##General */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button {
	border: none;
  background: transparent;
	color: inherit;
	font-weight: 600;
	cursor: pointer;
}
input {
	appearance: none;
  -webkit-appearance: none;
	border: none;
	border-radius: 4px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
	padding: 12px 24px;
  margin: 0;
  transition: opacity 0.3 ease;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-input-bg) inset;
    -webkit-text-fill-color: inherit;
}
.input-wrapper {
	background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
	border-radius: 4px;
	transition: opacity 0.3 ease;
}
.input-wrapper input {
	background: unset;
  border: unset;
	border-radius: unset;
	transition: unset;
}
input:disabled {
	pointer-events: none;
	opacity: 0.3;
}
input::placeholder {
	font-style: italic;
	font-weight: 300;
	letter-spacing: 0.05em;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="checkbox"] {
	padding: 0;
	appearance: auto;
  -webkit-appearance: checkbox;
	background: var(--color-input-bg);
  accent-color: var(--color-brand-2);
}
input[type="radio"] {
	padding: 0;
}

.details-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.details-input {
	width: 100%;
	background-color: var(--color-surface-1);
	color: var(--color-text-white)fff;
	font-size: 14px;
	font-weight: 400;
	border-radius: 4px;
	border: none;
	padding: 10px 16px;
	box-sizing: border-box;
}

.password-field-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 4px;
}

.password-field-wrap input {
	width: 100%;
	padding-right: 48px;
}

.password-toggle {
	position: absolute;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.details-input--outlined {
	background-color: transparent;
	border: 1px solid var(--color-surface-1);
}

.details-input:not(.details-input--outlined):focus {
	background-color: #aaaaff;
	color: var(--color-text-dark);
	outline: none;
}

.details-input-icon {
	position: absolute;
	right: 20px;
	display: flex;
	align-items: center;
	pointer-events: none;
}
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

table {
  border-spacing: 0;
}
th, td {
  padding: 0;
  text-align: left;
  font-weight: normal;
}

/* ##Utilities ##BaseComponents */
.base-btn {
	position: relative;
	z-index: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	height: 36px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	opacity: 1;
	transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.base-btn[hidden] {
	display: none;
}
.base-btn:disabled {
	opacity: 0.3;
	pointer-events: none;
}
.base-btn__important {
	gap: 10px;
	text-transform: uppercase;
	height: 48px;
	font-size: 14px;
	font-weight: 700;
}
.base-btn::before, .base-btn::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: opacity 0.3s ease;
}
.base-btn::before,
.base-btn:hover::after {
	opacity: 1;
}
.base-btn:hover::before,
.base-btn::after {
	opacity: 0;
}

@media (max-width: 768px) {
	.base-btn {
		padding: 0 16px;
		height: 30px;
	}
}
/*
	Supports gradient,
	Supports border gradient if background is not transparent
	Btn config:
	Height - set height
	Width - padding or width
	background - 						.base-btn::before { background: }
	background hover - 			.base-btn::after { background: }
	color - 								.base-btn { color: }
	color hover - 					.base-btn:hover { color: }
*/
.base-btn.base-btn__primary {
	color: var(--color-btn-primary-text);
}
.base-btn.base-btn__primary::before {
	background:
		var(--color-btn-primary) padding-box,
		var(--color-btn-primary-border) border-box;
}
.base-btn.base-btn__primary:hover {
	color: var(--color-btn-primary-hover-text);
}
.base-btn.base-btn__primary:hover::after {
	background: var(--color-btn-primary-hover);
	border-color: var(--color-btn-primary-hover-border);
}

.base-btn.base-btn__secondary {
	color: var(--color-btn-secondary-text);
}
.base-btn.base-btn__secondary::before {
	background: var(--color-btn-secondary);
	border-color: var(--color-btn-secondary-border);
}
.base-btn.base-btn__secondary:hover {
	color: var(--color-btn-secondary-hover-text);
}
.base-btn.base-btn__secondary:hover::after {
	background:
		var(--color-btn-secondary-hover) padding-box,
		var(--color-btn-secondary-hover-border) border-box;
}

.base-close-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border-radius: 4px;
	color: var(--color-text);
	cursor: pointer;
}

.base-btn-balance {
	display: flex;
	align-items: center;
	height: 36px;
	gap: 10px;
	padding: 4px 4px 4px 16px;
	border: 1px solid var(--color-brand-1);
	border-radius: 100px;
	font-weight: 800;
	font-size: 14px;
	color: var(--color-text);
}
.base-btn-balance .circle {
	display: flex;
  justify-content: center;
  align-items: center;
	height: 100%;
	aspect-ratio: 1;
	background: var(--color-brand-2);
	border-radius: 100%;
	color: var(--color-text-dark);
}
.activeRtl .base-btn-balance {
	padding: 4px 16px 4px 4px;
}

.base-switcher-wrapper {
	z-index: 0;
	width: 280px;
	height: 36px;
	padding: 3px;
	background: var(--color-separator);
	border-radius: 100px;
}

.base-switcher {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
}

.base-switcher .option {
	z-index: 1;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: color 0.3s ease;
}
.base-switcher .option.active {
	color: var(--color-text-dark);
}

.base-switcher .sliding-background {
	position: absolute;
	left: 0;
	width: 50%;
	height: 100%;
	background: var(--color-text-white);
	border-radius: 100px;
	transition: transform 0.3s ease;
}

.bf {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	height: 100%;
}

.bf__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bfg-spinner-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.bfg-spinner-wrapper .base-loading-spinner {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 10px;
  margin: 0 10px;
}

.bf__content .bfg:not([hidden]) {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 6px;
}

.bf__content .bfg input {
	width: 100%;
	height: 100%;
	padding: 0 16px;
}

.bf__content .bfg .bfg-field {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 40px;
	border: 2px solid transparent;
	border-radius: 4px;
}
.bf__content .bfg .bfg-field__icon {
	position: absolute;
	margin: 0 16px;
	pointer-events: none;
	color: var(--color-brand-1);
}

.bf__content .bfg .bfg-field__toggle {
	position: absolute;
	margin: 0 18px;
	color: black;
}

/* Fixed prefix inside the input (e.g. "+54" on a phone field). The value after a
   country code always reads left to right, so the field is ltr in rtl pages too.
   --bfg-input-padding-x must match the input's own horizontal padding. */
.bf__content .bfg .bfg-field--prefixed {
	--bfg-input-padding-x: 16px;
	direction: ltr;
}
.bf__content .bfg .bfg-field__prefix {
	position: absolute;
	left: var(--bfg-input-padding-x);
	color: var(--color-text-dark);
	pointer-events: none;
}
.bf__content .bfg .bfg-field--prefixed input {
	padding-left: calc(var(--bfg-input-padding-x) + 4ch);
}

.bf__content .bfg[data-bfg-invalid] .bfg-field {
	border-color: var(--color-danger);
}

.bf__content .bfg-message:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bf__content .bfg-message--error {
	color: var(--color-danger);
}
.bf__content .bfg-message--warning {
	color: var(--color-waning);
}
.bf__content .bfg-message--info {
	color: var(--color-info);
}
.bf__content .bfg-message--success {
	color: var(--color-success);
}

.bf__content .bfg-message svg {
	flex-shrink: 0;
}

/* ##BFG type=checkbox */
.bf__content .bfg--checkbox .bfg-field {
	justify-content: flex-start;
	height: fit-content;
	gap: 10px;
}

.bf__content .bfg--checkbox .bfg-field label {
	cursor: pointer;
}

.bf__content .bfg--checkbox .bfg-field .checkbox-wrapper {
	position: relative;
	width: 20px;
	height: 20px;
}

.bf__content .bfg--checkbox .bfg-field .checkbox-wrapper input[type="checkbox"] {
	padding: unset;
	border-radius: 2px;
	border: 1px solid var(--color-brand-3);
	background: transparent;
  appearance: none;
  -webkit-appearance: none;
	cursor: pointer;
}

.bf__content .bfg--checkbox .bfg-field .checkbox-wrapper .iconode-icon {
	display: none;
	position: absolute;
	inset: 4px;
	width: 12px;
	height: 12px;
	color: var(--color-brand-3);
	pointer-events: none;
}

.bf__content .bfg--checkbox .bfg-field .checkbox-wrapper input[type="checkbox"]:checked + .iconode-icon {
	display: initial;
}

/* ##BFG type=file */
.bf__content .bfg--file .bfg-field {
	width: 100%;
	height: 100%;
}

.bf__content .bfg--file .bfg-field input[type="file"] {
	position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.bf__content .bfg--file .bfg-field .upload__icon {
	position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bf__content .bfg--file .bfg-field .upload__check-mark {
	display: none;
  z-index: 1;
  color: var(--color-success);
}
.bf__content .bfg--file.uploaded .bfg-field .upload__check-mark { display: initial; }

.bf__content .bfg--file .bfg-field .upload__preview {
	display: none;
	position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bf__content .bfg--file.uploaded .bfg-field .upload__preview { display: initial; }

.bf__content .bfg--file .bfg-field label {
	position: absolute;
	top: 4px;
	margin: 0 4px;
}

.bf__action {
	display: flex;
	flex-direction: column;
	gap: 10px	;
}

.bf__action button {
	height: 48px;
	font-weight: 700;
	text-transform: uppercase;
}

.bf__action-message:not([hidden]) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	margin-top: 12px;
	border-radius: 4px;
	background: white;
}
.bf__action-message .message-icon {
	display: none;
	flex-shrink: 0;
}
.bf__action-message::after {
	content: '';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: 12px solid white;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
}
.bf__action-message--error {
	color: var(--color-danger);
}
.bf__action-message--error .message-icon--error {
	display: unset;
	color: var(--color-danger);
}
.bf__action-message--warning {
	color: var(--color-waning);
}
.bf__action-message--info {
	color: var(--color-info);
}
.bf__action-message--success {
	color: var(--color-success);
}

.base-is-loading {
	position: relative;
}
.base-is-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--color-backdrop);
	border-radius: inherit;
}
.base-is-loading::after {
	content: '';
	position: absolute;
	z-index: 2;
	left: calc(50% - 28px);
	top: calc(50% - 28px);
	width: 56px;
  height: 56px;
  border: 3px solid var(--color-separator);
  border-top-color: var(--color-brand-1);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}

.base-loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--color-brand-1);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

body.has-game-direct-launch {
	overflow: hidden;
}

.game-direct-launch:not([hidden]) {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 290;
}

.game-direct-launch__backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-backdrop);
}

.game-direct-launch__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: min(360px, 100%);
	padding: 28px 24px;
	color: var(--color-text);
	text-align: center;
	background: var(--color-dialog-bg);
	border: 1px solid var(--color-border);
	border-radius: 16px;
}

.game-direct-launch__panel p {
	margin: 0;
	overflow-wrap: anywhere;
}

.game-direct-launch__actions:not([hidden]) {
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.game-direct-launch__actions .base-btn {
	min-width: 110px;
}

.base-dropdown {
	position: relative;
	width: 100%;
}

.base-dropdown__label {
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--color-text-white);
}

.base-dropdown__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 36px;
	padding: 0 16px;
	background: var(--color-surface-4);
	border: 1px solid var(--color-brand-3);
	border-radius: 100px;
	color: var(--color-text-white);
	cursor: pointer;
}
.base-dropdown__trigger:disabled {
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}

.base-dropdown svg {
	color: var(--color-brand-3);
}

.base-dropdown__list-container {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	width: max-content;
	background: var(--color-surface-4);
	border-radius: 0 0 12px 12px;
	list-style: none;
	margin: 0;
	z-index: 10;
}

.base-dropdown__option {
	padding: 8px 16px;
	cursor: pointer;
}
.base-dropdown__option:hover {
	background-color: var(--color-surface-1);
}

.base-dropdown--open .base-dropdown__list-container {
	display: block;
	width: 100%;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border: 1px solid var(--color-brand-3);
	border-top: none;
}

.base-dropdown__list {
	max-height: 186px;
	overflow-y: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}
.base-dropdown__list::-webkit-scrollbar {
	display: none; /* Chrome, Safari, WebKit */
}

.base-dropdown--open .base-dropdown__trigger {
	border-radius: 20px 20px 0px 0px;
	border-color: var(--color-brand-3);
	border-bottom: unset;
}

.base-dropdown--open svg {
	transform: rotate(180deg);
}

.base-dropdown__value,
.base-dropdown__option {
	font-size: 14px;
	font-weight: 700;
}

/* isBfg? */
.base-dropdown[data-bfg] .base-dropdown__trigger {
	height: 40px;
	background: var(--color-input-bg);
	border-color: var(--color-input-border);
	color: var(--color-text-dark);
}
.base-dropdown[data-bfg] svg {
	color: var(--color-text-dark);
}
.base-dropdown[data-bfg-invalid]:not(.base-dropdown--open) .base-dropdown__trigger {
	border-color: var(--color-danger);
}
.base-dropdown--open[data-bfg] .base-dropdown__list-container {
	background: var(--color-input-bg);
	border-color: var(--color-input-border);
	color: var(--color-text-dark);
}

.base-dropdown--multiple .base-dropdown__option {
	display: flex;
	align-items: center;
	gap: 10px;
}

.base-dropdown--multiple .base-dropdown__option .checkbox {
	position: relative;
	width: 24px;
	height: 24px;
	border: 1px solid var(--color-brand-3);
	border-radius: 4px;
}
.base-dropdown--multiple .base-dropdown__option .checkbox::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 17px;
	height: 17px;
	display: none;
	background: var(--color-brand-3);
	border-radius: 2px;
}
.base-dropdown--multiple .base-dropdown__option[data-dropdown-checkbox-option="checked"] .checkbox::after {
	display: block;
}

.base-dropdown--multiple .base-dropdown__list-footer {
	padding: 6px;
}

.base-dropdown--multiple .base-dropdown__list-footer button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
}
.base-dropdown--multiple .base-dropdown__list-footer button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: white;
	border-radius: 20px;
	opacity: 0.08;
	transition: opacity 0.3s ease;
}
.base-dropdown--multiple .base-dropdown__list-footer button:hover:after {
	opacity: 0.15;
}

@media (max-width: 768px) {
	.base-dropdown__trigger {
		padding: 0 12px;
	}
	.base-dropdown__option {
		padding: 6px 12px;
	}
}

/* ##BaseCollapseBlock */
.base-collapse-block__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	width: 100%;
	text-align: start;
}

.base-collapse-block .base-collapse-block__toggle .iconode-icon {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.base-collapse-block__content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.base-collapse-block.active .base-collapse-block__content {
	grid-template-rows: 1fr;
}

.base-collapse-block__content-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0.2s ease, padding 0.2s ease;
}

.base-collapse-block.active .base-collapse-block__content-inner {
	visibility: visible;
	padding: 10px 0;
}
.base-collapse-block.active .base-collapse-block__toggle .iconode-icon {
	transform: rotate(180deg);
}

/* ##Icons */
.wol-icon__container {
	position: relative;
	display: inline-flex;
}
.wol-icon__spin-badge:not([hidden]) {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
}
.wol-icon__spin-badge > svg {
	width: 100%;
	height: 100%;
}

/* ##Error */
.page-error {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 100px 0;
	color: var(--color-text);
}

.page-error__label {
	font-size: 48px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.page-error__label::before, .page-error__label::after{
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background: var(--color-text);
}

.page-error h1 {
	border-bottom: 4px solid var(--color-text);
	font-size: 200px;
	font-weight: 700;
}

.page-error p {
	font-size: 48px;
	margin-top: 8px;
	text-align: center;
}

.page-error a {
	font-size: 36px;
	margin-top: 32px;
	opacity: 0.8;
	text-decoration: underline;
}

.page-error a:hover {
	opacity: 1;
}

#maintenance-mode {
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
}

#maintenance-mode .maintenance-mode-content {
	width: 800px;
	max-width: 90vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	font-size: 20px;
	letter-spacing: 0.05em;
	text-align: center;
}

#maintenance-mode .maintenance-mode-content img {
	width: 320px;
	max-width: 70%;
	margin: 0 0 35px;
}

#maintenance-mode .maintenance-mode-content h1 {
	margin: 0 0 20px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
}

#maintenance-mode .maintenance-mode-message {
	width: 90%;
	padding-top: 15px;
	border-top: 2px solid var(--color-border);
}

#maintenance-mode .maintenance-mode-message p {
	margin: 0 0 10px;
}

@media (max-width: 767px) {
	#maintenance-mode .maintenance-mode-content {
		font-size: 14px;
	}

	#maintenance-mode .maintenance-mode-content h1 {
		font-size: 24px;
	}
}

.reset-password-card {
	width: 100%;
}

@media (max-width: 768px) {
	.page-reset-password {
		padding: 20px;
	}

	.reset-password-card {
		padding: 20px;
	}
}

.reset-password-card .reset-password-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.reset-password-card .reset-password-form [data-reset-password-panel] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.reset-password-card .reset-password-form [data-reset-password-panel][hidden] {
	display: none;
}

.reset-password-card .reset-password-form h2 {
	text-align: center;
}

.reset-password-card .reset-password-form .base-btn {
	height: 48px;
}

.reset-password-card .reset-password-form a.base-btn {
	font-weight: 700;
}

.reset-password-card .reset-password-form .description {
	text-align: center;
}

.reset-password-card .reset-password-form .reset-password-message {
	justify-content: center;
	text-align: center;
}

.reset-password-card .password-field-wrap {
	border-radius: 4px;
}

@media (max-width: 768px)  {
	.page-error__label {
		font-size: 24px;
		gap: 8px;
	}

	.page-error__label::before, .page-error__label::after{
		width: 8px;
		height: 8px;
	}

	.page-error h1 {
		border-width: 2px;
		font-size: 80px;
	}

	.page-error p {
		font-size: 24px;
	}

	.page-error a {
		font-size: 16px;
	}
}

/* ##BaseContentPageParts */
/* ##Containers */
/* ##SimpleContainerContentWrapper */
.SimpleContainerContentWrapper  {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 12px 32px 24px 32px;
}

@media (max-width: 768px) {
	.SimpleContainerContentWrapper {
		padding: 8px 16px 16px 16px;
	}
}

/* ##LegalPageContainer */
/* ##SlimContainerWithTopMargin */
/* ##SlimContainerWithTopMarginWhiteBg */
.legal-page {
	min-height: calc(100vh - var(--header-height) - var(--navbar-height));
	padding: 32px;
}

.legal-page__content {
	width: min(900px, 100%);
	padding: 32px;
	margin: 96px auto 0 auto;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
} 
.SlimContainerWithTopMarginWhiteBg .legal-page__content {
	background: white;
	color: var(--color-text-dark);
}

@media (max-width: 768px) {
	.legal-page {
		min-height: calc(100vh - var(--header-height-mob) - var(--navbar-height-mob));
		padding: 16px;
	}

	.legal-page__content {
		width: min(900px, 100%);
		padding: 16px;
		margin: 48px auto 0 auto;
		border-radius: 4px;
		font-size: 14px;
		line-height: 1.5;
	} 
}

/* ##ContentOnlyBlock */
.ContentOnlyBlock h1,
.ContentOnlyBlock h2,
.ContentOnlyBlock h1 span,
.ContentOnlyBlock h2 span,
.ContentOnlyBlock h1 strong,
.ContentOnlyBlock h2 strong {
  color: var(--color-brand-1);
}

.ContentOnlyBlock p,
.ContentOnlyBlock p span,
.ContentOnlyBlock p strong,
.ContentOnlyBlock p em {
  color: inherit !important;
}

.ContentOnlyBlock a {
  color: var(--color-input-bg);
  font-weight: 600;
  text-decoration: underline;
}

.ContentOnlyBlock ul,
.ContentOnlyBlock ol {
  padding-left: 24px;
  list-style: disc;
}

/* List items */
.ContentOnlyBlock li {
  line-height: 1.6;
}

.ContentOnlyBlock li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.ContentOnlyBlock ul ul,
.ContentOnlyBlock ol ol,
.ContentOnlyBlock ul ol,
.ContentOnlyBlock ol ul {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  padding-left: 1.5em;
}

/* Bold and italic */
.ContentOnlyBlock strong,
.ContentOnlyBlock b {
  font-weight: bold;
}

.ContentOnlyBlock em,
.ContentOnlyBlock i {
  font-style: italic;
}

/* Inline code / preformatted */
.ContentOnlyBlock pre,
.ContentOnlyBlock code {
  font-family: monospace;
  background: #f3f3f3;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 13px;
}

.ContentOnlyBlock pre {
  padding: 12px;
  overflow-x: auto;
  margin-bottom: 1em;
}

/* Blockquote */
.ContentOnlyBlock blockquote {
  border-left: 3px solid var(--color-brand-1);
  padding-left: 1em;
  margin: 1em 0;
  color: #555;
  font-style: italic;
}

/* Images inside CMS content */
.ContentOnlyBlock img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tables */
.ContentOnlyBlock table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

.ContentOnlyBlock th,
.ContentOnlyBlock td {
  border: 1px solid #c4c4c4;
  padding: 8px 12px;
  text-align: left;
}

.ContentOnlyBlock th {
  font-weight: bold;
  background: #ebebeb;
}

/* Horizontal rule */
.ContentOnlyBlock hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 1.5em 0;
}

/* ##CollapseContentBlockWithTitle */
.CollapseContentBlockWithTitle {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-brand-1);
}

.CollapseContentBlockWithTitle .base-collapse-block__toggle {
	font-size: 24px;
	font-weight: 700;
}

.CollapseContentBlockWithTitle .base-collapse-block__toggle .iconode-icon {
	width: 36px;
	height: 36px;
}

@media (max-width: 768px) {
	.CollapseContentBlockWithTitle .base-collapse-block__toggle {
		font-size: 16px;
	}

	.CollapseContentBlockWithTitle .base-collapse-block__toggle .iconode-icon {
		width: 24px;
		height: 24px;
	}
}

/* ##LanguageSwitcher */
.language-switcher .base-switcher-wrapper {
	width: 100%;
	height: 100%;
}
.language-switcher .sliding-background {
	opacity: 0;
}

.language-switcher .option:not(.active) {
  pointer-events: none;
	font-weight: 300;
}
.language-switcher .option:not(.active)::after {
	content: "";
  cursor: pointer;
  inset: 0;
  pointer-events: auto;
  position: absolute;
}

.language-switcher .option.active {
  pointer-events: none;
	font-weight: 600;
}

/* ##Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-height);
  padding: 0 32px;
  background: var(--color-header-bg);
}

.header__sidebarBtn {
	border: none;
	background: transparent;
	color: var(--color-text);
}
.header__sidebarBtn svg {
	width: 24px;
	height: 22px;
}

.header__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.header__menu ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.header__menu ul li {
	font-size: 16px;
	font-weight: 700;
	transition: filter 0.3s ease;
}
.header__menu ul li.active {
	color: var(--color-brand-1);
	pointer-events: none;
}
@media (hover: hover) {
	.header__menu ul li:hover:not(.active) {
		filter: drop-shadow(0 2px 8px var(--color-brand-1));
	}
	.header__menu ul li:hover:not(.active) a {
		filter: drop-shadow(0px 0px 4px var(--color-brand-1));
	}
}

.header__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	height: 52px;
	width: 104px;
	border-radius: 100px;
	background-color: var(--color-header-logo-bg);
	box-shadow: 0px 0px 8px 0px #00000080 inset;
	transition: none;
}

.header__logo img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.header__nav-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 2;
	height: 48px;
	padding: 6px;
	border-radius: 100px;
	background-color: var(--color-header-nav-bg);
	box-shadow: 0px 0px 8px 0px #00000080 inset;
}

.header__nav-actions .language-switcher {
	width: 66px;
	height: 36px;
}

.header__nav-actions .language-switcher a.option {
  font-size: 12px;
}

.header__nav-actions .base-btn {
	text-transform: uppercase;
}

.header__nav-actions .btn-chat {
	display: flex;
	align-items: center;
}

.header__nav-user, .header__nav-user-restricted, .header__nav-login {
	display: flex;
	align-items: stretch;
	gap: 20px;
	height: 100%;
}

.header__nav-user .base-btn-balance {
	gap: unset;
	width: 144px;
	height: unset;
	padding: 4px;
}
.header__nav-user .base-btn-balance .circle {
	margin-inline-start: auto;
}
.header__nav-user .base-btn-balance span {
	width: 100%;
	min-width: max-content;
	text-align: center;
	font-weight: 700;
}
.header__nav-user .base-btn-balance span.xxl-balance,
.header__nav-user .base-btn-balance span.xl-balance {
	font-size: 14px;
}
.header__nav-user .base-btn-balance span.l-balance {
	font-size: 15px;
}
.header__nav-user .base-btn-balance span.m-balance {
	font-size: 16px;
}
.header__nav-user .base-btn-balance span.s-balance {
	font-size: 17px;
}
.header__nav-user .base-btn-balance span.xs-balance {
	font-size: 18px;
}
.header__nav-user .base-btn-balance span.xxs-balance {
	font-size: 19px;
}

.header__nav-user .btn-profile svg {
	width: 24px;
	height: 24px;
}

.header__nav-user-restricted .base-btn {
	font-weight: 800;
}

.header__nav-login .btn-login, .header__nav-login .btn-register {
	font-weight: 700;
	font-size: 13px;
}

@media (max-width: 1400px) {
	.header__menu ul {
		gap: 30px;
	}
}

@media (max-width: 1200px) {
	.header__menu {
		display: none;
	}
	.header__content {
		justify-content: flex-end;
	}
	.header__logo {
		left: 35%;
	}
}

@media (max-width: 768px) {
	header {
		height: var(--header-height-mob, 56px);
		gap: 14px;
		padding: 0 16px;
	}
	.header__sidebarBtn svg {
		width: 18px;
		height: 19px;
	}
	.header__logo {
		left: 0;
		transform: none;
		margin: 0 clamp(44px, 12vw, 100px);
		width: 40px;
		height: 40px;
		background-color: transparent;
		box-shadow: none;
	}
	.header__nav {
		gap: 12px;
	}

	.header__nav-actions {
		height: 42px;
		gap: 12px;
	}

	.header__nav-actions .language-switcher {
		width: 54px;
		height: 30px;
	}

	.header__nav-user,
	.header__nav-login {
		gap: 6px;
	}

	.header__nav-login .base-btn {
		font-size: 11px;
		font-weight: 800;
	}
	
	.header__nav-user .base-btn-balance {
		width: 102px;
	}
	.header__nav-user .base-btn-balance span.xxl-balance,
	.header__nav-user .base-btn-balance span.xl-balance {
		font-size: 9px;
	}
	.header__nav-user .base-btn-balance span.l-balance {
		font-size: 10px;
	}
	.header__nav-user .base-btn-balance span.m-balance {
		font-size: 11px;
	}
	.header__nav-user .base-btn-balance span.s-balance {
		font-size: 12px;
	}
	.header__nav-user .base-btn-balance span.xs-balance {
		font-size: 13px;
	}
	.header__nav-user .base-btn-balance span.xxs-balance {
		font-size: 14px;
	}

	.header__nav-user .btn-profile svg {
		width: 17px;
		height: 17px;
	}

	.header__nav-login .btn-login, .header__nav-login .btn-register {
		padding: 0 8px;
	}
}

/* ##MobileBar */
#mobile-bar { display: none; }
@media (max-width: 768px) {
	#app:has(#mobile-bar) {
		padding-bottom: 64px;
	}
	#mobile-bar {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 110;
		display: flex;
		justify-content: space-evenly;
		align-items: stretch;
		height: 64px;
		padding: 9px 20px;
		background: var(--color-mobile-bar-bg);
		border-top: 1px solid var(--color-mobile-bar-border);
	}

	.mobile-bar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		color: var(--color-mobile-bar-color);
	}

	.mobile-bar__item-icon {
		position: relative;
		width: 32px;
		height: 32px;
	}
	.mobile-bar__item-icon svg {
		width: 100%;
		height: 100%;
	}

	.mobile-bar__item-label {
		font-weight: 500;
		font-size: 8px;
	}
}

/* ##Sidebar */
.navigation-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: block;
  border: 0;
  background: var(--color-backdrop);
  opacity: 0;
  pointer-events: none;
	cursor: default;
  transition: opacity 0.3s ease;
}

.navigation-menu.open + .navigation-menu-scrim {
  opacity: 1;
  pointer-events: auto;
}

.navigation-menu {
  position: fixed;
  top: 0;
  z-index: 250;
  width: 304px;
  max-width: calc(100vw - 64px);
  height: 100%;
  background: var(--color-drawer);
  color: var(--color-text-white);
  overflow: visible;
  will-change: transform;
  transition: none;
}
.navigation-menu.nm-ready {
  transition: transform .3s ease;
}

.navigation-menu__content {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-drawer);
  overflow-x: hidden;
  overflow-y: auto;
	scrollbar-gutter: stable;
	font-weight: 500;
	font-size: 14px;
}

.navigation-menu__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: var(--color-surface-1);
	border-bottom: 2px solid var(--color-separator)
}

.navigation-menu__body {
	display: flex;
	flex-direction: column;
	padding: 0 20px;
}

.navigation-menu__footer {
	padding: 30px 20px;
}

/* ##SidebarMain */
.navigation-menu-main {
	left: 0;
	transform: translateX(-100%);
}
.activeRtl .navigation-menu-main {
	left: unset;
	right: 0;
	transform: translateX(100%);
}

.navigation-menu-main.open {
	transform: translateX(0);
}

.navigation-menu-main img.navigation-menu__logo {
    width: 100px;
    height: auto;
    object-fit: cover;
}

.navigation-menu-main .main-menu ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-separator);
}

.navigation-menu-main .main-menu ul li a {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Every icon gets the same box: an SVG drawn with only a viewBox (no width/height of its own, as
   most icons uploaded from a design tool are) otherwise collapses to nothing. An item without an
   icon keeps the same empty slot, so every label starts at the same place. */
.navigation-menu-main .main-menu ul li a picture,
.navigation-menu-main .main-menu ul li a:not(:has(picture))::before {
	display: flex;
	flex: none;
	width: 22px;
	height: 22px;
}

.navigation-menu-main .main-menu ul li a:not(:has(picture))::before {
	content: "";
}

.navigation-menu-main .main-menu ul li a picture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.navigation-menu-main .menu-additional ul {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ##SidebarUser */
.navigation-menu-user {
	right: 0;
	transform: translateX(100%);
}
.activeRtl .navigation-menu-user {
	left: 0;
	right: unset;
	transform: translateX(-100%);
}

.navigation-menu-user.open {
	transform: translateX(0);
}

.navigation-menu-user .user-name {
	font-weight: 700;
	font-size: 14px;
}

.navigation-menu-user .user-purse {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-separator);
}

.navigation-menu-user .user-purse .item {
	display: flex;
	justify-content: space-between;
}

.navigation-menu-user .user-purse .item .value {
	font-weight: 700;
	font-size: 14px;
}

.navigation-menu-user .user-purse .btn-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.navigation-menu-user .user-purse .btn-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.navigation-menu-user .user-purse .deposit-btn,
.navigation-menu-user .user-purse .withdraw-btn {
	flex: 1;
	font-weight: 700;
	font-size: 11px;
}

.navigation-menu-user .user-purse .cancel-withdraw-btn {
	width: 100%;
	font-weight: 700;
	font-size: 11px;
}

.navigation-menu-user .user-menu ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px 0;
	border-bottom: 1px solid var(--color-separator);
}

.navigation-menu-user .user-menu ul a {
	display: flex;
	align-items: center;
	gap: 16px;
}

.navigation-menu-user .user-menu ul a .iconode-icon {
	color: var(--color-brand-1);
	width: 24px;
	height: 24px;
}

.navigation-menu-user .user-menu ul .wol-icon__spin-badge {
	width: 12px;
	height: 12px;
}

.navigation-menu-user .user-menu ul a .spins-chip {
	width: auto;
	flex: 0 0 auto;
	height: auto;
	padding: 4px 8px;
	font-weight: 400;
	font-size: 14px;
}

.navigation-menu-user .user-menu ul a .spins-chip:hover {
	color: var(--color-btn-secondary-text);
}

.navigation-menu-user .user-menu ul a .spins-chip:hover::before {
	opacity: 1;
}

.navigation-menu-user .user-menu ul a .spins-chip:hover::after {
	opacity: 0;
}

.navigation-menu-user .user-menu ul a .spins-chip__label {
	font-weight: 300;
	font-size: 10px;
	color: var(--color-text-white);
}

.navigation-menu-user .user-menu ul a .spins-chip__count {
	font-weight: 700;
	font-size: 10px;
	color: #FFCA40;
}

.navigation-menu-user .navigation-menu__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.navigation-menu-user .navigation-menu__footer .logout {
	font-weight: 400;
}

/* ##Dialog */
.dialog-layer:not([hidden]) {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 300;
}

.dialog-backdrop {
	position: absolute;
	inset: 0;
	pointer-events: all;
	background: var(--color-backdrop);
}

.dialog-layer:not([hidden]) .dialog-backdrop {
	animation: backdrop-in .3s ease forwards;
}

@keyframes backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.dialog-layer .dialog {
	z-index: 310;
	width: 500px;
	min-width: min(500px, 100vw);
	max-height: min(700px, 100vh);
	background: var(--color-dialog-bg);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dialog-layer .dialog[hidden] {
	display: none;
}

.dialog-layer:not([hidden]) .dialog {
	animation: dialog-in .3s ease forwards;
}

@keyframes dialog-in {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dialog__card {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.dialog__card.loading::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--color-backdrop);
}
.dialog__card.loading::after {
	content: '';
	position: absolute;
	z-index: 2;
	left: calc(50% - 28px);
	top: calc(50% - 28px);
	width: 56px;
  height: 56px;
  border: 3px solid var(--color-separator);
  border-top-color: var(--color-brand-1);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}

.dialog__header {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
	padding: 0px 16px;
	background: var(--color-dialog-header);
	font-weight: 700;
	font-size: 18px;
}

.dialog__header .base-close-btn {
	margin-left: auto;
	background: var(--color-surface-1);
	color: var(--color-brand-1);
}
.activeRtl .dialog__header .base-close-btn {
	margin-left: unset;
	margin-right: auto;
}
.activeRtl .dialog__header .back {
	transform: scaleX(-1);
}

.dialog__header span {
	position: absolute;
	left: 50%;
  transform: translateX(-50%);
	width: max-content;
	font-weight: 600;
	font-size: 18px;
}

.dialog__body {
	position: relative;
	padding: 40px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.dialog__body .dialog__message{
	margin-bottom: 20px;
	font-weight: 600;
}
.dialog__body .dialog__message--error{
	color: var(--color-danger);
}
.dialog__body .dialog__message--success{
	color: var(--color-success);
}

@media (max-width: 768px) {
	.dialog__header {
		height: 56px;
	}
	
	.dialog__header span {
		font-size: 16px;
	}
}

@media (max-width: 576px) {
	.dialog-layer .dialog:not(.dialog-popup) {
		width: 100% !important;
		height: 100% !important;
		max-height: unset !important;
		margin-top: unset !important;
	}

	.dialog__body {
		padding: 20px;
	}

	.dialog-layer .dialog:not(.dialog-popup) {
		border-radius: 0;
	}
}

/* ##BaseNoticeDialog */
.base-notice-dialog .dialog__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.base-notice-dialog__description {
	color: var(--color-text);
	text-align: center;
}

/* Hidden by main.js for a notice (both buttons off). */
.base-notice-dialog__footer:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.base-notice-dialog__footer .base-btn {
	width: 100%;
	height: 48px;
	font-weight: 700;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.dialog.base-notice-dialog {
		width: 83%;
		max-width: 300px;
		min-width: unset;
	}

	.base-notice-dialog .dialog__body {
		gap: 20px;
	}

	.base-notice-dialog__footer .base-btn {
		font-size: 12px;
	}
}

/* ##CompleteRegisterSuccessDialog */
.complete-register-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.complete-register-success__message {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.complete-register-success__note {
	font-size: 14px;
	font-weight: 400;
	text-align: center;
}

.complete-register-success__ok {
	width: 200px;
}

/* ##DialogSearch */
.search-dialog__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	border-radius: 4px;
	border: 1px solid var(--color-input-border);
	background: var(--color-input-bg);
}

.search-dialog__input-wrap svg {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.search-dialog__input {
	flex: 1;
	height: 40px;
	border: unset;
	font-size: 16px;
	color: var(--color-text-dark);
}

.search-dialog__input::placeholder {
	color: var(--color-text-muted);
}

.dialog-search .dialog__body {
	display: flex;
  flex-direction: column;
	flex: 1;
  min-height: 0;
}

.dialog-search .search-dialog__results {
	flex: 1;
  min-height: 0;
	max-height: 400px;
	margin-top: 16px;
	overflow-y: auto;
	overflow-x: hidden;
}
.dialog-search .search-dialog__results .preloader {
  width: 42px;
  height: 42px;
	margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--color-brand-1);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}

.dialog-search .search-dialog__results .game-card {
	height: 80px;
	padding: 10px 0;
}

.dialog-search .search-dialog__results .game-card:not(:last-child) {
	border-bottom: 1px solid var(--color-separator);
}

.dialog-search .search-dialog__results .game-card__thumb-wrap {
	height: 100%;
	aspect-ratio: 4/3;
	flex-shrink: 0;
}

.dialog-search .search-dialog__results .game-card__overlay {
	display: none;
}

.dialog-search .search-dialog__results .game-card__info {
	flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 7px 10px;
}
.dialog-search .search-dialog__results .game-card__name {
	font-weight: 700;
}

.dialog-search .search-dialog__results .game-card__link {
	display: flex;
	height: 100%;
}

.dialog-search .search-dialog__results .game-card__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 576px) {
	.dialog-search .search-dialog__results {
		max-height: unset;
	}
	.dialog-search .dialog__body {
		padding: 16px;
	}
}

/* ##DialogAuth */
.auth-dialog-layer .dialog {
	width: 408px;
	min-width: unset;
}
.auth-dialog-layer .auth-heading {
	margin-bottom: 32px;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
}
.auth-dialog-layer .dialog .bf {
	height: auto;
}

@media (max-width: 768px) {
	.auth-dialog-layer .auth-heading {
		margin-bottom: 20px;
	}
}
/* ##DialogLogin */
.dialog-login .dialog__header .base-close-btn {
	color: inherit;
}

.dialog-login .bf__action .base-btn {
	height: 40px;
}

.dialog-login .social-group:not(:has(.base-btn:not([hidden]))) {
	display: none;
}

.dialog-login .login-actions {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 40px;
}

@media (max-width: 768px) {
	.dialog-login .login-actions {
		margin-top: 80px;
	}
}

/* ##DialogRegister */
.dialog-register .bf__content .clasic-register:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-register .bf__action {
	display: none;
}

.dialog-register .register-actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-register .register-actions .social-group,
.dialog-login .social-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.dialog-register .register-actions .social-group .base-btn,
.dialog-login .social-group .base-btn {
	height: 48px;
	background: white;
	color: var(--color-text-dark);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
}
.dialog-register .register-actions .social-group .base-btn .iconode-icon,
.dialog-login .social-group .base-btn .iconode-icon {
	width: 24px;
	height: 24px;
}

/* Google's rendered sign-in button (iframe), stretched invisibly over our own
   button so the real click lands on Google — see the social IIFE in main.js. */
.social-group .gsi-wrap {
	position: relative;
	display: block;
}

.social-group .gsi-wrap > .base-btn {
	width: 100%;
}

.social-group .gsi-overlay {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0.0001;
	direction: ltr; /* scale from the left edge in RTL (ar) too */
}

.social-group .gsi-overlay__target {
	display: block;
	transform-origin: 0 0;
}

.social-group .gsi-wrap:has(> .base-btn:disabled) .gsi-overlay {
	pointer-events: none;
}

.dialog-register .register-step--success .register-step__note {
	color: var(--color-text-muted);
	font-size: 14px;
}

.dialog-register .register-step__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.dialog-register .register-actions .show-clasic-register {
	color: var(--color-brand-3);
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
}

.dialog-register .terms-disclaimer {
	margin-top: 40px;
	font-size: 11px;
	text-align: center;
}

.dialog-register .login-switch {
	margin-top: 20px;
	font-size: 11px;
	text-align: center;
}

.dialog-register .terms-disclaimer a,
.dialog-register .login-switch a {
	color: var(--color-brand-3);
}

.dialog-register .register-step--success:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dialog-register .register-step--success p {
	text-align: center;
	margin-bottom: 32px;
}

.dialog-register .register-step--success .base-btn {
	width: 200px;
	height: 48px;
}

/* ##DialogForgot */
.dialog-forgot .bf__content .security-container:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-forgot .bf__content .security-container .base-dropdown__trigger {
	height: 40px;
}

.dialog-forgot .base-btn.login-switch {
	height: 48px;
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: 700;
}

.dialog-forgot .forgot-step--sent:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dialog-forgot .forgot-step--sent p {
	text-align: center;
	margin-bottom: 32px;
}

.dialog-forgot .forgot-step--sent .base-btn {
	width: 200px;
	height: 48px;
}

/* ##FormGroupFieldError — reset-password page + .nd-field forms */
.reset-password-card .reset-password-form .form-group:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 400;
	font-size: 14px;	
}

.form-group .field-error,
.nd-field .field-error {
	display: none;
	align-items: center;
	gap: 6px;
	color: var(--color-danger);
}

.form-group .field-error svg,
.nd-field .field-error svg {
	flex-shrink: 0;
}

.nd-field .field-error:not([hidden]) {
	display: flex;
}

.reset-password-message {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	white-space: pre-line;
}
.reset-password-message--error {
	color: var(--color-danger);
}

/* `display: flex` above outranks the UA `[hidden]` rule, so restore it explicitly. */
.reset-password-message[hidden] {
	display: none;
}

.form-group input:user-invalid ~ .field-error,
.form-group .password-field-wrap:has(input:user-invalid) ~ .field-error {
	display: flex;
}

.form-group input,
.form-group .password-field-wrap {
	border: 2px solid transparent;
}

.form-group input:user-invalid,
.form-group .password-field-wrap:has(input:user-invalid) {
	border: 2px solid var(--color-danger);
}

/* The wrapper above already shows the red border for the whole pill —
   cancel the nested input's own border so it isn't drawn twice. */
.form-group .password-field-wrap input:user-invalid {
	border-color: transparent;
}

/* ##DialogRegister */
.change-password-form .dialog__body {
	padding: 20px;
}

.dialog-change-password .bf {
	gap: 20px;
}

.dialog-change-password .bfg input {
	height: 36px;
}

.dialog-change-password .bf__action button {
	width: 100%;
	text-transform: uppercase;
}

/* ##DialogCashier Deposit + Withdraw */
.dialog-layer .dialog.dialog-deposit,
.dialog-layer .dialog.dialog-withdraw {
	align-self: flex-start;
	width: 408px;
	min-width: unset;
	height: 84.35vh;
  margin-top: 11.3vh;
}

.dialog-deposit .methods-container,
.dialog-withdraw .methods-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-deposit .method-item,
.dialog-withdraw .method-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 20px;
	border: 1px solid var(--color-separator);
	background: var(--color-surface-3);
}

.dialog-deposit .method-title,
.dialog-withdraw .method-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dialog-deposit .method-title img,
.dialog-withdraw .method-title img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.dialog-deposit .method-title span,
.dialog-withdraw .method-title span {
	margin-left: 10px;
	font-size: 16px;
	font-weight: 700;
}

.dialog-deposit .method-item__desc,
.dialog-withdraw .method-item__desc {
	font-size: 12px;
	font-weight: 300;
}

.dialog-deposit .method-limits,
.dialog-withdraw .method-limits {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.dialog-deposit .method-limits .name,
.dialog-withdraw .method-limits .name {
	color: var(--color-text-muted);
	margin-right: 4px;
}

.dialog-deposit .payment-amount-message,
.dialog-withdraw .payment-amount-message {
	text-align: center;
	font-weight: 700;
}

.deposit-step__title,
.withdraw-step__title {
	margin-bottom: 20px;
	font-weight: 700;
}

.withdraw-step--amount .withdraw-step__title,
.withdraw-step--amount .method-limits,
.deposit-step--amount .deposit-step__title,
.deposit-step--amount .method-limits {
	margin-bottom: 10px;
}

.dialog-deposit .payment-amount-info,
.dialog-withdraw .payment-amount-info {
	padding: 20px;
	border: 1px solid var(--color-separator);
	border-radius: 20px;
	font-size: 12px;
}

.dialog-deposit [data-no-bonus-warning],
.dialog-withdraw [data-no-bonus-warning] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.dialog-deposit [data-no-bonus-warning][hidden],
.dialog-withdraw [data-no-bonus-warning][hidden] {
	display: none;
}

.dialog-deposit .no-bonus-warning__icon,
.dialog-withdraw .no-bonus-warning__icon {
	color: var(--color-separator);
}

.dialog-deposit .no-bonus-warning__text,
.dialog-withdraw .no-bonus-warning__text {
	font-weight: 700;
	text-align: center;
}

.dialog-deposit [data-no-bonus-warning] button,
.dialog-withdraw [data-no-bonus-warning] button {
	width: 100%;
}

.dialog-deposit form[data-deposit-amount-form],
.dialog-withdraw form[data-withdraw-amount-form] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-withdraw .amount-input-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dialog-withdraw .amount-input-group:has(.amount-exceeds-warning:not([hidden])) #withdraw-amount-input {
	border: 2px solid var(--color-danger);
}

.dialog-deposit .amount-wrapper,
.dialog-withdraw .amount-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-deposit .custom-amount,
.dialog-withdraw .custom-amount {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dialog-deposit .custom-amount label,
.dialog-withdraw .custom-amount label {
	font-size: 12px;
	font-weight: 700;
}

.dialog-deposit .custom-amount input,
.dialog-withdraw .custom-amount input {
	width: 50%;
	padding: 6px 10px;
	font-size: 16px;
	text-align: end;
	font-weight: 700;
}

.dialog-deposit .preset-amount,
.dialog-withdraw .preset-amount {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.dialog-deposit .preset-amount .form-radio,
.dialog-withdraw .preset-amount .form-radio {
	padding: 6px 19px;
	border-radius: 100px;
	border: 1px solid var(--color-input-bg);
	transition: background 0.3s ease, color 0.3s ease;
}

.dialog-deposit .preset-amount .form-radio.active,
.dialog-withdraw .preset-amount .form-radio.active {
	background: var(--color-input-bg);
	color: var(--color-text-dark);
}

.dialog-deposit .list-total,
.dialog-withdraw .list-total {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dialog-withdraw .amount-exceeds-warning {
	display: none;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	color: var(--color-danger);
}
.dialog-withdraw .amount-exceeds-warning:not([hidden]) {
	display: flex;
}

.dialog-deposit .list-total__item,
.dialog-withdraw .list-total__item {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 300;
}

.dialog-deposit .list-total__item.final-amount,
.dialog-withdraw .list-total__item.final-amount {
	padding-top: 5px;
	border-top: 1px solid var(--color-separator);
	font-size: 12px;
	font-weight: 700;
}

.dialog-deposit form[data-deposit-amount-form] .base-btn,
.dialog-withdraw form[data-withdraw-amount-form] .base-btn {
	height: 48px;
}

.dialog-withdraw form[data-withdraw-amount-form] #withdraw-amount-input::placeholder {
	font-style: initial;
	font-weight: 300;
}

.dialog-deposit .form-selectCard,
.dialog-withdraw .form-selectCard {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Cashier profile step (a method's required profile data): a quiet note, then DD / MM / YYYY. */
.dialog-deposit .cashier-profile__hint,
.dialog-withdraw .cashier-profile__hint {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 13px;
}

.dialog-deposit .cashier-profile__dob,
.dialog-withdraw .cashier-profile__dob {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 10px;
}

/* A method's CMS form fields (coin, network, destination tag): spaced like the form's own groups. */
.dialog-deposit .form-selectCard [data-payment-fields],
.dialog-withdraw .form-selectCard [data-payment-fields] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dialog-deposit .form-selectCard [data-payment-fields]:empty,
.dialog-withdraw .form-selectCard [data-payment-fields]:empty {
	display: none;
}

.dialog-deposit .form-selectCard .form-group,
.dialog-withdraw .form-selectCard .form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dialog-deposit .form-selectCard .form-group input,
.dialog-withdraw .form-selectCard .form-group input {
	padding: 10px 16px;
}

.dialog-deposit .form-selectCard .form-group select,
.dialog-withdraw .form-selectCard .form-group select {
	padding: 12px 24px;
	background-color: var(--color-surface);
	border: none;
	border-radius: 100px;
	color: inherit;
}

.dialog-deposit .form-selectCard__footer,
.dialog-withdraw .form-selectCard__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	margin-top: 20px;
}

.dialog-deposit .form-selectCard__footer button,
.dialog-withdraw .form-selectCard__footer button {
	height: 48px;
}

.dialog-deposit .transaction-status,
.dialog-withdraw .transaction-status {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dialog-deposit .transaction-status__item,
.dialog-withdraw .transaction-status__item {
	display: flex;
	justify-content: space-between;
}

.dialog-deposit .success-actions,
.dialog-withdraw .success-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	margin-top: 20px;
}

.dialog-deposit .success-actions button,
.dialog-withdraw .success-actions button {
	height: 48px;
}

.agency-branch-search {
	margin: 12px 0;
}

.agency-branch-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 220px;
	overflow-y: auto;
}

.agency-branch-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--color-surface-1);
	border-radius: 8px;
	background: var(--color-surface-2);
	color: var(--color-text);
	cursor: pointer;
}

.agency-branch-item__name {
	font-weight: 600;
}

.agency-branch-item__address,
.agency-branch-item__hours {
	font-size: 12px;
	opacity: 0.8;
}

.agency-branch-list__empty,
.agency-branch-list__error {
	font-size: 13px;
	opacity: 0.8;
}

.agency-map-preview {
	width: 100%;
	height: 160px;
	border-radius: 8px;
	overflow: hidden;
	margin: 12px 0;
	background: var(--color-surface-1);
}

.agency-map-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--color-dialog-bg);
}

.agency-map-overlay.is-open {
	display: flex;
	flex-direction: column;
}

.agency-map-overlay__header {
	height: var(--header-height);
	display: flex;
	justify-content: flex-end;
	padding: 0 32px;
	background: var(--color-dialog-header);
}

.agency-map-overlay__header .close-map-btn {
	color: var(--color-brand-1);
}

.agency-map-overlay__map {
	flex: 1;
}

@media (max-width: 768px) {
	.agency-map-overlay__header {
		height: var(--header-height-mob);
		padding: 0 16px;
	}
}

/* ##DialogDeposit */
.deposit-step[hidden] {
	display: none;
}

.withdraw-ready {
	text-align: center;
}

.withdraw-ready__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

.withdraw-ready__amount {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
}

.withdraw-ready__amount-label {
	color: var(--color-text-muted);
}

.withdraw-ready__code {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
	padding: 16px;
	border: 1px solid var(--color-separator);
	border-radius: var(--radius);
}

.withdraw-ready__code-label {
	color: var(--color-text-muted);
	font-size: 14px;
}

.withdraw-ready__code-value {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 3px;
	user-select: all;
}

.withdraw-ready__copy {
	min-width: 140px;
	height: 40px;
}

.withdraw-ready__steps {
	text-align: left;
	line-height: 1.4;
}

.withdraw-ready__steps-title {
	font-weight: 700;
	margin-bottom: 6px;
}

.withdraw-ready__steps ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

.withdraw-ready__steps li {
	margin-bottom: 4px;
}

.withdraw-ready__expiry,
.withdraw-ready__later {
	margin: 6px 0 0;
	color: var(--color-text-muted);
	font-size: 14px;
}

.withdraw-ready__cancel {
	background: none;
	border: 0;
	color: var(--color-text-muted);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.deposit-step--bonuses .deposit-bonus-list,
.deposit-step--bonuses .deposit-bonus-list__items {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.deposit-step--bonuses .deposit-bonus-list h2 {
	font-weight: 700;
}

.deposit-step--bonuses .deposit-bonus-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 20px;
	background: var(--color-surface-3);
	border-radius: 20px;
	border-top: 2px solid var(--color-surface-1);
}

.deposit-step--bonuses .deposit-bonus-card__body {
	display: flex;
	gap: 20px;
}

.deposit-step--bonuses .deposit-bonus-card__body img {
	border-radius: 8px;
	object-fit: cover;
}

.deposit-step--bonuses .deposit-bonus-card__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.deposit-step--bonuses .deposit-bonus-card__content .title {
	font-weight: 700;
}

.deposit-step--bonuses .deposit-bonus-card__content .description {
	font-size: 11px;
	font-weight: 300;
}

.deposit-step--bonuses .deposit-bonus-card button,
.deposit-step--bonuses .deposit-bonus-list__actions button {
	width: 100%;
}

.deposit-process iframe {
	position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
	border: none;
}

.deposit-process--qr{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.deposit-process--qr img{
	object-fit: cover;
}

.deposit-step--success .success-actions button {
	display: flex;
	gap: 10px;
}

/* ##DialogWithdraw */
.withdraw-step--first {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.withdraw-step--first[hidden] {
	display: none;
}

.withdraw-step--first .base-switcher-wrapper,
.section-history__header .base-switcher-wrapper {
	width: 100%;
}

.withdraw-step--first .pending-withdrawals {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.withdraw-step--first .pending-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 16px 20px 16px;
	border-top: 2px solid var(--color-surface-1);
	border-radius: 10px;
	background: var(--color-surface-2);
}

.withdraw-step--first .pending-card__details {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.withdraw-step--first .pending-card__details .details-item {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-surface-1);
	font-size: 12px;
}

.withdraw-step--first .pending-card__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.withdraw-step--first .pending-card__expired {
	text-align: center;
	color: var(--color-danger);
	font-weight: 600;
	padding: 10px 0;
}

.withdraw-step--first .pending-card__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.withdraw-step--amount .purse {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
	padding: 20px;
	background: var(--color-surface-3);
	border-top: 2px solid var(--color-surface-1);
	border-radius: 20px;
}

.withdraw-step--amount .purse .item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
}

.withdraw-step--amount .purse .item .value {
	padding: 7px 16px;
	border-radius: 100px;
	background: var(--color-surface-1);
}

/* Bonus cancellation warning balance readout (embedded in the amount step) */
.withdraw-notice__balance {
	display: flex;
	align-items: center;
	gap: 16px;
}

.withdraw-notice__balance .withdraw-notice__balance-value {
	padding: 12px 16px;
	background: var(--color-surface);
	border-radius: var(--radius);
}

.withdraw-step--success .pending-card__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
}

.withdraw-step--success .pending-card__qr > span {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 400;
}

.withdraw-step--success .pending-card__qr-note {
	margin-top: 20px;
	text-align: center;
	color: #A6A6CE;
}

.withdraw-success__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 16px;
}

/* ##DialogPromotion */
.dialog.dialog-promotion {
	height: calc(100vh - 60px);
	width: min(600px, calc(100vw - 32px));
	min-width: unset;
	background: var(--color-dialog-promo-bg);
}

.dialog-promotion .dialog__header {
	position: absolute;
	top: 0;
	width: 100%;
	border-bottom: unset;
	background: transparent;
}

.dialog-promotion .dialog__header .headline {
	display: none;
}

.dialog-promotion .dialog__header .base-close-btn {
	z-index: 1;
}

.dialog-promotion .dialog__body {
	padding: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.dialog-promotion [data-promotion-content] {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1;
	min-height: 0;
	padding-bottom: 24px;
	overflow: hidden;
}

.popups-promotions__preview {
	position: relative;
	width: 100%;
	aspect-ratio: 2.4;
	flex-shrink: 0;
}

.popups-promotions__preview-text h2 {
	font-size: 24px;
	font-weight: 700;
}

.popups-promotions__preview img {
	width: 100%;
	height: 100%;
}

.popups-promotions__preview-text {
	position: absolute;
	top: 50%;
	left: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 47.5%;
	transform: translateY(-50%);
}

.popups-promotions__content {
	display: flex;
	flex: 1;
	min-height: 0;
	padding: 0 32px;
}

.popups-promotions__content .scrollDesc {
	flex: 1;
	min-height: 0;
	background: var(--color-dialog-promo-text-bg);
	border-radius: 10px;
	overflow-y: hidden;
}

.popups-promotions__content .scrollDesc__inner {
	height: 100%;
	padding: 24px 10px;
	overflow-y: auto;
}

.popups-promotions__footer {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}

.popups-promotions__footer .base-btn {
	height: 40px;
	width: 120px;
	min-width: max-content;
	font-weight: 700;
}

@media (max-width: 768px) {
	.dialog-promotion [data-promotion-content] {
		gap: 16px;
	}
	
	.popups-promotions__content {
		padding: 0 16px;
		margin-bottom: 8px;
	}

	.popups-promotions__preview-text {
		gap: 10px;
	}

	.popups-promotions__preview-text h2 {
		font-size: 16px;
	}

	.popups-promotions__preview-text p {
		font-size: 11px;
	}

	.popups-promotions__footer .base-btn {
		height: 36px;
		font-size: 12px;
	}
}

/* ##DialogNotification */
.dialog.dialog-notification {
	width: 408px;
	min-width: unset;
}

.dialog-notification .notification-panel {
	display: flex;
	flex-direction: column;
	gap: 40px;
	height: 100%;
}

.dialog-notification .notification-panel__body {
	flex-grow: 1;
}

.dialog-notification .notification-panel__footer {
	display: flex;
	justify-content: center;
}

.dialog-notification .notification-panel__footer a {
	width: 200px;
	height: 48px;
	font-weight: 700;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.dialog.dialog-notification {
		width: 83%;
		max-width: 300px;
	}

	.dialog-notification .notification-panel {
		gap: 20px;
	}

	.dialog-notification .notification-panel__footer a {
		height: 48px;
		font-size: 12px;
	}
}

/* ##WheelOfLuck */
.wol-layer {
	position: fixed;
	inset: 0;
	top: var(--header-height);
	align-items: center;
	justify-content: center;
	gap: 55px;
	z-index: 105;
	animation: backdrop-in .3s ease forwards;
}
.wol-layer:not([hidden]) {
	display: flex;
	animation: backdrop-in .3s ease forwards;
}

.wol-close {
	position: absolute;
	top: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 24px 24px 0 24px;
}

.wol-result__overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--color-backdrop);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 2;
}
.wol-result__overlay:not([hidden]) {
	display: flex;
	animation: backdrop-in .3s ease forwards;
}

.wol-result__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: min(90vw, 1024px);
	aspect-ratio: 1024 / 720;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

.wol-result__title {
	font-size: 20px;
	font-weight: 700;
}

.wol-result__description {
	font-size: 40px;
	font-weight: 700;
}

.wol-result__content .base-btn {
	margin-top: 10px;
}

.wol-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: min-content;
}

.wol-header__title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.wol-header__description > p {
	font-size: 20px;
	text-align: center;
}

.wol-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 60px;
}

.wol-footer .base-btn,
.wol-result__content .base-btn {
	height: 64px;
	padding: 0 40px;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
}

.wol-footer__info {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	font-size: 20px;
	font-weight: 700;
	text-decoration: underline;
}

.wol-footer__info .toggle-rules-btn {
	width: 32px;
	height: 32px;
}
.wol-footer__info svg {
	width: 100%;
	height: 100%;
}

.wol-footer__rules {
	margin-top: 10px;
	opacity: 1;
}
.wol-footer__rules[hidden] {
	display: unset;
	opacity: 0;
}

.wol-spinner-wrapper {
	position: relative;
	width: clamp(600px, 45vw, 740px);
	aspect-ratio: 1;
	background-size: contain;
}

.wol-spinner-rotor {
	z-index: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14.32%;
	aspect-ratio: 1;
	background-size: contain;
}

.wol-spinner-arrow {
	z-index: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: auto;
	width: 11.89%;
	aspect-ratio: 88/124;
	background-size: contain;
}

.wol-spinner-slice-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 82.43%;
	aspect-ratio: 1;
	clip-path: circle(50%);
}
.wol-spinner-slice-container.spinning {
	animation-duration: 5.2s;
	animation-timing-function: cubic-bezier(0.440, -0.205, 0.000, 1.130);
}

.wol-spinner-slice {
	position: absolute;
  top: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-right: 8%;
	padding-left: 3.5%;
	transform-origin: right center;
	clip-path: polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%);
}

.wol-spinner-slice span {
	font-size: 20px;
	font-weight: 700;
}

.activeRtl .wol-spinner-arrow {
	left: auto;
	right: 0;
	transform: translateY(-50%) scaleX(-1);
}

/*
ltr so it doesnt mess with the slice initial position rendering
then make it rtl through flipping it
*/
.activeRtl .wol-spinner-wrapper {
	direction: ltr;
}

.activeRtl .wol-spinner-slice-container {
	transform: translate(-50%, -50%) rotate(180deg);
}

.activeRtl .wol-spinner-slice span {
	direction: rtl;
	transform: scale(-1);
}

@media (max-width: 1200px) {
	.wol-layer {
		gap: 30px;
	}

	.wol-header__title, .wol-header__description > p {
		font-size: 15.5px;
	}

	.wol-header img {
		width: 358px;
		height: 172px;
	}

	.wol-footer .base-btn,
	.wol-result__content .base-btn {
		height: 46px;
		padding: 0 30px;
		font-size: 15.5px;
	}

	.wol-result__content {
		width: 100%;
		height: 100%;
		aspect-ratio: unset;
	}

	.wol-result__title {
		font-size: 18px;
	}

	.wol-result__description {
		font-size: 35px;
	}

	.wol-footer__info {
		font-size: 15.5px;
	}

	.wol-footer__info .toggle-rules-btn {
		width: 24px;
		height: 24px;
	}

	.wol-footer__rules {
		font-size: 11.5px;
	}

	.wol-spinner-wrapper {
		width: clamp(400px, 50vw, 600px);
	}

	.wol-spinner-slice {
		font-size: 15.5px;
	}
}

@media (max-width: 768px) {
	.wol-layer {
		top: var(--header-height-mob);
		flex-direction: column;
		gap: 20px;
		padding: 16px 0;
		overflow-y: auto;
	}

	.wol-left {
		display: contents;
	}

	.wol-header {
		gap: 8px;
	}

	.wol-header__title, .wol-header__description > p {
		font-size: 11px;
	}

	.wol-header img {
		width: 217px;
		height: 104px;
	}

	.wol-footer {
		order: 2;
		margin-top: unset;
	}
	
	.wol-footer .base-btn,
	.wol-result__content .base-btn {
		height: 36px;
		padding: 0 20px;
		font-size: 12px;
	}

	.wol-result__title {
		font-size: 16px;
	}

	.wol-result__description {
		font-size: 25px;
	}

	.wol-footer__info {
		margin-top: 20px;
		font-size: 12px;
	}

	.wol-footer__info .toggle-rules-btn {
		width: 16px;
		height: 16px;
	}

	.wol-footer__rules {
		margin-top: 6px;
		font-size: 9px;
	}

	.wol-spinner-wrapper {
		width: clamp(300px, 83.33vw, 400px);
	}

	.wol-spinner-slice span {
		font-size: 11px;
	}
}

@media (max-width: 400px) {
	.wol-spinner-slice span {
		font-size: 9px;
	}
}

/* ##MultiSlideSlider - ##HomeSlider */
.PagePartSlider {
	position: relative;
	width: 100%;
	height: 400px;
}

.PagePartSlider .slider-button-prev,
.PagePartSlider .slider-button-next {
	position: absolute;
	top: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 100%;
}
.PagePartSlider .slider-button-prev > svg,
.PagePartSlider .slider-button-next > svg {
	width: 21px;
	height: 42px;
	color: var(--color-text);
	opacity: 0.5;
	transition: opacity 0.3s ease;
	cursor: pointer;
}
.PagePartSlider .slider-button-prev > svg:hover,
.PagePartSlider .slider-button-next > svg:hover {
	opacity: 1;
}

.PagePartSlider .slider-button-prev {
	left: 0;
	background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.PagePartSlider .slider-button-next {
	right: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.activeRtl .PagePartSlider .slider-button-prev,
.activeRtl .PagePartSlider .slider-button-next {
	transform: scaleX(-1);
}
.activeRtl .PagePartSlider .slider-button-prev {
	left: unset;
	right: 0;
}
.activeRtl .PagePartSlider .slider-button-next {
	right: unset;
	left: 0;
}

.PagePartSlider .slider-wrapper {
	position: initial;
	width: 100%;
	height: 100%;
	user-select: none;
}

.PagePartSlider .slides-container {
	display: flex;
	width: 100%;
	height: 100%;
}

.PagePartSlider .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
}

.PagePartSlider .slider-wrapper .lcp-priority::before,
.PagePartSlider .slider-wrapper .lcp-priority::after {
	transition: none;
}

.PagePartSlider .slider-wrapper .lcp-priority img,
.PagePartSlider .slider-wrapper .lcp-priority .item__content {
	opacity: 1 !important;
	transition: none !important;
}

.PagePartSlider .slider-wrapper .item {
	position: relative;
	height: 100%;
}

.PagePartSlider .slider-wrapper .item__content {
	position: absolute;
  padding: 4% 10%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.PagePartSlider .slider-wrapper .item__content h2 {
	width: 60%;
	font-weight: 700;
	font-size: 50px;
}

.PagePartSlider .slider-wrapper .item__content p {
	width: 60%;
	font-weight: 400;
	font-size: 30px;
}

.PagePartSlider .slider-wrapper .item__content a {
	width: fit-content;
	height: 51px;
	padding: 0px 24px;
	font-size: 16px;
	font-weight: 700;
}

.PagePartSlider .slider-wrapper .item__image {
	width: 100%;
	height: 100%;
}

.PagePartSlider .slider-wrapper .item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65%;
	-webkit-user-drag: none;
	pointer-events: none;
}

.activeRtl .PagePartSlider .item .item__image img {
	object-position: 35%;
}

@media (max-width: 1200px) {
  .PagePartSlider {
    height: 300px;
  }

  .PagePartSlider .slider-button-prev,
  .PagePartSlider .slider-button-next {
    width: 66px;
  }

  .PagePartSlider .slider-button-prev > svg,
  .PagePartSlider .slider-button-next > svg {
    width: 18px;
    height: 36px;
  }

  .PagePartSlider .item .item__image img {
    object-position: 75%;
  }

  .PagePartSlider .activeRtl .item .item__image img {
    object-position: 25%;
  }

  .PagePartSlider .slider-wrapper .item__content h2 {
    font-size: 40px;
  }

  .PagePartSlider .slider-wrapper .item__content p {
    font-size: 24px;
  }

  .PagePartSlider .slider-wrapper .item__content a {
    height: 46px;
    padding: 0 22px;
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  .PagePartSlider {
    height: 250px;
  }

  .PagePartSlider .slider-button-prev,
  .PagePartSlider .slider-button-next {
    width: 52px;
  }

  .PagePartSlider .slider-button-prev > svg,
  .PagePartSlider .slider-button-next > svg {
    width: 15px;
    height: 30px;
  }

  .PagePartSlider .slider-wrapper .item__content h2 {
    font-size: 32px;
  }

  .PagePartSlider .slider-wrapper .item__content p {
    font-size: 18px;
  }

  .PagePartSlider .slider-wrapper .item__content a {
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .PagePartSlider {
    height: 200px;
  }

  .PagePartSlider .slider-button-prev,
  .PagePartSlider .slider-button-next {
    width: 38px;
  }

  .PagePartSlider .slider-button-prev > svg,
  .PagePartSlider .slider-button-next > svg {
    width: 12px;
    height: 24px;
  }

  .PagePartSlider .slider-wrapper .item__content h2 {
    font-size: 24px;
  }

  .PagePartSlider .slider-wrapper .item__content p {
    font-size: 14px;
  }

  .PagePartSlider .slider-wrapper .item__content a {
		height: 36px;
    padding: 0px 20px;
    font-size: 12px;
  }
}

@media (max-width: 576px) {
	.PagePartSlider {
		height: 150px;
	}

	.PagePartSlider .slider-button-prev,
	.PagePartSlider .slider-button-next {
		width: 20px;
	}

	.PagePartSlider .slider-button-prev > svg,
	.PagePartSlider .slider-button-next > svg {
		width: 8px;
		height: 16px;
	}

	.PagePartSlider .slider-wrapper .item__content h2 {
		font-size: 14px;
	}

	.PagePartSlider .slider-wrapper .item__content p {
		font-size: 9px;
	}

	.PagePartSlider .slider-wrapper .item__content a {
		height: 30px;
		padding: 0 12px;
		font-size: 9px;
	}
}

/* ##HeroBanner — single-slide counterpart of .PagePartSlider: same look, no Slider */
.PagePartHeroBanner {
	position: relative;
	width: 100%;
	height: 400px;
}

/* Vertically centred on the banner by position, not by padding: the block keeps
   its own height, so it stays centred whatever the slot variants make it. */
.PagePartHeroBanner .hero-banner__content {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 10%;
}

.PagePartHeroBanner .hero-banner__title {
	width: 60%;
	font-weight: 700;
	font-size: 50px;
}

.PagePartHeroBanner .hero-banner__description {
	width: 60%;
	font-weight: 400;
	font-size: 30px;
}

.PagePartHeroBanner .hero-banner__cta {
	width: fit-content;
	height: 51px;
	padding: 0px 24px;
	font-size: 16px;
	font-weight: 700;
}

.PagePartHeroBanner .hero-banner__image {
	display: block;
	width: 100%;
	height: 100%;
}

.PagePartHeroBanner .hero-banner__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65%;
	-webkit-user-drag: none;
	pointer-events: none;
}

.activeRtl .PagePartHeroBanner .hero-banner__image img {
	object-position: 35%;
}

/* Guest/user variant wrappers (e.g. refer-a-friend): transparent to the content's
   flex layout once shown; [hidden] keeps the UA display:none until then. */
.PagePartHeroBanner .hero-banner__guest:not([hidden]),
.PagePartHeroBanner .hero-banner__user:not([hidden]) {
	display: contents;
}
/* Variants carry their own display (flex rows, base-btn), which outranks the UA
   [hidden] rule — restore it so only the variant main.js picks shows. */
.PagePartHeroBanner [data-raf-variant][hidden] {
	display: none;
}

/* Variant stack: all variants of one slot share a single grid cell, so the slot
   is as tall as its tallest variant. */
.PagePartHeroBanner .hero-banner__stack {
	display: grid;
	/* Not stretch: a short variant (single button) keeps its own size inside the cell. */
	place-items: start;
}
.PagePartHeroBanner .hero-banner__stack > *,
.PagePartHeroBanner .hero-banner__stack > .hero-banner__user > * {
	grid-area: 1 / 1;
}
/* Logged in (cookie, set before first paint): the user variants switch after the
   overlay + refer-a-friend requests, so the hidden ones keep their box but are not
   painted — the slot height never changes and centred content does not jump.
   Guests never switch, so their layout is left as is. */
html.is-logged-in .PagePartHeroBanner .hero-banner__stack > .hero-banner__user[hidden] {
	display: contents;
	visibility: hidden;
}
html.is-logged-in .PagePartHeroBanner .hero-banner__stack p[data-raf-variant][hidden] {
	display: block;
	visibility: hidden;
}
html.is-logged-in .PagePartHeroBanner .hero-banner__stack div[data-raf-variant][hidden] {
	display: flex;
	visibility: hidden;
}

/* Copy button: the default and "copied" states (text + icon each) share one grid
   cell, so the button keeps the wider state's width when main.js toggles .is-copied. */
.PagePartHeroBanner .copy-link-btn {
	display: grid;
	place-items: center;
}
.PagePartHeroBanner .copy-link-btn__state {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
}
.PagePartHeroBanner .copy-link-btn:not(.is-copied) .copy-link-btn__state:last-child,
.PagePartHeroBanner .copy-link-btn.is-copied .copy-link-btn__state:first-child {
	visibility: hidden;
}

@media (max-width: 1200px) {
	.PagePartHeroBanner {
		height: 300px;
	}

	.PagePartHeroBanner .hero-banner__image img {
		object-position: 75%;
	}

	.PagePartHeroBanner .hero-banner__title {
		font-size: 40px;
	}

	.PagePartHeroBanner .hero-banner__description {
		font-size: 24px;
	}

	.PagePartHeroBanner .hero-banner__cta {
		height: 46px;
		padding: 0 22px;
		font-size: 14px;
	}
}

@media (max-width: 992px) {
	.PagePartHeroBanner {
		height: 250px;
	}

	.PagePartHeroBanner .hero-banner__title {
		font-size: 32px;
	}

	.PagePartHeroBanner .hero-banner__description {
		font-size: 18px;
	}

	.PagePartHeroBanner .hero-banner__cta {
		height: 40px;
		padding: 0 20px;
		font-size: 13px;
	}
}

@media (max-width: 768px) {
	.PagePartHeroBanner {
		height: 200px;
	}

	.PagePartHeroBanner .hero-banner__title {
		font-size: 24px;
	}

	.PagePartHeroBanner .hero-banner__description {
		font-size: 14px;
	}

	.PagePartHeroBanner .hero-banner__cta {
		height: 36px;
		padding: 0px 20px;
		font-size: 12px;
	}
}

@media (max-width: 576px) {
	.PagePartHeroBanner {
		height: 150px;
	}

	.PagePartHeroBanner .hero-banner__title {
		font-size: 14px;
	}

	.PagePartHeroBanner .hero-banner__description {
		font-size: 9px;
	}

	.PagePartHeroBanner .hero-banner__cta {
		height: 30px;
		padding: 0 12px;
		font-size: 9px;
	}
}

/* ##NewsSlider (header, wrapper and slider-actions rules shared with ##PromotionSlider) */
.news-slider .section-lastNews__header,
.promotion-slider .section-promotions__header {
	margin-bottom: 16px;
}

.news-slider .section-lastNews__header h2,
.promotion-slider .section-promotions__header h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	font-weight: 700;
}

.news-slider .section-lastNews__header h2 svg,
.promotion-slider .section-promotions__header h2 svg {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	color: var(--color-brand-1);
}

.news-slider .slider-wrapper,
.promotion-slider .slider-wrapper {
	position: relative;
	width: 100%;
}

.news-slider .slides-container {
	display: flex;
	gap: 22px;
}

.news-slider .swiper-slide {
	--news-per-view: 2;
	flex: 0 0 calc((100% - (var(--news-per-view) - 1) * 22px) / var(--news-per-view));
	min-width: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.news-slider .swiper-slide.swiper-slide-visible {
	opacity: 1;
}

@media (min-width: 576px) {
	.news-slider .swiper-slide { --news-per-view: 3; }
}
@media (min-width: 768px) {
	.news-slider .swiper-slide { --news-per-view: 4; }
}
@media (min-width: 992px) {
	.news-slider .swiper-slide { --news-per-view: 5; }
}
@media (min-width: 1200px) {
	.news-slider .swiper-slide { --news-per-view: 6; }
}

.news-slider .item {
	container: news-item / inline-size;
	aspect-ratio: 290/365;
}

.news-slider .item__content {
	flex-grow: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.news-slider .item__content h2 {
	font-size: 16px;
	font-weight: 700;
}
.news-slider .item__content p {
	font-size: 16px;
	color: var(--color-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@container news-item (max-width: 244px) {
	.news-slider .item__content { 
		padding: 15px; 
		gap: 7.5px; 
	}
	.news-slider .item__content h2,
	.news-slider .item__content p { 
		font-size: 12.5px; 
	}
}
@container news-item (max-width: 198px) {
	.news-slider .item__content {
		padding: 10px; 
		gap: 5px; 
	}
	.news-slider .item__content h2,
	.news-slider .item__content p { 
		font-size: 9px; 
	}
}

.news-slider .item__box { 
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-surface-4);
}
.news-slider .item__image {
	aspect-ratio: 280 / 160;
	overflow: hidden;
}
.news-slider .item__image img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
}

.news-slider .section-lastNews__content .slider-actions,
.promotion-slider .section-promotions__content .slider-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 64px;
	margin-top: 24px;
}

.news-slider .section-lastNews__content .slider-actions .base-btn,
.promotion-slider .section-promotions__content .slider-actions .base-btn {
	min-width: 150px;
	font-weight: 700;
}

.news-slider .section-lastNews__content .slider-actions .slider-button-prev,
.news-slider .section-lastNews__content .slider-actions .slider-button-next,
.promotion-slider .section-promotions__content .slider-actions .slider-button-prev,
.promotion-slider .section-promotions__content .slider-actions .slider-button-next {
	color: var(--color-brand-3);
	cursor: pointer;
}

.activeRtl .news-slider .section-lastNews__content .slider-actions .slider-button-prev,
.activeRtl .news-slider .section-lastNews__content .slider-actions .slider-button-next,
.activeRtl .promotion-slider .section-promotions__content .slider-actions .slider-button-prev,
.activeRtl .promotion-slider .section-promotions__content .slider-actions .slider-button-next {
	transform: scaleX(-1);
}


@media (max-width: 768px) {
	.news-slider .section-lastNews__header h2,
	.promotion-slider .section-promotions__header h2 {
		font-size: 16px;
	}

	.news-slider .section-lastNews__header h2 svg,
	.promotion-slider .section-promotions__header h2 svg {
		width: 30px;
		height: 30px;
	}

	.news-slider .section-lastNews__content .slider-actions,
	.promotion-slider .section-promotions__content .slider-actions {
		gap: 20px;
	}
}

/* ##PromotionSlider — same engine, fade and slider-actions as ##NewsSlider (shared
   rules above); the cards are .promotion-card (##Promotions). */
.promotion-slider .slides-container {
	--promo-gap: 20px;
	display: flex;
	gap: var(--promo-gap);
}

.promotion-slider .swiper-slide {
	--promo-per-view: 3;
	flex: 0 0 calc((100% - (var(--promo-per-view) - 1) * var(--promo-gap)) / var(--promo-per-view));
	min-width: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.promotion-slider .swiper-slide.swiper-slide-visible {
	opacity: 1;
}

/* Per-view count and gap follow the /promotions grid (3 / 2 / 1 columns), so a
   card is the same size here as there at the same viewport. */
@media (max-width: 1400px) {
	.promotion-slider .slides-container { --promo-gap: 15px; }
	.promotion-slider .swiper-slide { --promo-per-view: 2; }
}
@media (max-width: 1200px) {
	.promotion-slider .slides-container { --promo-gap: 10px; }
}
@media (max-width: 767px) {
	.promotion-slider .swiper-slide { --promo-per-view: 1; }
}

/* ##Blog — NewsItems (the list) and NewsItemContent (one article) */
.page-blog,
.page-article {
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 0 32px;
}

.page-blog__title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.page-blog__title svg {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	color: var(--color-brand-1);
}

.page-blog__title h1 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.page-blog__title p {
	margin-top: 4px;
	font-size: 18px;
	color: var(--color-text-muted);
}

.page-blog__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.page-blog__item {
	overflow: hidden;
	background: var(--color-surface-4);
	border-radius: 10px;
}

.page-blog__image {
	display: block;
	aspect-ratio: 1062 / 418;
}

.page-blog__image img,
.page-article__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.page-blog__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 28px 24px;
}

.page-blog__content-top,
.page-article__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.page-blog__content-top h2 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

.page-blog__content-top h2 a {
	color: var(--color-text);
	text-decoration: none;
}

.page-blog__category,
.page-article__category {
	flex: 0 0 auto;
	padding: 4px 20px;
	border: 2px solid var(--color-brand-1);
	border-radius: var(--radius);
	font-size: 16px;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.page-blog__category:hover,
.page-article__category:hover {
	background: var(--color-surface-3);
}

.page-blog__date,
.page-article__date {
	font-size: 14px;
	color: var(--color-text-muted);
}

.page-blog__desc {
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.page-blog .pagination {
	margin-top: 32px;
}

.page-article {
	padding: 32px 40px;
	background: var(--color-surface-4);
	border-radius: 10px;
}

.page-article__image {
	aspect-ratio: 1180 / 400;
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: 8px;
}

.page-article__top {
	margin-bottom: 12px;
}

.page-article__top h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.page-article__date {
	display: block;
	margin-bottom: 24px;
}

.page-article__description {
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
}

.page-article__description h2 {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
}

.page-article__description h3 {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 500;
}

.page-article__description p,
.page-article__description ul,
.page-article__description ol {
	margin-bottom: 16px;
}

.page-article__description img {
	max-width: 100%;
	height: auto;
}

.page-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.page-article__tags .base-btn {
	min-width: 120px;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.page-blog {
		padding: 16px 12px 24px;
	}

	.page-blog__title svg {
		width: 32px;
		height: 32px;
	}

	.page-blog__title h1 {
		font-size: 20px;
	}

	.page-blog__title p {
		font-size: 13px;
	}

	.page-blog__image {
		aspect-ratio: 800 / 450;
	}

	.page-blog__content {
		padding: 14px 16px 18px;
	}

	.page-blog__content-top h2 {
		font-size: 16px;
	}

	.page-blog__category {
		padding: 3px 10px;
		font-size: 12px;
	}

	.page-blog__desc {
		font-size: 14px;
	}

	.page-article {
		padding: 20px 16px;
	}

	.page-article__image {
		aspect-ratio: 800 / 450;
	}

	.page-article__top h1 {
		font-size: 20px;
	}

	.page-article__description {
		font-size: 14px;
	}
}

/* ##WinnersBoxList */
.winners-box {
	/* Rows per view: N full rows plus half a "preview" row (.swiper-slide-visible-last),
	   so keep the .5 — the row height follows from the box height. It is a maximum: in
	   a box too short for it, rows keep their content height and fewer fit. The largest
	   value used (rounded up) must stay <= LOOP_CLONES in components/winnersBox.js. */
	--winners-per-view: 8.5;
	--winners-gap: 10px;
	position: relative;
	background: var(--color-surface-4);
	border-radius: 14px;
}

.winners-box .winners-box__label {
	position: absolute;
	top: -24px;
	transform: translateY(-100%);
	font-size: 18px;
	font-weight: 700;
}

.winners-box .slider-wrapper {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 10px;
}

.winners-box .slides-container {
	display: flex;
	flex-direction: column;
	gap: var(--winners-gap);
	height: 100%;
	padding: 8px 8px 0 8px;
}

.winners-box .swiper-slide {
	/* One gap per full row (the half row has none after it). No min-height: 0 on
	   purpose — the flex default (min-height: auto) keeps a row at least as tall as
	   its two text lines, so a short box shows fewer rows instead of clipping them. */
	flex: 0 0 calc((100% - (var(--winners-per-view) - 0.5) * var(--winners-gap)) / var(--winners-per-view));
	padding: 6px 10px;
	border-radius: 10px;
	background: var(--color-separator);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.winners-box .swiper-slide.swiper-slide-visible {
	opacity: 1;
}
.winners-box .swiper-slide.swiper-slide-visible.swiper-slide-visible-last{
	opacity: 0.2;
}

.winners-box__row {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	color: var(--color-text);
	font-size: 12px;
	font-weight: 700;
}

.winners-box__game {
	color: var(--color-brand-3);
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ##Navbar */
.PagePartNavbar {
	height: var(--navbar-height);
}

.PagePartNavbar.is-pinned {
	position: fixed;
	top: var(--header-height, 64px);
	left: 0;
	right: 0;
	z-index: 100;
}

.PagePartNavbar .navbar-wrapper {
	display: flex;
	justify-content: center;
	gap: 32px;
	height: 100%;
	padding: 12px 32px;
	background: var(--color-navbar-bg);
}

.PagePartNavbar .slider-wrapper {
	min-width: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 40px;
	background: var(--color-navbar-slider-bg);
	box-shadow: 0px 0px 12px 0px #00000080 inset;
}
.PagePartNavbar .slider-wrapper.is-dragging {
	user-select: none;
}

.PagePartNavbar .slides-container {
	display: flex;
	gap: 8px;
	height: 100%;
	padding: 3px;
}

.PagePartNavbar .list__item {
	position: relative;
	width: max-content;
	height: 100%;
}

.PagePartNavbar .list__item a {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 12px;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0;
	transition: filter 0.3s ease;
}
.PagePartNavbar .list__item a.active {
	pointer-events: none;
}
.PagePartNavbar .list__item a.active::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 100px;
	background: var(--color-text-white);
	opacity: 0.15;
}
@media (hover: hover) {
	.PagePartNavbar .list__item a:hover:not(.active) {
		filter: drop-shadow(0 2px 8px var(--color-brand-1));
	}
	.PagePartNavbar .list__item a:hover:not(.active) img, .PagePartNavbar .list__item a:hover:not(.active) span {
		filter: drop-shadow(0px 0px 4px var(--color-brand-1));
	}
}

.PagePartNavbar .list__item img, 
.PagePartNavbar .list__item picture,
.PagePartNavbar .list__item .iconode-icon {
	width: 30px;
	height: 30px;
}

.PagePartNavbar .list__item .wol-icon__container {
	margin-right: 6px;
}
.PagePartNavbar .list__item .wol-icon__spin-badge {
	top: 0;
}

.PagePartNavbar .navbar-search, .PagePartNavbar .navbar-home{
	height: 100%;
	aspect-ratio: 1;
	padding: 7px;
	cursor: pointer;
}
.PagePartNavbar .navbar-search {
	gap: 10px;
	aspect-ratio: unset;
	font-size: 16px;
	font-weight: 600;
}
.PagePartNavbar .navbar-home::before, .PagePartNavbar .navbar-home::after {
	border-radius: 8px;
}
.PagePartNavbar .navbar-search__text {
	cursor: pointer;
}

@media (max-width: 768px) {
	.PagePartNavbar {
		height: var(--navbar-height-mob);
	}
	.PagePartNavbar.is-pinned {
		top: var(--header-height-mob, 56px);
	}
	.PagePartNavbar .navbar-wrapper {
		gap: 12px;
		padding: 8px 12px;
	}
	.PagePartNavbar .slides-container {
		gap: 4px;
		padding: 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.PagePartNavbar .slides-container::-webkit-scrollbar { display: none; }
	.PagePartNavbar .list__item a {
		gap: 4px;
		padding: 0 6px;
		font-size: 10px;
		font-weight: 600;
	}
	.PagePartNavbar .list__item img,
	.PagePartNavbar .list__item picture,
	.PagePartNavbar .list__item .iconode-icon {
		width: 20px;
		height: 20px;
	}
	.PagePartNavbar .list__item .wol-icon__spin-badge {
		width: 12px;
		height: 12px;
	}

	.PagePartNavbar .navbar-search,
	.PagePartNavbar .navbar-search::before, 
	.PagePartNavbar .navbar-search::after {
		border-radius: 8px;
	}
	.PagePartNavbar .navbar-search__text {
		display: none;
	}
}

/* ##Games */
.category-section {
	padding: 24px 32px;
	background: var(--color-surface-3);
	border-top: 2px solid var(--color-surface-1);
	border-radius: 20px;
}

.category-section__header {
  display: flex;
	flex-direction: column;
	gap: 10px;
  margin-bottom: 16px;
}

.category-section__header h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	font-weight: 700;
}

.category-section__header h2 img {
  width: 40px;
  height: auto;
}

.category-section__filter,
.category-section__filter-label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.category-section__filter-dropdown {
	width: 214px;
	height: 36px;
}

.category-section__filter-dropdown {
	width: 214px;
	height: 36px;
}
.category-section__filter-dropdown .base-dropdown__option.not-present {
	display: none;
} 

.category-section__footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.category-section__footer[hidden] {
	display: none;
}

.category-section__footer .footer-btn {
	min-width: 150px;
	font-weight: 700;
}

.category-section__preview {
	margin-bottom: 16px;
}

.BaseGameCardContainer {
	display: grid;
	gap: 16px 20px;
	grid-template-columns: repeat(7, 1fr);
}

.BaseGameCardContainer .game-card {
	position: relative;
	width: 100%;
	min-width: 0;
	transition: transform 0.3s ease;
}
.BaseGameCardContainer .game-card[data-filter-hidden] {
	display: none;
}

.BaseGameCardContainer .game-card:hover {
	transform: translateY(-3px);
}

.BaseGameCardContainer .game-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.BaseGameCardContainer .game-card__thumb-wrap {
	flex-grow: 1;
	position: relative;
	width: 100%;
	aspect-ratio: 275/205;
	border-radius: 10px;
	overflow: hidden;
}

.BaseGameCardContainer .game-card__thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.BaseGameCardContainer .game-card__overlay {
	display: none;
}

.BaseGameCardContainer .game-card__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	max-width: 100%;
	padding: 6px 15px 4px 15px;
	color: var(--color-text);
	overflow: hidden;
}

.BaseGameCardContainer .game-card__name {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 700;
}

.BaseGameCardContainer .game-card__provider {
	color: var(--color-text-accent);
	text-align: center;
	font-weight: 300;
	font-size: 13px;
}

.GamesBlockWithWinnersList .winners-box {
	background: var(--color-surface-4);
	border-radius: 14px;
	grid-row: 1 / 3 ;
}

@media (min-width: 1401px) {
	.category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(22n + 1),
	.category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(22n + 12) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}

	.category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(22n + 17),
	.category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(22n + 6) {
		grid-row: span 2;
		grid-column: 6 / 8;
	}

	.category-section__games.see-all-mode.GamesBlockWithWinnersList .winners-box {
		grid-column: 7 / 8;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(22n + 14) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(22n + 30) {
		grid-row: span 2;
		grid-column: 6 / 8;
	}

	.category-section__games.see-all-mode.js-positioned .big-item-left {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.js-positioned .big-item-right {
		grid-row: span 2;
		grid-column: 6 / 8;
	}
}

@media (min-width: 1201px) and (max-width: 1400px) {
	.BaseGameCardContainer {
		grid-template-columns: repeat(6, 1fr);
	}

	.category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(18n + 1),
	.category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(18n + 10) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}

	.category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(18n + 14),
	.category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(18n + 5) {
		grid-row: span 2;
		grid-column: 5 / 7;
	}

	.category-section__games.see-all-mode.GamesBlockWithWinnersList .winners-box {
		grid-column: 6 / 7;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(18n + 12) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(18n + 25) {
		grid-row: span 2;
		grid-column: 5 / 7;
	}

	.category-section__games.see-all-mode.js-positioned .big-item-left {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.js-positioned .big-item-right {
		grid-row: span 2;
		grid-column: 5 / 7;
	}

	.BaseGameCardContainer:not(.see-all-mode) > :nth-child(n + 13) {
		display: none;
	}
}

@media (min-width: 993px) and (max-width: 1200px) {
  .BaseGameCardContainer {
		grid-template-columns: repeat(5, 1fr);
	}

  .category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(14n + 1),
  .category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(14n + 8) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}

	.category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(14n + 11),
	.category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(14n + 4) {
		grid-row: span 2;
		grid-column: 4 / 6;
	}

	.category-section__games.see-all-mode.GamesBlockWithWinnersList .winners-box {
		grid-column: 5 / 6;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(14n + 10) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(14n + 20) {
		grid-row: span 2;
		grid-column: 4 / 6;
	}

	.category-section__games.see-all-mode.js-positioned .big-item-left {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.js-positioned .big-item-right {
		grid-row: span 2;
		grid-column: 4 / 6;
	}

	.BaseGameCardContainer:not(.see-all-mode) > :nth-child(n + 11) {
		display: none;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
  .BaseGameCardContainer {
		grid-template-columns: repeat(4, 1fr);
	}

  .category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(18n + 1),
  .category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(18n + 10) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}

	.category-section__games.see-all-mode.GamesBlockWithBigLeftItem:not(.js-positioned) > :nth-child(18n + 12),
	.category-section__games.see-all-mode.GamesBlockWithBigRightItem:not(.js-positioned) > :nth-child(18n + 3) {
		grid-row: span 2;
		grid-column: 3 / 5;
	}

	.category-section__games.see-all-mode.GamesBlockWithWinnersList .winners-box {
		grid-column: 4 / 5;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(18n + 12) {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.GamesBlockWithWinnersList:not(.js-positioned) > :nth-child(18n + 23) {
		grid-row: span 2;
		grid-column: 3 / 5;
	}

	.category-section__games.see-all-mode.js-positioned .big-item-left {
		grid-row: span 2;
		grid-column: 1 / 3;
	}
	.category-section__games.see-all-mode.js-positioned .big-item-right {
		grid-row: span 2;
		grid-column: 3 / 5;
	}

	.BaseGameCardContainer:not(.see-all-mode) > :nth-child(n + 13) {
		display: none;
	}
}

@media (max-width: 768px) {
	.category-section {
		padding: 16px;
	}

	.category-section__header h2 {
		font-size: 16px;
	}

	.category-section__header h2 img {
		width: 30px;
		height: 30px;
	}

	.BaseGameCardContainer .game-card__name {
		font-size: 12px;
		font-weight: 600;
	}

	.BaseGameCardContainer .game-card__provider {
		font-size: 11px;
	}

  .BaseGameCardContainer {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 18px;
	}

	.category-section__games.see-all-mode.GamesBlockWithWinnersList .winners-box {
		display: none;
	}

	.BaseGameCardContainer:not(.see-all-mode) > :nth-child(n + 10) {
		display: none;
	}
}

@media (max-width: 576px) {
  .BaseGameCardContainer {
		grid-template-columns: repeat(2, 1fr);
	}

	.BaseGameCardContainer:not(.see-all-mode) > :nth-child(n + 7) {
		display: none;
	}
}

/* ##GameLauncher */
.page-lobby {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 32px;
}

.page-lobby__content {
	display: flex;
	justify-content: center;
	gap: 48px;
	width: 100%;
	height: calc(100dvh - var(--header-height) - 48px);
}

.page-lobby .launcher-box {
	display: flex;
	flex-direction: column;
	width: 60%;
	background: var(--color-surface-2);
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
.page-lobby .launcher-box.fullscreen { border-radius: 0; }

.page-lobby .launcher-box__header {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	height: 48px;
	padding: 8px 12px;
	background: var(--color-surface-1);
}

.page-lobby .launcher-box__header .left {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
}

.page-lobby .launcher-box__header .left img {
	height: 100%;
}

.page-lobby .launcher-box__header .right {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.page-lobby .launcher-box__notice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 40px;
}
.page-lobby .launcher-box__notice h2 {
	font-size: 16px;
	font-weight: 600;
}
.page-lobby .launcher-box__notice button {
	height: 40px;
	text-transform: uppercase;
}

.page-lobby .launcher-box__content, .page-lobby .launcher-box__frame {
	width: 100%;
	height: 100%;
}

.page-lobby .launcher-box__loading:not([hidden]) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 100%;
}

.page-lobby .launcher-box__loading .base-loading-spinner {
  width: 42px;
  height: 42px;
}

.page-lobby .lobby-info {
	display: flex;
	flex-direction: column;
	width: 300px;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.page-lobby .lobby-info__header {
	display: flex;
	align-items: stretch;
	height: 64px;
}

.page-lobby .lobby-info__header button {
	flex-basis: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-surface-2);
}
.page-lobby .lobby-info__header button.active {
	background: var(--color-surface-1);
}

.page-lobby .lobby-info__content {
	flex-grow: 1;
	background: var(--color-surface-3);
}

.lobby-info__content .winners-box {
	--winners-per-view: 10.5;
	height: 100%;
	border-radius: 0;
}

.lobby-info__content .info-tab:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.lobby-info__content .info-tab picture {
	width: 100%;
}

.lobby-info__content .info-tab img {
	display: inline-block;
	width: 100%;
	aspect-ratio: 275/205;
}

.lobby-info__content .info-tab h2 {
	color: var(--color-text-accent);
}

.page-lobby__suggested h2 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-text-muted);
}

@media (max-width: 1200px) {
	.page-lobby .lobby-info {
		display: none;
	}

	.page-lobby .launcher-box {
		width: 80%;
	}
}

@media (max-width: 768px) {
	.page-lobby {
		padding: 0 0 24px 0;
	}

	.page-lobby .page-lobby__content {
		width: 100%;
		height: calc(100dvh - 56px);
	}

	.page-lobby .launcher-box {
		flex-direction: column-reverse;
		width: 100%;
		border-radius: 0;
	}

	.page-lobby .launcher-box__header .lobby__icon-btn {
		display: none;
	}

	.page-lobby .page-lobby__suggested {
		padding: 0 12px;
	}
}

/* ##Promotions */
.page-promotions {
  display: flex;
  justify-content: center;
}

.page-promotions__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  min-width: 269px;
  max-width: calc(3 * 600px + 2 * 20px);
  gap: 24px 20px;
}

.page-promotions__header {
  display: flex;
  justify-content: space-between;
  margin-left: 32px;
  grid-column: 1 / span 3;
}

.page-promotions__title {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.page-promotions__title h1 {
  font-weight: 700;
  font-size: 40px;
}

/* Category tabs (Casino / Sport): the brand's own button styles, primary for the selected one. */
.page-promotions__header:has(.page-promotions__filter) {
  align-items: center;
  gap: 20px;
}

.page-promotions__filter {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.page-promotions__filter .base-btn {
  height: 38px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.page-promotions__list .item[hidden] {
  display: none;
}

/* Promotion card — shared by the /promotions grid and the home PromotionSlider
   (components/pageParts/promotionsItems.js renderPromotionCard). */
.promotion-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2.4;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  container: card / inline-size;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.promotion-card .item__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 0 30px;
}

.promotion-card .item__content h2 {
	max-width: 50%;
  font-weight: 700;
  font-size: clamp(14px, 0.494vw + 14.52px, 24px);
}

.promotion-card .item__content p {
	max-width: 47.5%;
  /* margin-bottom: clamp(8px, 0.89vw + 2.85px, 20px); */
  font-weight: 400;
  font-size: clamp(9px, 0.321vw + 7.85px, 14px);
}

.promotion-card .item__content .link {
	min-width: fit-content;
  width: clamp(78px, 23%, 128px);
  height: clamp(25px, 17%, 42px);
  font-weight: 700;
  font-size: clamp(9px, 0.321vw + 7.85px, 12px);
}

.promotion-card .item__content .link:hover {
  background-color: transparent;
}

.promotion-card .item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1400px) {
  .page-promotions__header { margin-left: 16px; grid-column: 1 / span 2; }
  .page-promotions__title h1 { font-size: 36px; }
  .page-promotions__list { grid-template-columns: repeat(2, 1fr); max-width: calc(2 * 600px + 15px); gap: 22px 15px; }
  .promotion-card .item__content { gap: 17px; padding: 0 27px; }
}

@media screen and (max-width: 1200px) {
  .page-promotions__header { margin-left: 10px; }
  .page-promotions__title h1 { font-size: 32px; }
  .page-promotions__list { gap: 20px 10px; }
  .promotion-card .item__content { gap: 14px; padding: 0 23px; }
}

@media screen and (max-width: 767px) {
  .page-promotions__header { margin-left: 0; grid-column: 1 / span 1; }
  .page-promotions__title h1 { font-size: 28px; line-height: 15px; }
  .page-promotions__header:has(.page-promotions__filter) { flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-promotions__filter { width: 100%; overflow-x: auto; }
  .page-promotions__filter .base-btn { height: 32px; padding: 0 12px; font-size: 12px; }
  .page-promotions__list { grid-template-columns: repeat(1, 1fr); max-width: 600px; gap: 18px 0; }
  .promotion-card .item__content { padding: 0 40px; }
}

@media screen and (max-width: 576px) {
  .page-promotions__title h1 { font-size: 24px; line-height: 15px; }
  .page-promotions__list { gap: 16px 0; }
  .promotion-card .item__content { gap: 8px; padding: 0 16px; }
}

@supports (container-type: inline-size) {
	.promotion-card .item__content { gap: 20px; }
  .promotion-card .item__content h2 { font-size: 24px; }
  .promotion-card .item__content p { font-size: 14px; }
  .promotion-card .item__content .link { 
		width: 128px;
		height: 42px;
		font-size: 12px;
	}

  @container card (max-width: 490px) {
		.promotion-card .item__content { gap: 15px; }
    .promotion-card .item__content h2 { font-size: 19px; }
    .promotion-card .item__content p { font-size: 11.5px; }
    .promotion-card .item__content .link {
			width: 103px;
			height: 33.5px;
			font-size: 10.5px;
		}
  }

  @container card (max-width: 400px) {
		.promotion-card .item__content { gap: 10px; }
    .promotion-card .item__content h2 { font-size: 14px; }
    .promotion-card .item__content p { font-size: 9px; }
    .promotion-card .item__content .link { 
			width: 78px;
			height: 25px;
			font-size: 9px;
		}
  }
}

/* ##UserPage */
.user-page,
.page-reset-password {
  display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 40px;
}

.user-page-card {
	padding: 40px;
  background: var(--color-surface-3);
  border-radius: 20px;
  border: 1px solid var(--color-separator);
}

.user-page__title,
.page-reset-password__title {
  font-size: 32px;
	font-weight: 700;
	text-transform: capitalize;
}

.user-page__content {
	width: 100%;
}

.user-page__table:not([hidden]) {
	background: var(--color-surface-2);
	padding: 8px 16px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.user-page__table-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}
.user-page__table-row:not(:last-child) {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-separator);
}
.user-page__table-row .title {
	min-width: max-content;
}
.user-page__table-row .value {
	text-align: end;
}

@media (max-width: 768px) {
	.user-page {
		padding: 20px;
		gap: 20px;
		width: 100%;
	}

	.user-page-card {
		padding: 20px;
	}

	.user-page__title {
		font-size: 18px;
	}
}

/* ##UserPageAccount */
.user-page__section-account, .user-page__section-complete-register {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 720px;
	margin: 0 auto;
}

.section-account__purse {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.section-account__purse-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.section-account__purse-header strong {
	color: var(--color-highlight);
}

.section-account__purse-header .customer-id,
.section-account__purse-header .customer-title  {
	display: flex;
	gap: 4px;
}

.section-account__purse-header .customer-id {
	font-size: 12px;
}

.section-account__purse-body, .section-account__details-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 20px;
	column-gap: 40px;
}

.section-account__purse-body .purse-item {
	flex: 1 0 260px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	font-weight: 700;
}

.section-account__purse-body .purse-item .base-btn-balance,
.section-account__purse-body .purse-item .simple-balance-box {
	flex-shrink: 0;
}

.section-account__purse-body .purse-item .base-btn-balance span,
.section-account__purse-body .purse-item .simple-balance-box {
	white-space: nowrap;
}

.section-account__purse-body .purse-item .simple-balance-box {
	padding: 10px 16px;
	background: var(--color-surface-1);
	border-radius: 100px;
}

.section-account__details, .complete-register__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.section-account__details-body .details-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.section-account__details-body .details-item__field {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.section-account__details-body .details-item__field input {
	width: 100%;
	height: 36px;
	background: var(--color-surface-1);
	color: var(--color-text-white);
	border: 2px solid transparent
}
.section-account__details-body .details-item__field input.invalid {
	border-color: var(--color-danger);
}
.section-account__details-body .details-item__field-icon {
	position: absolute;
	margin: 0 16px;
	color: var(--color-brand-1);
	pointer-events: none;
}	

.section-account__details-body .details-item__value {
	padding: 10px 16px;
	border: 1px solid var(--color-surface-1);
	border-radius: 100px;
	font-weight: 300;
}

.section-account__details-footer {
	width: fit-content;
	font-weight: 700;
}

@media (max-width: 768px) {
	.section-account__purse, .section-account__details, .complete-register__details {
		gap: 20px;
		padding: 20px;
	}

	.section-account__purse-body .purse-item .base-btn-balance {
		height: 30px;
		font-weight: 700;
	}
	.section-account__purse-body .purse-item .base-btn-balance svg {
		width: 14px;
		height: 14px;
	}

	.section-account__purse-body .purse-item .simple-balance-box {
		padding: 8px 16px;
	}

	.section-account__purse-body, .section-account__details-body {
		grid-template-columns: repeat(1, 1fr);
	}

	.section-account__details-body .details-item.change-password {
		grid-column: unset;
	}

	.section-account__details-body .details-item.update-user-info,
	.section-account__details-body .details-item.update-user-info .base-btn {
		width: 100%;
		height: 48px;
	}
}

/* ##UserPageRewards */
.user-page__section-rewards {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 480px;
	margin: 0 auto;
}

.user-page__section-rewards .inline-form .input-wrapper {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	padding: 3px;
	margin-top: 20px;
	border-radius: 100px;
}

.user-page__section-rewards .inline-form .form-message {
	margin-top: 10px;
}

.user-page__section-rewards .inline-form label {
	font-weight: 700;
}

.user-page__section-rewards .inline-form input {
	width: 100%;
	padding: 7px 12px;
	background: none;
	font-weight: 700;
	text-transform: uppercase;
}
.user-page__section-rewards .inline-form input::placeholder {
	color: var(--color-text-dark);
	font-style: italic;
	font-weight: 300;
	text-transform: none;
}

.user-page__section-rewards .inline-form button {
	height: unset;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
.user-page__section-rewards .inline-form button:hover{
	color: var(--color-text-dark);
}

.section-rewards__bonus-code .balance-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}

.section-rewards__bonus-code .balance-container .base-btn-balance,
.section-rewards__bonus-code .balance-container span {
	font-weight: 700;
}

.section-rewards__bonus-code .balance-container .plus {
	width: 22px;
	height: 22px;
}

.section-rewards__bonuses:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.section-rewards__bonuses-filter {
	display: flex;
	gap: 20px;
}

.section-rewards__bonuses-filter .base-btn {
	border-color: var(--color-highlight);
	text-transform: uppercase;
}
.section-rewards__bonuses-filter .base-btn.active {
	border-color: transparent;
	background: var(--color-text-white);
	color: var(--color-text-dark);
}

.section-rewards__bonuses-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.section-rewards__bonuses-list .bonus-card {
	display: flex;
	flex-direction: column;
	padding: 40px 40px 20px 40px;
	background: var(--color-surface-3);
	border-radius: 20px;
}

.bonus-card__header {
	display: flex;
	gap: 20px;
}

.bonus-card__header img {
	border-radius: 8px;
}

.bonus-card__info h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
}

.bonus-card__info p {
	margin: 4px 0 0;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bonus-card__info {
	width: 100%;
}

.bonus-card__info .progress-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.bonus-card__info .progress-wrapper .amount {
	min-width: fit-content;
}

.bonus-card__info .progress-full {
	position: relative;
	flex-basis: 70%;
	height: 6px;
	border-radius: 100px;
	background: var(--color-separator);
}

.bonus-card__info .progress-actual {
	position: absolute;
	left: 0;
	min-width: 6px;
	height: inherit;
	border-radius: inherit;
	background: var(--color-highlight);
}

.bonus-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 20px 0;
}

.bonus-card__body .bonus-details-item {
	display: flex;
	justify-content: space-between;
}

.bonus-card__body .bonus-details-item .bonus-status {
	display: flex;
	justify-content: space-between;
}

.bonus-card__body .bonus-details-item .bonus-amount {
	font-weight: 700;
}

.bonus-card__footer {
	display: flex;
	justify-content: center;
}

.section-rewards__points:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.section-rewards__points-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.section-rewards__points-info {
	display: flex;
	gap: 25px;
	align-items: center;
	justify-content: space-between;
}

.section-rewards__points-info .info-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.section-rewards__points-info .info-level,
.section-rewards__points-info .info-points {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
}

.section-rewards__points-info .info-level__value,
.section-rewards__points-info .info-points__value {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	padding: 0 8px;
	border-radius: 100px;
	font-weight: 700;
	text-transform: uppercase;
}

.section-rewards__points-info .info-points__label {
	font-weight: 700;
}

.section-rewards__points-info .info-points__value {
	min-width: 56px;
	background: var(--color-surface-1);
}

.activeRtl .section-rewards__points-image {
	transform: scaleX(-1);
}

.section-rewards__points-convert {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.section-rewards__points-convert .convert-hint {
	font-size: 12px;
	font-style: italic;
	color: var(--color-brand-3);
}

@media (max-width: 768px) {
	.user-page__section-rewards,
	.section-rewards__bonuses {
		gap: 20px;
	}

	.section-rewards__bonuses-list .bonus-card {
		padding: 20px;
	}

	.section-rewards__bonus-code,
	.section-rewards__points-card {
		padding: 20px;
	}

	.bonus-card__info h3 {
		font-size: 14px;
	}

	.section-rewards__bonus-filter {
		gap: 6px;
	}

	.section-rewards__bonus-filter .base-btn {
		font-size: 12px;
	}

	.section-rewards__bonus-list {
		gap: 20px;
	}

	.section-rewards__bonus-list .bonus-card {
		padding: 20px;
	}
}

/* ##UserPageDocuments */
.user-page__section-documents {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	max-width: 408px;
	margin: 0 auto;
}

.section-documents__filter {
	display: flex;
  	align-items: center;
	gap: 10px;
}

.section-documents__filter span {
	min-width: fit-content;
}

.section-documents__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

@media (max-width: 768px) {
	.section-documents__list {
		gap: 20px;
	}
}

/* ##DocumentUpload */
.dialog.dialog-new-document {
	width: 408px;
	min-width: unset;
}

.bf.upload-document-form .upload-document{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bf.upload-document-form .upload-document__row {
	display: flex;
	gap: 16px;
	width: 100%;
	height: 140px;
}

/* complete-register page: static "Pais" value pill. */
.complete-register__value {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 16px;
	border: 1px solid #26263B;
	border-radius: 100px;
	font-weight: 300;
}

.complete-register__error {
	grid-column: 1 / -1;
	color: var(--color-danger);
	font-size: 14px;
}

/* Base (brand-agnostic) complete-register form. */
.complete-register__intro {
	margin: 0;
	color: var(--color-text-muted);
}

.complete-register__hint {
	margin-top: 4px;
	color: var(--color-text-muted);
	font-size: 12px;
}

.complete-register__submit {
	grid-column: 1 / -1;
	justify-self: start;
	min-width: 220px;
}

.complete-register__form .nd-field[hidden] {
	display: none;
}

/* Deposit dialog: quick-registration players, above the methods list and as
   the message for a REGISTRATION_QUICK_REG rejection. */
.deposit-complete-register {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 16px;
	border: 1px solid var(--color-separator);
	border-radius: 8px;
	background: var(--color-surface-2);
}

.deposit-complete-register__text {
	margin: 0;
	color: var(--color-text);
	font-size: 14px;
}

@media (min-width: 769px) {
	/* complete-register page: 2 columns on desktop, stacked on mobile/dialog. */
	.section-account__details .nd-form, .complete-register__details .complete-register__form {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 40px;
	}
}

/* complete-register page: "Fecha de nacimiento" label above the Dia / Mes / Ano row. */
.complete-register__dob {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-column: 1 / -1;
}

/* Dia / Mes / Ano side by side, left-aligned, wrapping on narrow screens. */
.complete-register__dob-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
}

.complete-register__dob-row > .base-dropdown:nth-of-type(1),
.complete-register__dob-row > .base-dropdown:nth-of-type(2) {
	flex: 0 0 90px;
}

.complete-register__dob-row > .base-dropdown:nth-of-type(3) {
	flex: 0 0 120px;
}

/* ##UserPageTransactionsHistory */
.user-page__section-history {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 40px;
	max-width: 408px;
	margin: 0 auto;
}

.section-history__header {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

.section-history__filters {
	width: 100%;
}

.section-history__filters .filters-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
}

/* `display: flex` outranks the UA `[hidden]` rule, so restore it explicitly. */
.section-history__filters .filters-group[hidden] {
	display: none;
}

.section-history__filters .date-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.section-history__filters label {
	font-size: 12px;
	/* color: var(--color-text-muted); */
	white-space: nowrap;
}

.section-history__filters input {
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-input-bg);
	color: var(--color-text-dark);
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	min-width: 0;
}

.section-history__filters .range-filter {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Reusable checkbox style (originally the history día/semana/mes filters) —
   unscoped so any `.range-checkbox` label anywhere gets the same look. */
.section-history__filters .range-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 12px;
	color: #fff;
}

.section-history__filters .range-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background: transparent;
	cursor: pointer;
	border: 1px solid #fff;
	border-radius: 4px;
	position: relative;
}

.section-history__filters .range-checkbox input[type="checkbox"]:checked {
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12L0 6L2 4L6 8L14 0L16 2' fill='%23FFCA40'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 9px;
}

.section-history__body {
	width: 100%;
}

.section-history__body .hist-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--color-text-muted);
}

/* History card list (transactions + banking) — one label:value card per
   record, scrollable, shared by both history tabs. */
/* Banking card status (components/userPageHistory.js), from the brand's tokens. */
.hist-status--success { color: var(--color-success); }
.hist-status--failed { color: var(--color-danger); }
.hist-status--pending { color: var(--color-warning, currentColor); }

.section-history__body .hist-card__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-height: 640px;
	overflow-y: auto;
	width: 100%;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}

@media (max-width: 768px) {
	.section-history__header {
		gap: 20px;
		width: 100%;
	}

	.section-history__header .switcher-wrapper {
		width: 100%;
		max-width: 350px;
	}

	.section-history__filters .filters-group {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.section-history__body .hist-card__list {
		gap: 20px;
	}
}

/* ##UserPageGambleResponsibly */
.user-page__section-gamble-responsibly {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 408px;
	margin: 0 auto;
}

.section-gamble-responsibly__limits {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.limits__title,
.self-exclusion__title {
	font-size: 16px;
	font-weight: 700;
}

.limits__description,
.self-exclusion__description {
	font-size: 12px;
	font-weight: 300;
}

.limits__container {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 20px;
}

.limit-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}

.limit-card__header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.limit-card__heading {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.limit-card__amount {
	color: var(--color-input-bg);
}

.limit-card__status--active {
	color: var(--color-success);
}
.limit-card__status--reached {
	color: var(--color-danger);
}

.limit-card__description {
	font-size: 12px;
	font-weight: 300;
}

.limit-card__body:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.limit-card__fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.limit-card__label {
	font-size: 12px;
	font-weight: 700;
}

.limit-card__custom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.limit-card__input {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 104px;
	height: 36px;
	padding: 7px 10px;
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 100px;
	color: var(--color-text-dark);
	font-size: 14px;
	font-weight: 300;
}

.limit-card__input input {
	width: 100%;
	min-width: 0;
	padding: 0;
	background: none;
	border: unset;
	color: inherit;
	font: inherit;
	text-align: end;
}

.limit-card__presets {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.limit-card__presets-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.limit-card__preset {
	position: relative;
}

.limit-card__preset input {
	width: 100%;
	height: 36px;
	padding: 7px 10px;
	background: transparent;
	border: 1px solid var(--color-input-border);
	border-radius: 100px;
	color: var(--color-text);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.3s ease;
}
.limit-card__preset input:checked {
	background: var(--color-input-border);
}

.limit-card__preset span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}


.limit-card__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.limit-card__actions .base-btn {
	width: 100%;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.limit-card__toggle {
	align-self: center;
	background: none;
	color: var(--color-brand-3);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.section-gamble-responsibly__self-exclusion {
	padding-top: 30px;
	border-top: 2px solid var(--color-separator);
}

.self-exclusion__title {
	margin-bottom: 10px;
}

.self-exclusion__description {
	margin-bottom: 20px;
}

.self-exclusion__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.self-exclusion__form-options {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.self-exclusion__form-options .exclusion-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: max-content;
}

.self-exclusion__form-options .exclusion-option input {
	appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-input-border);
	background: transparent;
}
.self-exclusion__form-options .exclusion-option input::before {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 2px;
	background: var(--color-input-border);
	transform: scale(0);
	transition: transform 0.3s ease;
}
.self-exclusion__form-options .exclusion-option input:checked:before {
	transform: scale(1);
}

/* ##UserPageTwoFactorAuth */
.user-page__section-two-factor-auth {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 408px;
	margin: 0 auto;
}

.section-two-factor-auth__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 12px;
}

.section-two-factor-auth__description {
	font-weight: 300;
}

.section-two-factor-auth__warning {
	font-weight: 700;
}

.section-two-factor-auth__email {
	color: var(--color-link);
}

/* ##ProviderPage */
/* ##PagePartPlatformsItems*/
.PagePartPlatformsItems {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 500px;
}

.PagePartPlatformsItems .platforms-header {
	display: flex;
	justify-content: center;
	align-items: center;
}

.PagePartPlatformsItems .platforms-header h1 {
	font-weight: 700;
	font-size: 32px;
}

.PagePartPlatformsItems .platforms-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(150px, 292px));
	gap: 20px;
	width: fit-content;
	margin: 0 auto;
}

.PagePartPlatformsItems .platforms-list .platform-card {
	aspect-ratio: 1.47;
	display: flex;
	flex-direction: column;
	background: var(--color-surface-1);
	border-radius: 11px;
	overflow: clip;
	container: platform-card / inline-size;
}

.PagePartPlatformsItems .platforms-list .platform-card__image {
	height: 67.51%;
	padding: 16px;
}

.PagePartPlatformsItems .platforms-list .platform-card__image a,
.PagePartPlatformsItems .platforms-list .platform-card__image picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* The logo keeps its proportions and is never enlarged past its own size: a card logo made for
   this card (VAC's 246x96) fills it, an older small one (Delrio's 69x24) stays sharp and centered
   instead of being stretched over the whole card. */
.PagePartPlatformsItems .platforms-list .platform-card__image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.PagePartPlatformsItems .platforms-list .platform-card__content {
	flex-grow: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: var(--color-separator);
}

.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__title {
	font-size: 12px;
}

.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__stars {
	display: flex;
	gap: 4px;
}

.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__stars .iconode-icon {
	width: 20px;
	height: 20px;
	color: var(--color-brand-1);
}

.PagePartPlatformsItems .platforms-list .platform-card__content .base-btn {
	min-width: max-content;
	height: 32px;
	padding: 0 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.PagePartPlatformsItems .base-btn.load-platforms {
	min-width: 150px;
	margin: 0 auto;
}

@container platform-card (max-width: 245px) {
	.PagePartPlatformsItems .platforms-list .platform-card__content {
		padding: 9px 12px;
	}

	.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__title {
		font-size: 9.5px;
	}

	.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__stars .iconode-icon {
		width: 15px;
		height: 15px;
	}

	.PagePartPlatformsItems .platforms-list .platform-card__content .base-btn {
		height: 28px;
		padding: 0 11px;
		font-size: 9.5px;
	}
}

@container platform-card (max-width: 197px) {
	.PagePartPlatformsItems .platforms-list .platform-card__content {
		padding: 6px 8px;
	}

	.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__title {
		font-size: 7px;
	}

	.PagePartPlatformsItems .platforms-list .platform-card__content .platform-details__stars .iconode-icon {
		width: 10px;
		height: 10px;
	}

	.PagePartPlatformsItems .platforms-list .platform-card__content .base-btn {
		height: 20px;
		padding: 0 6px;
		font-size: 7px;
	}
}

@media (max-width: 1400px) {
	.PagePartPlatformsItems .platforms-list {
		grid-template-columns: repeat(4, minmax(150px, 292px));
	}
}

@media (max-width: 992px) {
	.PagePartPlatformsItems .platforms-header h1 {
		font-size: 24px;
	}

	.PagePartPlatformsItems .platforms-list {
		grid-template-columns: repeat(3, minmax(150px, 292px));
	}
}

@media (max-width: 576px) {
	.PagePartPlatformsItems .platforms-header h1 {
		font-size: 18px;
	}

	.PagePartPlatformsItems .platforms-list {
		grid-template-columns: repeat(2, minmax(100px, 245px));
	}
}
/* ============================================================
   INDIVIDUAL PROVIDER PAGE (.page-platformDesc)
   Used by: /provider/:slug route → PlatformItem component
   ============================================================ */

/* ── Desktop (base styles) ─────────────────────────────── */
.page-platformDesc {
  margin-top: -38px;
  padding: 75px 0 40px;
}

.page-platformDesc__content {
  display: flex;
  align-items: flex-start;
}

.page-platformDesc__image {
  width: 381px;
  min-width: 381px;
  padding-right: 70px;
  text-align: center;
}

.page-platformDesc__image img {
  max-width: 100%;
}

.page-platformDesc__info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.page-platformDesc__info h2 {
  font-family: Proxima Nova;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 150%;
  color: color(--color-text);
  margin-bottom: 9px;
}

.page-platformDesc__info .rate {
  margin-right: 80px;
  margin-bottom: 23px;
}

.page-platformDesc__info .rate__list {
  padding-top: 5px;
}

.page-platformDesc__info .rate__list img {
  margin-right: 3px;
}

.page-platformDesc__info .jackpots {
  margin-right: 80px;
  margin-bottom: 23px;
}

.page-platformDesc__info .jackpots p {
  font-family: Proxima Nova;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 150%;
  color: color(--color-text);
  margin-bottom: 0;
}

.page-platformDesc__info .desc {
  width: 100%;
}

.page-platformDesc__info .desc__content {
  font-family: Proxima Nova;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 150%;
  text-align: justify;
  color: color(--color-text);
}

.page-platformDesc__info .desc__content ul,
.page-platformDesc__info .desc__content ol {
  padding-left: 24px;
  list-style: disc;
}

.page-platformDesc__info .desc__content a {
  color: var(--color-dialog-header);
}

/* ── RTL support ────────────────────────────────────── */
.activeRtl .page-platformDesc__image {
  padding: 0 0 0 70px;
}

.activeRtl .page-platformDesc__info .rate {
  margin: 0 0 23px 80px;
}

.activeRtl .page-platformDesc__info .rate__list img {
  margin: 0 0 0 3px;
}

.activeRtl .page-platformDesc__info .jackpots {
  margin: 0 0 23px 80px;
}

/* ── Tablet ≤ 1023px ────────────────────────────────── */
@media screen and (max-width: 1023px) {
  .page-platformDesc {
    padding: 75px 0 30px;
  }

  .page-platformDesc__image {
    width: 240px;
    min-width: 240px;
    padding-right: 40px;
  }

  .activeRtl .page-platformDesc__image {
    padding: 0 0 0 40px;
  }
}

/* ── Mobile ≤ 767px ─────────────────────────────────── */
@media screen and (max-width: 767px) {
  .page-platformDesc {
    margin-top: 0;
    padding: 36px 0 30px;
  }

  .page-platformDesc__content {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .page-platformDesc__image {
    padding: 0;
    margin-bottom: 15px;
    text-align: center;
    min-height: 240px;
    display: flex;
    align-items: center;
  }

  .page-platformDesc__info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-platformDesc__info h2 {
    font-size: 10px;
    line-height: 150%;
    margin-bottom: 5px;
  }

  .page-platformDesc__info .rate {
    width: 100px;
    margin-right: 0;
    margin-bottom: 19px;
  }

  .page-platformDesc__info .rate__list {
    padding-top: 0;
  }

  .page-platformDesc__info .rate__list img {
    margin-right: 2px;
    width: 14px;
  }

  .page-platformDesc__info .jackpots {
    width: 60px;
    margin-right: 0;
    margin-bottom: 19px;
  }

  .page-platformDesc__info .jackpots p {
    font-size: 12px;
    line-height: 150%;
  }

  .page-platformDesc__info .desc__content {
    font-size: 12px;
    line-height: 150%;
  }

  .activeRtl .page-platformDesc__image {
    padding: 0;
  }

  .activeRtl .page-platformDesc__info .rate {
    margin: 0 0 19px 0;
  }

  .activeRtl .page-platformDesc__info .rate__list img {
    margin: 0 0 0 2px;
    width: 14px;
  }

  .activeRtl .page-platformDesc__info .jackpots {
    margin: 0 0 19px 0;
  }
}

/* ##AccordionHelpItems */
.accordion-help-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.accordion-help-items__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	font-weight: 700;
}
.accordion-help-items__title svg {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	color: var(--color-brand-1);
}

.accordion-help-items details.faq-item .faq-item__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid var(--color-separator);
	transition: background 0.3s ease;
	font-weight: 700;
}
.accordion-help-items details.faq-item summary.faq-item__q::marker {
	content: '';
	display: none;
}
.accordion-help-items details.faq-item .faq-item__q svg{
	color: var(--color-brand-3);
	transition: transform 0.3s ease;
}
.accordion-help-items details.faq-item[open] {
	border: 1px solid var(--color-separator);
}
.accordion-help-items details.faq-item[open] .faq-item__q {
	background: var(--color-separator);
}
.accordion-help-items details.faq-item[open] .faq-item__q svg{
	transform: rotate(180deg);
}

.accordion-help-items details.faq-item .faq-item__a {
	padding: 20px;
	font-weight: 300;
}

@media (max-width: 768px) {
	.accordion-help-items__title {
		font-size: 16px;
	}
	.accordion-help-items__title svg {
		width: 30px;
		height: 30px;
	}
}

/* ##HelpPageHelpCategories */
.page-help {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 40px;
	padding: 32px;
}

.page-help__header {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.page-help__header .breadcrumbs-bar {
	align-self: flex-start;
}

.page-help__header .breadcrumbs-bar ul,
.page-help__header .breadcrumbs-bar ul li {
	display: flex;
	gap: 10px;
	align-items: center;
}

.page-help__header .breadcrumbs-bar ul li a:hover {
	filter: drop-shadow(0 0 2px var(--color-brand-1));
	transition: filter 0.3s ease;
}

.page-help__header .breadcrumbs-bar ul li .iconode-icon {
	width: 16px;
	height: 16px;
	color: var(--color-brand-1);
}

.page-help__header h1 {
	font-size: 32px;
	font-weight: 700;
	text-align: center;
}

.page-help__header .search-wrapper {
	position: relative;
	width: min(400px, 100%);
	height: 48px;
}

.page-help__header .search-wrapper input {
	width: 100%;
	height: 100%;
}

.page-help__header .search-wrapper .search-results {
	position: absolute;
	top: calc(100% + 10px);
	width: 100%;
	max-height: 300px;
	background: var(--color-surface-1);
	border: 1px solid var(--color-separator);
	border-radius: 11px;
	overflow-y: auto;
	overscroll-behavior-y: none;
}

.page-help__header .search-wrapper .search-results__none {
	padding: 12px 24px;
}

.page-help__header .search-wrapper .search-results__list .result-item .result-item__link {
	display: inline-block;
	width: 100%;
	padding: 12px 24px;
	border-bottom: 1px solid var(--color-separator);
}
.page-help__header .search-wrapper .search-results__list .result-item:last-child .result-item__link {
	border-bottom: none;
}

.page-help__categories {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.page-help__categories h2 {
	font-size: 18px;
	font-weight: 600;
}

.page-help__categories ul {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, minmax(250px, 350px));
}

.page-help__categories ul li {
	aspect-ratio: 2;
	padding: 20px 40px;
	background: var(--color-surface-3);
	border: 1px solid var(--color-separator);
	border-radius: 11px;
}

.page-help__categories ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
}

.page-help__categories ul li a img {
	width: 64px;
	height: 64px;
}

.page-help__categories ul li a span {
	font-weight: 600;
	min-width: max-content;
}

ul.page-help__questions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: min(800px, 100%);
}

.page-help__questions li {
	width: 100%;
}

.page-help__questions li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 20px 40px;
	background: var(--color-surface-1);
	border-radius: 11px;
	font-weight: 600;
}

.page-help__questions li a .iconode-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-brand-1);
}

.page-help__answer {
	width: min(800px, 100%);
	padding: 40px;
	background: var(--color-surface-3);
	border: 1px solid var(--color-separator);
	border-radius: 11px;
	line-height: 1.3;
}

.page-help__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.page-help__footer h2 {
	font-size: 18px;
	font-weight: 600;
}

.page-help__footer .base-btn {
	height: 48px;
	min-width: 150px;
	font-size: 18px;
	font-weight: 600;
}

@media (max-width: 1200px) {
	.page-help__categories ul {
		grid-template-columns: repeat(2, minmax(150px, 250px));
	}
}

@media (max-width: 768px) {
	.page-help {
		padding: 16px;
		gap: 20px;
	}

	.page-help__header .breadcrumbs-bar ul,
	.page-help__header .breadcrumbs-bar ul li {
		gap: 5px;
		font-size: 11px;
	}

	.page-help__header h1 {
		font-size: 18px;
	}

	.page-help__header .search-wrapper {
		height: 40px;
	}

	.page-help__categories h2 {
		font-size: 14px;
	}

	.page-help__categories ul li {
		padding: 10px 20px;
	}

	.page-help__categories ul li a img {
		width: 32px;
		height: 32px;
	}

	.page-help__categories ul li a span {
		font-size: 9px;
	}

	.page-help__questions li a {
		padding: 10px 20px;
		background: var(--color-surface-1);
		font-size: 11px;
	}

	.page-help__questions li a .iconode-icon {
		width: 18px;
		height: 18px;
	}

	.page-help__answer {
		padding: 20px;
	}

	.page-help__footer {
		gap: 10px;
	}

	.page-help__footer h2 {
		font-size: 14px;
	}

	.page-help__footer .base-btn {
		height: 40px;
		font-size: 14px;
	}
}

/* ##LoyaltyProgram */
.loyalty-program .PagePartHeroBanner {
	height: unset;
	aspect-ratio: 1920/608;
}

.loyalty-program .PagePartHeroBanner .hero-banner__title {
	width: 50%;
	font-size: 60px;
	font-weight: 600;
	margin-bottom: 24px;
}
.loyalty-program .PagePartHeroBanner .hero-banner__description {
	width: 45%;
	font-size: 40px;
	margin-bottom: 32px;
}
.loyalty-program .PagePartHeroBanner .hero-banner__cta {
	width: 200px;
	height: 64px;
	font-size: 20px;
	font-weight: 700;
}

/* Between desktop and the phone frame: the 1920px design scaled to a 1200px banner
   (x0.625), so the copy shrinks with the artwork instead of jumping at 768px. */
@media (max-width: 1200px) {
	.loyalty-program .PagePartHeroBanner .hero-banner__title {
		font-size: 38px;
		margin-bottom: 15px;
	}
	.loyalty-program .PagePartHeroBanner .hero-banner__description {
		font-size: 25px;
		margin-bottom: 20px;
	}
	.loyalty-program .PagePartHeroBanner .hero-banner__cta {
		font-size: 14px;
	}
}

.loyalty-program .vip-section-title {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	padding: 40px 16px 60px;
}
.loyalty-program .vip-section-title::before {
	background: radial-gradient(ellipse 35.63% 34.4% at 50% 50%,rgba(71,197,174,.1) 0,rgba(8,18,17,.1) 100%);
  content: "";
  height: 320px;
  left: 50%;
  max-width: none;
  pointer-events: none;
  position: absolute;
  top: calc(100% - 111px);
  transform: translateX(-50%);
  width: 2000px;
}
.loyalty-program .vip-section-title::after {
	background: var(--color-brand-1);
	content: "";
	display: block;
	height: 24px;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M18.377 20.912a3 3 0 0 1-4.754 0L5.862 10.83C4.343 8.857 5.749 6 8.239 6H23.76c2.49 0 3.896 2.857 2.377 4.83l-7.76 10.082Z'/%3E%3C/svg%3E") no-repeat center/contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M18.377 20.912a3 3 0 0 1-4.754 0L5.862 10.83C4.343 8.857 5.749 6 8.239 6H23.76c2.49 0 3.896 2.857 2.377 4.83l-7.76 10.082Z'/%3E%3C/svg%3E") no-repeat center/contain;
	position: relative;
	width: 32px;
}

.loyalty-program .vip-section-title h2 {
	margin-bottom: unset;
	color: var(--color-text-white);
	text-align: center;
	font-weight: 300;
	font-size: 40px;
}

.loyalty-program .vip-levels {
	padding: 0 75px;
}

.loyalty-program .vip-levels .slider-wrapper {
	max-width: fit-content;
	margin: 0 auto;
}

.loyalty-program .vip-levels .slides-container {
	display: flex;
	gap: 40px;
}

.loyalty-program .vip-levels .slides-container .vip-levels__card {
	position: relative;
	width: 322px;
	height: 619px;
	padding: 160px 16px 0 16px;
	background: var(--color-vip-card-bg);
	border-radius: 24px;
	border: 1px solid var(--color-vip-glow-light);
	user-select: none;
  -webkit-user-drag: none;
	transition: transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease-out;
}
@media (hover: hover) {
	.loyalty-program .vip-levels .slides-container .vip-levels__card:hover {
		box-shadow: 0 0 26.5px var(--color-vip-glow-dark);
    transform: scale(1.0736);
	}
}

.loyalty-program .vip-levels .slides-container .vip-levels__card-current {
	position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 32px;
  width: max-content;
	background: var(--color-vip-glow-light);
	border-radius: 100px;
	box-shadow: 0px 0px 20px 0px var(--color-vip-glow-light);
	font-weight: 800;
	font-size: 12px;
}

.loyalty-program .vip-levels .slides-container .vip-levels__card-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1.163;
	border-radius: 24px 24px 0 0;
}

.loyalty-program .vip-levels .slides-container .vip-levels__card-privileges {
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.loyalty-program .vip-levels .slides-container .privilege-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.loyalty-program .vip-levels .slides-container .privilege-item__text {
	font-size: 16px;
}
.loyalty-program .vip-levels .slides-container .privilege-item__text strong {
	font-weight: 800;
}

.loyalty-program .vip-levels .slides-container .privilege-item .iconode-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-vip-separator);
}

.loyalty-program .vip-levels__card-pattern {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 0 0 24px 24px;
}

.slider-dots {
	display: none;
}

.loyalty-program .vip-levels-note {
	margin-top: 30px;
	font-weight: 300;
	font-size: 16px;
	text-align: center;
}

.loyalty-program .vip-section {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.loyalty-program .vip-section .vip-section__lead {
	font-size: 40px;
	font-weight: 600;
	text-align: center;
}

.loyalty-program .vip-section .vip-steps,
.loyalty-program .vip-section .vip-reasons {
	display: flex;
	align-items: center;
	gap: 120px;
	padding: 0 75px;
	list-style: unset;
}

.loyalty-program .vip-section .vip-steps__item {
	flex-basis: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.loyalty-program .vip-section .vip-steps__icon {
	width: 96px;
	height: 96px;
}
.loyalty-program .vip-section .vip-steps__title {
	font-size: 30px;
	font-weight: 800;
	text-align: center;
}
.loyalty-program .vip-section .vip-steps__text {
	font-size: 20px;
	text-align: center;
}

.loyalty-program .vip-section .vip-cta {
	width: 200px;
	height: 64px;
	text-decoration: none;
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
}

.loyalty-program .vip-section .vip-reasons__item {
	flex-basis: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.loyalty-program .vip-section .vip-reasons__icon {
	width: 160px;
	height: 160px;
}
.loyalty-program .vip-section .vip-reasons__title {
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}
.loyalty-program .vip-section .vip-reasons__text {
	font-size: 20px;
	text-align: center;
}

.loyalty-program .vip-closing {
	background: url(/public/brands/vip_arab_club/vip/cta-pattern.jpg) top/auto 362px no-repeat;
  max-width: none;
  min-height: 362px;
  padding: 60px 16px 114px;
  position: relative;
}

.loyalty-program .vip-closing .vip-closing__title {
	font-size: 40px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 768px) {
	.loyalty-program .PagePartHeroBanner {
		aspect-ratio: 360/519;
	}

	/* Phone frame keeps the copy across the bottom of the artwork. */
	.loyalty-program .PagePartHeroBanner .hero-banner__content {
		top: auto;
		bottom: 20px;
		transform: none;
		align-items: center;
		padding: 0 16px;
	}

	.loyalty-program .PagePartHeroBanner .hero-banner__title {
		width: 100%;
		font-size: 20px;
		margin-bottom: 8px;
		text-align: center;
	}
	.loyalty-program .PagePartHeroBanner .hero-banner__description {
		width: 100%;
		font-size: 16px;
		margin-bottom: 10px;
		text-align: center;
	}
	.loyalty-program .PagePartHeroBanner .hero-banner__cta {
		width: 122px;
		height: 36px;
		font-size: 12px;
	}

	.loyalty-program .PagePartHeroBanner .hero-banner__image img {
		object-position: center 25%;
	}

	.loyalty-program .vip-section-title {
		padding: 20px 16px 30px 16px;
	}

	.loyalty-program .vip-section-title::before {
		background: radial-gradient(ellipse 35.63% 34.4% at 50% 50%,rgba(71,197,174,.2) 0,rgba(8,18,17,.2) 100%);
    height: 172px;
    top: calc(100% - 52px);
    width: 616px;
	}

	.loyalty-program .vip-section-title h2 {
		font-size: 20px;
	}

	.loyalty-program .vip-levels {
		padding: unset;
		margin-top: 17px;
	}

	.loyalty-program .vip-levels .slider-wrapper{
		width: 242px;
	}

	.loyalty-program .vip-levels .slides-container .vip-levels__card {
		position: relative;
		width: 242px;
		height: 455px;
		padding: 120px 10px 0 10px;
	}

	.loyalty-program .vip-levels .slides-container .vip-levels__card-current {
		padding: 2px 32px;
		box-shadow: 0px 0px 10px 0px var(--color-vip-glow-light);
		font-size: 10px;
	}

	.loyalty-program .vip-levels .slides-container .swiper-slide-active .vip-levels__card {
		box-shadow: 0 0 26.5px var(--color-vip-glow-dark);
    transform: scale(1.0736);
	}

	.loyalty-program .vip-levels .slides-container .privilege-item {
		gap: 10px;
	}
	.loyalty-program .vip-levels .slides-container .privilege-item__text {
		font-size: 12px;
	}
	.loyalty-program .vip-levels .slides-container .privilege-item .iconode-icon {
		width: 12px;
		height: 12px;
	}

	.slider-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4px;
		margin-top: 34px;
	}
	.slider-dot {
		width: 8px;
		height: 8px;
		background: transparent;
		border: 1px solid var(--color-vip-separator);
		border-radius: 100px;
		transition: background 0.3s ease;
	}
	.slider-dot.is-active {
		background: var(--color-vip-separator);
	}

	.loyalty-program .vip-levels-note {
		padding: 0 28px;
		font-size: 11px;
		font-weight: 300;
	}

	.loyalty-program .vip-section {
		gap: 20px;
	}

	.loyalty-program .vip-section .vip-section__lead {
		padding: 0 24px;
		font-size: 20px;
	}

	.loyalty-program .vip-section .vip-steps {
		flex-direction: column;
		gap: 30px;
		padding: 0 28px;
	}

	.loyalty-program .vip-section .vip-steps__item {
		position: relative;
		align-items: flex-start;
		/* flex-direction: row; */
		gap: 8px;
		padding-inline-start: 64px;
	}
	.loyalty-program .vip-section .vip-steps__icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 48px;
		height: 48px;
	}
	.loyalty-program .vip-section .vip-steps__title {
		font-size: 18px;
		text-align: start;
	}
	.loyalty-program .vip-section .vip-steps__text {
		font-size: 14px;
		text-align: start;
	}

	.loyalty-program .vip-section .vip-cta {
		width: 122px;
		height: 36px;
		font-size: 12px;
	}

	.loyalty-program .vip-section .vip-reasons {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 40px;
		padding: 0 16px;
	}

	.loyalty-program .vip-section .vip-reasons__item {
		width: 100%;
		gap: 8px;
	}
	.loyalty-program .vip-section .vip-reasons__icon {
		width: 80px;
		height: 80px;
	}
	.loyalty-program .vip-section .vip-reasons__title {
		font-size: 14px;
	}
	.loyalty-program .vip-section .vip-reasons__text {
		font-size: 11px;
	}

	.loyalty-program .vip-closing {
		background-size: auto 181px;
		margin: 20px calc(50% - 50vw) 0;
		min-height: 181px;
		padding: 30px 16px 47px;
	}

	.loyalty-program .vip-closing .vip-closing__title {
		font-size: 20px;
	}
}

/* ##Lottery */
.section-lottery { position: relative; margin: 0 -15px; padding: 20px 0 50px; overflow: hidden; }
.section-lottery .background { position: absolute; inset: 0; z-index: 0; }
.section-lottery .background img { width: 100%; height: 100%; object-fit: cover; }
.section-lottery > .container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 15px; }

.section-lottery-x__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 18px; flex-wrap: wrap; }
.section-lottery-x__header .title { display: flex; align-items: center; gap: 12px; }
.section-lottery-x__header .title h2 { font-size: 22px; font-weight: 700; color: #FFFFFF; }
.section-lottery-x__header .title p { font-size: 13px; color: var(--color-text-muted); }
.section-lottery-x__header .title [class^="icon-"] { font-size: 28px; color: var(--color-primary); }
.section-lottery .slider-nav { display: flex; gap: 8px; }

/* Current draw — text on the left, countdown on the right (flex space-between) */
.section-lottery-current__wrapper,
.section-lottery-current .empty-block {
  border: 2px solid var(--color-primary); border-radius: 6px; background: rgba(0,0,0,0.6);
}
.section-lottery-current .empty-block { text-align: center; color: #FFFFFF; padding: 40px; }
.section-lottery-current__content {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; padding: 24px;
}
.section-lottery-current__content .title { flex: 1 1 auto; min-width: 0; }
.section-lottery-current__content .title h2 { font-size: 24px; color: #FFFFFF; margin-bottom: 10px; }
.section-lottery-current .lottery-desc { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
.section-lottery-current .lottery-desc p { margin: 0 0 8px; }
.countdown { flex: 0 0 auto; display: flex; gap: 10px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 12px 8px; background: rgba(0,0,0,0.7); border: 1px solid rgba(146,109,32,0.5); border-radius: 6px; }
.cd-num { font-size: 32px; font-weight: 700; color: var(--color-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-label { font-size: 10px; color: var(--color-text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 767px) {
  .section-lottery-current__content { flex-direction: column; align-items: stretch; }
  .countdown { justify-content: center; flex-wrap: wrap; }
}

/* Awards — horizontal slider of row cards (image + text + read-more) */
.section-lottery-awards .item { width: 380px; max-width: 85vw; }
.section-lottery-awards .item__box { height: 100%; background: rgba(0,0,0,0.6); border: 1px solid var(--color-primary); border-radius: 6px; overflow: hidden; }
.section-lottery-awards .item__content { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
.section-lottery-awards .item__image { flex: 0 0 auto; }
.section-lottery-awards .item__image img { width: 56px; height: 56px; object-fit: contain; }
.section-lottery-awards .item__text { flex: 1 1 auto; min-width: 0; }
.section-lottery-awards .item__text h3 { font-size: 15px; color: #FFFFFF; margin-bottom: 2px; }
.section-lottery-awards .item__text p { font-size: 13px; color: var(--color-primary); font-weight: 700; }
.section-lottery-awards .item__link { flex: 0 0 auto; }
.section-lottery-awards .item__link .link { background: transparent; border: 0; color: var(--color-primary); font-weight: 700; font-size: 12px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.section-lottery-awards .item .desc { display: none; padding: 0 16px 16px; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.section-lottery-awards .item.active .desc { display: block; }

/* Upcoming — cards (or empty block) */
.section-lottery-upcoming .empty-block { border: 2px solid var(--color-primary); border-radius: 6px; background: rgba(0,0,0,0.6); padding: 40px; text-align: center; color: #FFFFFF; }
.section-lottery-upcoming .item { width: 300px; max-width: 80vw; }
.section-lottery-upcoming .item__box { background: rgba(0,0,0,0.6); border: 1px solid var(--color-primary); border-radius: 6px; overflow: hidden; }
.section-lottery-upcoming .item__header { padding: 14px 16px; background: rgba(146,109,32,0.2); }
.section-lottery-upcoming .item__header p { font-weight: 700; color: #FFFFFF; }
.section-lottery-upcoming .item__content { padding: 14px 16px; }
.section-lottery-upcoming .item__content p { color: var(--color-text-muted); font-size: 13px; margin-bottom: 8px; }
.section-lottery-upcoming .item__content h2 { color: var(--color-primary); font-size: 15px; font-weight: 700; }

/* History — table of past raffles (expandable) + winner list */
.lottery-history-table { display: flex; flex-direction: column; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; }
.lottery-row { border-bottom: 1px solid rgba(255,255,255,0.08); }
.lottery-row:last-child { border-bottom: 0; }
.lottery-row.active { background: rgba(146,109,32,0.12); }
.lottery-row__summary {
  width: 100%; display: grid; grid-template-columns: 2fr 1.3fr 1fr 1.3fr auto; align-items: center; gap: 12px;
  padding: 16px 20px; background: transparent; border: 0; cursor: pointer; color: #FFFFFF; text-align: start; font-size: 14px;
}
.lottery-row__summary .col--title { font-weight: 700; }
.lottery-row__summary .col--date, .lottery-row__summary .col--winners, .lottery-row__summary .col--tickets { color: var(--color-text-muted); font-size: 13px; }
.lottery-row__summary .chev { justify-self: end; width: 8px; height: 8px; border: solid var(--color-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s ease; }
.lottery-row.active .chev { transform: rotate(-135deg); }
.lottery-row__detail { display: none; padding: 0 20px 18px; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.lottery-row.active .lottery-row__detail { display: block; }
.lottery-row__awards { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; }
.lottery-row__awards li { color: #FFFFFF; }

.lottery-winners__wrapper { margin-top: 28px; }
.lottery-winners__header { font-size: 18px; font-weight: 700; color: #FFFFFF; margin-bottom: 14px; }
.widgetWinn { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.widgetWinn__item { background: rgba(0,0,0,0.6); border: 1px solid rgba(146,109,32,0.4); border-radius: 6px; padding: 12px 14px; }
.widgetWinn__item .inf h4 { font-size: 14px; color: #FFFFFF; }
.widgetWinn__item .inf p { font-size: 13px; color: var(--color-primary); font-weight: 700; margin-top: 2px; }

@media (max-width: 767px) {
  .lottery-row__summary { grid-template-columns: 1fr auto; row-gap: 4px; }
  .lottery-row__summary .col--date, .lottery-row__summary .col--winners, .lottery-row__summary .col--tickets { grid-column: 1; }
  .lottery-row__summary .chev { grid-row: 1; grid-column: 2; }
}

/* ##ReferFriend */
.friend-referral ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.friend-referral .vip-bronze {
	color: var(--color-vip-level-1) !important;
}
.friend-referral .vip-silver {
	color: var(--color-vip-level-2) !important;
}
.friend-referral .vip-gold {
	color: var(--color-vip-level-3) !important;
}

.friend-referral .PagePartHeroBanner {
	aspect-ratio: unset;
	height: 400px;
}
.friend-referral .hero-banner__image img {
	object-position: 65%;
}
/* RTL mirrors the artwork (both classes sit on #app, hence no descendant space).
   The crop must then stay the LTR one: the flip already mirrors it, while the base
   rtl object-position (35%) would show a different part of the image. */
.activeRtl.friend-referral .hero-banner__image {
	transform: scaleX(-1);
}
.activeRtl.friend-referral .hero-banner__image img {
	object-position: 65%;
}
.friend-referral .hero-banner__content {
	gap: unset;
}
.friend-referral .hero-banner__title {
	font-size: 50px;
	font-weight: 700;
	margin-bottom: 16px;
}
.friend-referral .hero-banner__description {
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 60px;
}

.friend-referral .hero-banner__cta {
	width: max-content;
	min-width: 248px;
	height: 48px;
	padding: 0 30px;
	font-size: 14px;
	font-weight: 700;
	background: transparent;
	clip-path: none;
}
.friend-referral .hero-banner__cta.copy-link-btn {
	min-width: max-content;
	text-transform: none;
}
.friend-referral .copy-link-btn__state {
	gap: 10px;
}
.friend-referral .hero-banner__cta.copy-link-btn .copy-link-btn__text {
	min-width: max-content;
	direction: ltr;
}
.friend-referral .hero-banner__cta.copy-link-btn img {
	width: 24px;
	height: 24px;
}
.friend-referral .hero-banner__cta--disabled {
	gap: 4px;
	opacity: .5;
	font-weight: 800;
	cursor: default;
	pointer-events: none;
}

.friend-referral .hero-banner__raf {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.friend-referral .hero-banner__raf .raf-login-text {
	font-size: 30px;
}
.friend-referral .hero-banner__raf .raf-share {
	display: flex;
	gap: 20px;
	align-items: center;
}
.friend-referral .hero-banner__raf .raf-share__label {
	min-width: max-content;
	font-size: 24px;
	font-weight: 800;
}
.friend-referral .hero-banner__raf .raf-share__links {
	display: flex;
	gap: 20px;
}
.friend-referral .hero-banner__raf .raf-share__links .share-item {
	width: 40px;
	height: 40px;
}
.friend-referral .hero-banner__raf .raf-share__links .share-item__icon {
	width: 100%;
	height: 100%;
}

.friend-referral .raf-section-title {
	margin-bottom: 20px;
	font-size: 40px;
	font-weight: 800;
	color: var(--color-text-white) !important;
	text-transform: none;
	text-align: center;
}

.friend-referral .raf-steps {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
	margin-bottom: 60px;
}
.friend-referral .raf-steps .raf-step {
	flex-basis: 33.33%;
	padding: 40px 0;
	/* Solid fill inside, gradient 1px frame: each layer is clipped to its own box.
	   The fill is wrapped in a gradient because only the last layer may be a color. */
	background:
		linear-gradient(var(--color-surface-4), var(--color-surface-4)) padding-box,
		var(--color-surface-3-border) border-box;
	border-radius: 10px;
	border: 1px solid transparent;
	text-align: center;
	font-size: 24px;
}

.friend-referral .raf-rewards-section {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 40px;
}
.friend-referral .raf-rewards-section .raf-your-rewards,
.friend-referral .raf-rewards-section .raf-friend-rewards {
	width: 50%;
	max-width: 760px;
	padding: 20px;
	background: var(--color-surface-3);
	border-radius: 10px;
}
.friend-referral .raf-rewards-section .raf-rewards-label {
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 20px;
}
.friend-referral .raf-rewards-section .raf-rewards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.friend-referral .raf-rewards-section .raf-reward {
	display: flex;
	align-items: center;
	gap: 20px;
}
.friend-referral .raf-rewards-section .raf-reward__icon {
	width: 64px;
	height: 64px;
}
.friend-referral .raf-rewards-section .raf-reward__text {
	font-size: 24px;
}
.friend-referral .raf-rewards-section .raf-reward__text strong {
	font-weight: 800;
}
.friend-referral .raf-rewards-section .raf-reward__text .raf-text-highlight {
	color: var(--color-brand-1) !important;
}

.friend-referral .raf-terms-link {
	display: block;
	width: fit-content;
	margin: 20px auto 114px auto;
	font-size: 24px;
	text-decoration: underline;
	color: var(--color-link);
}

@media (max-width: 1200px) {
	.friend-referral .content-only-block {
		padding: 0 38px;
	}

	.friend-referral .hero-banner__image img,
	.activeRtl.friend-referral .hero-banner__image img {
		object-position: 75%;
	}
	.friend-referral .hero-banner__title {
		font-size: 33px;
		margin-bottom: 12px;
	}
	.friend-referral .hero-banner__description {
		font-size: 20px;
		margin-bottom: 45px;
	}
	.friend-referral .hero-banner__cta {
		padding: 0 21px;
		font-size: 12px;
	}
	.friend-referral .hero-banner__cta.copy-link-btn {
		font-size: 11px;
	}
	.friend-referral .copy-link-btn__state {
		gap: 8px;
	}
	.friend-referral .hero-banner__raf {
		gap: 12px;
	}
	.friend-referral .hero-banner__raf .raf-login-text {
		font-size: 21px;
	}
	.friend-referral .hero-banner__raf .raf-share {
		gap: 15px;
	}
	.friend-referral .hero-banner__raf .raf-share__label {
		font-size: 18px;
	}
	.friend-referral .hero-banner__raf .raf-share__links {
		gap: 15px;
	}

	.friend-referral .raf-section-title {
		margin-bottom: 18px;
		font-size: 28px;
	}

	.friend-referral .raf-steps {
		gap: 14px;
		margin-top: 10px;
		margin-bottom: 50px;
	}
	.friend-referral .raf-steps .raf-step {
		padding: 27px 8px;
		font-size: 19px;
	}

	.friend-referral .raf-rewards-section {
		gap: 35px;
		margin: 15px 0 35px;
	}
	.friend-referral .raf-rewards-section .raf-rewards-label {
		font-size: 19px;
		margin-bottom: 15px;
	}
	.friend-referral .raf-rewards-section .raf-rewards {
		gap: 14px;
	}
	.friend-referral .raf-rewards-section .raf-reward {
		gap: 18px;
	}
	.friend-referral .raf-rewards-section .raf-reward__text {
		font-size: 19px;
	}

	.friend-referral .raf-terms-link {
		margin: 10px auto 72px auto;
		font-size: 19px;
	}
}

@media (max-width: 767px) {
	.friend-referral .content-only-block {
		padding: 0 15px;
	}

	.friend-referral .PagePartHeroBanner {
		height: 210px;
	}
	.friend-referral .hero-banner__title {
		font-size: 16px;
		font-weight: 800;
		margin-bottom: 8px;
	}
	.friend-referral .hero-banner__description {
		font-size: 11px;
		margin-bottom: 30px;
	}
	.friend-referral .hero-banner__cta {
		min-width: 144px;
		height: 28px;
		padding: 0 12px;
		font-size: 9px;
		font-weight: 800;
	}
	.friend-referral .hero-banner__cta.copy-link-btn {
		width: 176px;
		font-size: 8px;
	}
	.friend-referral .copy-link-btn__state {
		gap: 5px;
	}
	.friend-referral .hero-banner__cta.copy-link-btn img {
		width: 12px;
		height: 12px;
	}
	.friend-referral .hero-banner__raf {
		gap: 8px;
	}
	.friend-referral .hero-banner__raf .raf-login-text {
		font-size: 12px;
	}
	.friend-referral .hero-banner__raf .raf-share {
		gap: 10px;
	}
	.friend-referral .hero-banner__raf .raf-share__label {
		font-size: 11px;
	}
	.friend-referral .hero-banner__raf .raf-share__links {
		gap: 10px;
	}
	.friend-referral .hero-banner__raf .raf-share__links .share-item {
		width: 20px;
		height: 20px;
	}

	.friend-referral .raf-section-title {
		margin-bottom: 16px;
		font-size: 16px;
	}

	.friend-referral .raf-steps {
		flex-direction: column;
		gap: 8px;
		margin-top: 0;
		margin-bottom: 40px;
	}
	.friend-referral .raf-steps .raf-step {
		flex-basis: 100%;
		padding: 14px 16px;
		text-align: start;
		font-size: 14px;
	}

	.friend-referral .raf-rewards-section {
		flex-direction: column;
		gap: 30px;
		margin: 30px 0;
	}
	.friend-referral .raf-rewards-section .raf-your-rewards,
	.friend-referral .raf-rewards-section .raf-friend-rewards {
		width: 100%;
	}
	.friend-referral .raf-rewards-section .raf-rewards-label {
		font-size: 14px;
		margin-bottom: 10px;
	}
	.friend-referral .raf-rewards-section .raf-rewards {
		gap: 8px;
	}
	.friend-referral .raf-rewards-section .raf-reward {
		gap: 16px;
	}
	.friend-referral .raf-rewards-section .raf-reward__icon {
		width: 32px;
		height: 32px;
	}
	.friend-referral .raf-rewards-section .raf-reward__text {
		font-size: 14px;
	}

	.friend-referral .raf-terms-link {
		margin: 0 auto 30px auto;
		font-size: 14px;
	}
}