/**
 * Welcome bonus / promotion dialog (sidebar). Uses theme tokens from variable.css.
 */

.category-page__sidebar .app-dialog {
	margin-top: 1.75rem;
}

.app-dialog.promotion-listing-page-dialog {
	color: var(--lp-color-white);
	border-radius: var(--lp-radius-card-lg);
	border: 1px solid var(--lp-color-zinc-600-border);
	position: relative;
	inline-size: min(35.5rem, 100%);
	margin-inline: auto;
	background-color: var(--lp-color-zinc-800);
	overflow: hidden;
}

.app-dialog__heading.promotion-listing-page-dialog__heading {
	block-size: 21.125rem;
	overflow: hidden;
	position: relative;
	inline-size: 100%;
	display: flex;
	border-radius: var(--lp-radius-card-lg) var(--lp-radius-card-lg) 0 0;
	pointer-events: none;
}

.app-dialog__heading--default {
	align-items: center;
	justify-content: flex-end;
}

.app-dialog__heading-default-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: blur(0.625rem);
	transform: scale(1.06);
}

.promotion-listing-page-dialog__heading-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.promotion-listing-page-dialog__heading-overlay img {
	position: absolute;
	bottom: 0;
	block-size: auto;
	max-block-size: 85%;
	inline-size: auto;
	max-inline-size: 55%;
	object-fit: contain;
}

.promotion-listing-page-dialog__heading-overlay .sc-coin {
	left: -2rem;
}

.promotion-listing-page-dialog__heading-overlay .fc-coin {
	right: -2rem;
}

.app-dialog__icon-container.promotion-listing-page-dialog__icon-container {
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	block-size: 24.5rem;
	inline-size: auto;
	margin-inline: auto;
	pointer-events: none;
}

.promotion-listing-page-dialog__icon-container img {
	display: block;
	block-size: 100%;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

.app-dialog__body.promotion-listing-page-dialog__body {
	position: relative;
	z-index: 2;
	background-color: var(--lp-color-zinc-800);
	border-radius: 0 0 var(--lp-radius-card-lg) var(--lp-radius-card-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2.5rem;
	text-align: center;
	font-size: 0.875rem;
}

.promotion-listing-page-dialog__welcome-bonus-text {
	display: block;
	block-size: 7.6875rem;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	margin-block: -4rem 1rem;
}

.promotion-listing-page-dialog__content {
	margin-block-start: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.875rem;
	inline-size: 100%;
}

.promotion-listing-page-dialog__content .conditional-tag {
	font-size:35px;
	font-style: italic;
	font-weight:800;
}

.promotion-listing-page-dialog .coin_wrap {
	padding: 0.75rem 1.5rem;
	border-radius: var(--lp-radius-pill-full);
	background-color: var(--lp-color-zinc-700);
	inline-size: fit-content;
	margin-inline: auto;
	font-size: clamp(1.25rem, 5vw, 2.25rem);
	font-weight: 900;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.5rem;
	line-height: 1;
}

.promotion-listing-page-dialog .coin_wrap > span.gc_coin_value,
.promotion-listing-page-dialog .coin_wrap > span.sc_coin_value {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: clamp(
		20px,
		calc(20px + (36 - 20) * ((100vw - 1024px) / (1250 - 1024))),
		36px
	);

}

.promotion-listing-page-dialog .coin_wrap > span.gc_coin_value span,
.promotion-listing-page-dialog .coin_wrap > span.sc_coin_value span {
	font-size:inherit;
}

.promotion-listing-page-dialog .coin_wrap img {
	display: block;
	block-size: 1.35em;
	inline-size: auto;
	object-fit: contain;
}

.promotion-listing-page-dialog .coin_wrap > span.gc_coin_value > span.gc_coin_value {
	color: #fcd34d;
}

.promotion-listing-page-dialog .coin_wrap > span.sc_coin_value > span.sc_coin_value {
	color: #4ade80;
}

.popup-signup-btn {
	display: block;
	inline-size: 100%;
	max-inline-size: 20rem;
	padding: 0.85rem 1.25rem;
	border-radius: var(--lp-radius-pill-full);
	background: #ff0099;
	color: var(--lp-color-white) !important;
	font-size: 0.875rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(255, 0, 153, 0.35);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.popup-signup-btn:hover,
.popup-signup-btn:focus-visible {
	background: #e6008a;
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(255, 0, 153, 0.45);
	color: var(--lp-color-white) !important;
}

.popup-signup-btn:focus-visible {
	outline: 2px solid var(--lp-color-white);
	outline-offset: 2px;
}

.promotion-listing-page-dialog__content small {
	display: block;
	font-size: 0.625rem;
	line-height: 1.5;
	color: var(--lp-color-white-70);
	max-inline-size: 28rem;
	margin: 0;
}

.promotion-listing-page-dialog__content small a {
	color: #ff0099 !important;
	font-weight: 600;
	text-decoration: none;
}

.promotion-listing-page-dialog__content small a:hover,
.promotion-listing-page-dialog__content small a:focus-visible {
	text-decoration: underline;
}

/* Remove stray line-break spacing between CTA and disclaimer */
.promotion-listing-page-dialog__content br {
	display: none;
}