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

:root {
	--wpbbs-primary: #e63746;
	--wpbbs-primary-dark: #0f172a;
	--wpbbs-secondary: #111827;
	--wpbbs-secondary-dark: #0b1020;
	--wpbbs-accent: #f59e0b;
	--wpbbs-bg: #f8fafc;
	--wpbbs-surface: #ffffff;
	--wpbbs-text: #111827;
	--wpbbs-muted: #526070;
	--wpbbs-border: #e2e8f0;
	--wpbbs-footer: #0f172a;
	--wpbbs-footer-soft: #1f2937;
	--wpbbs-font: Inter, "Noto Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.wpbbs-highlight-card--blue {
	background: #fff;
}

.wpbbs-highlight-card--red {
	background: #fff;
}

.wpbbs-highlight-card--blue .wpbbs-highlight-card__media .wpbbs-media-fallback {
	background: linear-gradient(135deg, #0b55c7, #08247e);
}

.wpbbs-highlight-card--red .wpbbs-highlight-card__media .wpbbs-media-fallback {
	background: linear-gradient(135deg, #e11d2e, #07349a);
}

.wpbbs-intro {
	background:
		linear-gradient(90deg, rgba(7, 52, 154, 0.05), rgba(225, 29, 46, 0.04)),
		var(--wpbbs-bg);
}

.wpbbs-games {
	background: #f7faff;
}

.wpbbs-footer__col li::marker {
	color: #fff;
}

.wpbbs-game-card:nth-child(2n)::before {
	background: linear-gradient(90deg, var(--wpbbs-secondary), var(--wpbbs-accent));
}

.wpbbs-game-card:nth-child(3n)::before {
	background: linear-gradient(90deg, #0b7bd3, var(--wpbbs-primary));
}

.wpbbs-subpage--app .wpbbs-page-hero,
.wpbbs-subpage--login .wpbbs-page-hero,
.wpbbs-subpage--register .wpbbs-page-hero {
	background: linear-gradient(135deg, var(--wpbbs-primary-dark), var(--wpbbs-primary));
	color: #eaf2ff;
}

.wpbbs-subpage--app .wpbbs-page-hero h1,
.wpbbs-subpage--login .wpbbs-page-hero h1,
.wpbbs-subpage--register .wpbbs-page-hero h1,
.wpbbs-subpage--app .wpbbs-page-hero .wpbbs-breadcrumb,
.wpbbs-subpage--login .wpbbs-page-hero .wpbbs-breadcrumb,
.wpbbs-subpage--register .wpbbs-page-hero .wpbbs-breadcrumb {
	color: #fff;
}

.wpbbs-subpage--bonus .wpbbs-page-hero {
	background: linear-gradient(135deg, #fff4f5, #fff);
}

.wpbbs-subpage--payment .wpbbs-page-hero {
	background: linear-gradient(135deg, #eefbf6, #fff);
}

.wpbbs-subpage--responsible-gaming .wpbbs-page-hero {
	background: linear-gradient(135deg, #eef4ff, #fff4f5);
}

.wpbbs-subpage--games .wpbbs-info-card:nth-child(odd),
.wpbbs-subpage--payment .wpbbs-info-card:nth-child(even) {
	background: #f8fbff;
}

.wpbbs-subpage--bonus .wpbbs-info-card:nth-child(2) {
	border-color: rgba(225, 29, 46, 0.28);
	background: #fff6f7;
}

.wpbbs-archive .wpbbs-post-card:nth-child(3n + 1) .wpbbs-post-card__media .wpbbs-media-fallback {
	background: linear-gradient(135deg, #07349a, #0b7bd3);
}

.wpbbs-archive .wpbbs-post-card:nth-child(3n + 2) .wpbbs-post-card__media .wpbbs-media-fallback {
	background: linear-gradient(135deg, #e11d2e, #07349a);
}

.wpbbs-archive .wpbbs-post-card:nth-child(3n + 3) .wpbbs-post-card__media .wpbbs-media-fallback {
	background: linear-gradient(135deg, #061f68, #f7c948);
}

.wpbbs-topbar__links span {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	color: #fff;
	font-weight: 800;
	line-height: 1;
}

.wpbbs-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-left: auto;
}

.wpbbs-header-actions .wpbbs-header-action {
	min-height: 40px;
	padding-inline: 0.82rem;
	background: #fff;
	border: 1px solid rgba(226, 55, 70, 0.22);
	color: #111827;
	box-shadow: none;
}

.wpbbs-header-actions .wpbbs-header-action--primary {
	background: var(--wpbbs-primary);
	color: #fff;
	box-shadow: 0 8px 18px rgba(230, 55, 70, 0.22);
}

.wpbbs-brand {
	min-width: 196px;
	max-width: 236px;
}

.wpbbs-brand__text {
	font-size: 1.28rem;
	letter-spacing: 0;
}

.wpbbs-data-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--wpbbs-border);
	border-radius: var(--wpbbs-radius);
	background: #fff;
	box-shadow: var(--wpbbs-shadow-soft);
}

.wpbbs-data-table th,
.wpbbs-data-table td {
	padding: 1rem 1.15rem;
	border-bottom: 1px solid var(--wpbbs-border);
	text-align: left;
	vertical-align: top;
}

.wpbbs-data-table th {
	background: linear-gradient(135deg, #0f172a, #111827);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wpbbs-data-table tr:last-child td {
	border-bottom: 0;
}

.wpbbs-data-table td:first-child {
	color: var(--wpbbs-primary);
	font-weight: 900;
}

.wpbbs-data-table td:nth-child(2) {
	color: #111827;
	font-weight: 800;
}

.wpbbs-data-table td:last-child {
	color: var(--wpbbs-muted);
	line-height: 1.65;
}

.wpbbs-promo .wpbbs-promo__grid {
	grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
	gap: clamp(1.25rem, 3vw, 2.4rem);
}

.wpbbs-promo .wpbbs-promo__media {
	justify-self: end;
	width: min(100%, 320px);
	height: clamp(240px, 24vw, 320px);
	min-height: 0;
	border-radius: 18px;
}

.wpbbs-promo .wpbbs-promo__media img {
	object-fit: cover;
	object-position: center top;
}

.wpbbs-faq-page .wpbbs-faq-hero {
	grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.wpbbs-faq-page .wpbbs-faq-nav {
	justify-self: end;
	justify-content: flex-end;
	gap: 0.42rem;
	max-width: 230px;
	padding: 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	background: rgba(15, 23, 42, 0.22);
	backdrop-filter: blur(10px);
}

.wpbbs-faq-page .wpbbs-faq-nav span {
	min-height: 30px;
	padding: 0 0.62rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #0f172a;
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12);
}

.wpbbs-games-page .wpbbs-game-matrix article.wpbbs-game-matrix-card {
	position: relative;
	display: flex;
	min-height: 460px;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background:
		linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.82)),
		var(--game-bg),
		linear-gradient(135deg, #0f172a, #e63746);
	background-position: center;
	background-size: cover;
	color: #fff;
	box-shadow: 0 24px 52px rgba(15, 23, 42, 0.18);
}

.wpbbs-games-page .wpbbs-game-matrix article.wpbbs-game-matrix-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.36) 42%, rgba(15, 23, 42, 0.88) 100%),
		linear-gradient(90deg, rgba(230, 55, 70, 0.22), rgba(15, 23, 42, 0.12));
	pointer-events: none;
}

.wpbbs-games-page .wpbbs-game-matrix-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: 100%;
	padding: 1.35rem;
}

.wpbbs-games-page .wpbbs-game-matrix-card__content span {
	align-self: flex-start;
	margin-bottom: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(15, 23, 42, 0.54);
	color: #fff;
	backdrop-filter: blur(10px);
}

.wpbbs-games-page .wpbbs-game-matrix-card__content h2,
.wpbbs-games-page .wpbbs-game-matrix-card__content h2 a {
	color: #fff;
}

.wpbbs-games-page .wpbbs-game-matrix-card__content p {
	color: rgba(255, 255, 255, 0.86);
}

.wpbbs-games-page .wpbbs-game-matrix-card__content .wpbbs-text-link {
	align-self: flex-start;
	margin-top: auto;
	padding: 0.48rem 0.82rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--wpbbs-primary);
	text-decoration: none;
}

.wpbbs-games-page .wpbbs-game-matrix-card__content .wpbbs-text-link:hover,
.wpbbs-games-page .wpbbs-game-matrix-card__content .wpbbs-text-link:focus-visible {
	background: #fff;
	color: #b91c1c;
}

@media (max-width: 1080px) {
	.wpbbs-header-actions {
		display: none;
	}
}

@media (max-width: 720px) {
	.wpbbs-brand {
		max-width: 210px;
		padding-inline: 0.7rem;
	}

	.wpbbs-brand__text {
		font-size: 1.06rem;
	}

	.wpbbs-brand__sub {
		display: block;
		font-size: 0.68rem;
	}

	.wpbbs-data-table {
		display: block;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.wpbbs-data-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wpbbs-data-table tbody {
		display: grid;
		gap: 0.85rem;
	}

	.wpbbs-data-table tr {
		display: grid;
		gap: 0.55rem;
		padding: 1rem;
		border: 1px solid var(--wpbbs-border);
		border-radius: var(--wpbbs-radius);
		background: #fff;
		box-shadow: var(--wpbbs-shadow-soft);
	}

	.wpbbs-data-table td {
		display: grid;
		grid-template-columns: minmax(108px, 0.42fr) minmax(0, 1fr);
		gap: 0.75rem;
		padding: 0;
		border-bottom: 0;
	}

	.wpbbs-data-table td::before {
		content: attr(data-label);
		color: #111827;
		font-size: 0.78rem;
		font-weight: 900;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.wpbbs-promo .wpbbs-promo__grid {
		grid-template-columns: 1fr;
	}

	.wpbbs-promo .wpbbs-promo__media {
		justify-self: stretch;
		width: 100%;
		height: 210px;
	}

	.wpbbs-faq-page .wpbbs-faq-hero {
		grid-template-columns: 1fr;
	}

	.wpbbs-faq-page .wpbbs-faq-nav {
		justify-self: start;
		justify-content: flex-start;
		max-width: none;
		padding: 0.55rem;
	}

	.wpbbs-faq-page .wpbbs-faq-nav span {
		min-height: 28px;
		font-size: 0.74rem;
	}

	.wpbbs-floating-actions {
		width: min(calc(100% - 20px), 560px);
		border-radius: 16px;
	}

	.wpbbs-floating-actions a {
		font-size: 0.82rem;
		line-height: 1.15;
	}
}
