/*
 * BP Gutenberg Patterns — Stylesheet — v1.2.57
 * All colours are consumed from BP Brand Importer CSS variables.
 * Fallback values are casino-dark defaults used when the importer
 * has not yet been configured.
 *
 * Variable reference (set by bp-brand-importer):
 *   --bp-color-primary    brand primary colour
 *   --bp-color-secondary  brand secondary colour
 *   --bp-color-accent     accent / highlight colour
 *   --bp-color-bg         page background
 *   --bp-color-surface    card / tile surface
 *   --bp-color-text       body text
 *   --bp-color-text-muted muted text
 *   --bp-color-nav-bg     header / nav background
 *   --bp-color-footer-bg  footer background
 *   --bp-color-on-primary text colour to use ON the primary (e.g. button text)
 *   --bp-color-on-surface text colour to use ON the body background
 *   --bp-color-link       body link colour (alias for primary)
 *   --bp-font-body        body font stack
 *   --bp-font-heading     heading font stack
 *   --bp-font-button      button font stack
 *   --bp-border-radius    global border radius
 *   --bp-container-width  max container width
 */

/* ════════════════════════════════════════════
   DEFAULT FALLBACKS (no BP Brand Importer)
   Plain :root values — no self-reference so
   they don't interfere with the CSS generator.
   When the importer is active its wp_add_inline_style
   output loads later and overrides these values.
════════════════════════════════════════════ */
:root {
        /* Fallback palette — used when BP Brand Importer has not yet set brand colours.
           Primary is a vivid red that reads clearly on the dark default background.
           All values are overridden at runtime by the importer's wp_add_inline_style(). */
        --bp-color-primary:    #e53935;   /* vivid red — 5.1:1 on dark bg              */
        --bp-color-secondary:  #c62828;   /* darker red for secondary accents           */
        --bp-color-accent:     #ffd600;   /* golden yellow accent                       */
        --bp-color-bg:         #0f0f1a;   /* near-black page background                 */
        --bp-color-surface:    #1c1c2e;   /* card / tile surface                        */
        --bp-color-text:       #e8eaf6;   /* light body text                            */
        --bp-color-text-muted: #9fa8da;   /* muted / disclaimer text                    */
        --bp-color-on-primary:  #ffffff;  /* text ON the primary button (auto: white)   */
        --bp-color-on-surface:  #ffffff;  /* text ON the dark surface                   */
        --bp-color-link:        #e53935;  /* body link colour — matches primary         */
        --bp-font-body:        'Inter', system-ui, sans-serif;
        --bp-font-heading:     'Inter', system-ui, sans-serif;
        --bp-font-button:      'Inter', system-ui, sans-serif;
        --bp-border-radius:    8px;
        --bp-container-width:  1200px;
        /* Semantic status colours (not set by importer — fixed brand-agnostic tokens) */
        --bp-color-success:    #22c55e;   /* pros / positive indicators               */
        --bp-color-danger:     #ef4444;   /* cons / warning indicators                */
}

/* ════════════════════════════════════════════
   KEYFRAME ANIMATIONS
════════════════════════════════════════════ */

/* Blinking live indicator (green dot) */
@keyframes bp-blink {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.15; }
}

