/**
 * brutonaarnetto.be - Universal Plain White Theme
 * Clean pure white canvas (#ffffff), subtle light-gray panels (#f8fafc),
 * sharp 1px borders (#e2e8f0), high-contrast dark slate typography (#0f172a / #1e293b),
 * and crisp fintech blue accents (#2563eb).
 * Strict Rule: ZERO box-shadows, sharp 16:9 borderless featured images with 0 border-radius.
 */

:root {
    --bg-base: #ffffff;
    --bg-surface: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-input: #ffffff;
    --border-subtle: #e2e8f0;
    --border-card: #e2e8f0;
    --border-focus: #2563eb;
    --text-pure: #0f172a;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --accent-link: #2563eb;
    --accent-link-hover: #1d4ed8;
    --accent-purple: #2563eb;
    --accent-purple-light: #3b82f6;
    --accent-purple-glow: rgba(37, 99, 235, 0.08);

    /* Framework variable overrides */
    --ind-theme-color-background-default: #ffffff !important;
    --ind-theme-color-text-default: #1e293b !important;
    --ind-theme-color-text-default-inverted: #ffffff !important;
    --ind-theme-color-text-default-subtle: #475569 !important;
    --ind-theme-color-text-brand-primary: #2563eb !important;
    --ind-theme-color-text-brand-primary-strong: #1d4ed8 !important;
    --ind-theme-color-background-brand-primary: #2563eb !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. Base & Global Canvas (Clean Plain White Theme)
───────────────────────────────────────────────────────────────────────────── */
html, body {
    background-color: #ffffff !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif !important;
}

#pageContainer, .page-container, main, .view-container, #icp-container,
.article-page-wrap, .salary-page-wrap, .blog-wrap, .bn-seo-section,
.bn-home-wrap, .bn-calc-section, .bn-hero-section {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.bn-content-section--alt,
.bn-seo-section {
    background-color: #f8fafc !important;
}

/* Headings: Bold Dark Slate */
h1, h2, h3, h4, h5, h6,
.bn-hero-title, .art-h1, .sp-h1, .blog-hero h1,
.bn-reviews-head h2, .bnn-promo-banner-title,
.art-toc-title, .sp-toc-title, .sidebar-widget__title,
.bn-tools-heading h3, .bn-seo-wrap h2, .bn-seo-wrap h3, .bn-seo-wrap h4,
.tool-title, .tp-title {
    color: #0f172a !important;
}

/* Body text & Leads */
p, .art-lead, .blog-hero p, .bn-hero-sub, .sp-lead, .sp-intro, .bn-hero-lead {
    color: #334155 !important;
}

strong, b {
    color: #0f172a !important;
}

/* Links */
a {
    color: #2563eb;
    text-decoration: none;
}
a:hover {
    color: #1d4ed8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. UNIVERSAL FEATURED IMAGES: 16:9, BORDERLESS, SHARP CORNERS (0 RADIUS), NO SHADOWS
───────────────────────────────────────────────────────────────────────────── */
.art-featured-hero,
.sp-featured-wrap,
.bnn-latest-posts__thumb-link,
.blog-card__thumb-link,
.art-inbetween-figure,
.featured-image-wrap,
.featured-image {
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}

.art-featured-hero img,
.sp-featured-wrap img,
.sp-featured-img,
.bnn-latest-posts__thumb,
.blog-card__thumb,
.art-inbetween-img,
.featured-image-wrap img,
.featured-image img {
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    object-fit: cover !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Inbetween figcaption */
.art-inbetween-figure figcaption {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. UNIVERSAL ARTICLE CARDS (Blog Page & Latest Posts Component)
   Sharp Corners, White Background, 1px Light Border, No Shadows
───────────────────────────────────────────────────────────────────────────── */
.bnn-latest-posts__card,
.blog-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

.bnn-latest-posts__card:hover,
.blog-card:hover {
    border-color: #2563eb !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.bnn-latest-posts__body,
.blog-card__body {
    background: #ffffff !important;
    padding: 16px 18px !important;
}

.bnn-latest-posts__title,
.bnn-latest-posts__title a,
.blog-card__title,
.blog-card__title a {
    color: #0f172a !important;
}

.bnn-latest-posts__title a:hover,
.blog-card__title a:hover {
    color: #2563eb !important;
}

.bnn-latest-posts__excerpt,
.blog-card__excerpt {
    color: #475569 !important;
}

.bnn-latest-posts__meta-row,
.blog-card__meta {
    color: #64748b !important;
}

.bnn-latest-posts__cat-badge,
.blog-card__cat {
    background: #f1f5f9 !important;
    color: #2563eb !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
}

.bnn-latest-posts__footer,
.blog-card__footer {
    border-top: 1px solid #f1f5f9 !important;
    color: #64748b !important;
}

.bnn-latest-posts__read-btn,
.blog-card__read-link {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bnn-latest-posts__read-btn:hover,
.blog-card__read-link:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Header & Navigation (White Theme)
───────────────────────────────────────────────────────────────────────────── */
.site-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

.site-header__logo {
    color: #0f172a !important;
}

.nav-link, .nav-btn {
    color: #334155 !important;
}

.nav-link:hover, .nav-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.nav-btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.nav-dropdown-content {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

.nav-dropdown-content a {
    color: #334155 !important;
}

.nav-dropdown-content a:hover {
    background-color: #f8fafc !important;
    color: #2563eb !important;
}

.nav-dd-col {
    border-right-color: #e2e8f0 !important;
}

.nav-dd-heading {
    color: #64748b !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Calculator Cards & Dashboard
───────────────────────────────────────────────────────────────────────────── */
.bn-calc-card,
.bn-calc-split-card,
.sp-card,
.sp-calc-card,
.nl-card,
.product-tile,
.bn-tool-card,
.tp-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

.bn-calc-form-side {
    background: #ffffff !important;
}

.bn-calc-result-side,
.sp-calc-result-side {
    background: #f8fafc !important;
    border-left: 1px solid #e2e8f0 !important;
}

@media (max-width: 980px) {
    .bn-calc-result-side,
    .sp-calc-result-side {
        border-top: 1px solid #e2e8f0 !important;
        border-left: none !important;
    }
}

/* Tabs */
.bn-tabs, .sp-tabs {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 3px !important;
}

.bn-tab, .sp-tab {
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    border-radius: 0 !important;
}

.bn-tab.active, .sp-tab.active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

/* Form inputs */
input, select, textarea,
.bn-input-wrap input,
.sp-input-wrap input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

input:focus, select:focus, textarea:focus,
.bn-input-wrap input:focus,
.sp-input-wrap input:focus {
    border-color: #2563eb !important;
    outline: none !important;
}

.bn-input-wrap, .sp-input-wrap {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

.bn-input-sym, .sp-input-sym {
    color: #64748b !important;
}

/* Result box */
.bn-res-hero, .sp-res-hero {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bn-res-amount, .sp-res-amount {
    color: #0f172a !important;
}

.bn-res-label, .sp-res-label,
.bn-res-sub, .sp-res-sub,
.bn-res-stat-label, .sp-res-stat-label {
    color: #64748b !important;
}

.bn-res-stat-val, .sp-res-stat-val {
    color: #0f172a !important;
}

.bn-res-strip, .sp-res-strip {
    border-top-color: #e2e8f0 !important;
}

/* Deduction ledger cards */
.bn-bd-card, .sp-bd-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bn-bd-card-label, .sp-bd-card-label {
    color: #64748b !important;
}

.bn-bd-card-val--deduct, .sp-bd-card-val--deduct {
    color: #475569 !important;
}

.bn-bd-card-val--add, .sp-bd-card-val--add {
    color: #2563eb !important;
}

.bn-bd-card-val--net, .sp-bd-card-val--net {
    color: #10b981 !important;
}

/* Annual summary card */
.bn-res-yearcard, .sp-res-yearcard {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bn-res-year-val, .sp-res-year-val {
    color: #0f172a !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Methodology & FAQ Cards (White Theme)
───────────────────────────────────────────────────────────────────────────── */
.bn-step-card,
.bn-faq-card,
.sp-faq-item,
.art-author-box,
.art-toc,
.sp-toc,
.sidebar-widget,
.art-sidebar-card,
.bnn-post__cta {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.bn-step-num {
    color: #2563eb !important;
}

.bn-step-title,
.bn-faq-q,
.sp-faq-q {
    color: #0f172a !important;
}

.bn-step-text,
.bn-faq-a,
.sp-faq-a {
    color: #475569 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Tables & Data Presentation (Clean White Theme)
───────────────────────────────────────────────────────────────────────────── */
table, .bnn-table, .bn-table, .sp-table {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

table th, .bnn-table th, .bn-table th, .sp-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 700 !important;
}

table td, .bnn-table td, .bn-table td, .sp-table td {
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

table tr:hover td, .bnn-table tr:hover td {
    background: #f8fafc !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Footer (White / Light Theme)
───────────────────────────────────────────────────────────────────────────── */
.site-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

.footer-logo {
    color: #0f172a !important;
}

.footer-desc, .footer-disclaimer-note {
    color: #475569 !important;
}

.footer-col h3 {
    color: #0f172a !important;
}

.footer-col a {
    color: #475569 !important;
}

.footer-col a:hover {
    color: #2563eb !important;
}

.footer-bottom {
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

.footer-bottom-copy strong {
    color: #1e293b !important;
}

.footer-nl-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

.footer-nl-btn:hover {
    background: #f1f5f9 !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. STRICT ZERO BOX SHADOW OVERRIDE
───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. TOOL BOXES - WHITE THEME WITH FUNCTIONAL RED, GREEN, WHITE COLOR CODING
───────────────────────────────────────────────────────────────────────────── */
.calc-card,
.tp-calc-card,
.bn-calc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #1e293b !important;
}

.calc-card-title,
.tp-calc-card h2,
.tp-calc-card h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.hero {
    background: #ffffff !important;
}

.hero-copy h1 {
    color: #0f172a !important;
}

.hero-copy .lead,
.trust-list li,
.microcopy,
.field-hint,
#postcodeHint {
    color: #475569 !important;
}

/* Inputs & Form Fields - Pure White & Crisp Neutral */
.field label,
.tp-field label {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.field input[type="text"],
.field input[type="number"],
.field select,
.tp-field input,
.tp-field select {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.field input[type="text"]:focus,
.field input[type="number"]:focus,
.field select:focus,
.tp-field input:focus,
.tp-field select:focus {
    border-color: #2563eb !important;
    outline: 2px solid rgba(37, 99, 235, 0.2) !important;
    background: #ffffff !important;
}

/* Postcode / Location Icon - Royal Blue */
.field svg,
.field-input-icon,
.tp-sym {
    color: #2563eb !important;
    stroke: #2563eb !important;
}

/* Checkbox options */
.field-check {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    color: #0f172a !important;
}

.fc-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.fc-sub {
    color: #64748b !important;
}

/* ── GREEN ACCENTS (Electricity / Stroom / Netto / Savings / Free / Eco) ── */
.field.slider-field [for="stroomVerbruik"] svg,
.meter-sub.stroom svg,
.meter-sub.basis svg,
.stroom svg {
    stroke: #10b981 !important;
    color: #10b981 !important;
}

#stroomVerbruik {
    accent-color: #10b981 !important;
}

#stroomVerbruikOut {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    display: inline-block !important;
}

.meter-total,
#meterTotal,
.tp-res-main,
#tp-res-main {
    color: #059669 !important;
    font-weight: 900 !important;
}

.meter-live {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

.meter-live-dot {
    background: #10b981 !important;
}

.meter-sub.stroom,
.meter-sub.basis {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #10b981 !important;
    border-radius: 0 !important;
}

.meter-sub.stroom .meter-sub-label,
.meter-sub.basis .meter-sub-label {
    color: #047857 !important;
    font-weight: 700 !important;
}

.meter-sub.stroom .meter-sub-value,
.meter-sub.basis .meter-sub-value {
    color: #059669 !important;
    font-weight: 800 !important;
}

/* Gross-Net Tool Highlight Netto */
.tp-bd.tp-bd--hi {
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    border-top: 3px solid #10b981 !important;
    border-radius: 0 !important;
}

.tp-bd.tp-bd--hi .tp-bd-lbl {
    color: #047857 !important;
    font-weight: 800 !important;
}

.tp-bd.tp-bd--hi .tp-bd-val {
    color: #059669 !important;
    font-weight: 900 !important;
}

#tp-bar-netto {
    background: #10b981 !important;
}

/* CTA Submit Buttons - High Converting Emerald Green */
.cta-btn,
.tp-calc-btn {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1px solid #059669 !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.cta-btn:hover,
.tp-calc-btn:hover {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── RED ACCENTS (Gas / Heating / Costs / Deductions / Taxes) ── */
.field.slider-field [for="gasVerbruik"] svg,
.meter-sub.gas svg,
.meter-sub.extra svg,
.gas svg {
    stroke: #ef4444 !important;
    color: #ef4444 !important;
}

#gasVerbruik {
    accent-color: #ef4444 !important;
}

#gasVerbruikOut {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    display: inline-block !important;
}

.meter-sub.gas,
.meter-sub.extra {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #ef4444 !important;
    border-radius: 0 !important;
}

.meter-sub.gas .meter-sub-label,
.meter-sub.extra .meter-sub-label {
    color: #b91c1c !important;
    font-weight: 700 !important;
}

.meter-sub.gas .meter-sub-value,
.meter-sub.extra .meter-sub-value {
    color: #dc2626 !important;
    font-weight: 800 !important;
}

#tp-bar-bv {
    background: #ef4444 !important;
}

#tp-bar-rsz {
    background: #f59e0b !important;
}

/* ── WHITE & LIGHT NEUTRAL ELEMENTS (Meters & Panels) ── */
.meter-panel,
.tp-result-hero {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    color: #0f172a !important;
}

.meter-label,
.tp-res-eyebrow,
.tp-res-sub {
    color: #64748b !important;
}

.period-toggle button {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 0 !important;
}

.period-toggle button.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.tp-bd {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
}

.tp-bd-lbl {
    color: #64748b !important;
}

.tp-bd-val {
    color: #0f172a !important;
}

.tp-mini {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 8px 10px !important;
}

.tp-mini-lbl {
    color: #64748b !important;
}

.tp-mini-val {
    color: #0f172a !important;
}

/* Results section on comparison tools */
.results,
.steps,
.coverage,
.keywords,
.kw-section {
    background: #ffffff !important;
    color: #1e293b !important;
}

.result-card,
.coverage-card,
.keyword-card,
.step-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.result-card.best {
    border-color: #10b981 !important;
    border-width: 2px !important;
}

.result-price {
    color: #0f172a !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. FAQ SECTION - COMPACT DESKTOP 2-COLUMN GRID & REDUCED BOX DESIGN
───────────────────────────────────────────────────────────────────────────── */
.faq {
    padding: 48px 0 !important;
    background: #ffffff !important;
}

.faq h2,
.sp-faq-title,
#faq {
    color: #0f172a !important;
    font-weight: 800 !important;
    margin-bottom: 24px !important;
}

/* Desktop: 2-Column Balanced Grid to save 50% vertical space */
.faq-list,
#tp-faqs,
#faqList,
.sp-faq {
    max-width: 1180px !important;
    margin: 0 auto !important;
}

@media (min-width: 768px) {
    .faq-list,
    #tp-faqs,
    #faqList,
    .sp-faq {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 16px !important;
        align-items: start !important;
    }
}

/* Reduced, Compact FAQ Boxes */
.faq-list details,
.sp-faq-item,
.faq-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    margin: 0 !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.faq-list details:hover,
.sp-faq-item:hover,
.faq-item:hover {
    border-color: #cbd5e1 !important;
    background-color: #fbfcfe !important;
}

.faq-list details[open],
.sp-faq-item.open,
.faq-item.open {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
}

/* Compact Question Header */
.faq-list summary,
.sp-faq-btn,
.faq-q {
    cursor: pointer !important;
    padding: 11px 0 !important;
    font-weight: 700 !important;
    font-size: 0.93rem !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
    text-align: left !important;
}

.faq-list summary::-webkit-details-marker {
    display: none !important;
}

/* Compact Indicator Icon */
.faq-list summary::after,
.sp-faq-icon {
    content: "+" !important;
    color: #2563eb !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    flex: none !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
}

.faq-list details[open] summary::after,
.sp-faq-item.open .sp-faq-icon {
    content: "−" !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
    transform: none !important;
}

.faq-q svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #2563eb !important;
    flex: none !important;
    transition: transform 0.2s ease !important;
}

.faq-item.open .faq-q svg {
    transform: rotate(45deg) !important;
    stroke: #2563eb !important;
}

/* Compact Answer Body */
.faq-list p,
.sp-faq-body,
.sp-faq-a,
.faq-a p {
    color: #475569 !important;
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
}

.sp-faq-body {
    display: none !important;
}

.sp-faq-item.open .sp-faq-body {
    display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Promotional Tool Box & Ad Slot Banners - Pure White Theme, Sharp Corners
───────────────────────────────────────────────────────────────────────────── */
.bnn-ad-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
}

.bnn-ad-label {
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
}

.bnn-promo-toolbox,
.bnn-promo-banner {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #2563eb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 28px 0 !important;
    padding: 24px 28px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.bnn-promo-banner-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
}

.bnn-promo-banner-left {
    flex: 1 1 320px !important;
    min-width: 260px !important;
}

.bnn-promo-badge {
    display: inline-block !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #2563eb !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    padding: 3px 10px !important;
    border-radius: 0 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

.bnn-promo-banner-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
}

.bnn-promo-banner-desc {
    font-size: 0.90rem !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.bnn-promo-banner-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.bnn-btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.bnn-btn-gold:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1e40af !important;
    box-shadow: none !important;
    transform: none !important;
}

.bnn-btn-purple {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1px solid #059669 !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.bnn-btn-purple:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
    box-shadow: none !important;
    transform: none !important;
}

.bnn-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.bnn-btn-outline:hover {
    background: #f8fafc !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: none !important;
    transform: none !important;
}

.bnn-btn-gold svg,
.bnn-btn-purple svg {
    stroke: #ffffff !important;
}

.bnn-btn-outline svg {
    stroke: #0f172a !important;
}
.bnn-btn-outline:hover svg {
    stroke: #2563eb !important;
}

.bnn-promo-sidebar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #10b981 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    margin: 24px 0 !important;
}

.bnn-promo-sidebar .bnn-promo-title {
    color: #0f172a !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin: 8px 0 6px !important;
}

.bnn-promo-sidebar .bnn-promo-sub {
    color: #64748b !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    margin: 0 0 16px !important;
}

.bnn-promo-sidebar .bnn-promo-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bnn-promo-sidebar .bnn-promo-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.bnn-promo-sidebar .bnn-promo-btn:hover {
    background: #ffffff !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: none !important;
}

.bnn-promo-sidebar .bnn-promo-btn svg {
    color: #2563eb !important;
    stroke: #2563eb !important;
    flex-shrink: 0 !important;
}

.bnn-promo-sidebar .bnn-promo-arrow {
    color: #2563eb !important;
    font-weight: 800 !important;
    margin-left: auto !important;
}