/* WM Compare Basket — card checkbox + FAB pill + modal + toast. */

/* ───────────────────────── Card checkbox ───────────────────────── */

/* The checkbox sits inside .ccs-cmp-card top-left. The card itself isn't
   relatively positioned by default so we add that via the [data-offer-id]
   selector — every compare-card already carries a data-offer-id attr. */
.ccs-cmp-card[data-offer-id] {
	position: relative;
}

/* Push the card's identity row (logo + name + rating) down so the
   top-left checkbox has clear breathing room and never sits on the logo. */
.ccs-cmp-card[data-offer-id] .ccs-cmp-card__identity {
	margin-top: 32px;
}

.wmcb-card-check {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 4px 8px 4px 6px;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	z-index: 5;
	transition: border-color 0.12s, background 0.12s, transform 0.12s;
	font-family: inherit;
	color: #4b5563;
}
.wmcb-card-check:hover,
.wmcb-card-check:focus-within {
	border-color: #1a0dab;
	color: #1a0dab;
}
.wmcb-card-check.is-active {
	background: #1a0dab;
	border-color: #1a0dab;
	color: #fff;
}
.wmcb-card-check__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.wmcb-card-check__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	color: inherit;
}
.wmcb-card-check__box svg { opacity: 0; transition: opacity 0.1s; }
.wmcb-card-check.is-active .wmcb-card-check__box svg { opacity: 1; }
.wmcb-card-check.is-active .wmcb-card-check__box {
	background: #fff;
	color: #1a0dab;
	border-color: #fff;
}
.wmcb-card-check__label { white-space: nowrap; font-weight: 600; }

/* On small mobile keep the label visible (visitors couldn't tell what the
   checkbox was for without the word "Compare"). Tighten padding so the
   labelled pill still fits within the card's top-left breathing room. */
@media (max-width: 480px) {
	.wmcb-card-check { padding: 3px 7px 3px 5px; font-size: 11px; gap: 4px; }
	.wmcb-card-check__box { width: 14px; height: 14px; }
}

/* ───────────────────────── Floating FAB ───────────────────────── */

.wmcb-fab {
	position: fixed;
	/* Top-right of the viewport, but pushed down enough to clear the
	   theme's header nav. Originally `top:12px` (overlapped the menu),
	   tried bottom-right (too drastic), now sits just below the nav row. */
	top: 88px;
	right: 20px;
	z-index: 10500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #1a0dab;
	color: #fff;
	border: 0;
	padding: 10px 14px 10px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
	font-family: inherit;
	transition: transform 0.15s, box-shadow 0.15s;
}
.wmcb-fab:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.32); }
.wmcb-fab[hidden] { display: none; }
.wmcb-fab__icon { display: inline-block; }
.wmcb-fab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: #fff;
	color: #1a0dab;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

/* Logged-in admin bar adds 32px (desktop) / 46px (mobile) to the top.
   Nudge the FAB down so it stays clear of both bars. */
body.admin-bar .wmcb-fab { top: 120px; }
@media (max-width: 782px) {
	body.admin-bar .wmcb-fab { top: 134px; }
}

@media (max-width: 480px) {
	.wmcb-fab { padding: 10px; top: 70px; right: 12px; }
	.wmcb-fab__label { display: none; }
}

/* ───────────────────────── Modal ───────────────────────── */

.wmcb-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 11000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}
.wmcb-overlay[hidden] { display: none; }
body.wmcb-modal-open { overflow: hidden; }

.wmcb-modal {
	background: #fff;
	width: 100%;
	max-width: 820px;
	max-height: calc(100vh - 32px);
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: inherit;
	color: #1f2937;
}

