/* ABS component library. Mobile-first, AA-accessible, zero-CLS targets. */

/* --- Buttons / CTA --- */
.abs-cta,
.abs-btn {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
	padding: var(--abs-sp-3) var(--abs-sp-6);
	border-radius: var(--abs-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1.2;
	text-align: center;
}
.abs-cta,
.abs-btn--primary {
	background: var(--abs-accent);
	color: var(--abs-ink);
}
.abs-cta:hover,
.abs-btn--primary:hover { background: var(--abs-accent-strong); color: var(--abs-ink); }
.abs-btn--ghost { background: transparent; border-color: var(--abs-brand); color: var(--abs-brand); }
.abs-btn--block { display: block; width: 100%; }

/* --- Trust strip --- */
.abs-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--abs-sp-4);
	align-items: center;
	justify-content: center;
	padding: var(--abs-sp-4);
	background: var(--abs-surface-alt);
	border-radius: var(--abs-radius);
	font-size: var(--abs-fs-sm);
	color: var(--abs-muted);
}
.abs-trust-strip__item { display: inline-flex; align-items: center; gap: var(--abs-sp-2); }

/* --- Breadcrumbs --- */
.abs-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--abs-sp-2);
	margin: 0 0 var(--abs-sp-4);
	padding: 0;
	font-size: var(--abs-fs-sm);
}
.abs-breadcrumbs li { display: inline-flex; align-items: center; }
.abs-breadcrumbs li + li::before { content: "›"; margin-right: var(--abs-sp-2); color: var(--abs-muted); }
.abs-breadcrumbs [aria-current="page"] { color: var(--abs-muted); }

/* --- Operator card --- */
.abs-op-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--abs-sp-4);
	align-items: center;
	border: 1px solid var(--abs-line);
	border-radius: var(--abs-radius);
	padding: var(--abs-sp-4);
	background: var(--abs-surface);
}
.abs-op-card__rank {
	font-weight: 800;
	font-size: var(--abs-fs-lg);
	color: var(--abs-brand);
	min-width: 2ch;
}
.abs-op-card__logo {
	width: 96px; height: 64px; object-fit: contain;
	background: var(--abs-surface-alt); border-radius: var(--abs-radius-sm);
}
.abs-op-card__name { margin: 0 0 var(--abs-sp-1); font-size: var(--abs-fs-lg); }
.abs-op-card__bonus { margin: 0; color: var(--abs-ink); font-weight: 600; }
.abs-op-card__meta { margin: var(--abs-sp-1) 0 0; color: var(--abs-muted); font-size: var(--abs-fs-sm); }
.abs-op-card__cta { display: flex; flex-direction: column; gap: var(--abs-sp-2); align-items: stretch; }
.abs-op-card__rating { font-weight: 700; }
@media (max-width: 600px) {
	.abs-op-card { grid-template-columns: auto 1fr; }
	.abs-op-card__cta { grid-column: 1 / -1; }
}

