/* =========================================================================
   Affiliate Blocks — styles

   Deliberately neutral. These blocks go on many different sites, so the
   base layer only handles structure, spacing and states. Every colour and
   shape decision is a variable, and the per-site look is set by overriding
   the block below in the theme's stylesheet or in Appearance > Customise >
   Additional CSS. Nothing here needs to be edited to restyle a site.
   ====================================================================== */

.ab-card,
.ab-toplist,
.ab-cta,
.ab-proscons,
.ab-rating,
.ab-faq,
.ab-specs,
.ab-notice {
	--ab-accent: #2f6feb;
	--ab-accent-text: #fff;
	--ab-surface: #fff;
	--ab-surface-alt: #f5f6f8;
	--ab-border: #e2e5ea;
	--ab-text: inherit;
	--ab-muted: #6b7280;
	--ab-positive: #16a34a;
	--ab-negative: #dc2626;
	--ab-radius: 10px;
	--ab-gap: 16px;
	--ab-font: inherit;

	box-sizing: border-box;
	color: var(--ab-text);
	font-family: var(--ab-font);
}

.ab-card *,
.ab-toplist *,
.ab-cta *,
.ab-proscons *,
.ab-rating *,
.ab-faq *,
.ab-specs * {
	box-sizing: border-box;
}

/* --- Buttons ---------------------------------------------------------- */

.ab-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--ab-radius);
	background: var(--ab-accent);
	color: var(--ab-accent-text);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.ab-btn:hover,
.ab-btn:focus {
	color: var(--ab-accent-text);
	filter: brightness(1.08);
	text-decoration: none;
}

.ab-btn:focus-visible {
	outline: 2px solid var(--ab-accent);
	outline-offset: 3px;
}

.ab-btn:active {
	transform: translateY(1px);
}

.ab-btn--full {
	display: block;
	width: 100%;
}

/* --- Offer card ------------------------------------------------------- */

.ab-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(140px, 1fr) 2fr minmax(160px, 1fr);
	gap: var(--ab-gap);
	align-items: center;
	padding: 20px;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	background: var(--ab-surface);
	margin: 0 0 var(--ab-gap);
}

.ab-card__badge {
	position: absolute;
	top: -10px;
	left: 16px;
	padding: 3px 10px;
	border-radius: calc(var(--ab-radius) / 2);
	background: var(--ab-accent);
	color: var(--ab-accent-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ab-card__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.ab-card__logo {
	width: auto;
	max-width: 160px;
	height: auto;
	max-height: 70px;
	object-fit: contain;
}

.ab-card__name {
	font-weight: 700;
}

.ab-card__score {
	display: inline-block;
	min-width: 46px;
	padding: 2px 8px;
	border-radius: calc(var(--ab-radius) / 2);
	background: var(--ab-surface-alt);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ab-card__bonus {
	margin: 0 0 8px;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

.ab-card__features {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92em;
}

.ab-card__features li {
	position: relative;
	margin: 0 0 4px;
	padding-left: 22px;
}

.ab-card__features li::before {
	content: "";
	position: absolute;
	top: 0.42em;
	left: 4px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--ab-positive);
	border-bottom: 2px solid var(--ab-positive);
	transform: rotate(-45deg);
}

.ab-card__action {
	text-align: center;
}

.ab-card__terms {
	margin: 8px 0 0;
	color: var(--ab-muted);
	font-size: 0.78em;
	line-height: 1.4;
}

.ab-card--compact {
	grid-template-columns: 1fr auto;
	padding: 14px 16px;
}

.ab-card--compact .ab-card__body {
	display: none;
}

/* --- Toplist ---------------------------------------------------------- */

.ab-toplist__heading {
	margin: 0 0 var(--ab-gap);
}

.ab-toplist__row {
	position: relative;
}

.ab-toplist--numbered .ab-toplist__row {
	padding-left: 42px;
}

.ab-toplist__rank {
	position: absolute;
	top: 20px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ab-surface-alt);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ab-toplist .ab-card {
	margin-bottom: var(--ab-gap);
}

/* --- CTA -------------------------------------------------------------- */

.ab-cta {
	margin: var(--ab-gap) 0;
}

.ab-cta__note {
	margin: 8px 0 0;
	color: var(--ab-muted);
	font-size: 0.82em;
}

/* --- Pros and cons ---------------------------------------------------- */

.ab-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ab-gap);
	margin: var(--ab-gap) 0;
}

.ab-proscons__col {
	padding: 18px 20px;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	background: var(--ab-surface);
}

.ab-proscons__title {
	margin: 0 0 10px;
	font-size: 1.05em;
}

.ab-proscons__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-proscons__col li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 24px;
	line-height: 1.5;
}

