/*
Brand Skin for 20Bet
This file controls the visual color identity for the 20Bet India market brand website.
Prefer changing CSS variables here instead of rewriting core layout CSS.
*/

:root {
	--brand-skin-loaded: 1;
	--bb-primary: #1247a8;
	--bb-secondary: #d7263d;
	--bb-accent: #f5b700;
	--bb-dark: #081a33;
	--bb-light: #f7faff;
	--bb-hero-bg: #0b244a;
	--bb-footer-bg: #07162b;
	--bb-button-bg: #d7263d;
	--bb-card-border: rgba(245, 183, 0, 0.32);
}

.site-topbar {
	background: rgba(8, 26, 51, 0.96);
}

.btn-primary,
.mobile-action--green {
	background: var(--bb-button-bg);
}

.mobile-action--purple {
	background: var(--bb-primary);
}

.hero-card,
.inner-hero__grid {
	border-color: var(--bb-card-border);
}

.hero-card,
.inner-hero__grid {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.hero-card::after {
	display: none;
}

.home .hero-copy h1,
.front-page .hero-copy h1,
.hero-copy h1 {
	color: #ffd24a;
}

.home .hero-copy {
	padding-left: 30px;
}

.home .hero-copy::before {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	width: 5px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f5b700 0 42%, #d7263d 42% 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 0 26px rgba(245, 183, 0, 0.3);
	content: "";
}

.home .hero-copy .eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	padding: 8px 13px;
	border: 1px solid rgba(245, 183, 0, 0.38);
	border-radius: 999px;
	background: rgba(18, 71, 168, 0.34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #ffe28a;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.home .hero-copy h1 {
	position: relative;
	max-width: 680px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: linear-gradient(112deg, #ffffff 0 31%, #ffe68f 58%, #f5b700 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
	color: #ffffff;
	font-size: clamp(48px, 5vw, 68px);
	font-weight: 950;
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-wrap: balance;
	-webkit-text-fill-color: transparent;
}

.home .hero-copy h1::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: clamp(132px, 34%, 210px);
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg, #d7263d 0 32%, #f5b700 32% 100%);
	box-shadow: 0 6px 18px rgba(215, 38, 61, 0.34);
	content: "";
}

html[lang^="hi"] .home .hero-copy h1,
html[lang^="bn"] .home .hero-copy h1 {
	line-height: 1.08;
	letter-spacing: 0;
}

@media (max-width: 980px) {
	.home .hero-copy {
		padding-left: 22px;
	}

	.home .hero-copy h1 {
		font-size: clamp(40px, 8vw, 58px);
	}
}

@media (max-width: 520px) {
	.home .hero-copy {
		padding-left: 17px;
	}

	.home .hero-copy::before {
		width: 4px;
	}

	.home .hero-copy .eyebrow {
		margin-bottom: 13px;
		padding: 7px 10px;
		font-size: 10px;
		letter-spacing: 0.09em;
	}

	.home .hero-copy h1 {
		margin-bottom: 17px;
		padding-bottom: 16px;
		font-size: clamp(36px, 10.5vw, 48px);
		line-height: 1.02;
	}

	.home .hero-copy h1::after {
		height: 4px;
	}
}

.inner-page--app .inner-hero__grid,
.inner-page--login .inner-hero__grid,
.inner-page--register .inner-hero__grid,
.inner-page--games .inner-hero__grid,
.inner-page--bonus .inner-hero__grid,
.inner-page--payment .inner-hero__grid,
.inner-page--faq .inner-hero__grid {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.inner-page--app .inner-hero h1,
.inner-page--login .inner-hero h1,
.inner-page--register .inner-hero h1,
.inner-page--games .inner-hero h1,
.inner-page--bonus .inner-hero h1,
.inner-page--payment .inner-hero h1,
.inner-page--faq .inner-hero h1 {
	color: #b88924;
}

.site-footer {
	background: var(--bb-footer-bg);
}