.wmcb-modal__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}
.wmcb-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #111827;
	flex: 1;
	min-width: 0;
}
.wmcb-modal__sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wmcb-modal__sort-label { color: #4b5563; }
.wmcb-modal__sort-select {
	padding: 4px 8px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	font-family: inherit;
}
.wmcb-modal__close {
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	padding: 4px 8px;
}
.wmcb-modal__close:hover { color: #111827; }

.wmcb-modal__body {
	padding: 16px 20px;
	overflow-y: auto;
	flex: 1;
}

.wmcb-modal__foot {
	padding: 12px 20px;
	border-top: 1px solid #e5e7eb;
	background: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.wmcb-modal__note { color: #6b7280; font-size: 12px; max-width: 380px; }
.wmcb-modal__note a { color: #1a0dab; }
.wmcb-modal__actions { display: inline-flex; gap: 8px; }

/* States */
.wmcb-state { padding: 32px 0; text-align: center; color: #6b7280; }
.wmcb-spinner {
	width: 32px; height: 32px;
	border: 3px solid #e5e7eb;
	border-top-color: #1a0dab;
	border-radius: 50%;
	animation: wmcb-spin 0.8s linear infinite;
	margin: 0 auto 12px;
}
@keyframes wmcb-spin { to { transform: rotate(360deg); } }

/* List */
.wmcb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.wmcb-item {
	position: relative;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* "Best for X" badge on the first sorted item. Label text is set per-render
   from the current sort (e.g. "Best bonus", "Best game variety"). */
.wmcb-item.is-featured {
	border-color: #f59e0b;
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.wmcb-item__badge {
	position: absolute;
	top: -10px;
	left: 14px;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
	white-space: nowrap;
	z-index: 1;
}

/* Pagination dots row — hidden by default; shown only in mobile carousel mode.
   Wraps the dots + a small "Clear all" link so it doubles as a slim mobile
   footer (replacing the larger desktop footer that won't fit on phone). */
.wmcb-dots-row {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid #f3f4f6;
	position: relative;
}
.wmcb-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
}
.wmcb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d1d5db;
	transition: background 0.2s, transform 0.2s;
}
.wmcb-dot.is-active {
	background: #1a0dab;
	transform: scale(1.25);
}
.wmcb-dots-row__clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: 12px;
	color: #6b7280;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 6px;
}
.wmcb-dots-row__clear:hover { color: #c5221f; }
.wmcb-item__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	padding: 4px 8px;
}
.wmcb-item__remove:hover { color: #c5221f; }

.wmcb-item__head { display: flex; align-items: center; gap: 12px; }
.wmcb-item__logo img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
	background: #f3f4f6;
	display: block;
}
.wmcb-item__title { flex: 1; min-width: 0; }
.wmcb-item__name { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #111827; }
.wmcb-item__name a { color: inherit; text-decoration: none; }
.wmcb-item__name a:hover { color: #1a0dab; }
.wmcb-item__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
.wmcb-stars { color: #e5e7eb; letter-spacing: 1px; }
.wmcb-star.is-on { color: #f59e0b; }
.wmcb-item__rating-text { font-weight: 600; color: #4b5563; }

/* Grid: aligned label/value pairs so eyes can scan straight down columns.
   3 columns at desktop width fits the 6 stats (Welcome bonus, Min deposit,
   Max bonus, Free spins, Software providers, Payment methods) in 2 even
   rows. Welcome bonus is the longest string so it has the most room. */
.wmcb-item__grid {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.wmcb-item__row {
	display: flex;
	flex-direction: column;
	background: #f9fafb;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
}
.wmcb-item__row dt { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 2px; }
.wmcb-item__row dd { margin: 0; color: #111827; font-weight: 500; }
.wmcb-item__row dd strong { color: #1a0dab; font-weight: 700; }

@media (max-width: 600px) {
	.wmcb-item__grid { grid-template-columns: 1fr 1fr; }
}

.wmcb-item__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.wmcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	border: 0;
	text-decoration: none;
	font-family: inherit;
}
/* !important + :visited overrides — themes commonly re-style <a> elements
   (link color, visited color, focus color) with higher specificity than a
   plain class selector, which has caused the CTA text to render dark-on-dark
   or visited-purple-on-blue. Lock in the colours to keep WCAG AA contrast. */
a.wmcb-btn--primary,
a.wmcb-btn--primary:link,
a.wmcb-btn--primary:visited,
a.wmcb-btn--primary:hover,
a.wmcb-btn--primary:focus,
a.wmcb-btn--primary:active,
.wmcb-btn--primary { background: #1a0dab !important; color: #fff !important; }
a.wmcb-btn--primary:hover,
.wmcb-btn--primary:hover { background: #14098c !important; color: #fff !important; }
.wmcb-btn--ghost { background: transparent; border: 1px solid #d1d5db; color: #374151; }
.wmcb-btn--ghost:hover { border-color: #1a0dab; color: #1a0dab; }

/* Modal full-screen on small viewports + stacked header so the title
   and the sort selector don't collide on narrow screens. */
@media (max-width: 600px) {
	.wmcb-overlay { padding: 0; align-items: stretch; }
	.wmcb-modal {
		max-width: none;
		/* iOS Safari: `100vh` is the height with the address bar HIDDEN, so
		   when the bar is showing the modal overflows below the fold and
		   dots + footer get pushed out of view. `100dvh` tracks the actual
		   visible viewport. Keep `100vh` as a fallback for older browsers
		   that don't support dvh. */
		max-height: 100vh;
		max-height: 100dvh;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}
	.wmcb-modal__head {
		flex-wrap: wrap;
		row-gap: 6px;
		padding: 12px 16px;
		align-items: center;
	}
	/* Row 1: title (grows) + close (auto). Row 2: sort selector (full width). */
	.wmcb-modal__title { font-size: 16px; order: 1; flex: 1 1 auto; min-width: 0; }
	.wmcb-modal__close { order: 2; flex: 0 0 auto; margin-left: auto; }
	.wmcb-modal__sort {
		order: 3;
		flex: 0 0 100%;
		justify-content: space-between;
	}
	.wmcb-modal__sort-select { flex: 1; max-width: 220px; }
}

/* Mobile carousel: swipe horizontally between casinos. One card per viewport,
   scroll-snap so swipes land cleanly, dots row + Clear all act as the mobile
   footer. The desktop footer is hidden — privacy is already linked on the page,
   Close is in the modal header, and Clear all is inline with the dots. */
@media (max-width: 600px) {
	.wmcb-modal__body {
		padding: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 0;
	}
	/* Desktop footer is too tall — the privacy note + 2 buttons eat ~80px of
	   vertical space and push the card CTAs below the fold. Drop it on mobile
	   and use the slim dots-row instead. */
	.wmcb-modal__foot { display: none; }

	.wmcb-list {
		flex: 1 1 auto;
		min-height: 0;
		flex-direction: row;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;          /* no vertical scroll inside the card area — cards must fit */
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 14px 0;
		margin: 0;
		align-items: stretch;
	}
	.wmcb-list::-webkit-scrollbar { display: none; }
	.wmcb-item {
		flex: 0 0 calc(100% - 32px);
		scroll-snap-align: center;
		margin: 0 8px;
		padding: 12px;
		gap: 8px;
	}
	.wmcb-item:first-child { margin-left: 16px; }
	.wmcb-item:last-child  { margin-right: 16px; }
	/* Compact card on mobile so all content fits the visible viewport */
	.wmcb-item__logo img { width: 48px; height: 48px; }
	.wmcb-item__name { font-size: 15px; margin-bottom: 2px; }
	.wmcb-item__grid { gap: 6px; grid-template-columns: 1fr 1fr; }
	.wmcb-item__row { padding: 6px 8px; }
	.wmcb-item__row dt { font-size: 10px; }
	.wmcb-item__row dd { font-size: 13px; }
	.wmcb-item__actions { gap: 6px; }
	.wmcb-btn { padding: 7px 12px; font-size: 13px; }

	.wmcb-dots-row { display: flex; flex: 0 0 auto; }
	.wmcb-state { padding: 32px 16px; }
}

/* ───────────────────────── Toast ───────────────────────── */

.wmcb-toast {
	position: fixed;
	/* Moved from bottom-center to top-center after the FAB relocated to
	   bottom-right (they were colliding). Top-center also keeps the toast
	   in the visitor's line-of-sight when they're interacting with cards. */
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12000;
	background: #111827;
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
	max-width: 88vw;
	text-align: center;
}
body.admin-bar .wmcb-toast { top: 112px; }
@media (max-width: 782px) {
	body.admin-bar .wmcb-toast { top: 126px; }
}
.wmcb-toast[hidden] { display: none; }