/* Betting sites: cards, comparison table, hub and review pages. */

/* Logo box */
.site-logo {
	flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; overflow: hidden;
	border-radius: 14px; background: color-mix(in srgb, var(--brand, var(--green)) 14%, var(--surface-2)); border: 1px solid var(--line);
}
.site-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.site-logo b { color: var(--brand, var(--green)); font-size: 1.4rem; font-weight: 900; }
.site-logo--sm { width: 44px; height: 44px; border-radius: 12px; }

/* Site card */
.sitegrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.scard {
	position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
	transition: border-color .18s;
}
.scard:hover { border-color: var(--line-2); }
.scard[hidden] { display: none; }
.scard__rank {
	position: absolute; inset: -1px auto auto -1px; display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px;
	border-radius: var(--r-lg) 0 12px 0; background: var(--surface-3); color: var(--gold); font-weight: 900; font-size: var(--fs-sm);
}
.scard__head { display: flex; align-items: center; gap: 12px; }
.scard__name { flex: 1; min-width: 0; }
.scard__name h3 { margin: 0; font-size: var(--fs-lg); line-height: 1.5; }
.scard__name h3 a:hover { color: var(--green); }
.scard__name .rating small { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); }
.scard__badge { align-self: flex-start; margin-inline-start: auto; }
.scard__rank ~ .scard__head .scard__badge { margin-inline-end: 34px; }
.scard__bonus { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); }
.scard__bonus span { color: var(--muted); font-size: var(--fs-xs); }
.scard__bonus strong { color: var(--gold); font-size: var(--fs-md); line-height: 1.6; }
.scard__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.scard__facts div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.scard__facts dt { color: var(--muted); font-size: 11px; }
.scard__facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.scard__features { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-sm); }
.scard__features li { display: flex; gap: 8px; align-items: flex-start; }
.scard__features .ic { color: var(--green); margin-top: 4px; width: 1em; height: 1em; }
.scard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.scard__actions .btn:only-child { grid-column: 1 / -1; }

/* Sliders of cards */
.sitesec .rail .scard { height: 100%; }

/* Comparison table: stacked cards on phones, a real table row layout from 900px. */
.sitetable { display: grid; gap: 10px; }
.sitetable__row {
	display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.sitetable__row--head { display: none; }
.sitetable__rank { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--gold); font-weight: 900; }
.sitetable__row:nth-child(2) .sitetable__rank { background: var(--gold); color: #1d1503; }
.sitetable__site { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sitetable__site > span:last-child { display: grid; min-width: 0; }
.sitetable__name { font-weight: 900; font-size: var(--fs-md); }
.sitetable__name:hover { color: var(--green); }
.sitetable__site small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitetable__cell { grid-column: span 2; display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-sm); font-weight: 700; min-width: 0; }
.sitetable__cell::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 500; }
.sitetable__cell .meter { margin-top: 6px; }
.sitetable__cta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sitetable__cta .btn:only-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.sitetable { gap: 8px; }
	.sitetable__row, .sitetable__row--head {
		display: grid; grid-template-columns: 44px minmax(190px, 1.5fr) 64px repeat(var(--cols, 4), minmax(0, 1fr)) 196px;
		padding: 12px 16px; gap: 16px;
	}
	.sitetable__row--head { background: none; border: 0; padding-block: 0 2px; color: var(--muted); font-size: var(--fs-xs); }
	.sitetable__site, .sitetable__cell, .sitetable__cta { grid-column: auto; }
	.sitetable__cell { background: none; padding: 0; }
	.sitetable__cell::before { display: none; }
	.sitetable__cta { grid-template-columns: 1fr auto; }
	.sitetable__row:not(.sitetable__row--head):hover { border-color: var(--line-2); }
}
.sitetable__note { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-xs); }

