/* web-slots-tabs : game grid with a provider filter row on top. Light page. */

/* --- Header --- */
.web-slots-tabs .wst-head {
	display:flex; justify-content:space-between; align-items:center;
	margin-bottom:1rem;
}
.web-slots-tabs .wst-title { margin:0; font-size:26px; line-height:1.2; }   /* home section title (22px on phones, below) */
.web-slots-tabs .wst-pre { color:var(--web-primary-foreground); font-weight:800; }
.web-slots-tabs .wst-hl  { color:var(--web-primary-hover); font-weight:800; }
.web-slots-tabs .wst-more {
	border:1px solid rgba(0,0,0,.2);
	color:#495057;
	background:transparent;
	border-radius:50rem;      /* rounded pill shortcut (shared style) */
	padding:.35rem 1.1rem;
	font-size:13px;
	white-space:nowrap;
	transition:border-color .15s ease, color .15s ease;
}
.web-slots-tabs .wst-more:hover { border-color:var(--web-primary-foreground); color:var(--web-primary-foreground); text-decoration:none; }

/* --- Category pills --- */
.web-slots-tabs .wst-tabs {
	display:flex; flex-wrap:wrap;
	margin-bottom:1.1rem;
}
.web-slots-tabs .wst-pill {
	display:inline-flex; align-items:center;
	background:#fff;
	border:1px solid #dee2e6;
	color:#495057;
	font-size:13px; font-weight:600;
	border-radius:50rem;
	padding:.4rem 1rem;
	margin:0 .5rem .5rem 0;
	cursor:pointer;
	transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.web-slots-tabs .wst-pill:hover { border-color:#adb5bd; }
.web-slots-tabs .wst-pill .wst-cnt { margin-left:.35rem; color:#adb5bd; font-size:12px; font-weight:700; }
.web-slots-tabs .wst-pill.is-active { background:var(--web-primary); border-color:var(--web-primary); color:#fff; }
.web-slots-tabs .wst-pill.is-active .wst-cnt { color:rgba(255,255,255,.85); }

/* --- Card --- */
.web-slots-tabs .wst-card { position:relative; }
.web-slots-tabs .wst-thumb {
	position:relative; height:0;
	border-radius:1rem; overflow:hidden;
	background:var(--web-primary-foreground); /* shows behind transparent / undersized game images */
	margin-bottom:.6rem;
}
.web-slots-tabs .wst-link { position:absolute; top:0; left:0; right:0; bottom:0; display:block; }
.web-slots-tabs .wst-img {
	position:absolute; top:0; left:0; width:100%; height:100%;
	object-fit:cover; transition:transform .25s ease;
}
.web-slots-tabs .wst-card:hover .wst-img { transform:scale(1.06); }

.web-slots-tabs .wst-badge {
	position:absolute; top:8px; left:8px; z-index:3;
	padding:.05rem .5rem; border-radius:5px;
	font-size:10px; font-weight:800; letter-spacing:.03em;
	box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.web-slots-tabs .wst-badge-new { background:var(--web-primary); color:#000; }
.web-slots-tabs .wst-badge-hot { background:#fa3e3e; color:#fff; }

.web-slots-tabs .wst-overlay {
	position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;
	display:flex; align-items:center; justify-content:center;
	background:color-mix(in srgb, var(--web-primary) 55%, transparent);
	opacity:0; transition:opacity .18s ease;
}
.web-slots-tabs .wst-card:hover .wst-overlay { opacity:1; }
.web-slots-tabs .wst-play {
	display:inline-flex; align-items:center;
	padding:.4rem .95rem; border-radius:50rem;
	background:var(--web-primary-foreground); color:#fff;
	font-size:13px; font-weight:700; white-space:nowrap;
	box-shadow:0 4px 12px rgba(0,0,0,.35);
	transform:translateY(6px); transition:transform .18s ease;
}
.web-slots-tabs .wst-play .fa { margin-right:.3rem; }
.web-slots-tabs .wst-card:hover .wst-play { transform:translateY(0); }

.web-slots-tabs .wst-name {
	display:block; color:var(--web-primary-foreground); font-weight:700;
	font-size:14px; line-height:1.35; margin-bottom:.15rem;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.web-slots-tabs .wst-name:hover { color:var(--web-primary-foreground); text-decoration:none; }

.web-slots-tabs .wst-meta {
	display:flex; justify-content:space-between; align-items:center;
	color:#868e96; font-size:12px;
}
.web-slots-tabs .wst-rtp { white-space:nowrap; }

.web-slots-tabs .wst-empty { color:#868e96; }

@media all and (max-width:575px) {
	.responsive .web-slots-tabs .wst-title { font-size:22px; }
}