/*
 * Brand Management shortcodes in the Pokeren.nl design system.
 * [campaign] (.campaign-shortcode-table) and [campaign_compact] (.campaign-compact-table__wrapper) keep the plugin's
 * grid layouts (desktop, .bm-tiny and mobile variants); this file only restyles them: cards, type, score, CTA, terms.
 * The plugin's CSS loads after the theme's, so every rule is scoped "body .wrapper …" to outrank it without !important.
 * The --bm-* variables also theme the BM shortcodes that have no rules here.
 */
:root {
	--bm-font-family: var(--pn-body); --bm-alt-font-family: var(--pn-body); --bm-font-weight: 700;
	--bm-cta-button-background: var(--pn-oranje); --bm-cta-button-hover-background: var(--pn-oranje-hover);
	--bm-cta-button-color: var(--pn-inkt); --bm-cta-button-hover-color: var(--pn-inkt);
}

/* ── shared: list, card, rank ─────────────────────────────────────── */
body .campaign-shortcode-table, body .campaign-compact-table__wrapper { margin: 0 0 clamp(24px, 3vw, 32px); font-family: var(--pn-body); color: var(--pn-tekst); }
body .campaign-shortcode-table .campaign-shortcode-table_offers-list { display: flex; flex-direction: column; gap: 12px; counter-reset: pn-bm; }
body .campaign-shortcode-table .campaign-list-item,
body .campaign-compact-table__wrapper .campaign-compact-table__offer {
	counter-increment: pn-bm; margin: 0; padding: clamp(16px, 2vw, 22px); background: var(--pn-wit); color: var(--pn-tekst);
	border: 1px solid var(--pn-lijn); border-radius: 18px; box-shadow: none; transition: border-color var(--pn-ease);
}
body .campaign-shortcode-table .campaign-list-item:hover,
body .campaign-compact-table__wrapper .campaign-compact-table__offer:hover { border-color: var(--pn-lijn-2); }
/* rank number on the logo, as in the theme toplist (.pn-tl) */
body .campaign-shortcode-table .campaign-list-item_logo,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-logo > a { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 8px; background: var(--pn-vlak); border-radius: 12px; text-decoration: none; }
body .campaign-shortcode-table .campaign-list-item_logo::before,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-logo > a::before {
	content: counter(pn-bm); position: absolute; top: -8px; left: -8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center; background: var(--pn-nacht); color: var(--pn-wit); font: 700 13px/1 var(--pn-display);
}
body .campaign-shortcode-table .campaign-list-item_logo img,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-logo img { width: 100%; max-width: 130px; height: 48px; object-fit: contain; display: block; margin: 0 auto; }

/* ── offer text and key features ──────────────────────────────────── */
body .campaign-shortcode-table .campaign-list-item_key-features,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-key-features,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-description { font-family: var(--pn-body); font-size: 15px; line-height: 1.45; color: var(--pn-tekst-2); }
body .campaign-shortcode-table .campaign-list-item_key-features > p,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-description > p {
	margin: 0 0 6px; font: 700 18px/1.25 var(--pn-display); color: var(--pn-inkt); letter-spacing: -.01em;
}
body .campaign-shortcode-table .campaign-list-item_key-features ul,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-key-features ul { list-style: none; margin: 0; padding: 0; }
body .campaign-shortcode-table .campaign-list-item_key-features li,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-key-features li { position: relative; margin: 3px 0; padding: 0 0 0 22px; font-size: 15px; line-height: 1.45; color: var(--pn-tekst-2); }
body .campaign-shortcode-table .campaign-list-item_key-features li::before,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-key-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pn-groen); font-weight: 700; background: none; width: auto; height: auto; }
body .campaign-compact-table__wrapper .campaign-compact-table__offer-brand-name { margin: 6px 0 0; font: 700 14px/1.2 var(--pn-body); color: var(--pn-inkt); text-align: center; }

/* ── score ────────────────────────────────────────────────────────── */
body .campaign-shortcode-table .campaign-list-item_scores,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-rating { gap: 6px; justify-content: center; }
body .campaign-shortcode-table .campaign_list_item__score_text,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-rating-text,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-rating-text span { font: 700 26px/1 var(--pn-display); color: var(--pn-inkt); }
body .campaign-shortcode-table .campaign_list_item__score_text::after,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-rating-text span::after { content: "/10"; margin-left: 2px; font: 500 13px var(--pn-body); color: var(--pn-grijs); }
body .campaign-shortcode-table .star_rating_img, body .campaign-compact-table__wrapper .star_rating_img { width: 84px; height: auto; }