/* Review page */
.review { padding-top: 24px; }
.review__hero {
	position: relative; display: grid; gap: 16px; padding: 20px; margin-bottom: 20px; overflow: hidden;
	background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand, var(--green)) 18%, transparent), transparent 55%), var(--surface);
	border: 1px solid var(--line-2); border-radius: var(--r-xl);
}
@media (min-width: 900px) { .review__hero { grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 28px; } }
.review__logo { display: grid; place-items: center; width: 96px; height: 96px; padding: 10px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.review__logo img { width: 100%; height: 100%; object-fit: contain; }
.review__logo b { font-size: 2.4rem; color: var(--brand, var(--green)); }
@media (min-width: 900px) { .review__logo { width: 120px; height: 120px; } }
.review__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.review__intro h1 { font-size: var(--fs-3xl); margin-bottom: 6px; }
.review__intro p { color: var(--text-2); margin: 0; }
.review__intro .review__updated { margin-top: 8px; color: var(--muted); font-size: var(--fs-xs); }
.review__score { display: grid; gap: 12px; align-content: center; min-width: 180px; }
.review__rating { display: flex; align-items: baseline; gap: 6px; }
.review__rating b { color: var(--gold); font-size: 3rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.review__rating small, .review__trust small { color: var(--muted); }
.review__trust { display: grid; gap: 6px; }
.review__trust b { color: var(--text); }

.review__layout { display: grid; gap: 20px; }
@media (min-width: 1025px) { .review__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } }
.review__main { display: grid; gap: 20px; min-width: 0; }
.review__box { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
@media (min-width: 900px) { .review__box { padding: 28px; } }
.review__box > h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
.review__bonus { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(245, 196, 81, .16), rgba(245, 196, 81, .04)); border: 1px solid rgba(245, 196, 81, .28); }
@media (min-width: 600px) { .review__bonus { grid-template-columns: 1fr auto; align-items: center; } }
.review__bonus small { display: block; color: var(--text-2); font-size: var(--fs-xs); }
.review__bonus strong { color: var(--gold); font-size: var(--fs-xl); font-weight: 900; line-height: 1.5; }
.review__code {
	position: relative; display: grid; gap: 2px; min-width: 160px; padding: 10px 16px; text-align: center;
	border: 1px dashed var(--gold); border-radius: 12px; background: rgba(0, 0, 0, .25); color: var(--text);
}
.review__code b { font-size: var(--fs-lg); letter-spacing: .08em; direction: ltr; }
.review__copied { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--gold); color: #1d1503; font-weight: 900; opacity: 0; transition: opacity .2s; }
.review__code.is-copied .review__copied { opacity: 1; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; margin: 0; }
.facts div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.facts dt { color: var(--muted); font-size: var(--fs-xs); }
.facts dd { margin: 0; font-weight: 700; font-size: var(--fs-sm); line-height: 1.7; }

.proscons { display: grid; gap: 12px; }
@media (min-width: 700px) { .proscons { grid-template-columns: 1fr 1fr; } }
.proscons ul, .featlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.proscons li, .featlist li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.8; }
.proscons .ic, .featlist .ic { margin-top: 3px; width: 1.1em; height: 1.1em; }
.proscons__pros .ic, .featlist .ic { color: var(--green); }
.proscons__cons .ic { color: var(--live); }
.featlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.review__aside { display: none; }
@media (min-width: 1025px) {
	.review__aside { display: block; }
	.review__sticky {
		position: sticky; top: calc(var(--header-h) + 20px); display: grid; justify-items: start; gap: 10px; padding: 20px;
		background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl);
	}
}
.review__aside-name { font-size: var(--fs-lg); }
.review__aside-bonus { margin: 0; color: var(--gold); font-weight: 700; }
.review__disclose { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.review__comments { margin-top: 40px; }

.review__mobilecta {
	position: fixed; inset: auto 0 calc(var(--bottombar-h) + env(safe-area-inset-bottom)); z-index: 80;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter);
	background: rgba(14, 19, 23, .97); border-top: 1px solid var(--line);
}
.review__mobilecta span { display: grid; min-width: 0; line-height: 1.5; }
.review__mobilecta small { color: var(--gold); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review .ba-footer, .review ~ .ba-footer { padding-bottom: 72px; }
@media (min-width: 1025px) { .review__mobilecta { display: none; } }