/* --- Toplist table (responsive card-collapse) --- */
.abs-toplist { width: 100%; border-collapse: collapse; }
.abs-toplist th, .abs-toplist td { padding: var(--abs-sp-3); border-bottom: 1px solid var(--abs-line); text-align: left; vertical-align: middle; }
.abs-toplist thead th { background: var(--abs-brand); color: #fff; position: sticky; top: 0; }
.abs-toplist tbody tr:nth-child(even) { background: var(--abs-surface-alt); }
@media (max-width: 720px) {
	.abs-toplist, .abs-toplist thead, .abs-toplist tbody, .abs-toplist th, .abs-toplist td, .abs-toplist tr { display: block; }
	.abs-toplist thead { position: absolute; left: -9999px; }
	.abs-toplist tr { margin-bottom: var(--abs-sp-4); border: 1px solid var(--abs-line); border-radius: var(--abs-radius); padding: var(--abs-sp-2); }
	.abs-toplist td { border: none; display: flex; justify-content: space-between; gap: var(--abs-sp-4); }
	.abs-toplist td::before { content: attr(data-label); font-weight: 700; color: var(--abs-muted); }
}

/* --- Comparison table --- */
.abs-compare { width: 100%; border-collapse: collapse; font-size: var(--abs-fs-sm); }
.abs-compare th, .abs-compare td { padding: var(--abs-sp-2) var(--abs-sp-3); border: 1px solid var(--abs-line); text-align: center; }
.abs-compare th:first-child, .abs-compare td:first-child { text-align: left; }
.abs-yes { color: var(--abs-success); font-weight: 700; }
.abs-no { color: var(--abs-danger); }

/* --- Bonus callout --- */
.abs-bonus {
	border: 2px dashed var(--abs-accent-strong);
	border-radius: var(--abs-radius);
	padding: var(--abs-sp-4) var(--abs-sp-6);
	background: #fffaf0;
	display: flex; flex-wrap: wrap; gap: var(--abs-sp-4); align-items: center; justify-content: space-between;
}
.abs-bonus__text { margin: 0; font-weight: 700; font-size: var(--abs-fs-lg); }
.abs-bonus__code { font-family: ui-monospace, monospace; background: var(--abs-ink); color: #fff; padding: 2px var(--abs-sp-2); border-radius: 4px; }

/* --- Payment icon grid --- */
.abs-payments { display: flex; flex-wrap: wrap; gap: var(--abs-sp-2); list-style: none; margin: 0; padding: 0; }
.abs-payments li {
	display: inline-flex; align-items: center; gap: var(--abs-sp-2);
	border: 1px solid var(--abs-line); border-radius: var(--abs-radius-sm);
	padding: var(--abs-sp-1) var(--abs-sp-3); font-size: var(--abs-fs-sm); background: var(--abs-surface);
}

/* --- FAQ accordion --- */
.abs-faq { border: 1px solid var(--abs-line); border-radius: var(--abs-radius); overflow: hidden; }
.abs-faq__item + .abs-faq__item { border-top: 1px solid var(--abs-line); }
.abs-faq__q { width: 100%; text-align: left; background: var(--abs-surface); border: 0; padding: var(--abs-sp-4); font-weight: 700; font-size: var(--abs-fs-base); cursor: pointer; display: flex; justify-content: space-between; gap: var(--abs-sp-4); }
.abs-faq__q[aria-expanded="true"] { background: var(--abs-surface-alt); }
.abs-faq__q::after { content: "+"; font-weight: 700; }
.abs-faq__q[aria-expanded="true"]::after { content: "−"; }
.abs-faq__a { padding: 0 var(--abs-sp-4) var(--abs-sp-4); }
.abs-faq__a[hidden] { display: none; }

/* --- TOC + jump nav --- */
.abs-toc { background: var(--abs-surface-alt); border-radius: var(--abs-radius); padding: var(--abs-sp-4); font-size: var(--abs-fs-sm); }
.abs-toc__title { font-weight: 700; margin: 0 0 var(--abs-sp-2); }
.abs-toc ol { margin: 0; padding-left: var(--abs-sp-6); }
.abs-jumpnav { display: flex; gap: var(--abs-sp-2); flex-wrap: wrap; overflow-x: auto; padding: var(--abs-sp-2) 0; }
.abs-jumpnav a { white-space: nowrap; border: 1px solid var(--abs-line); border-radius: 999px; padding: var(--abs-sp-1) var(--abs-sp-3); text-decoration: none; font-size: var(--abs-fs-sm); }

/* --- Byline / reviewed-by --- */
.abs-byline { display: flex; flex-wrap: wrap; gap: var(--abs-sp-2) var(--abs-sp-4); align-items: center; font-size: var(--abs-fs-sm); color: var(--abs-muted); margin-bottom: var(--abs-sp-4); }
.abs-byline a { color: var(--abs-brand); }
.abs-reviewed-by { margin: 0; }
.abs-reviewed-by__role { color: var(--abs-muted); }

/* --- Team / experts hub --- */
.abs-team { display: grid; gap: var(--abs-sp-6); }
@media (min-width: 700px) { .abs-team { grid-template-columns: 1fr 1fr; } }
.abs-team__member { margin: 0; }

/* --- Author bio / E-E-A-T --- */
.abs-author { display: flex; gap: var(--abs-sp-4); border: 1px solid var(--abs-line); border-radius: var(--abs-radius); padding: var(--abs-sp-4); background: var(--abs-surface-alt); }
.abs-author__avatar { border-radius: 50%; flex: 0 0 auto; }
.abs-author__name { margin: 0; font-size: var(--abs-fs-lg); }
.abs-author__role { color: var(--abs-muted); font-size: var(--abs-fs-sm); margin: 0 0 var(--abs-sp-2); }

/* --- Last-updated badge --- */
.abs-updated { display: inline-flex; align-items: center; gap: var(--abs-sp-2); font-size: var(--abs-fs-sm); color: var(--abs-muted); }
.abs-updated__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--abs-success); }