/* Pulsing glow ring around CTA buttons */
@keyframes bp-pulse-ring {
        0%   { box-shadow: 0 0 0 0 var(--bp-color-primary, #cc0000); opacity: 0.8; }
        70%  { box-shadow: 0 0 0 14px var(--bp-color-primary, #cc0000); opacity: 0; }
        100% { box-shadow: 0 0 0 0 var(--bp-color-primary, #cc0000);   opacity: 0; }
}

/* Subtle float for hero elements */
@keyframes bp-float {
        0%, 100% { transform: translateY(0);    }
        50%       { transform: translateY(-8px); }
}

/* Shimmer sweep for bonus amount */
@keyframes bp-shimmer {
        0%   { background-position: -200% center; }
        100% { background-position:  200% center; }
}

/* Badge scale pop on load */
@keyframes bp-pop {
        0%   { transform: scale(0.85); opacity: 0; }
        70%  { transform: scale(1.05);             }
        100% { transform: scale(1);    opacity: 1; }
}

/* Icon spin once on hover */
@keyframes bp-spin-once {
        from { transform: rotate(0deg);   }
        to   { transform: rotate(360deg); }
}

/* Tilt card on hover */
@keyframes bp-tilt {
        0%, 100% { transform: rotate(0deg);    }
        25%       { transform: rotate(-1.5deg); }
        75%       { transform: rotate(1.5deg);  }
}

/* Slide up reveal */
@keyframes bp-slide-up {
        from { transform: translateY(24px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
}

/* Shine sweep — CTA / sticky-CTA / nav primary button
   translateX is relative to the element's own width (100%).
   -100% = fully off-screen left (right edge at button's left edge).
   +100% = fully off-screen right (left edge at button's right edge).
   Staying within that range keeps the compositing layer alive in all
   browsers — elements that start at -200%+ can be skipped entirely. */
@keyframes bp-shine {
        0%        { transform: translateX(-100%); }
        40%, 100% { transform: translateX(100%); }
}

/* ════════════════════════════════════════════
   GLOBAL UTILITY CLASSES
════════════════════════════════════════════ */

/* Screen-reader only */
.bp-sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
}

/* Container alignment */
.bp-container {
        max-width: var(--bp-container-width, 1200px);
        margin-inline: auto;
        padding-inline: clamp(16px, 4vw, 40px);
}

/* ════════════════════════════════════════════
   HERO BANNER
════════════════════════════════════════════ */
.bp-hero {
        position: relative;
        min-height: min(100svh, 640px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
}
/* Default background — overridden when the editor picks a Gutenberg colour (has-background) */
.bp-hero:not(.has-background) {
        background-color: var(--bp-color-bg, #0f0f1a);
}

.bp-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: clamp(48px, 8vw, 96px);
        max-width: 900px;       /* was contentSize:"900px" in block JSON — v1.2.25 */
        margin-inline: auto;
        width: 100%;
        box-sizing: border-box;
}

/* H1 in hero */
.bp-hero .wp-block-heading,
.bp-hero__title {
        font-family: var(--bp-font-heading);
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 800;
        line-height: 1.15;
        text-shadow: 0 2px 12px rgba(0,0,0,.5);
        animation: bp-slide-up .6s ease both;
}
/* Default colour — overridden when the editor picks a text colour */
.bp-hero .wp-block-heading:not(.has-text-color),
.bp-hero__title:not(.has-text-color) {
        /* Adapt to light-theme brands (e.g. Campobet) — use surface contrast var */
        color: var(--bp-color-on-surface, #fff);
}

.bp-hero__subtitle {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
        font-weight: 700;
        margin-block: .75rem 1.5rem;
        animation: bp-slide-up .6s .15s ease both;
}
.bp-hero__subtitle:not(.has-text-color) {
        color: var(--bp-color-primary, #cc0000);
}

/* Trust badge row under hero CTA */
.bp-trust-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        justify-content: center;
        margin-top: 1.5rem;
        animation: bp-slide-up .6s .3s ease both;
}
.bp-trust-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 999px;
        padding: 5px 14px;
        font-size: .8rem;
        font-weight: 600;
        color: var(--bp-color-on-surface, #fff);  /* dynamic brand text — v1.2.57 */
        letter-spacing: .03em;
        animation: bp-pop .5s calc(.1s * var(--i,1)) ease both;
}
.bp-trust-badge svg,
.bp-trust-badge .bp-badge-icon {
        width: 16px; height: 16px;
        flex-shrink: 0;
}

/* Blinking live dot */
.bp-live-dot {
        display: inline-block;
        width: 9px; height: 9px;
        border-radius: 50%;
        background-color: var(--bp-color-success, #22c55e);
        animation: bp-blink 1.4s ease-in-out infinite;
        flex-shrink: 0;
}

.bp-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 999px;
        padding: 5px 14px;
        font-size: .8rem;
        font-weight: 600;
        color: #fff;
        letter-spacing: .03em;
        margin: 0;
        line-height: 1.4;
}

/* ════════════════════════════════════════════
   CTA BUTTON
════════════════════════════════════════════ */
/* Structural button styles — always applied */
.bp-cta-primary .wp-block-button__link,
.bp-cta-primary.wp-block-button__link,
a.bp-btn-primary {
        position: relative !important;
        /* overflow:hidden is the clip for the ::after shine.
           contain:paint is intentionally omitted — browsers can skip
           the compositing layer when the animated element starts fully
           outside the paint-contained area, killing the animation. */
        overflow: hidden !important;
        font-family: var(--bp-font-button) !important;
        font-weight: 800 !important;
        font-size: clamp(.95rem, 2vw, 1.15rem) !important;
        padding: 16px 40px !important;
        border-radius: var(--bp-border-radius, 8px) !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        border: none !important;
        transition: filter .25s ease, transform .25s ease !important;
        text-decoration: none;
}
/* Glass bevel — top-lit / bottom-shadow static overlay on ::before.
   Sits below the moving shine (::after) and the button text thanks to
   CSS paint order: ::before → non-positioned content → ::after.
   The rgba values are low enough that text contrast is never affected.
   Top half: diffuse white highlight (reflected ceiling light).
   Bottom half: subtle shadow (floor bounce).
   The narrow 47–53% crossover is what gives the convex-lens / candy pop
   without looking like a fat gradient slab.                               */
.bp-cta-primary .wp-block-button__link::before,
.bp-cta-primary.wp-block-button__link::before,
a.bp-btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
                180deg,
                rgba(255,255,255,.22)  0%,
                rgba(255,255,255,.10) 47%,
                rgba(0,0,0,.06)       53%,
                rgba(0,0,0,.18)      100%
        );
        pointer-events: none;
}
/* Shine sweep on primary CTA buttons.
   width/height 100% + left/top 0 keeps the element always touching
   the button's visible area so browsers never skip its compositing layer.
   105° gradient gives the diagonal glint without needing skewX math. */
.bp-cta-primary .wp-block-button__link::after,
.bp-cta-primary.wp-block-button__link::after,
a.bp-btn-primary::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(105deg,
                transparent 25%,
                rgba(255,255,255,.55) 50%,
                transparent 75%
        );
        transform: translateX(-100%);
        animation: bp-shine 3s linear infinite;
        pointer-events: none;
        will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
        .bp-cta-primary .wp-block-button__link::after,
        .bp-cta-primary.wp-block-button__link::after,
        a.bp-btn-primary::after { animation: none; }
}
/* Primary CTA colour — uses --bp-color-primary (the brand's main CTA colour,
   typically red/orange) NOT accent. Specificity 0,2,0 beats the brand importer's
   generic .wp-block-button__link rule (0,1,0). Both !important so they also
   beat any importer !important rules on the lower-specificity selector.
   background-image: none resets any gradient the importer injects globally. */
.wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-cta-primary .wp-block-button__link,
.bp-cta-primary.wp-block-button__link,
a.bp-btn-primary {
        background-color: var(--bp-color-primary, #cc0000) !important;
        background-image: none !important;
        /* Use dynamic contrast var so text is readable on both dark AND light primary colours */
        color: var(--bp-color-on-primary, #fff) !important;
}
.bp-cta-primary .wp-block-button__link:hover,
a.bp-btn-primary:hover {
        filter: brightness(1.12) !important;
        transform: translateY(-2px) !important;
}

/* Secondary ghost button — transparent + white border.
   background-image: none ensures the brand importer's global gradient
   (applied to .wp-block-button__link with !important) does not bleed through
   the transparent background-color. */
.bp-cta-secondary .wp-block-button__link,
a.bp-btn-secondary {
        background-color: transparent !important;
        background-image: none !important;
        color: var(--bp-color-on-surface, #fff) !important;
        border: 2px solid var(--bp-color-on-surface, rgba(255,255,255,.55)) !important;
        opacity: 0.8;
        font-weight: 600 !important;
        padding: 14px 32px !important;
        border-radius: var(--bp-border-radius, 8px) !important;
        transition: background .25s ease, border-color .25s ease !important;
        text-decoration: none;
}
.bp-cta-secondary .wp-block-button__link:hover,
a.bp-btn-secondary:hover {
        background-color: rgba(255,255,255,.12) !important;
        border-color: #fff !important;
}

/* T&C disclaimer line */
.bp-terms {
        font-size: .75rem;
        color: rgba(255,255,255,.55);
        margin-top: .75rem;
        line-height: 1.5;
}

/* ════════════════════════════════════════════
   BONUS / OFFER CARD
════════════════════════════════════════════ */
.bp-bonus-card {
        border: 1px solid var(--bp-color-primary, #cc0000);
        border-radius: calc(var(--bp-border-radius, 8px) * 2);
        padding: clamp(24px, 4vw, 48px);
        text-align: center;
        box-shadow: 0 8px 40px rgba(0,0,0,.4);
        overflow: hidden;
        position: relative;
        max-width: 600px;       /* was contentSize:"600px" in block JSON — v1.2.25 */
        margin-inline: auto;
        box-sizing: border-box;
}
/* Default gradient — overridden when editor picks a solid Gutenberg background colour.
   Uses surface → bg (both importer-provided), so no hardcoded demo blues appear. */
.bp-bonus-card:not(.has-background) {
        background: linear-gradient(135deg,
                var(--bp-color-surface, #1c1c2e) 0%,
                var(--bp-color-bg,      #0f0f1a) 100%);
}
.bp-bonus-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top, rgba(255,51,51,.08) 0%, transparent 70%);
        pointer-events: none;
}

.bp-bonus__label {
        font-size: .85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-bottom: .5rem;
}
.bp-bonus__label:not(.has-text-color) {
        color: var(--bp-color-primary, #cc0000);
}

.bp-bonus__amount {
        font-family: var(--bp-font-heading);
        font-size: clamp(2.2rem, 6vw, 4rem);
        font-weight: 900;
        line-height: 1;
        margin-bottom: .5rem;
}
/* Default shimmer — disabled when editor picks a solid text colour */
.bp-bonus__amount:not(.has-text-color) {
        color: var(--bp-color-on-surface, #fff);
        background: linear-gradient(90deg,
                #fff 0%, var(--bp-color-primary, #cc0000) 40%, #fff 80%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: bp-shimmer 3s linear infinite;
}
/* When a colour is chosen: disable shimmer, show solid colour */
.bp-bonus__amount.has-text-color {
        background: none;
        -webkit-text-fill-color: currentColor;
        -webkit-background-clip: unset;
        background-clip: unset;
        animation: none;
}

.bp-bonus__sub {
        font-size: 1rem;
        margin-bottom: 2rem;
}
.bp-bonus__sub:not(.has-text-color) {
        color: rgba(255,255,255,.8);
}

/* ════════════════════════════════════════════
   USP FEATURES GRID
════════════════════════════════════════════ */
.bp-usp-section {
        padding-block: clamp(48px, 6vw, 80px);
}

.bp-usp-section .wp-block-heading,
.bp-section-title {
        font-family: var(--bp-font-heading);
        text-align: center;
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
        font-weight: 800;
        margin-bottom: clamp(24px, 4vw, 48px);
}
.bp-usp-section .wp-block-heading:not(.has-text-color),
.bp-section-title:not(.has-text-color) {
        color: var(--bp-color-text, #e8eaf6);
}

.bp-usp-grid.wp-block-columns {
        gap: 24px;
}

.bp-usp-item {
        border: 1px solid rgba(255,255,255,.07);
        border-radius: calc(var(--bp-border-radius, 8px) * 1.5);
        padding: 28px 20px;
        text-align: center;
        transition: transform .25s ease, box-shadow .25s ease;
}
.bp-usp-item:not(.has-background) {
        background: var(--bp-color-surface, #1c1c2e);
}
.bp-usp-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0,0,0,.3);
}

.bp-icon-wrap {
        width: 64px; height: 64px;
        margin: 0 auto 16px;
        border-radius: 50%;
        /* Single primary colour — no secondary dependency so demo blues never bleed in */
        background: var(--bp-color-primary, #1a237e);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        position: relative;
}

/* Blinking ring around USP icon */
.bp-icon-wrap::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--bp-color-primary, #cc0000);
        animation: bp-pulse-ring 2.5s ease-in-out infinite;
        animation-delay: calc(.3s * var(--i, 0));
}

.bp-usp-item .wp-block-heading {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: .5rem;
}
.bp-usp-item .wp-block-heading:not(.has-text-color) {
        color: var(--bp-color-text, #e8eaf6);
}
.bp-usp-item .wp-block-paragraph,
.bp-usp-item p {
        font-size: .9rem;
        line-height: 1.6;
        margin: 0;
}
.bp-usp-item .wp-block-paragraph:not(.has-text-color),
.bp-usp-item p:not(.has-text-color) {
        color: var(--bp-color-text-muted, #9fa8da);
}

/* ════════════════════════════════════════════
   GAME CARDS
════════════════════════════════════════════ */
.bp-games-section {
        padding-block: clamp(40px, 5vw, 72px);
}

.bp-games-grid.wp-block-columns {
        gap: 16px;
}

.bp-game-card {
        background: var(--bp-color-surface, #1c1c2e);
        border-radius: calc(var(--bp-border-radius, 8px) * 1.5);
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.06);
        transition: transform .25s ease, box-shadow .25s ease;
        cursor: pointer;
}
.bp-game-card:hover {
        transform: translateY(-4px) rotate(.5deg);
        box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.bp-game-card__info {
        padding: 12px 14px;
}
.bp-game-card__title {
        font-weight: 700;
        font-size: .9rem;
        color: var(--bp-color-text, #e8eaf6);
        margin: 0 0 4px;
}
.bp-game-card__provider {
        font-size: .75rem;
        color: var(--bp-color-text-muted, #9fa8da);
        margin: 0;
}
.bp-game-card__rtp {
        font-size: .7rem;
        color: var(--bp-color-primary, #cc0000);
        font-weight: 700;
        margin: 2px 0 0;
}

/* ════════════════════════════════════════════
   QUICK FACTS TABLE
════════════════════════════════════════════ */
.bp-facts-section {
        padding-block: clamp(40px, 5vw, 72px);
        max-width: 860px;       /* was contentSize:"860px" in block JSON — v1.2.25 */
        margin-inline: auto;
        box-sizing: border-box;
}

/* wp:table renders as <figure class="wp-block-table bp-facts-table"><table>...
   Layout/decoration go on the figure; table-specific props on the inner table. */
.wp-block-table.bp-facts-table {
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: calc(var(--bp-border-radius, 8px) * 1.5);
        box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.wp-block-table.bp-facts-table table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--bp-font-body);
        font-size: .95rem;
}
.bp-facts-table th,
.bp-facts-table td {
        padding: 14px 20px;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Colored header row (top). Scoped to THEAD only (v1.2.75) so the accent no
   longer bleeds onto body-row <th> label cells — the left-column color is now
   an opt-in block style ("BP Facts: Accent Column"), keeping this table visually
   consistent with the plain tables the Page Migrator generates by default. */
.bp-facts-table thead th {
        background: var(--bp-color-primary, #1a237e);
        color: var(--bp-color-on-primary, #fff);
        font-weight: 700;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        white-space: nowrap;
}
.bp-facts-table tr:last-child td {
        border-bottom: none;
}
.bp-facts-table tr:nth-child(even) td {
        background: rgba(255,255,255,.025);
}
/* Body-row label cell (first column) — plain by default, regardless of whether
   the markup uses <td> (migrator / full pattern) or <th> (row-header a11y).
   Resets any inherited header styling so <th> body cells look identical to <td>. */
.bp-facts-table tbody td:first-child,
.bp-facts-table tbody th:first-child,
.bp-facts-table td:first-child {
        font-weight: 600;
        color: var(--bp-color-text-muted, #9fa8da);
        width: 40%;
        background: transparent;
        font-size: inherit;
        text-transform: none;
        letter-spacing: normal;
        white-space: normal;
}
.bp-facts-table td:last-child,
.bp-facts-table tbody th:last-child {
        color: var(--bp-color-text, #e8eaf6);
}

/* ── Block-style variants (editor-selectable) ──────────────────────────────
   Registered via register_block_style() in bp-gutenberg-patterns.php, these
   appear in the block editor sidebar under Styles for any Table block. They
   let editors toggle the "primary colors" on the table without touching code:

     • BP Facts: Accent Column  → paints the left/label column with the brand
       primary (the original v1.2.74 look). Opt-in.
     • BP Facts: Minimal        → drops the solid colored header row in favor of
       a lighter underline treatment, for a subtler table.
   Default (no style class) = colored header row + plain body, matching the
   Migrator-generated tables. */

/* Accent Column — colors the first column like a vertical header. Works whether
   the first cell is <td> or <th>. */
.wp-block-table.bp-facts-table.is-style-bp-accent-col tbody tr > *:first-child {
        background: var(--bp-color-primary, #1a237e);
        color: var(--bp-color-on-primary, #fff);
        font-weight: 700;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .08em;
}
/* keep zebra tint off the accent column so it stays a solid brand block */
.wp-block-table.bp-facts-table.is-style-bp-accent-col tbody tr:nth-child(even) > *:first-child {
        background: var(--bp-color-primary, #1a237e);
}

/* Minimal — no solid header fill; primary color used only as an underline. */
.wp-block-table.bp-facts-table.is-style-bp-minimal thead th {
        background: transparent;
        color: var(--bp-color-text, #e8eaf6);
        border-bottom: 2px solid var(--bp-color-primary, #1a237e);
}
.bp-facts-rating {
        color: var(--bp-color-primary, #cc0000);
        font-weight: 800;
}
/* Responsive table wrapper */
.bp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════
   FAQ ACCORDION
════════════════════════════════════════════ */
.bp-faq-section {
        padding-block: clamp(40px, 5vw, 72px);
        max-width: 860px;       /* was contentSize:"860px" in block JSON — v1.2.25 */
        margin-inline: auto;
        box-sizing: border-box;
}

.bp-faq {
        max-width: 780px;
        margin-inline: auto;
}

.bp-faq__item {
        border-bottom: 1px solid rgba(255,255,255,.08);
}
.bp-faq__item:first-child {
        border-top: 1px solid rgba(255,255,255,.08);
}

.bp-faq__question {
        width: 100%;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0;
        font-family: var(--bp-font-body);
        font-size: 1rem;
        font-weight: 600;
        color: var(--bp-color-text, #e8eaf6);
        text-align: left;
        gap: 16px;
        transition: color .2s ease;
}
.bp-faq__question:hover {
        color: var(--bp-color-primary, #cc0000);
}

.bp-faq__icon {
        width: 22px; height: 22px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 2px solid currentColor;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .85rem;
        transition: transform .3s ease;
}
.bp-faq__item.is-open .bp-faq__icon {
        transform: rotate(45deg);
        color: var(--bp-color-primary, #cc0000);
}
.bp-faq__item.is-open .bp-faq__question {
        color: var(--bp-color-primary, #cc0000);
}

.bp-faq__answer {
        overflow: hidden;
        max-height: 0;
        transition: max-height .35s ease, padding .35s ease;
        padding-bottom: 0;
}
.bp-faq__item.is-open .bp-faq__answer {
        max-height: 600px;
        padding-bottom: 20px;
}
.bp-faq__answer p {
        font-size: .95rem;
        line-height: 1.75;
        color: var(--bp-color-text-muted, #9fa8da);
        margin: 0;
}

/* ════════════════════════════════════════════
   PAYMENT METHODS STRIP
════════════════════════════════════════════ */
.bp-payments-section {
        padding-block: clamp(32px, 4vw, 56px);
}

/* ════════════════════════════════════════════
   TRUST & LICENCE BAR
════════════════════════════════════════════ */
.bp-trust-bar {
        padding-block: clamp(24px, 3vw, 40px);
        border-top: 1px solid rgba(255,255,255,.06);
        border-bottom: 1px solid rgba(255,255,255,.06);
}

.bp-trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: .85rem;
        font-weight: 600;
        color: var(--bp-color-text-muted, #9fa8da);
}
.bp-trust-item__icon {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: var(--bp-color-surface, #1c1c2e);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        border: 1px solid rgba(255,255,255,.08);
}

/* ════════════════════════════════════════════
   STICKY BOTTOM CTA BAR
════════════════════════════════════════════ */
.bp-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: var(--bp-color-surface, #1c1c2e);
        border-top: 2px solid var(--bp-color-primary, #cc0000);
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 -4px 24px rgba(0,0,0,.4);
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.4,0,.2,1);
        /* Prevent children from overflowing the bar horizontally */
        overflow: hidden;
        /* Contain to viewport width; avoid 100vw > 100% when scrollbar present */
        max-width: 100vw;
        box-sizing: border-box;
        will-change: transform;          /* GPU-layer hint before slide-up animation — v1.2.25 */
        contain: layout style paint;     /* isolate from rest of page paint */
}
.bp-sticky-cta.is-visible {
        transform: translateY(0);
}
.bp-sticky-cta__text {
        flex: 1;
        font-size: .9rem;
        font-weight: 600;
        color: var(--bp-color-text, #fff);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}
.bp-sticky-cta__text strong {
        color: var(--bp-color-primary, #cc0000);
}
.bp-sticky-cta__btn {
        background-color: var(--bp-color-primary, #cc0000);
        color: var(--bp-color-on-primary, #fff) !important;
        font-family: var(--bp-font-button);
        font-weight: 800;
        font-size: .9rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 10px 24px;
        /* Inherit the main site's button shape (set by GP Customizer / theme CSS).
           Falls back to the BP border-radius token, then a sensible 4px default.
           clip-path covers sites that use polygon cuts instead of border-radius. */
        border-radius: var(--generate-button-border-radius, var(--wp--custom--button--border-radius, var(--bp-border-radius, 4px)));
        clip-path: var(--generate-button-clip-path, var(--bp-button-clip-path, none));
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        position: relative;
        overflow: hidden !important;
        /* contain:paint intentionally omitted — see CTA button comment */
        transition: filter .2s ease;
}
.bp-sticky-cta__btn:hover {
        filter: brightness(1.1);
}
/* Glass bevel on sticky CTA — same top-lit / bottom-shadow as main CTA */
.bp-sticky-cta__btn::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
                180deg,
                rgba(255,255,255,.22)  0%,
                rgba(255,255,255,.10) 47%,
                rgba(0,0,0,.06)       53%,
                rgba(0,0,0,.18)      100%
        );
        pointer-events: none;
}
/* Shine sweep on sticky CTA button — same reliable 100%/100% approach */
.bp-sticky-cta__btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(105deg,
                transparent 25%,
                rgba(255,255,255,.55) 50%,
                transparent 75%
        );
        transform: translateX(-100%);
        animation: bp-shine 3s linear infinite;
        pointer-events: none;
        will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
        .bp-sticky-cta__btn::after { animation: none; }
}
/* Close element — intentionally unstyled.
   HTML is a <button> for accessibility but must look like plain text/icon.
   Hard-reset all browser-default and child-theme button styles. */
.bp-sticky-cta__close {
        /* Reset any theme button styles that would add a background/border */
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        color: rgba(255,255,255,.6);
        font-size: 1.4rem;
        cursor: pointer;
        line-height: 1;
        padding: 4px 6px;
        flex-shrink: 0;
        display: inline-block;
        user-select: none;
        transition: color .2s ease;
}
.bp-sticky-cta__close:hover,
.bp-sticky-cta__close:focus-visible {
        color: #fff;
        outline: 2px solid rgba(255,255,255,.4);
        outline-offset: 2px;
        border-radius: 2px;
}
/* PAGE-saved markup: old Gutenberg content wraps the ✕ in a WP block button
   (<div.wp-block-button.bp-sticky-cta__close><a.wp-block-button__link>).
   Reset all WP/theme button chrome so it looks identical to the native <span>. */
.bp-sticky-cta__close .wp-block-button__link {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        color: rgba(255,255,255,.6) !important;
        font-size: 1.4rem !important;
        padding: 4px 6px !important;
        line-height: 1 !important;
        display: inline-block;
}
.bp-sticky-cta__close .wp-block-button__link:hover {
        color: #fff !important;
        filter: none !important;
        transform: none !important;
        background: none !important;
        background-color: transparent !important;
}

/* ════════════════════════════════════════════
   SECTION DIVIDERS & SPACING
   .bp-section is a wrapper helper. Individual
   section classes (bp-faq-section, etc.) own
   their own padding — no double-stacking.
════════════════════════════════════════════ */
.bp-section {
        padding-block: 0;
}
.bp-section-header {
        text-align: center;
        margin-bottom: clamp(24px, 4vw, 48px);
        max-width: 620px;       /* was contentSize:"620px" in block JSON — v1.2.25 */
        margin-inline: auto;
        width: 100%;
        box-sizing: border-box;
}
.bp-section-header h2,
.bp-section-header .wp-block-heading {
        font-family: var(--bp-font-heading);
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
        font-weight: 800;
        margin: 0 0 .5rem;
}
.bp-section-header h2:not(.has-text-color),
.bp-section-header .wp-block-heading:not(.has-text-color) {
        color: var(--bp-color-text, #e8eaf6);
}
.bp-section-header p {
        font-size: 1rem;
        max-width: 520px;
        margin-inline: auto;
}
.bp-section-header p:not(.has-text-color) {
        color: var(--bp-color-text-muted, #9fa8da);
}

/* Decorative accent underline for section titles */
.bp-section-title::after,
.bp-underline::after {
        content: '';
        display: block;
        width: 52px; height: 3px;
        background: var(--bp-color-primary, #cc0000);
        border-radius: 2px;
        margin: 12px auto 0;
}

/* ════════════════════════════════════════════
   REVIEW SCORE WIDGET
════════════════════════════════════════════ */
.bp-score-widget {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: var(--bp-color-surface, #1c1c2e);
        border: 1px solid var(--bp-color-primary, #cc0000);
        border-radius: calc(var(--bp-border-radius, 8px) * 1.5);
        padding: 12px 20px;
}
.bp-score-widget__num {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--bp-color-primary, #cc0000);
        line-height: 1;
}
.bp-score-widget__label {
        font-size: .8rem;
        color: var(--bp-color-text-muted, #9fa8da);
}
.bp-score-widget__stars {
        color: var(--bp-color-primary, #cc0000);
        font-size: 1.1rem;
        letter-spacing: .1em;
}

/* ════════════════════════════════════════════
   FACTS SECTION LAYOUT
   wp:columns.bp-facts-layout: score widget (fixed)
   + facts table (fluid) side by side on desktop,
   stacked on mobile (handled by isStackedOnMobile).
════════════════════════════════════════════ */
.wp-block-columns.bp-facts-layout {
        align-items: flex-start;
        flex-wrap: wrap;
}
/* Narrow screens: score widget goes full-width and row-layout */
@media (max-width: 640px) {
        .bp-facts-layout .bp-score-widget {
                flex-direction: row;
                width: 100%;
                justify-content: flex-start;
        }
}

/* ════════════════════════════════════════════
   PROS / CONS TWO-COLUMN
════════════════════════════════════════════ */
.bp-pros-cons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
}
@media (max-width: 640px) {
        .bp-pros-cons { grid-template-columns: 1fr; }
}
.bp-pros,
.bp-cons {
        background: var(--bp-color-surface, #1c1c2e);
        border-radius: calc(var(--bp-border-radius, 8px) * 1.5);
        padding: 20px 24px;
}
.bp-pros { border-top: 3px solid var(--bp-color-success, #22c55e); }
.bp-cons { border-top: 3px solid var(--bp-color-danger, #ef4444); }
.bp-pros__title { color: var(--bp-color-success, #22c55e); font-weight: 700; margin-bottom: 12px; }
.bp-cons__title { color: var(--bp-color-danger, #ef4444); font-weight: 700; margin-bottom: 12px; }
.bp-pros ul, .bp-cons ul,
.wp-block-column.bp-pros .wp-block-list,
.wp-block-column.bp-cons .wp-block-list {
        list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.bp-pros li, .bp-cons li {
        display: flex; gap: 8px; align-items: flex-start;
        font-size: .9rem;
        color: var(--bp-color-text-muted, #9fa8da);
        padding-block: 5px;
        line-height: 1.5;
}
.bp-pros li::before { content: '✓'; color: var(--bp-color-success, #22c55e); font-weight: 700; flex-shrink: 0; }
.bp-cons li::before { content: '✗'; color: var(--bp-color-danger, #ef4444); font-weight: 700; flex-shrink: 0; }
/* Title paragraphs in native wp:paragraph blocks */
.wp-block-paragraph.bp-pros__title { color: var(--bp-color-success, #22c55e); font-weight: 700; margin-bottom: 12px; }
.wp-block-paragraph.bp-cons__title { color: var(--bp-color-danger, #ef4444); font-weight: 700; margin-bottom: 12px; }

/* ════════════════════════════════════════════
   EDITOR PREVIEW — FAQ ANSWERS
   Max-height accordion is collapsed on the frontend
   by CSS + JS. In the editor the JS never runs, so
   answers would be invisible and uneditable. Force
   them visible in the block editor canvas only.
════════════════════════════════════════════ */
.editor-styles-wrapper .bp-faq__answer {
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 12px !important;
}


/* ════════════════════════════════════════════
   LIGHT THEME ADAPTATION
   When BP Brand Importer sets --bp-color-on-surface
   to a dark colour (light-background brands like Campobet),
   these rules ensure trust badges, hero overlay layers and
   surface cards look correct instead of white-on-white.
════════════════════════════════════════════ */
/* .bp-trust-badge color merged into base rule above — v1.2.57 */
.bp-trust-badge:not([style]) {
        border-color: rgba(0,0,0,.12);
        background: rgba(0,0,0,.06);
}
/* .bp-underline::after already set in base rule above — removed redundant override v1.2.57 */
/* Body/content link alias — uses --bp-color-link set by CSS generator */
.wp-block-post-content a:not(.wp-block-button__link),
.entry-content a:not(.wp-block-button__link) {
        color: var(--bp-color-link, var(--bp-color-primary, #1a237e));
}
/* ════════════════════════════════════════════
   RESPONSIVE OVERRIDES
════════════════════════════════════════════ */

/* Tablet — 2-up grids (USP 4→2×2, Games 3→2-up) */
@media (min-width: 480px) and (max-width: 782px) {
        .bp-usp-grid.wp-block-columns {
                flex-wrap: wrap !important;
        }
        .bp-usp-grid.wp-block-columns > .wp-block-column {
                flex: 0 1 calc(50% - 12px) !important;
                min-width: 0 !important;
                max-width: calc(50% - 12px) !important;
        }
        .bp-games-grid.wp-block-columns {
                flex-wrap: wrap !important;
        }
        .bp-games-grid.wp-block-columns > .wp-block-column {
                flex: 0 1 calc(50% - 8px) !important;
                min-width: 0 !important;
                max-width: calc(50% - 8px) !important;
        }
}

@media (max-width: 782px) {
        .bp-sticky-cta {
                flex-wrap: wrap;
                gap: 8px;
                padding: 10px 14px;
                /* Hard cap so no child can push the bar wider than the viewport */
                width: 100%;
                box-sizing: border-box;
        }
        .bp-sticky-cta__text {
                font-size: .8rem;
                white-space: normal;
                /* Allow text to shrink below its natural width so the button fits */
                min-width: 0;
                flex-shrink: 1;
        }
        /* Compact button padding on tablet/small desktop */
        .bp-sticky-cta .wp-block-button__link {
                padding: 9px 18px !important;
                font-size: .85rem !important;
        }
        .bp-bonus__amount {
                font-size: clamp(1.8rem, 8vw, 2.5rem);
        }
        .bp-usp-grid.wp-block-columns {
                gap: 16px;
        }
        .bp-facts-table th,
        .bp-facts-table td {
                padding: 10px 12px;
                font-size: .85rem;
        }
        .bp-games-grid.wp-block-columns {
                gap: 12px;
        }
}

/* Mobile phones — button fits on same row as close; text is its own row */
@media (max-width: 480px) {
        .bp-sticky-cta {
                flex-wrap: wrap;
                gap: 6px;
                padding: 8px 12px;
                justify-content: flex-end;
                align-items: center;
        }
        /* Text: full-width top row */
        .bp-sticky-cta__text {
                flex: 0 0 100%;
                order: 1;
                font-size: .76rem;
                white-space: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                /* Limit to 2 lines on tiny screens */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
        }
        /* Button + close: second row, right-aligned */
        .bp-sticky-cta .wp-block-buttons,
        .bp-sticky-cta .wp-block-button {
                order: 2;
                flex: 0 0 auto;
        }
        .bp-sticky-cta .wp-block-button__link {
                padding: 7px 14px !important;
                font-size: .8rem !important;
        }
        .bp-sticky-cta__close {
                order: 3;
                flex: 0 0 auto;
        }
}

/* Very narrow screens (360 px and below) */
@media (max-width: 400px) {
        .bp-sticky-cta__text {
                font-size: .7rem;
                flex: 0 0 100%;
                order: 1;
        }
        .bp-sticky-cta { gap: 4px; padding: 6px 10px; }
        .bp-sticky-cta .wp-block-button__link {
                padding: 6px 12px !important;
                font-size: .76rem !important;
        }
}

/* Trust bar — compact on narrow mobile */
@media (max-width: 480px) {
        .bp-trust-bar__inner { gap: 10px 16px; }
        .bp-trust-item__sub  { display: none; }
        .bp-trust-item__icon { width: 28px; height: 28px; }
}

/* ════════════════════════════════════════════
   GENERATEPRESS COMPATIBILITY
   Ensure our patterns respect GP's grid system.
════════════════════════════════════════════ */
.generate-columns-container .bp-usp-item,
.generate-columns-container .bp-game-card {
        height: 100%;
}
/* ════════════════════════════════════════════
   EDITOR PREVIEW STYLES
   Only applied in the block editor (admin).
════════════════════════════════════════════ */
.is-root-container .bp-sticky-cta {
        /* Show as static in editor so it doesn't float over the canvas */
        position: static !important;
        transform: none !important;
}
.editor-styles-wrapper .bp-hero {
        min-height: 400px;
}


/* ════════════════════════════════════════════
   PAYMENT LOGOS
   Class names used in pattern-payment-strip.php:
   .bp-payment-logos / .bp-payment-logo
════════════════════════════════════════════ */
.bp-payment-strip {
        padding-block: clamp(24px, 3vw, 40px);
}
.bp-payment-strip__label {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--bp-color-text-muted, #9fa8da);
        text-align: center;
        margin-bottom: 16px;
        display: block;
}
.bp-payment-logos {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
        justify-content: center;
        align-items: center;
}
.bp-payment-logo {
        /* Neutral chip that's always visible regardless of brand.
           rgba(255,255,255,.12) gives a slight lift on dark backgrounds
           without clashing on light ones; the stronger border + shadow
           define the chip shape even when surface ≈ page background
           (e.g. Zinx where both are #170c41).                          */
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.25);
        box-shadow: 0 2px 6px rgba(0,0,0,.35);
        border-radius: var(--bp-border-radius, 8px);
        padding: 10px 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: .8rem;
        font-weight: 700;
        color: var(--bp-color-on-surface, #e8eaf6);
        min-width: 80px;
        transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bp-payment-logo:hover {
        border-color: var(--bp-color-primary, #cc0000);
        box-shadow: 0 4px 12px rgba(0,0,0,.45);
        transform: translateY(-2px);
}
.bp-payment-logo__text {
        font-size: .8rem;
        font-weight: 700;
        color: var(--bp-color-on-surface, #e8eaf6);
}
.bp-payment-logo__svg {
        height: 22px;
        width: auto;
}
.bp-payment-strip__note {
        font-size: .72rem;
        color: var(--bp-color-text-muted, #9fa8da);
        text-align: center;
        margin-top: 12px;
}

/* ════════════════════════════════════════════
   IMPORTER FOOTER — PAYMENT PILLS
   bp-brand-importer renders each payment logo inside
   <span class="bp-footer__pill">.

   v1.2.73 — CONTRAST FIX.
   Previous versions forced the logo to a white silhouette
   (filter: brightness(0) invert(1)) on a translucent-white pill.
   That assumed a DARK footer.  On LIGHT-footer brands (e.g. JogoTotal,
   whose footer bg + ghost-button colour are near-white) the white
   silhouette landed on a near-white pill and vanished.

   New strategy — the universal, brand-agnostic treatment used by every
   real checkout / payment strip:
   • Solid WHITE tile with a soft neutral border + subtle shadow.
     Card logos (Visa navy, Mastercard red/orange, bank-transfer blue)
     are ALL designed to sit on white, so they keep AA contrast on ANY
     footer colour — dark or light.  White-bg logo variants simply blend
     seamlessly into the white tile (no ugly "white chip").
   • NO invert/brightness filter → logos render in their real colours.
   • opacity:1 so nothing is washed out.

   Owns the payment-pill look for BOTH light and dark brands, so the
   GeneratePress child theme's payment-pill rule is kept byte-identical
   (see child style.css §5) — no cascade fight, deterministic on 50+ sites.
   Specificity .bp-footer .bp-footer__pill (0,2,0) + !important beats the
   single-class importer rule (0,1,0).
════════════════════════════════════════════ */
.bp-footer .bp-footer__pill {
        background-color: #ffffff !important;
        border: 1px solid rgba(0,0,0,.12) !important;
        border-radius: var(--bp-border-radius, 8px) !important;
        padding: 7px 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.10);
        overflow: hidden;
        transition: box-shadow .2s ease, transform .2s ease;
}
.bp-footer .bp-footer__pill:hover {
        box-shadow: 0 3px 8px rgba(0,0,0,.16);
        transform: translateY(-1px);
}
.bp-footer .bp-footer__pill img {
        /* Real colours — no invert. White-bg variants blend into the tile. */
        filter: none !important;
        height: 24px;
        width: auto;
        max-width: 96px;
        object-fit: contain;
        display: block;
        opacity: 1;
}

/* ════════════════════════════════════════════
   MOBILE HERO — responsive overrides
   Design principle: hero should be content-driven in height on mobile.
   "min-height:100svh" with align-items:center creates a large empty gap
   ABOVE the content (the top half of the viewport is blank), pushing the
   CTA below the fold. Use auto height + generous vertical padding instead —
   the CTA stays above the fold and the hero still feels spacious.
════════════════════════════════════════════ */
@media (max-width: 767px) {
        .wp-block-cover.bp-hero {
                /* Content-driven height — no wasted above-fold space */
                min-height: auto;
                padding-block: clamp(2.5rem, 10svh, 5rem);
        }
        /* Group/section hero variant */
        .wp-block-group.alignfull.bp-hero,
        .wp-block-group.bp-hero {
                min-height: auto !important;
                padding-block: clamp(2.5rem, 10svh, 5rem);
        }
        .wp-block-cover.bp-hero .wp-block-cover__inner-container {
                padding-inline: 16px;
        }
        .bp-hero__title {
                font-size: clamp(1.7rem, 7vw, 2.5rem);
        }
}

/* ════════════════════════════════════════════
   TRUST BAR INNER / LINK CLASSES
════════════════════════════════════════════ */
.bp-trust-bar__inner {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 32px;
        justify-content: center;
        align-items: center;
}
.bp-trust-item__text {
        display: flex;
        flex-direction: column;
}
.bp-trust-item__label {
        font-size: .82rem;
        font-weight: 700;
        color: var(--bp-color-text, #e8eaf6);
        line-height: 1.2;
}
.bp-trust-item__sub {
        font-size: .68rem;
        color: var(--bp-color-text-muted, #9fa8da);
}
.bp-trust-link {
        font-size: .82rem;
        font-weight: 600;
        color: var(--bp-color-text-muted, #9fa8da);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        transition: border-color .18s, color .18s;
        text-decoration: none;
}
.bp-trust-link:hover {
        color: var(--bp-color-text, #e8eaf6);
        border-color: var(--bp-color-text-muted, #9fa8da);
}

/* ════════════════════════════════════════════
   STICKY CTA — blink dot helper
════════════════════════════════════════════ */
.bp-sticky-cta__dot {
        margin-inline-end: 4px;
}

/* .bp-section padding already zeroed above (line ~779) */


/* ════════════════════════════════════════════
   GUTENBERG COLOR PALETTE → BP BRAND CSS VARS
   When an editor picks "BP Accent" from the colour
   sidebar, Gutenberg adds e.g. has-bp-accent-color
   (text) or has-bp-accent-background-color (bg).
   These rules map those generated classes back to
   the BP Brand Importer CSS variables, so changing
   the brand updates the colour everywhere at once.
════════════════════════════════════════════ */

/* Text colours — no !important so inline custom hex can override via style attr */
.has-bp-primary-color     { color: var(--bp-color-primary,    #1a237e); }
.has-bp-secondary-color   { color: var(--bp-color-secondary,  #283593); }
.has-bp-accent-color      { color: var(--bp-color-accent,     #ffd600); }
.has-bp-bg-color          { color: var(--bp-color-bg,         #0f0f1a); }
.has-bp-surface-color     { color: var(--bp-color-surface,    #1c1c2e); }
.has-bp-text-color        { color: var(--bp-color-text,       #e8eaf6); }
.has-bp-text-muted-color  { color: var(--bp-color-text-muted, #9fa8da); }

/* Background colours — no !important so inline custom hex can override via style attr */
.has-bp-primary-background-color    { background-color: var(--bp-color-primary,    #1a237e); }
.has-bp-secondary-background-color  { background-color: var(--bp-color-secondary,  #283593); }
.has-bp-accent-background-color     { background-color: var(--bp-color-accent,     #ffd600); }
.has-bp-bg-background-color         { background-color: var(--bp-color-bg,         #0f0f1a); }
.has-bp-surface-background-color    { background-color: var(--bp-color-surface,    #1c1c2e); }
.has-bp-text-background-color       { background-color: var(--bp-color-text,       #e8eaf6); }
.has-bp-text-muted-background-color { background-color: var(--bp-color-text-muted, #9fa8da); }

/* ════════════════════════════════════════════
   HERO — wp:group (replaced wp:cover)
   .bp-hero already has background-color, min-height,
   display:flex, align-items:center defined above (~line 124).
   These rules handle the layout contract for the inner
   constrained group and full-width alignment.
════════════════════════════════════════════ */

/* Full-width stretch — works inside the bp-full-homepage wrapper */
.wp-block-group.alignfull.bp-hero {
        width: 100%;
        max-width: 100%;
}

/* Inner constrained content group — horizontal padding */
.wp-block-group.bp-hero .wp-block-group.bp-hero__inner {
        padding-inline: clamp(16px, 4vw, 40px);
        width: 100%;
}

/* Editor preview — don't fill the whole canvas height */
.is-root-container .wp-block-group.bp-hero,
.editor-styles-wrapper .wp-block-group.bp-hero {
        min-height: 400px;
}

/* ════════════════════════════════════════════
   BONUS CARD — native block overrides
   The card is now wp:group.bp-bonus-card.
   Inner wp:heading for the amount keeps the shimmer.
   wp:list replaces the raw ul — remove default list gutter.
════════════════════════════════════════════ */

/* Remove wp:group's default padding so our card padding wins */
.wp-block-group.bp-bonus-card {
        padding: clamp(24px, 4vw, 48px) !important;
}

/* Shimmer on the h2 heading — inherits :not(.has-text-color) guard from .bp-bonus__amount above */
.bp-bonus-card .wp-block-heading.bp-bonus__amount {
        font-family: var(--bp-font-heading);
        font-size: clamp(2.2rem, 6vw, 4rem);
        font-weight: 900;
        line-height: 1;
        margin-bottom: .5rem;
}
.bp-bonus-card .wp-block-heading.bp-bonus__amount:not(.has-text-color) {
        color: #fff;
        background: linear-gradient(90deg, #fff 0%, var(--bp-color-primary, #cc0000) 40%, #fff 80%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: bp-shimmer 3s linear infinite;
}
.bp-bonus-card .wp-block-heading.bp-bonus__amount.has-text-color {
        background: none;
        -webkit-text-fill-color: currentColor;
        -webkit-background-clip: unset;
        background-clip: unset;
        animation: none;
}

/* Checklist as wp:list */
.bp-bonus-card .wp-block-list.bp-bonus-checklist {
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
        max-width: 360px;
        margin-inline: auto;
}
.bp-bonus-card .wp-block-list.bp-bonus-checklist li {
        font-size: .92rem;
        color: rgba(255,255,255,.85);
}

/* Center buttons inside bonus card */
.wp-block-group.bp-bonus-card .wp-block-buttons {
        justify-content: center;
}

/* ════════════════════════════════════════════
   GAME CARDS — native block (wp:image) overrides
   The cards are now wp:group.bp-game-card containing:
     wp:image           → thumbnail (replaces .bp-game-card__img-wrap)
     wp:group           → .bp-game-card__info (title, provider, RTP)
     wp:buttons         → .bp-game-card__cta (Play Now)
   The hover scale, card bg, border, and border-radius
   rules above on .bp-game-card still apply unchanged.
════════════════════════════════════════════ */

/* Thumbnail: aspect-ratio container with cover fit */
.bp-game-card .wp-block-image {
        margin: 0;
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
}
.bp-game-card .wp-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: var(--bp-border-radius, 8px) var(--bp-border-radius, 8px) 0 0;
        transition: transform .35s ease;
}
.bp-game-card:hover .wp-block-image img {
        transform: scale(1.06);
}

/* Info group — fix padding regardless of theme wp:group defaults */
.wp-block-group.bp-game-card .wp-block-group.bp-game-card__info {
        padding: 12px 14px !important;
}

/* Title / provider / RTP inside native info group */
.bp-game-card .wp-block-group.bp-game-card__info .wp-block-heading.bp-game-card__title {
        font-size: .9rem;
        font-weight: 700;
        margin: 0 0 4px;
        color: var(--bp-color-text, #e8eaf6);
}
.bp-game-card .wp-block-group.bp-game-card__info .bp-game-card__provider {
        font-size: .75rem;
        color: var(--bp-color-text-muted, #9fa8da);
        margin: 0;
}
.bp-game-card .wp-block-group.bp-game-card__info .bp-game-card__rtp {
        font-size: .7rem;
        font-weight: 700;
        color: var(--bp-color-primary, #cc0000);
        margin: 2px 0 0;
}

/* Play Now buttons wrapper */
.wp-block-buttons.bp-game-card__cta {
        display: flex;
        justify-content: center;
        padding: 0 14px 14px;
}

/* Play Now button link — compact pill style, color from BP vars */
.bp-game-card__cta .wp-block-button__link {
        font-family: var(--bp-font-button);
        font-weight: 800;
        font-size: .85rem;
        padding: 10px 24px;
        border-radius: 999px;
        letter-spacing: .05em;
        text-transform: uppercase;
        transition: filter .2s ease;
}
/* Default background — yields to editor colour (has-background) */
.bp-game-card__cta .wp-block-button__link:not(.has-background) {
        background-color: var(--bp-color-primary, #cc0000);
}
/* Default text — yields to editor colour (has-text-color) */
.bp-game-card__cta .wp-block-button__link:not(.has-text-color) {
        color: #fff;
}
.bp-game-card__cta .wp-block-button__link:hover {
        filter: brightness(1.12);
}

/* ════════════════════════════════════════════
   HERO — force CTA buttons to center
   GP may override the wp:buttons flex-justify
   written in the block's own layout attribute.
════════════════════════════════════════════ */
.bp-hero .wp-block-buttons {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
}

/* Paragraph reset inside trust item text group (native block adds <p>) */
.bp-trust-item__text .wp-block-paragraph,
.bp-trust-item .wp-block-paragraph {
        margin: 0 !important;
        line-height: 1.2 !important;
}
/* 18+ text icon variant */
.bp-trust-item__icon--age {
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: -.01em;
        color: var(--bp-color-primary, #cc0000);
        border: 2px solid var(--bp-color-primary, #cc0000);
}

/* ════════════════════════════════════════════
   BLINK DOT VARIANTS
   .bp-live-dot exists above; these new helpers
   keep color separate so they can be reused.
════════════════════════════════════════════ */
.bp-blink-dot {
        display: inline-block;
        width: 9px; height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        animation: bp-blink 1.4s ease-in-out infinite;
}
.bp-blink-dot--green  { background-color: var(--bp-color-success, #22c55e); }
.bp-blink-dot--yellow { background-color: var(--bp-color-accent, #ffd600); }
.bp-blink-dot--red    { background-color: var(--bp-color-danger, #ef4444); }

/* ════════════════════════════════════════════
   SCORE WIDGET — NATIVE BLOCK OVERRIDES
   The score widget is now a wp:group (block-level div)
   containing wp:heading + wp:group + wp:paragraph blocks.
   These rules correct Gutenberg default margins and
   ensure the flex layout from .bp-score-widget applies.
════════════════════════════════════════════ */

/* Block-level display for wp:group container */
.wp-block-group.bp-score-widget {
        display: flex !important; /* override inline-flex from generic .bp-score-widget rule */
        align-items: center;
}

/* Reset wp:heading default margin inside the score widget */
.bp-score-widget .wp-block-heading.bp-score-widget__num {
        margin: 0 !important;
        padding: 0 !important;
}

/* Details column: stack label rows vertically */
.wp-block-group.bp-score-widget__details {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

/* Reset wp:paragraph margins inside the details column */
.bp-score-widget__details .wp-block-paragraph {
        margin: 0 !important;
        line-height: 1.3;
}

/* Muted style for "Updated YYYY" sub-line */
.bp-score-widget__updated {
        font-size: .72rem;
        color: var(--bp-color-text-muted, #9fa8da);
}

/* ════════════════════════════════════════════
   STICKY CTA — NATIVE BLOCK BUTTON OVERRIDES
   The CTA is now a wp:button.bp-cta-primary.
   bp-cta-primary gives it primary colour + shine.
   These rules shrink it to sticky-bar proportions
   (hero CTA uses clamp sizing; sticky needs fixed).
════════════════════════════════════════════ */

/* Size overrides — sticky context is compact */
.bp-sticky-cta .wp-block-button .wp-block-button__link,
.bp-sticky-cta .wp-block-button__link {
        font-size: .9rem !important;
        padding: 10px 24px !important;
        white-space: nowrap !important;
        letter-spacing: .05em !important;
        transform: none !important; /* prevent hover translateY in fixed bar */
}

/* Reset paragraph margin for the sticky text block */
.bp-sticky-cta .wp-block-paragraph.bp-sticky-cta__text,
p.wp-block-paragraph.bp-sticky-cta__text {
        margin: 0;
}

/* ════════════════════════════════════════════
   TRUST BADGES — NATIVE wp:paragraph OVERRIDES
   .bp-trust-badge is now a wp:paragraph (<p>).
   Reset browser/WP paragraph margins so flex
   layout of .bp-trust-badges works correctly.
════════════════════════════════════════════ */
.bp-trust-badges .wp-block-paragraph.bp-trust-badge {
        margin-block: 0;
        line-height: 1.4;
}

/* ════════════════════════════════════════════
   HERO TITLE — H2 OVERRIDE
   .bp-hero__title is now an H2 (intentional SEO
   decision — H1 goes in the content section).
   The heading rule that targets wp-block-heading
   is already sufficient; this comment explains why
   the CSS targets the class, not the tag name.
════════════════════════════════════════════ */
/* No rule change needed — .bp-hero__title selects by class, tag is irrelevant. */



/* ════════════════════════════════════════════
   LAYOUT CONSTRAINT REPLACEMENTS — v1.2.25
   ─────────────────────────────────────────────
   All layout.contentSize / layout.justifyContent /
   layout.flexWrap / layout.orientation /
   layout.alignItems attributes have been removed
   from block JSON to prevent Gutenberg block
   validation errors ("Block contains unexpected
   or invalid content"). The visual behaviour they
   produced is reproduced here via CSS class
   selectors on our custom className hooks.

   RULE: ONE class per constraint. If the WP block
   editor re-adds a layout sub-property, the CSS
   rule here becomes redundant but harmless.
════════════════════════════════════════════ */

/* .bp-hero__inner max-width / margin-inline merged into base rule above — v1.2.57 */

/* ── Hero buttons row: centred, wrapping, top gap ── */
/* (was justifyContent:"center", flexWrap:"wrap",
      style.spacing.blockGap:"12px", margin-top/bottom) */
.wp-block-buttons.is-layout-flex:where(:not([class])),
.bp-hero .wp-block-buttons,
.wp-block-group.bp-hero__inner .wp-block-buttons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    margin-bottom: 8px;
}

/* .bp-section-header max-width / margin-inline merged into base rule above — v1.2.57 */

/* .bp-facts-section / .bp-faq-section max-width merged into base rules above — v1.2.57 */

/* ── Bonus outer section: max-width 700 px ── */
.bp-bonus-section {
    max-width: 700px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* .bp-bonus-card max-width / margin-inline merged into base rule above — v1.2.57 */

/* ── Bonus card buttons: centred ── */
.bp-bonus-card .wp-block-buttons {
    justify-content: center;
}

/* ── Trust bar inner: flex-wrap + centred ── */
/* (was flexWrap:"wrap", justifyContent:"center", alignItems:"center") */
.bp-trust-bar__inner.wp-block-group,
.wp-block-group.bp-trust-bar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--bp-trust-gap, 16px 24px);
}

/* ── Trust items: nowrap row, centred vertically ── */
/* (was flexWrap:"nowrap", alignItems:"center") */
.bp-trust-item.wp-block-group,
.wp-block-group.bp-trust-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

/* ── Trust item text: vertical stack ── */
/* (was orientation:"vertical", flexWrap:"nowrap") */
.bp-trust-item__text.wp-block-group,
.wp-block-group.bp-trust-item__text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
}

/* ── Payment strip inner: flex wrap centred ── */
/* (was flexWrap:"wrap", justifyContent:"center", alignItems:"center") */
.bp-payment-strip__inner.wp-block-group,
.wp-block-group.bp-payment-strip__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 20px;
}

/* ── Game card CTAs: centred ── */
/* (was justifyContent:"center" on each card's wp:buttons) */
.bp-game-card .wp-block-buttons {
    justify-content: center;
}

/* ── Game section "View All" button row: centred + top gap ── */
/* (was justifyContent:"center", style.spacing.margin.top:"32px") */
.bp-games-section > .wp-block-buttons {
    justify-content: center;
    margin-top: 32px;
}

/* ════════════════════════════════════════════
   BLOCK-EDITOR PREVIEW OVERRIDES
   Ensure the layout CSS above also applies in
   the Gutenberg block editor (iframe context).
════════════════════════════════════════════ */
.editor-styles-wrapper .bp-trust-bar__inner,
.editor-styles-wrapper .bp-trust-item,
.editor-styles-wrapper .bp-trust-item__text,
.editor-styles-wrapper .bp-payment-strip__inner {
    display: flex;
}

/* ════════════════════════════════════════════
   CWV — CORE WEB VITALS OPTIMISATIONS
   ──────────────────────────────────────────
   CLS prevention: reserve space for images /
   dynamic elements before they load so the
   layout does not shift.
   LCP: hero text paints immediately (no img
   dependency); game-card placeholders are
   below the fold and lazy-loaded by WP/PHP.
   INP: the accordion and sticky CTA JS is
   already deferred; here we ensure animations
   and transitions are GPU-accelerated and do
   NOT trigger layout.
════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   HERO — BACKGROUND IMAGE VARIANT (wp:cover)
   .wp-block-cover.bp-hero reuses all .bp-hero
   styles. These rules handle cover-specific
   structural differences.
════════════════════════════════════════════ */

/* Override the cover block's default dim-50 background so the brand variable
   controls it — not the hex value written by Gutenberg's overlayColor attribute. */
.wp-block-cover.bp-hero .wp-block-cover__background {
    background-color: var(--bp-color-bg, #0f0f1a) !important;
    opacity: .55;
}

/* Inner container: full-width; bp-hero__inner provides vertical padding */
.wp-block-cover.bp-hero .wp-block-cover__inner-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* When no image is set yet show brand bg colour */
.wp-block-cover.bp-hero:not([style*="background-image"]) {
    background-color: var(--bp-color-bg, #0f0f1a);
}

/* LCP: cover's native <img> (used for alt text + preloading) */
.wp-block-cover.bp-hero .wp-block-cover__image-background {
    object-fit:      cover;
    object-position: center center;
}

/* Editor preview */
.editor-styles-wrapper .wp-block-cover.bp-hero {
    min-height: 400px;
}

/* ════════════════════════════════════════════
   REVIEW CONTENT / SEO PARAGRAPH SECTION
   id="review" — anchor target for hero CTAs.
   Full-width section, constrained text column.
════════════════════════════════════════════ */

.bp-review-section {
    padding-block: clamp(40px, 6vw, 80px);
    background-color: var(--bp-color-surface, #1c1c2e);
}

/* H1 — centred, editorial */
.bp-review__h1 {
    font-size: clamp(1.65rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: var(--bp-color-text, #e8eaf6);
    margin-bottom: .75rem;
}

/* ── Rating badge row ── */
.bp-review__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 1rem auto 1.75rem;
    flex-wrap: nowrap;
}

/* Score number */
.bp-review__score {
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    color: var(--bp-color-accent, #ffd600);
    margin: 0;
    letter-spacing: -.02em;
}
.bp-review__score-max {
    font-size: .45em;
    font-weight: 600;
    opacity: .65;
    vertical-align: super;
}

.bp-review__meta-text {
    text-align: left;
}
.bp-review__score-label {
    font-size: .95rem;
    font-weight: 700;
    color: var(--bp-color-text, #e8eaf6);
    margin: 0 0 4px;
}
.bp-review__updated {
    font-size: .78rem;
    color: var(--bp-color-text-muted, #9fa8da);
    margin: 0;
}

/* ── Lead paragraph ── */
.bp-review__lead {
    font-size: clamp(.95rem, 2vw, 1.1rem);
    line-height: 1.7;
    color: var(--bp-color-text, #e8eaf6);
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: 2rem;
    text-align: center;
    opacity: .9;
}

/* ── Section headings inside review ── */
.bp-review-section h2.wp-block-heading {
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 700;
    color: var(--bp-color-text, #e8eaf6);
    border-left: 3px solid var(--bp-color-accent, #ffd600);
    padding-left: 12px;
    margin: 2rem 0 .75rem;
}
.bp-review-section h3.wp-block-heading {
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 700;
    color: var(--bp-color-accent, #ffd600);
    margin: 1.5rem 0 .5rem;
}

/* ── Body paragraphs ── */
.bp-review-section .wp-block-paragraph:not([class*="bp-review"]) {
    font-size: clamp(.9rem, 1.8vw, 1rem);
    line-height: 1.75;
    color: var(--bp-color-text, #e8eaf6);
    opacity: .85;
    margin-bottom: 1rem;
    max-width: 720px;
}

/* ── READ MORE SECTION ── collapsed by default ── */
.bp-read-more {
    max-height: 0;
    overflow:   hidden;
    transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    .3s ease;
    opacity:    0;
}
.bp-read-more.is-expanded {
    max-height: 9999px;
    opacity:    1;
}

/* In the editor: always show so it's editable */
.editor-styles-wrapper .bp-read-more {
    max-height: none !important;
    opacity:    1 !important;
    overflow:   visible !important;
}

/* ── READ MORE CONTROLS ── */
.bp-read-more-controls {
    margin-top: 1.5rem;
}
.bp-read-more__btn .wp-block-button__link {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .05em;
    transition: background-color .15s ease, color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bp-read-more { transition: none !important; }
}

/* .bp-sticky-cta will-change + contain merged into base rule above — v1.2.57 */

/* ── Perf: prefer GPU-composited properties for animations ── */
.wp-block-button__link,
.bp-nav-btn {
    will-change: transform, opacity;
}
/* Remove will-change once hover/animation is over to free GPU memory */
.wp-block-button__link:not(:hover):not(:focus),
.bp-nav-btn:not(:hover):not(:focus) {
    will-change: auto;
}

/* ── BTF lazy-reveal: animate transform+opacity (no layout triggers) ── */
.bp-usp-item,
.bp-game-card,
.bp-bonus-card,
.bp-facts-section,
.bp-faq-section,
.bp-payments-section {
    transition: opacity .4s ease, transform .4s ease;
    /* Base state before JS reveals */
}

/* State added by IntersectionObserver in bp-patterns.js */
.bp-usp-item:not(.is-revealed),
.bp-game-card:not(.is-revealed),
.bp-bonus-card:not(.is-revealed) {
    opacity:   0;
    transform: translateY(16px);
}
.bp-usp-item.is-revealed,
.bp-game-card.is-revealed,
.bp-bonus-card.is-revealed,
.bp-facts-section.is-revealed,
.bp-faq-section.is-revealed,
.bp-payments-section.is-revealed {
    opacity:   1;
    transform: none;
}
/* Reduced-motion: skip the animation entirely */
@media (prefers-reduced-motion: reduce) {
    .bp-usp-item,
    .bp-game-card,
    .bp-bonus-card,
    .bp-facts-section,
    .bp-faq-section,
    .bp-payments-section {
        transition: none !important;
        opacity:    1 !important;
        transform:  none !important;
    }
}

/* ════════════════════════════════════════════
   BP BLOCK CUSTOMISATION — PER-BLOCK OVERRIDES
   Written by bp-color-controls.js as inline styles.
   ════════════════════════════════════════════ */

/* Animation kill-switch — set via ⚡ BP Animations panel */
.bp-no-anim,
.bp-no-anim * {
        animation: none !important;
        transition: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   BELT-AND-SUSPENDERS: BP per-block colour → button cascade  (v1.2.39)
   ════════════════════════════════════════════════════════════════════
   ARCHITECTURE (v1.2.39):
   bp-color-controls.js writes CSS vars onto the block WRAPPER element
   via getSaveContent.extraProps (e.g. style="--bp-color-primary:#hex").
   It NEVER touches WP's native style.color.background on the inner <a>.
   This avoids triggering WP's has-background/has-text-color classes,
   which can alter border-radius and change button shape.

   These rules use !important to win over:
     • WP's native inline style.color.background on the <a> (set by WP's
       built-in color picker from previous saves)
     • GeneratePress's navigation link color rules
     • Any theme stylesheet that sets background/color on button links

   Rules only fire when a BP var is present inline on the WRAPPER element,
   not on :root or inherited vars — so unrelated buttons are unaffected.
═══════════════════════════════════════════════════════════════════════ */

/* ── Primary / CTA background color ───────────────────────────────────────── */
[style*="--bp-color-primary"] .wp-block-button__link {
        background-color: var(--bp-color-primary) !important;
        border-color:     transparent !important;
}

/* ── Text color on buttons ─────────────────────────────────────────────────
   Priority order: explicit onPrimary > auto-contrast via onPrimary > #fff
   The --bp-color-on-primary var is auto-computed when primary is set.       */
[style*="--bp-color-primary"] .wp-block-button__link,
[style*="--bp-color-on-primary"] .wp-block-button__link {
        color: var(--bp-color-on-primary, #ffffff) !important;
}

/* User explicitly set "Text" color on this button block */
[style*="--bp-color-text"] .wp-block-button__link {
        color: var(--bp-color-text) !important;
}

/* ── Hover / focus states ──────────────────────────────────────────────────── */
[style*="--bp-color-primary"] .wp-block-button__link:hover,
[style*="--bp-color-primary"] .wp-block-button__link:focus {
        filter:       brightness(1.12) !important;
        border-color: transparent !important;
}

/* ── Accent color → button outline / border ───────────────────────────────── */
[style*="--bp-color-accent"] .wp-block-button__link {
        border: 2px solid var(--bp-color-accent) !important;
}

/* ── Shape preservation ────────────────────────────────────────────────────
   WP adds .has-background to .wp-block-button__link when style.color.background
   is set. In some WP versions this class resets border-radius to 0 or another
   unexpected value. We force it to inherit from the parent so our
   --bp-border-radius CSS var (set via bpBorder panel) propagates correctly.  */
.wp-block-button__link.has-background {
        border-radius: inherit;
}

/* ── Width control ─────────────────────────────────────────────────────────── */
.wp-block-buttons [style*="width:100%"] {
        flex: 1 1 100%;
}
.wp-block-buttons [style*="width:100%"] .wp-block-button__link {
        width:      100%;
        text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER — ALL BREAKPOINTS  (v1.2.54)

   FIXES IN THIS VERSION
   ① Sticky header — `overflow-x:hidden` on <body> creates a scroll
     container that silently breaks `position:sticky` in all browsers.
     Override to `overflow-x:clip` (same visual effect, no scroll
     container, sticky works correctly).  Force sticky with !important
     so GP or any other plugin can't override it.
   ② Burger breathing room — the inside-header had 0 right padding so
     the burger icon pressed against the viewport edge.
   ③ Logo smaller & left-aligned — default GP left padding created a
     gap before the logo; logo now sits tighter with a small inset.
     Logo capped at 22 px tall / 100 px wide on mobile.
   ④ Consistent gap between buttons — 8 px gap; buttons don't touch.

   MOBILE LAYOUT  [☰ or left edge]  [Logo]  · · ·  [Log In]  [Sign Up]  [☰]
   GP Free renders the burger inside .mobile-menu-control-wrapper which
   GP itself places at the END of .inside-header in its HTML output, so
   the burger appears on the RIGHT in DOM order. We keep that natural
   order (no order: overrides that broke v1.2.52→v1.2.53) and instead
   make every item FIT and BREATHE properly.

   LAYOUT ARCHITECTURE (GP Free default DOM order, kept as-is)
     .inside-header
       ├─ .site-logo              (logo)
       ├─ .main-navigation        (flat nav — hidden on mobile)
       ├─ .bp-nav-buttons         (Log In + Sign Up)
       └─ .mobile-menu-control-wrapper  (burger — GP puts it last)
════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FIX ① — STICKY HEADER (always visible, consistent padding)

   Problem A: `overflow-x:hidden` on <body> creates a scroll
   container that silently breaks position:sticky in ALL browsers.
   Fix: `overflow-x:clip` — visually identical, no scroll container.

   Problem B: WP admin bar offset.
   When logged in, WP sets `html { margin-top: 32px }` (46px on
   mobile). WP's own admin-bar JS removes this margin on scroll and
   sets the sticky header's `top` to 0, making the header slam into
   the very top of the viewport with no breathing room.
   Fix: `body.admin-bar .site-header { top: 32px }` — keeps the
   header below the admin bar at all scroll positions. Front-end
   visitors (not logged in) never see the admin bar so top:0 is fine.

   Problem C: GP's "shrink on scroll" feature.
   GP Free adds `.header-scroll` / `.sticky-header` to body or
   `.site-header` on scroll, which can reduce inside-header padding
   to 0. We lock the padding on ALL states with !important.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
    overflow-x: clip !important;
}

/* Always sticky — all scroll states */
.site-header {
    position:                sticky !important;
    top:                     0 !important;
    z-index:                 1000 !important;
    backdrop-filter:         blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Admin bar offset — desktop only.
   On desktop (≥783px) the WP admin bar is always visible and 32px tall,
   so the sticky header must sit below it. `top:32px` is correct and
   matches what WP's JS sets on scroll.

   On mobile (≤782px) WP HIDES the admin bar on scroll by translating
   it off-screen (`transform: translateY(-100%)`), but the bar still
   occupies layout space. Our `top: 46px` would create a 46px transparent
   gap between the viewport edge and the header. Solution: `top: 0` on
   mobile — the header sticks to the very top of the viewport, the admin
   bar slides away above it and the gap disappears.

   Front-end visitors (not logged in) never have .admin-bar on <body>
   so these rules never fire for them; they always get top:0. */
body.admin-bar .site-header {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 0 !important;   /* mobile: admin bar hides on scroll → no gap */
    }
}

/* Lock inside-header padding against GP shrink classes.
   Target every state GP Free or Premium might apply:
   .header-scroll, .sticky-header, .header-shrunk, .scrolled.
   This ensures padding never collapses regardless of scroll position. */
.site-header .inside-header,
.header-scroll .site-header .inside-header,
.sticky-header .site-header .inside-header,
.header-shrunk .inside-header,
.scrolled .site-header .inside-header,
.site-header.header-shrunk .inside-header,
.site-header.sticky-header .inside-header {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
    min-height:     52px !important;
    box-sizing:     border-box !important;
    align-items:    center !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE  ≤ 768 px
   Goal: [Logo] · · · [Log In] [Sign Up] [☰]
         tight left inset · auto-margin pushes buttons+burger right
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {

    /* Strip GP's default vertical padding from the header shell */
    .site-header {
        padding-top:    0 !important;
        padding-bottom: 0 !important;
    }

    /* Single-row flex — no wrapping on row-1 items.
       Balanced horizontal inset: 10 px left (logo sits close to edge),
       10 px right (burger has breathing room, doesn't hit the border).
       Padding locked with !important on ALL GP scroll/shrink states so
       the bar never collapses when sticky after scroll. */
    .site-header .inside-header,
    .has-inline-mobile-toggle .inside-header,
    .header-scroll .site-header .inside-header,
    .sticky-header .site-header .inside-header,
    .header-shrunk .inside-header,
    .scrolled .site-header .inside-header {
        display:         flex !important;
        flex-wrap:       nowrap !important;
        align-items:     center !important;
        min-height:      52px !important;
        padding-top:     8px !important;
        padding-bottom:  8px !important;
        padding-left:    10px !important;
        padding-right:   10px !important;
        gap:             6px;
        box-sizing:      border-box !important;
    }

    /* Logo — smaller, tight to left edge.
       flex:0 1 auto  → can shrink when needed.
       min-width:0    → allows shrinking past content size.
       max-width caps width so logo never steals space from buttons. */
    .site-header .site-logo,
    .site-header .site-branding {
        flex:      0 1 auto !important;
        min-width: 0 !important;
        max-width: 38vw !important;
        overflow:  hidden;
        padding:   0 !important;
        margin:    0 !important;
    }
    .site-logo img,
    .custom-logo,
    .site-logo a img {
        max-height:  22px !important;   /* compact — brand still clear at 22 px */
        max-width:   100% !important;
        width:       auto !important;
        height:      auto !important;
        object-fit:  contain;
        display:     block;
    }

    /* Buttons — auto left margin pushes them right, gap between buttons */
    .site-header .bp-nav-buttons,
    .has-inline-mobile-toggle .inside-header .bp-nav-buttons {
        display:      flex !important;
        align-items:  center !important;
        gap:          8px !important;
        margin-left:  auto !important;
        flex-shrink:  0;
    }
    .bp-nav-btn {
        height:    var(--bp-nav-btn-h-mobile, 34px) !important;
        padding:   0 var(--bp-nav-btn-px-mobile, .75rem) !important;
        font-size: var(--bp-nav-btn-fs-mobile, .78rem) !important;
    }

    /* Burger — let GP keep it at the natural end (right side).
       Ensure it is always visible, has a proper tap target, and sits
       inside the 10 px right inset we set on inside-header. */
    .mobile-menu-control-wrapper,
    .has-inline-mobile-toggle .inside-header .mobile-menu-control-wrapper {
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        flex-shrink:     0 !important;
        min-width:       44px !important;
        min-height:      44px !important;
        margin-left:     0 !important;
        padding:         0 !important;
    }
    .mobile-menu-control-wrapper .menu-toggle {
        display:    flex !important;
        visibility: visible !important;
        min-width:  44px !important;
        min-height: 44px !important;
        padding:    0 !important;
    }

    /* ── MOBILE NAV — v1.2.71  (verified against real GeneratePress CSS/JS) ──
       FACTS from GP Free source (assets/js/menu.js, assets/css/main.css,
       inc/css-output.php):
       1. GP's JS toggles class `.toggled` on the <nav> — NOT `.toggled-on`
          (that class is only used on sub-menu ULs). Previous versions
          listened for `.toggled-on` on the nav, which never happens —
          that is why the burger animated (icon swap uses `.toggled`)
          but no menu ever appeared.
       2. GP markup nests `.inside-navigation` (position:relative) between
          `.main-navigation` and `.main-nav`, so an absolutely-positioned
          `.main-nav` anchors to that tiny box, not the header. We force
          `.inside-navigation` to position:static so the sticky
          `.site-header` becomes the containing block.
       3. GP mobile hides the closed menu via
          `.main-navigation:not(.toggled) .main-nav > ul { display:none }`
          and shows it via `.main-navigation.toggled .main-nav > ul`.
          We piggyback on the exact same `.toggled` class.
       ─────────────────────────────────────────────────────────────────── */

    /* 1) Nav wrapper stays in the header row — just the burger.
          Overrides GP's `.has-inline-mobile-toggle #site-navigation
          { flex-basis:100% }` so the nav doesn't consume a full row. */
    .main-navigation,
    .has-inline-mobile-toggle .main-navigation,
    .has-inline-mobile-toggle #site-navigation {
        position:    static !important;
        display:     flex !important;
        align-items: center !important;
        width:       auto !important;
        flex:        0 0 auto !important;
        background:  transparent !important;
        margin:      0 !important;
        padding:     0 !important;
        order:       99; /* burger sits last — after Log In / Sign Up */
    }

    /* GP: .inside-navigation is position:relative — kill it so the
       absolute panel anchors to the sticky .site-header instead */
    .main-navigation .inside-navigation {
        position:  static !important;
        display:   flex !important;
        flex-wrap: nowrap !important;
        width:     auto !important;
        padding:   0 !important;
        margin:    0 !important;
    }

    /* 2) Burger — always visible, 44px tap target, no flex-grow
          (GP sets button.menu-toggle { flex-grow:1 }). Covers every GP
          placement: inside .main-navigation (default), or in
          .mobile-menu-control-wrapper. */
    .main-navigation .menu-toggle,
    .inside-header > .menu-toggle,
    .mobile-menu-control-wrapper .menu-toggle {
        display:         inline-flex !important;
        visibility:      visible !important;
        align-items:     center !important;
        justify-content: center !important;
        flex-grow:       0 !important;
        min-width:       44px !important;
        min-height:      44px !important;
        width:           auto !important;
        line-height:     1 !important;
        padding:         0 6px !important;
        margin:          0 !important;
        background:      transparent !important;
        border:          0 !important;
        color:           inherit !important;
        cursor:          pointer;
    }

    /* 3) Closed state — hide the list (mirrors GP's own rule, with
          our specificity so it wins over any display overrides) */
    .main-navigation:not(.toggled) .main-nav {
        display: none !important;
    }

    /* 4) Open state (GP adds .toggled to the nav) — absolute panel
          directly below the sticky header. .site-header is
          position:sticky (set above) = the containing block, so
          top:100% is the bottom edge of the header bar. */
    .main-navigation.toggled .main-nav {
        display:          block !important;
        position:         absolute !important;
        top:              100% !important;
        left:             0 !important;
        right:            0 !important;
        width:            100% !important;
        flex-basis:       auto !important;
        order:            0 !important;
        z-index:          9999 !important;
        background-color: var(--bp-color-nav-bg, var(--bp-color-header-bg, #111111)) !important;
        border-top:       1px solid rgba(255,255,255,.12) !important;
        box-shadow:       0 8px 24px rgba(0,0,0,.55) !important;
        padding:          6px 0 14px !important;
        margin:           0 !important;
        max-height:       calc(100vh - 60px);
        overflow-y:       auto;
        -webkit-overflow-scrolling: touch;
    }

    /* GP's inline-toggle layout adds margin-top to the toggled nav —
       neutralise it (our panel is absolute; margin would shift the
       header row) */
    .has-inline-mobile-toggle #site-navigation.toggled {
        margin-top: 0 !important;
    }

    /* Menu list — element selectors, no class assumptions */
    .main-navigation.toggled .main-nav > ul {
        list-style: none !important;
        margin:     0 !important;
        padding:    0 !important;
        display:    block !important;
        width:      100% !important;
        position:   static !important;
        float:      none !important;
    }

    /* Items stack vertically */
    .main-navigation.toggled .main-nav li {
        display:  block !important;
        width:    100% !important;
        float:    none !important;
        position: static !important;
        clear:    both !important;
        text-align: left !important;
    }

    /* Links */
    .main-navigation.toggled .main-nav a {
        display:         block !important;
        padding:         12px 20px !important;
        color:           var(--bp-color-text-nav, rgba(255,255,255,.85)) !important;
        font-size:       .9rem !important;
        line-height:     1.4 !important;
        text-decoration: none !important;
        border-bottom:   1px solid rgba(255,255,255,.07) !important;
    }
    .main-navigation.toggled .main-nav a:hover,
    .main-navigation.toggled .main-nav a:focus {
        background-color: rgba(255,255,255,.08) !important;
        color:            #fff !important;
    }

    /* Sub-menus — always expanded, static flow, indented
       (overrides GP's visibility:hidden until .toggled-on) */
    .main-navigation.toggled .main-nav ul ul,
    .main-navigation.toggled .main-nav .sub-menu {
        position:   static !important;
        display:    block !important;
        width:      100% !important;
        padding:    0 !important;
        margin:     0 !important;
        left:       auto !important;
        right:      auto !important;
        height:     auto !important;
        opacity:    1 !important;
        visibility: visible !important;
        transform:  none !important;
        box-shadow: none !important;
        overflow:   visible !important;
        pointer-events: auto !important;
        background: transparent !important;
        float:      none !important;
    }
    .main-navigation.toggled .main-nav .sub-menu a {
        padding-left: 36px !important;
        font-size:    .82rem !important;
    }
}

/* Tiny phones ≤ 380 px — hide LOG IN, one CTA only */
@media (max-width: 380px) {
    .bp-nav-btn--secondary {
        display: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET  769–1024 px
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-logo img,
    .custom-logo,
    .site-logo a img {
        max-height: 34px !important;
        width:      auto !important;
    }
    .bp-nav-btn {
        height:    var(--bp-nav-btn-h, 38px) !important;
        padding:   0 var(--bp-nav-btn-px, 1rem) !important;
        font-size: var(--bp-nav-btn-fs, .82rem) !important;
    }
    .bp-nav-buttons { gap: 8px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP  ≥ 1025 px — no !important on logo; GP Customizer wins
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1025px) {
    .site-logo img,
    .custom-logo,
    .site-logo a img {
        max-height: 48px;
        width:      auto;
    }
    .bp-nav-buttons { gap: 10px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HIDE DEFAULT WP SITE TITLE / TAGLINE — v1.2.59
   Brand-protection sites always use a custom imported logo.
   The plain-text site title ("My WordPress Website", casino name,
   or any other string WordPress shows when there is no image logo)
   must NEVER be visible — it breaks the header layout and leaks a
   placeholder / real casino name to visitors before brand import.
   Target every GP Free selector variant for belt-and-braces cover.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-title,
.site-title a,
.site-description,
.site-branding .site-title,
.site-branding .site-title a,
.site-branding .site-description,
.site-header .site-title,
.site-header .site-title a,
.site-header .site-description,
.inside-header .site-title,
.inside-header .site-description {
    display:  none !important;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EDITOR FONT-SIZE CONTROL — make the block Typography → Size control work
   (v1.2.76)
   ------------------------------------------------------------------------
   The section rules above deliberately set an opinionated font-size on headings
   and paragraphs inside BP sections (e.g. `.bp-hero .wp-block-heading`,
   `.bp-usp-section .wp-block-heading`, `.bp-section-header .wp-block-heading`).
   Those selectors have CLASS-level specificity (0,2,0), which outranks the
   preset class WordPress adds when an editor picks a size in the sidebar
   (`.has-large-font-size`, specificity 0,1,0). Net effect reported by the
   client: choosing S / M / L / XL / XXL in the Typography panel did nothing —
   neither on the front end nor in the live editor canvas (this stylesheet is
   also injected into the editor iframe, so the same override blocks it there).

   Fix: re-assert the preset font sizes with a small !important block placed
   LAST in the cascade, so an EXPLICIT editor choice always wins over the
   section default. Values map to the theme.json presets via WordPress's own
   `--wp--preset--font-size--{slug}` custom properties, so fluid clamping and
   any future preset edits stay in lockstep automatically.

   Scope note:
   • Only elements the editor has explicitly tagged with a preset class are
     affected — untagged headings keep their responsive clamp() defaults.
   • Custom (numeric) sizes are emitted by the editor as an inline
     `style="font-size:…"`, which already wins over the non-!important section
     rules, so those needed no help. The one place a custom size could still be
     swallowed is the CTA button (its font-size is !important); that is
     intentional so buttons stay visually consistent across 50+ sites.
   ------------------------------------------------------------------------ */
.has-small-font-size    { font-size: var(--wp--preset--font-size--small) !important; }
.has-medium-font-size   { font-size: var(--wp--preset--font-size--medium) !important; }
.has-large-font-size    { font-size: var(--wp--preset--font-size--large) !important; }
.has-x-large-font-size  { font-size: var(--wp--preset--font-size--x-large) !important; }
.has-xx-large-font-size { font-size: var(--wp--preset--font-size--xx-large) !important; }

/* Line-height pairing (v1.2.77) — the section paragraph/heading rules above set
   an opinionated line-height (e.g. .bp-hero__subtitle inherits a tight value).
   When an editor bumped a paragraph to XL / XXL, the font grew but the old
   line-height stayed put, so consecutive lines OVERLAPPED (reported bug on the
   largest size). A preset size is a deliberate editor choice, so we pair it with
   a matching UNITLESS line-height that scales with the font — no more overlap,
   while smaller sizes keep comfortable body spacing. Unitless keeps it fluid. */
.has-small-font-size    { line-height: 1.5 !important; }
.has-medium-font-size   { line-height: 1.5 !important; }
.has-large-font-size    { line-height: 1.35 !important; }
.has-x-large-font-size  { line-height: 1.2 !important; }
.has-xx-large-font-size { line-height: 1.15 !important; }