/**
 * BIGBAT58 — Homepage UX enhancements
 */

/* Hero trust highlights */
.bb58-hero--premium .bb58-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.25rem;
	margin: 1.15rem 0 0;
	padding: 0;
	list-style: none;
}

.bb58-hero--premium .bb58-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

.bb58-hero--premium .bb58-hero__trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	font-size: 0.625rem;
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* Game category cards */
.bb58-home-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.bb58-home-category {
	position: relative;
	border-radius: 14px;
	background: color-mix(in srgb, var(--color-card-background) 78%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s, box-shadow 0.28s;
}

.bb58-home-category:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
	box-shadow: 0 14px 34px color-mix(in srgb, #000 42%, transparent);
}

.bb58-home-category__link {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	padding: 1rem 1.05rem;
	color: inherit;
	text-decoration: none;
}

.bb58-home-category__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 10px;
	font-weight: 800;
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.bb58-home-category__title {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
}

.bb58-home-category__count {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.bb58-home-category__description {
	margin: 0 0 0.55rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.bb58-home-category__cta {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Game card badges */
.bb58-premium-card__badges {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	z-index: 2;
}

.bb58-premium-card__badge--hot,
.bb58-premium-card__badge--new,
.bb58-premium-card__badge--popular {
	padding: 0.2rem 0.45rem;
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bb58-premium-card__badge--hot {
	color: #fff;
	background: #c0392b;
}

.bb58-premium-card__badge--new {
	color: #111;
	background: var(--color-primary);
}

.bb58-premium-card__badge--popular {
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-card-background) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.bb58-premium-card__rtp {
	margin: 0.15rem 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* Provider marquee */
.bb58-home-providers__count {
	margin: -0.35rem 0 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
}

.bb58-home-providers__marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bb58-home-providers__track {
	display: flex;
	width: max-content;
	animation: bb58-home-providers-marquee 48s linear infinite;
}

.bb58-home-providers__row {
	display: flex;
	gap: 0.85rem;
	padding: 0.25rem 0;
	list-style: none;
	margin: 0;
}

.bb58-home-providers__item {
	flex: 0 0 auto;
	width: 10.5rem;
}

.bb58-home-providers__item .bb58-premium-provider {
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bb58-home-providers__item .bb58-premium-provider:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px color-mix(in srgb, #000 35%, transparent);
}

@keyframes bb58-home-providers-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Statistics */
.bb58-home-stats__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
}

.bb58-home-stat {
	padding: 1.15rem 1rem;
	border-radius: 14px;
	text-align: center;
	background: color-mix(in srgb, var(--color-card-background) 78%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.bb58-home-stat__value {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	color: var(--color-text);
}

.bb58-home-stat__suffix {
	color: var(--color-primary);
}

.bb58-home-stat__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* Winners ticker */
.bb58-home-winners {
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
	background: color-mix(in srgb, var(--color-card-background) 72%, transparent);
}

.bb58-home-winners__track {
	display: flex;
	width: max-content;
	animation: bb58-home-winners-ticker 36s linear infinite;
}

.bb58-home-winners__row {
	display: flex;
	gap: 0.75rem;
	padding: 0.85rem;
	list-style: none;
	margin: 0;
}

.bb58-home-winners__card {
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 1rem;
	align-items: center;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	white-space: nowrap;
	background: color-mix(in srgb, var(--color-background) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.bb58-home-winners__prize {
	color: var(--color-primary);
}

.bb58-home-winners__time {
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

@keyframes bb58-home-winners-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* FAQ toolbar */
.bb58-home-faq__toolbar {
	margin: 0 0 1rem;
}

.bb58-home-faq__search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.bb58-home-faq__search {
	width: min(100%, 420px);
	padding: 0.75rem 1rem;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
	background: color-mix(in srgb, var(--color-card-background) 82%, transparent);
	color: var(--color-text);
}

.bb58-home-faq__related {
	margin-top: 1.25rem;
}

.bb58-home-faq__related-label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.bb58-home-faq__related-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb58-home-faq__related-list a {
	color: color-mix(in srgb, var(--color-text) 82%, transparent);
	text-decoration: none;
}

.bb58-home-faq__related-list a:hover {
	color: var(--color-primary);
}

/* Trust signals */
.bb58-home-trust {
	padding: 1.35rem 0;
	border-top: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
	background: color-mix(in srgb, var(--color-card-background) 55%, transparent);
}

.bb58-home-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb58-home-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-text) 84%, transparent);
}

.bb58-home-trust__icon {
	color: var(--color-primary);
}

/* Footer fifth column */
.bb58-footer__grid {
	grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.bb58-home-categories__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bb58-home-stats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bb58-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.bb58-home-categories__grid,
	.bb58-home-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bb58-home-providers__marquee .bb58-home-providers__track,
	.bb58-home-winners__track {
		animation: none;
	}

	.bb58-home-providers__marquee,
	.bb58-home-winners {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		mask-image: none;
	}

	.bb58-home-providers__track,
	.bb58-home-winners__track {
		width: auto;
	}

	.bb58-home .bb58-btn--primary,
	.bb58-home .bb58-btn--secondary {
		width: 100%;
	}

	.bb58-home-winners__card {
		grid-template-columns: 1fr;
		gap: 0.25rem;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb58-home-providers__track,
	.bb58-home-winners__track {
		animation: none;
	}
}