/* ── CTA: the site's primary button ───────────────────────────────── */
body .campaign-shortcode-table .campaign-list-item_cta-btn,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-cta-button a {
	display: flex; align-items: center; justify-content: center; height: 48px; line-height: 1.2; padding: 0 20px; border: 0; border-radius: 999px;
	background: var(--pn-oranje); color: var(--pn-inkt); font: 700 15px/1.2 var(--pn-body); letter-spacing: .02em; text-decoration: none; box-shadow: none;
	transition: background var(--pn-ease);
}
body .campaign-shortcode-table .campaign-list-item_cta-btn:hover, body .campaign-shortcode-table .campaign-list-item_cta-btn:focus-visible,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-cta-button a:hover, body .campaign-compact-table__wrapper .campaign-compact-table__offer-cta-button a:focus-visible { background: var(--pn-oranje-hover); color: var(--pn-inkt); text-decoration: none; }
body .campaign-shortcode-table .campaign-list-item_cta-btn:focus-visible,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-cta-button a:focus-visible { outline: 2px solid var(--pn-nacht); outline-offset: 2px; }
/* coupon / "geen code vereist" */
body .campaign-shortcode-table .coupen_code_inner .empty-coupon-code { font: 600 12px/1 var(--pn-mono); letter-spacing: .04em; color: var(--pn-grijs); background: var(--pn-vlak); border: 1px dashed var(--pn-lijn-2); border-radius: 999px; padding: 8px 12px; text-align: center; }

/* ── secondary: more info, date, voting ───────────────────────────── */
body .campaign-shortcode-table .campaign-list-item_more-btns > div { margin-right: 0; font: 700 14px/1.3 var(--pn-body); color: var(--pn-blauw); text-decoration: none; }
body .campaign-shortcode-table .campaign-list-item_more-btns > div:hover { text-decoration: underline; }
body .campaign-shortcode-table .campaign__updated_date { font: 500 12px/1 var(--pn-body); color: var(--pn-grijs); gap: 4px; }
body .campaign-shortcode-table .campaign__updated_date svg path { fill: var(--pn-grijs); }
body .campaign-shortcode-table .campaign__voting_section__btn { border-color: var(--pn-lijn); border-radius: 999px; color: var(--pn-grijs); }
body .campaign-shortcode-table .campaign__voting_section__btn svg path { stroke: var(--pn-grijs); }
body .campaign-shortcode-table .campaign__voting_section__text { font: 600 12px/1 var(--pn-body); color: var(--pn-grijs); }

/* ── terms: readable and never clipped (bonus conditions must stay visible) ── */
body .campaign-shortcode-table .campaign-list-item > .cell_bottom,
body .campaign-shortcode-table .campaign-list-item .campaign__offer-terms,
body .campaign-compact-table__wrapper .campaign-compact-table__offer-terms {
	margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--pn-lijn); height: auto; overflow: visible;
	font: 400 12px/1.5 var(--pn-body); color: var(--pn-grijs);
}
body .campaign-compact-table__wrapper .campaign-compact-table__offer-terms .cell_bottom { height: auto; overflow: visible; font: inherit; color: inherit; }

/* ── compact: the table is a stack of cards ───────────────────────── */
body .campaign-compact-table__wrapper .campaign-compact-table { width: 100%; margin: 0; border: 0; border-collapse: separate; background: none; }
body .campaign-compact-table__wrapper .campaign-compact-table__offers-wrapper { display: flex; flex-direction: column; gap: 12px; counter-reset: pn-bm; }
body .campaign-compact-table__wrapper .campaign-compact-table td { padding: 0; border: 0; background: none; vertical-align: middle; }
body .campaign-compact-table__wrapper .campaign-compact-table__title:empty { display: none; }

/* ── show more / disclaimers ──────────────────────────────────────── */
body .show-more-campaign-list-items, body .campaign-compact-table__wrapper .campaign-compact-table__show-more-btn {
	font: 700 15px/1.2 var(--pn-body); color: var(--pn-inkt); background: transparent; border: 1.5px solid var(--pn-inkt); border-radius: 999px; padding: 11px 18px; text-transform: none;
}
body .toplist__disclaimer-above, body .toplist__disclaimer-below { font: 400 12px/1.5 var(--pn-body); color: var(--pn-grijs); }

@media (max-width: 991px) {
	body .campaign-shortcode-table .campaign-list-item_key-features.mobile > p { font-size: 17px; }
	body .campaign-shortcode-table .campaign-list-item_logo { min-height: 56px; }
	body .campaign-shortcode-table .campaign-list-item_scores { align-items: flex-end; }
}