/*
 * WP Builder Kit — design tokens + content components.
 * Every rule is scoped to .wbk-* classes so it never fights your theme or Elementor.
 * Change the brand by editing the tokens below.
 */
:root {
	/* Palette matched to autocount.biz.my (Elementor global colours). */
	--wbk-ink: #111633;           /* headings, body text inside components */
	--wbk-muted: #6c757d;         /* secondary text */
	--wbk-primary: #004a75;       /* brand blue: accents, links, badges */
	--wbk-primary-soft: #e6f0f5;  /* blue tint backgrounds */
	--wbk-cta: #f6621b;           /* orange: buy / affiliate buttons */
	--wbk-cta-hover: #dc5410;
	--wbk-cta-ink: #ffffff;
	--wbk-surface: #f9fafb;       /* card background */
	--wbk-border: #e0e0e0;
	--wbk-pro: #15803d;
	--wbk-pro-soft: #f0fdf4;
	--wbk-con: #b91c1c;
	--wbk-con-soft: #fef2f2;
	--wbk-star: #f5b301;
	--wbk-radius: 14px;
	--wbk-radius-sm: 8px;
	--wbk-shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 8px 24px rgba(20, 33, 61, .06);
	/* inherit = use the theme's fonts. Set a font stack here to override. */
	--wbk-font-heading: inherit;
	--wbk-font-body: inherit;
	--wbk-gap: 1.25rem;
}

/* ---------- Shared card ---------- */
.wbk-card,
.wbk-takeaways,
.wbk-toc,
.wbk-product-box,
.wbk-verdict,
.wbk-cta-box,
.wbk-pick {
	background: var(--wbk-surface);
	border: 1px solid var(--wbk-border);
	border-radius: var(--wbk-radius);
	padding: clamp(1.1rem, 3vw, 1.75rem);
	margin-block: 2rem;
	color: var(--wbk-ink);
	font-family: var(--wbk-font-body);
}
:where(.wbk-takeaways, .wbk-toc, .wbk-product-box, .wbk-verdict, .wbk-cta-box, .wbk-pick, .wbk-faq, .wbk-pros-cons, .wbk-audience) :where(h2, h3, h4) {
	font-family: var(--wbk-font-heading);
	color: var(--wbk-ink);
	margin-top: 0;
	line-height: 1.25;
}
:where(.wbk-takeaways, .wbk-toc, .wbk-product-box, .wbk-verdict, .wbk-cta-box, .wbk-pick) > :last-child {
	margin-bottom: 0;
}

/* ---------- Affiliate disclosure ---------- */
.wbk-disclosure {
	font-size: .85rem;
	color: var(--wbk-muted);
	background: var(--wbk-surface);
	border-left: 3px solid var(--wbk-primary);
	padding: .6rem .9rem;
	border-radius: 0 var(--wbk-radius-sm) var(--wbk-radius-sm) 0;
}

/* ---------- Key takeaways ---------- */
.wbk-takeaways {
	background: var(--wbk-primary-soft);
	border-color: transparent;
}
.wbk-takeaways ul { margin: 0; padding-left: 1.2rem; }
.wbk-takeaways li { margin: .35rem 0; }
.wbk-takeaways li::marker { color: var(--wbk-primary); }

/* ---------- Table of contents ---------- */
.wbk-toc .wbk-toc-title { margin: 0 0 .6rem; font-family: var(--wbk-font-heading); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wbk-muted); }
.wbk-toc ul { margin: 0; padding: 0; list-style: none; columns: 2 16rem; column-gap: 2rem; }
.wbk-toc li { margin: .35rem 0; padding-left: 1rem; position: relative; break-inside: avoid; }
.wbk-toc li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--wbk-primary); }
.wbk-toc a { color: var(--wbk-ink); text-decoration: none; border-bottom: 1px solid var(--wbk-border); }
.wbk-toc a:hover { color: var(--wbk-primary); border-color: var(--wbk-primary); }

/* ---------- Stars, price, badge ---------- */
.wbk-stars { color: var(--wbk-star); font-size: 1.15rem; letter-spacing: .08em; margin: .25rem 0; }
.wbk-stars strong { color: var(--wbk-ink); font-size: .95rem; letter-spacing: 0; margin-left: .35rem; }
.wbk-price { font-family: var(--wbk-font-heading); font-weight: 700; font-size: 1.1rem; margin: .25rem 0; }
.wbk-badge {
	display: inline-block;
	background: var(--wbk-primary);
	color: #fff;
	font-family: var(--wbk-font-heading);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .3rem .7rem;
	border-radius: 999px;
	margin: 0 0 .75rem;
}