/* --- Country / flag selector --- */
.abs-country-selector ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--abs-sp-2); margin: 0; padding: 0; }
.abs-country-selector a { display: flex; align-items: center; gap: var(--abs-sp-2); border: 1px solid var(--abs-line); border-radius: var(--abs-radius-sm); padding: var(--abs-sp-2) var(--abs-sp-3); text-decoration: none; background: var(--abs-surface); }
.abs-country-selector a[aria-current="true"] { border-color: var(--abs-brand); box-shadow: inset 0 0 0 1px var(--abs-brand); }
.abs-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; background: var(--abs-line); flex: 0 0 auto; }

/* --- Versus + eyebrow --- */
.abs-versus-cta { display: flex; flex-wrap: wrap; gap: var(--abs-sp-2); margin-top: var(--abs-sp-4); }
.abs-eyebrow { font-size: var(--abs-fs-sm); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--abs-sp-1); }
.abs-table-wrap { overflow-x: auto; }

/* --- Term grid (hub/index pages) --- */
.abs-term-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--abs-sp-2); }
.abs-term-grid a { display: block; border: 1px solid var(--abs-line); border-radius: var(--abs-radius-sm); padding: var(--abs-sp-3); text-decoration: none; background: var(--abs-surface); }
.abs-term-grid a:hover { border-color: var(--abs-brand); }

/* --- Related links --- */
.abs-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abs-sp-2); }
.abs-related a { text-decoration: none; }

/* --- Sticky mobile CTA --- */
.abs-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--abs-surface); border-top: 1px solid var(--abs-line); box-shadow: 0 -2px 12px rgba(15,28,23,0.12); padding: var(--abs-sp-2) var(--abs-sp-4); display: none; align-items: center; justify-content: space-between; gap: var(--abs-sp-4); }
.abs-sticky-cta strong { font-size: var(--abs-fs-sm); }
@media (max-width: 720px) { .abs-sticky-cta { display: flex; } body.abs-has-sticky-cta { padding-bottom: 72px; } }

/* --- Consent banner --- */
.abs-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--abs-ink); color: #fff; padding: var(--abs-sp-4); }
.abs-consent__inner { max-width: var(--abs-container); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--abs-sp-4); align-items: center; justify-content: space-between; }
.abs-consent__text { margin: 0; font-size: var(--abs-fs-sm); max-width: 60ch; }
.abs-consent__text a { color: var(--abs-accent); }
.abs-consent__actions { display: flex; gap: var(--abs-sp-2); }
@media (max-width: 720px) { body.abs-has-sticky-cta .abs-consent { bottom: 64px; } }

/* --- Interactive tools --- */
.abs-tool { border: 1px solid var(--abs-line); border-radius: var(--abs-radius); padding: var(--abs-sp-6); background: var(--abs-surface-alt); margin-bottom: var(--abs-sp-8); }
.abs-tool__field { display: flex; flex-direction: column; gap: var(--abs-sp-1); margin: 0 0 var(--abs-sp-3); }
.abs-tool__field label { font-weight: 700; font-size: var(--abs-fs-sm); }
.abs-tool__input { padding: var(--abs-sp-3); border: 1px solid var(--abs-line); border-radius: var(--abs-radius-sm); font-size: var(--abs-fs-base); }
.abs-tool__result { margin-top: var(--abs-sp-4); padding: var(--abs-sp-4); background: var(--abs-surface); border-radius: var(--abs-radius-sm); border: 1px solid var(--abs-line); min-height: 1.5em; }
.abs-tool__result:empty { display: none; }

/* --- Newsletter --- */
.abs-newsletter { background: var(--abs-brand-dark); color: #fff; border-radius: var(--abs-radius); padding: var(--abs-sp-6); }
.abs-newsletter input[type="email"] { padding: var(--abs-sp-3); border-radius: var(--abs-radius-sm); border: 0; flex: 1 1 220px; }
.abs-newsletter form { display: flex; flex-wrap: wrap; gap: var(--abs-sp-2); margin-top: var(--abs-sp-3); }

/* --- Key facts list --- */
.abs-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--abs-sp-2) var(--abs-sp-4); }
.abs-facts dt, .abs-facts__k { color: var(--abs-muted); font-size: var(--abs-fs-sm); }
.abs-facts__v { font-weight: 700; }

/* --- Section rhythm + headings anchor offset --- */
.abs-section + .abs-section { margin-top: var(--abs-sp-12); }
:target { scroll-margin-top: var(--abs-sp-8); }

/* --- Style guide --- */
.abs-sg-swatch { display: inline-block; width: 96px; height: 56px; border-radius: var(--abs-radius-sm); border: 1px solid var(--abs-line); vertical-align: top; margin: var(--abs-sp-1); }
.abs-sg-grid { display: grid; gap: var(--abs-sp-8); }

@media (min-width: 900px) {
	.abs-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--abs-sp-8); align-items: start; }
}