/* ==========================================================================
   PBN Reviews — first-party iGaming review components
   Brand-adaptive: everything keys off the shared --pbn-* tokens (the base
   theme defines them). Safe fallbacks provided so components look correct
   even before a brand palette loads.
   ========================================================================== */

.pbn-rating,
.pbn-operator,
.pbn-proscons,
.pbn-compare-wrap,
.pbn-cta,
.pbn-verdict,
.pbn-toc,
.pbn-breadcrumbs {
    --_accent:   var(--pbn-accent, #2b6cb0);
    --_accent-2: var(--pbn-accent-2, #1a4e8a);
    --_ink-on-accent: var(--pbn-accent-ink, #ffffff);
    --_bg:       var(--pbn-bg, #ffffff);
    --_surface:  var(--pbn-surface, #f7f9fc);
    --_ink:      var(--pbn-ink, #1a202c);
    --_muted:    var(--pbn-muted, #5b6573);
    --_border:   var(--pbn-border, #e2e8f0);
    --_success:  var(--pbn-success, #2f855a);
    --_warning:  var(--pbn-warning, #b7791f);
    --_danger:   var(--pbn-danger, #c53030);
    --_radius:   var(--pbn-radius, 8px);
    --_radius-lg: var(--pbn-radius-lg, 14px);
    --_shadow:   var(--pbn-shadow, 0 1px 3px rgba(0,0,0,.12));
    --_shadow-lg: var(--pbn-shadow-lg, 0 8px 24px rgba(0,0,0,.16));
    --_font:     var(--pbn-font, inherit);
    --_font-h:   var(--pbn-font-heading, inherit);
    --_s1: var(--pbn-space-1, 4px);
    --_s2: var(--pbn-space-2, 8px);
    --_s3: var(--pbn-space-3, 12px);
    --_s4: var(--pbn-space-4, 16px);
    --_s5: var(--pbn-space-5, 20px);
    --_s6: var(--pbn-space-6, 24px);
    --_s8: var(--pbn-space-8, 40px);
    font-family: var(--_font);
    color: var(--_ink);
    box-sizing: border-box;
}
.pbn-operator *,
.pbn-proscons *,
.pbn-compare-wrap *,
.pbn-cta *,
.pbn-verdict *,
.pbn-toc *,
.pbn-breadcrumbs * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Rating score / stars
   -------------------------------------------------------------------------- */
.pbn-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--_s2);
    flex-wrap: wrap;
}
.pbn-rating-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--_muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pbn-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    white-space: nowrap;
}
.pbn-stars-empty,
.pbn-stars-full {
    display: inline-flex;
}
.pbn-stars-full {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0;
}
.pbn-star {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
}
.pbn-stars-empty .pbn-star { fill: var(--_border); }
.pbn-stars-full .pbn-star  { fill: var(--_warning); }
.pbn-score-value {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--_ink);
    font-family: var(--_font-h);
}
.pbn-score-max {
    font-weight: 600;
    font-size: .85em;
    color: var(--_muted);
}

/* --------------------------------------------------------------------------
   Operator review box
   -------------------------------------------------------------------------- */
.pbn-operator {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-top: 4px solid var(--_accent);
    border-radius: var(--_radius-lg);
    box-shadow: var(--_shadow);
    padding: var(--_s5);
    margin: var(--_s6) 0;
}
.pbn-operator-head {
    display: flex;
    align-items: center;
    gap: var(--_s4);
    margin-bottom: var(--_s4);
}
.pbn-operator-logo-wrap {
    flex: 0 0 auto;
    width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pbn-operator-logo {
    max-width: 96px;
    max-height: 64px;
    width: auto;
    height: auto;
    border-radius: var(--_radius);
    object-fit: contain;
}
.pbn-operator-title {
    display: flex;
    flex-direction: column;
    gap: var(--_s2);
    min-width: 0;
}
.pbn-operator-name {
    font-family: var(--_font-h);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--_ink);
}
.pbn-operator-facts {
    margin: 0 0 var(--_s4);
    padding: 0;
    display: grid;
    gap: var(--_s1);
}
.pbn-fact-row {
    display: flex;
    justify-content: space-between;
    gap: var(--_s3);
    padding: var(--_s2) 0;
    border-bottom: 1px solid var(--_border);
}
.pbn-fact-row:last-child { border-bottom: 0; }
.pbn-operator-facts dt {
    color: var(--_muted);
    font-weight: 600;
    font-size: .9rem;
}
.pbn-operator-facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--_ink);
    text-align: right;
}
.pbn-operator-cta { margin-top: var(--_s2); }
.pbn-operator .pbn-rg-microcopy {
    margin: var(--_s3) 0 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--_muted);
    opacity: 1;
    text-align: left;
}

/* Shared button */
.pbn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--_s2);
    background: var(--_accent);
    color: var(--_ink-on-accent);
    font-family: var(--_font-h);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    padding: var(--_s3) var(--_s6);
    border-radius: var(--_radius);
    border: 0;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease;
}
.pbn-btn:hover  { background: var(--_accent-2); }
.pbn-btn:active { transform: translateY(1px); }
.pbn-btn:focus-visible {
    outline: 3px solid var(--_accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Pros & cons
   -------------------------------------------------------------------------- */
.pbn-proscons {
    margin: var(--_s6) 0;
}
.pbn-proscons-title {
    font-family: var(--_font-h);
    margin: 0 0 var(--_s3);
}
.pbn-proscons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--_s4);
}
.pbn-pros, .pbn-cons {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: var(--_radius-lg);
    padding: var(--_s4) var(--_s5);
}
.pbn-pros { border-left: 4px solid var(--_success); }
.pbn-cons { border-left: 4px solid var(--_danger); }
.pbn-proscons h4 {
    font-family: var(--_font-h);
    margin: 0 0 var(--_s3);
    font-size: 1.05rem;
}
.pbn-proscons ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--_s2);
}
.pbn-proscons li {
    display: flex;
    align-items: flex-start;
    gap: var(--_s2);
    line-height: 1.4;
}
.pbn-pc-icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    margin-top: .12em;
}
.pbn-pros .pbn-pc-icon { fill: var(--_success); }
.pbn-cons .pbn-pc-icon { fill: var(--_danger); }
.pbn-pc-empty { color: var(--_muted); }