.ab-proscons__col li::before {
	position: absolute;
	left: 2px;
	font-weight: 700;
}

.ab-proscons__col--pros li::before {
	content: "+";
	color: var(--ab-positive);
}

.ab-proscons__col--cons li::before {
	content: "\2212";
	color: var(--ab-negative);
}

/* --- Rating bars ------------------------------------------------------ */

.ab-rating {
	padding: 20px;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	background: var(--ab-surface);
	margin: var(--ab-gap) 0;
}

.ab-rating__heading {
	margin: 0 0 14px;
}

.ab-rating__row {
	display: grid;
	grid-template-columns: minmax(110px, 30%) 1fr 44px;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
}

.ab-rating__bar {
	height: 8px;
	border-radius: 4px;
	background: var(--ab-surface-alt);
	overflow: hidden;
}

.ab-rating__fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--ab-accent);
}

.ab-rating__value {
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ab-rating__total {
	display: flex;
	justify-content: space-between;
	padding-top: 12px;
	margin-top: 14px;
	border-top: 1px solid var(--ab-border);
	font-size: 1.05em;
}

/* --- FAQ -------------------------------------------------------------- */

.ab-faq {
	margin: var(--ab-gap) 0;
}

.ab-faq__heading {
	margin: 0 0 var(--ab-gap);
}

.ab-faq__item {
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	background: var(--ab-surface);
	margin-bottom: 10px;
}

.ab-faq__item summary {
	padding: 14px 44px 14px 18px;
	position: relative;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.ab-faq__item summary::-webkit-details-marker {
	display: none;
}

.ab-faq__item summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.ab-faq__item[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.ab-faq__answer {
	padding: 0 18px 16px;
}

.ab-faq__answer p {
	margin: 0;
	line-height: 1.6;
}

/* --- Spec table ------------------------------------------------------- */

.ab-specs {
	margin: var(--ab-gap) 0;
}

.ab-specs__heading {
	margin: 0 0 12px;
}

.ab-specs__list {
	margin: 0;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	overflow: hidden;
}

.ab-specs__row {
	display: grid;
	grid-template-columns: 40% 60%;
}

.ab-specs__row:nth-child(odd) {
	background: var(--ab-surface-alt);
}

.ab-specs__row dt,
.ab-specs__row dd {
	margin: 0;
	padding: 11px 16px;
}

.ab-specs__row dt {
	font-weight: 600;
}

/* --- Editor notice ---------------------------------------------------- */

.ab-notice {
	padding: 14px 18px;
	border: 1px dashed var(--ab-border);
	border-radius: var(--ab-radius);
	background: var(--ab-surface-alt);
	color: var(--ab-muted);
	font-size: 0.9em;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 782px) {
	.ab-card {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.ab-card__features {
		display: inline-block;
		text-align: left;
	}

	.ab-card--compact {
		grid-template-columns: 1fr;
	}

	.ab-proscons {
		grid-template-columns: 1fr;
	}

	.ab-toplist--numbered .ab-toplist__row {
		padding-left: 0;
	}

	.ab-toplist__rank {
		top: 8px;
		left: 8px;
	}

	.ab-rating__row {
		grid-template-columns: 1fr 40px;
	}

	.ab-rating__bar {
		grid-column: 1 / -1;
		order: 3;
	}

	.ab-specs__row {
		grid-template-columns: 1fr;
	}

	.ab-specs__row dt {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-btn,
	.ab-faq__item summary::after {
		transition: none;
	}
}