/* ---------- CTA (affiliate) button ---------- */
.wp-block-button.wbk-btn .wp-block-button__link {
	background: var(--wbk-cta);
	color: var(--wbk-cta-ink);
	font-family: var(--wbk-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: var(--wbk-radius-sm);
	padding: .8rem 1.6rem;
	text-decoration: none;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
	transition: background .15s ease, transform .15s ease;
}
.wp-block-button.wbk-btn .wp-block-button__link:hover {
	background: var(--wbk-cta-hover);
	transform: translateY(-1px);
}

/* ---------- Product box ---------- */
.wbk-product-box { box-shadow: var(--wbk-shadow); background: #fff; }
.wbk-product-box .wp-block-columns { gap: var(--wbk-gap); margin: 0; align-items: center; }
.wbk-product-box figure { margin: 0; }
.wbk-product-box img { border-radius: var(--wbk-radius-sm); width: 100%; height: auto; object-fit: contain; }
.wbk-product-box h3 { font-size: 1.35rem; margin-bottom: .25rem; }
.wbk-product-box .wbk-summary { color: var(--wbk-muted); }

/* ---------- Pros / cons ---------- */
.wbk-pros-cons { gap: var(--wbk-gap); margin-block: 2rem; }
.wbk-pros, .wbk-cons {
	border-radius: var(--wbk-radius);
	padding: 1.1rem 1.25rem;
	font-family: var(--wbk-font-body);
}
.wbk-pros { background: var(--wbk-pro-soft); border-top: 4px solid var(--wbk-pro); }
.wbk-cons { background: var(--wbk-con-soft); border-top: 4px solid var(--wbk-con); }
.wbk-pros h3, .wbk-cons h3, .wbk-pros h4, .wbk-cons h4 { font-size: 1.05rem; }
.wbk-pros h3, .wbk-pros h4 { color: var(--wbk-pro); }
.wbk-cons h3, .wbk-cons h4 { color: var(--wbk-con); }
.wbk-pros ul, .wbk-cons ul { list-style: none; margin: 0; padding: 0; }
.wbk-pros li, .wbk-cons li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
.wbk-pros li::before, .wbk-cons li::before { position: absolute; left: 0; font-weight: 700; }
.wbk-pros li::before { content: "✓"; color: var(--wbk-pro); }
.wbk-cons li::before { content: "✕"; color: var(--wbk-con); }

/* ---------- Tables: specs, ratings, comparison ---------- */
.wbk-table { margin-block: 1.5rem 2rem; }
.wbk-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wbk-border);
	border-radius: var(--wbk-radius);
	overflow: hidden;
	font-family: var(--wbk-font-body);
	font-size: .95rem;
}
.wbk-table th, .wbk-table td {
	border: 0;
	border-bottom: 1px solid var(--wbk-border);
	padding: .7rem .9rem;
	text-align: left;
	vertical-align: middle;
}
.wbk-table tr:last-child td { border-bottom: 0; }
.wbk-table thead th { background: var(--wbk-ink); color: #fff; font-family: var(--wbk-font-heading); font-weight: 700; }
.wbk-table tbody tr:nth-child(even) td { background: var(--wbk-surface); }
.wbk-table.wbk-ratings td:last-child { color: var(--wbk-star); white-space: nowrap; }
.wbk-table a { color: var(--wbk-primary); font-weight: 600; }
@media (max-width: 640px) {
	.wbk-table { overflow-x: auto; }
	.wbk-table table { min-width: 520px; }
}

/* ---------- Who should buy ---------- */
.wbk-audience { gap: var(--wbk-gap); margin-block: 2rem; }
.wbk-audience > .wp-block-column {
	background: var(--wbk-surface);
	border: 1px solid var(--wbk-border);
	border-radius: var(--wbk-radius);
	padding: 1.1rem 1.25rem;
}

/* ---------- Verdict ---------- */
.wbk-verdict { border: 2px solid var(--wbk-primary); background: #fff; }
.wbk-verdict h2 { color: var(--wbk-primary); }

/* ---------- CTA box ---------- */
.wbk-cta-box { background: var(--wbk-ink); border-color: var(--wbk-ink); color: #fff; text-align: center; }
.wbk-cta-box h2, .wbk-cta-box h3 { color: #fff; }
.wbk-cta-box p { color: rgba(255, 255, 255, .85); }
.wbk-cta-box .wp-block-buttons { justify-content: center; }

/* ---------- Best-of pick card ---------- */
.wbk-pick { background: #fff; box-shadow: var(--wbk-shadow); }
.wbk-pick h3 { font-size: 1.4rem; }
.wbk-pick .wp-block-columns { gap: var(--wbk-gap); margin-bottom: 0; }
.wbk-pick figure { margin: 0; }
.wbk-pick img { border-radius: var(--wbk-radius-sm); width: 100%; height: auto; }
.wbk-pick .wbk-pros-cons { margin-block: 1rem 0; }

/* ---------- FAQ ---------- */
.wbk-faq { margin-block: 2rem; }
.wbk-faq .wp-block-details {
	border: 1px solid var(--wbk-border);
	border-radius: var(--wbk-radius-sm);
	padding: .9rem 1.1rem;
	margin: .6rem 0;
	background: #fff;
}
.wbk-faq summary {
	cursor: pointer;
	font-family: var(--wbk-font-heading);
	font-weight: 700;
	color: var(--wbk-ink);
	list-style-position: outside;
}
.wbk-faq details[open] summary { color: var(--wbk-primary); margin-bottom: .5rem; }
.wbk-faq details p:last-child { margin-bottom: 0; }

/* ---------- Section image ---------- */
.wbk-section-image img { border-radius: var(--wbk-radius); }