/* --------------------------------------------------------------------------
   Comparison table (responsive)
   -------------------------------------------------------------------------- */
.pbn-compare-wrap {
    margin: var(--_s6) 0;
    overflow-x: auto;
    border-radius: var(--_radius-lg);
    border: 1px solid var(--_border);
}
.pbn-compare-wrap:focus-visible {
    outline: 3px solid var(--_accent);
    outline-offset: 2px;
}
.pbn-compare {
    width: 100%;
    border-collapse: collapse;
    background: var(--_bg);
    font-size: .95rem;
}
.pbn-compare caption {
    text-align: left;
    font-weight: 700;
    font-family: var(--_font-h);
    padding: var(--_s3) var(--_s4);
    color: var(--_ink);
}
.pbn-compare th,
.pbn-compare td {
    padding: var(--_s3) var(--_s4);
    text-align: left;
    border-bottom: 1px solid var(--_border);
    vertical-align: middle;
}
.pbn-compare thead th {
    background: var(--_accent);
    color: var(--_ink-on-accent);
    font-family: var(--_font-h);
    white-space: nowrap;
}
.pbn-compare tbody th[scope="row"] {
    font-weight: 800;
    color: var(--_ink);
    background: var(--_surface);
}
.pbn-compare tbody tr:nth-child(even) td { background: var(--_surface); }
.pbn-compare a.pbn-aff { color: var(--_accent-2); font-weight: 700; }

/* Stack the comparison table on narrow screens */
@media (max-width: 640px) {
    .pbn-compare-wrap { overflow-x: visible; border: 0; }
    .pbn-compare caption { padding-left: 0; }
    .pbn-compare thead { display: none; }
    .pbn-compare,
    .pbn-compare tbody,
    .pbn-compare tr,
    .pbn-compare th,
    .pbn-compare td { display: block; width: 100%; }
    .pbn-compare tr {
        border: 1px solid var(--_border);
        border-radius: var(--_radius-lg);
        margin-bottom: var(--_s4);
        overflow: hidden;
    }
    .pbn-compare tbody th[scope="row"] {
        font-size: 1.1rem;
        border-bottom: 2px solid var(--_border);
    }
    .pbn-compare td {
        display: flex;
        justify-content: space-between;
        gap: var(--_s4);
        text-align: right;
    }
    .pbn-compare td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--_muted);
        text-align: left;
    }
    .pbn-compare td:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Affiliate CTA / bonus box
   -------------------------------------------------------------------------- */
.pbn-cta {
    background: linear-gradient(135deg, var(--_accent), var(--_accent-2));
    color: var(--_ink-on-accent);
    border-radius: var(--_radius-lg);
    box-shadow: var(--_shadow-lg);
    padding: var(--_s6);
    margin: var(--_s6) 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--_s5);
}
.pbn-cta-headline {
    font-family: var(--_font-h);
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 var(--_s1);
    color: var(--_ink-on-accent);
}
.pbn-cta-bonus {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
    color: var(--_ink-on-accent);
}
.pbn-cta-terms {
    margin: var(--_s2) 0 0;
    font-size: .8rem;
    opacity: .9;
}
.pbn-cta-action { align-self: center; }
.pbn-cta .pbn-btn-cta {
    background: var(--_ink-on-accent);
    color: var(--_accent-2);
    font-size: 1.1rem;
    padding: var(--_s4) var(--_s8);
    box-shadow: var(--_shadow);
}
.pbn-cta .pbn-btn-cta:hover { background: var(--_surface); }
.pbn-rg-microcopy {
    grid-column: 1 / -1;
    margin: var(--_s3) 0 0;
    font-size: .78rem;
    font-weight: 600;
    opacity: .95;
    text-align: center;
    color: var(--_ink-on-accent);
}

/* --------------------------------------------------------------------------
   Verdict / summary box
   -------------------------------------------------------------------------- */
.pbn-verdict {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-left: 5px solid var(--_accent);
    border-radius: var(--_radius-lg);
    padding: var(--_s5) var(--_s6);
    margin: var(--_s6) 0;
}
.pbn-verdict-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_s4);
    flex-wrap: wrap;
    margin-bottom: var(--_s3);
}
.pbn-verdict-title {
    font-family: var(--_font-h);
    margin: 0;
    font-size: 1.25rem;
}
.pbn-verdict-body { line-height: 1.6; }
.pbn-verdict-body > :first-child { margin-top: 0; }
.pbn-verdict-body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */
.pbn-toc {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: var(--_radius-lg);
    padding: var(--_s3) var(--_s5);
    margin: var(--_s6) 0;
}
.pbn-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--_s3);
    background: none;
    border: 0;
    padding: var(--_s2) 0;
    cursor: pointer;
    color: var(--_ink);
    font-family: var(--_font-h);
}
.pbn-toc-title {
    font-size: 1.05rem;
    font-weight: 800;
}
.pbn-toc-caret {
    width: .7em;
    height: .7em;
    border-right: 2px solid var(--_muted);
    border-bottom: 2px solid var(--_muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.pbn-toc-toggle[aria-expanded="false"] .pbn-toc-caret { transform: rotate(-45deg); }
.pbn-toc-toggle:focus-visible {
    outline: 3px solid var(--_accent);
    outline-offset: 2px;
}
.pbn-toc-list {
    margin: var(--_s3) 0 var(--_s1);
    padding-left: 1.4em;
    display: grid;
    gap: var(--_s1);
}
.pbn-toc-list[hidden] { display: none; }
.pbn-toc-list a {
    color: var(--_accent-2);
    text-decoration: none;
}
.pbn-toc-list a:hover { text-decoration: underline; }
.pbn-toc-sub {
    list-style: circle;
    margin-left: 1.1em;
    font-size: .95em;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.pbn-breadcrumbs { margin: var(--_s4) 0; font-size: .875rem; }
.pbn-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_s2);
}
.pbn-breadcrumbs a {
    color: var(--_accent-2);
    text-decoration: none;
}
.pbn-breadcrumbs a:hover { text-decoration: underline; }
.pbn-breadcrumbs [aria-current="page"] {
    color: var(--_muted);
    font-weight: 600;
}
.pbn-bc-sep { color: var(--_muted); user-select: none; }

/* --------------------------------------------------------------------------
   Reduced-motion (in-page smooth-scroll is handled in reviews.js, scoped to
   TOC links, so we don't leak a global scroll-behavior onto the whole site)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pbn-toc-caret,
    .pbn-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Small-screen layout tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .pbn-proscons-grid { grid-template-columns: 1fr; }
    .pbn-cta { grid-template-columns: 1fr; text-align: center; }
    .pbn-cta-action { justify-self: stretch; }
    .pbn-cta .pbn-btn-cta { width: 100%; }
    .pbn-operator-head { flex-direction: column; align-items: flex-start; }
}