/*
Theme Name:   BP GeneratePress Child
Theme URI:    https://adspace.com/
Description:  A premium, performance-first WordPress theme engineered for blazing speed, pixel-perfect design and total flexibility. Built to the highest standards for a flawless front-end experience — best of the best.
Author:       Captain M
Author URI:   https://adspace.com/
Template:     generatepress
Version: 1.3.2
License:      GPL-2.0-or-later
Text Domain:  bp-gp-child
*/

/* ==========================================================================
   BP GeneratePress Child — Brand-driven overrides
   --------------------------------------------------------------------------
   Every value reads from a CSS variable supplied by the BP Brand Importer,
   with a hard-coded dark-casino fallback so the site still looks finished
   BEFORE a brand pack has been imported.
   Fallbacks:  bg #0f0f1a · surface #1c1c2e · accent #ffd600 · text #e8eaf6
               primary #1a237e · secondary #283593 · muted #9fa8da
   ========================================================================== */

:root {
  /* ── Palette fallbacks — overridden by BP Brand Importer ─── */
  --bp-color-bg-fallback:        #0f0f1a;
  --bp-color-surface-fallback:   #1c1c2e;
  --bp-color-accent-fallback:    #ffd600;
  --bp-color-text-fallback:      #e8eaf6;
  --bp-color-primary-fallback:   #1a237e;
  --bp-color-secondary-fallback: #283593;
  --bp-color-muted-fallback:     #9fa8da;

  /* ── Footer payment logo-tile tokens ─────────────────────────────────
     v1.2.51 — SMART PER-LOGO CONTRAST. Earlier versions rendered EVERY logo
     as a dark silhouette (filter:brightness(0)) on a light pill. That was
     legible for transparent-background wordmarks (Visa, Mastercard) but
     DESTROYED self-contained badges: Interac (a gold field with a black
     wordmark) collapsed into a featureless black square.

     The BP Brand Importer (>=1.4.19) now classifies each logo's ink once and
     tags its pill (--onlight / --ondark), so each logo keeps its ORIGINAL
     colours on the chip that gives it contrast:
       • dark / mid / colour ink  → light chip  (Visa blue, Interac gold+black)
       • near-white ink           → dark chip   (Swish, Zimpler white wordmarks)
     Full per-logo rules live in section 5 below. These tokens size/shape the
     chip; --bp-pay-card-bg-dark is the dark-chip surface for white logos.
     The legacy --bp-pay-logo-filter still applies to a pre-1.4.19 importer's
     un-tagged pills so nothing regresses mid-upgrade.                    ── */
  --bp-pay-card-bg:     var(--bp-pay-card-bg-fallback,
                          linear-gradient(180deg, #ffffff 0%, #eef1f5 100%));
  --bp-pay-card-bg-dark: linear-gradient(180deg, #20242c 0%, #14181f 100%);
  --bp-pay-card-border: 1px solid rgba(0, 0, 0, .10);
  --bp-pay-card-radius: var(--bp-border-radius, var(--bp-radius, 12px));
  --bp-pay-card-shadow: 0 1px 3px rgba(0, 0, 0, .35),
                        inset 0 1px 0 rgba(255, 255, 255, .85);
  --bp-pay-logo-h:      24px;
  /* LEGACY only: applies to a pre-1.4.19 importer's un-tagged pills (dark
     silhouette on the light chip). Smart pills override this to `none`. */
  --bp-pay-logo-filter: brightness(0);
}

/* ---- Base ---------------------------------------------------------------- */
body {
  background-color: var(--bp-color-bg, var(--bp-color-bg-fallback));
  color:            var(--bp-color-text, var(--bp-color-text-fallback));
  font-family:      var(--bp-font-body, inherit);
  /* Opt-in texture: set --bp-page-texture on body to add a CSS texture.
     Default none so the Brand Importer's own background is never covered. */
  background-image: var(--bp-page-texture, none);
  /* Prevent elements wider than the viewport from causing a horizontal scrollbar. */
  overflow-x:       hidden;
}

/* ---- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--bp-font-heading, inherit);
  color:       var(--bp-color-text, var(--bp-color-text-fallback));
}

/* ---- Links --------------------------------------------------------------- */
a {
  color: var(--bp-color-accent, var(--bp-color-accent-fallback));
}
a:hover,
a:focus {
  color: var(--bp-color-secondary, var(--bp-color-secondary-fallback));
}

/* ---- Header / Navigation ------------------------------------------------- */
.site-header,
.main-navigation,
.menu-toggle,
.main-navigation .main-nav ul {
  background-color: var(--bp-color-nav-bg, var(--bp-color-surface, var(--bp-color-surface-fallback)));
}
.main-navigation .main-nav ul li a,
.site-header .site-title a,
.site-header .site-description {
  color: var(--bp-color-text, var(--bp-color-text-fallback));
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--bp-color-accent, var(--bp-color-accent-fallback));
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer,
.site-info,
.footer-widgets {
  background-color: var(--bp-color-footer-bg, var(--bp-color-surface, var(--bp-color-surface-fallback)));
  color:            var(--bp-color-text-muted, var(--bp-color-muted-fallback));
}
.site-info a,
.footer-widgets a {
  color: var(--bp-color-accent, var(--bp-color-accent-fallback));
}

/* ---- Containers — full brand width -------------------------------------- */
.inside-container,
.grid-container,
.inside-article,
.site-content .content-area {
  max-width: var(--bp-container-width, 1140px);
}

/* Full-width content when no sidebar (enforced by inc/layout-defaults.php) */
.content-area {
  width: 100%;
}

/* ---- Buttons ------------------------------------------------------------- */
/* Only target explicit CTA classes, never bare <button> elements.
   Bare <button> would catch semantic buttons like .bp-faq__question,
   .menu-toggle, accordion toggles, etc. giving them the accent background.
   wp-block-button__link + gb-button cover all Gutenberg / GenerateBlocks CTAs.
   The brand importer overrides these with !important when a brand pack is set. */
input[type="button"],
input[type="submit"],
.button,
.wp-block-button__link,
.gb-button {
  background-color: var(--bp-color-accent, var(--bp-color-accent-fallback));
  color:            var(--bp-color-bg, var(--bp-color-bg-fallback));
  font-family:      var(--bp-font-button, var(--bp-font-body, inherit));
  border:           none;
  border-radius:    var(--bp-border-radius, var(--bp-radius, 8px));
  font-weight:      700;
  transition:       opacity .2s ease, transform .15s ease;
}
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.gb-button:hover {
  opacity:   .88;
  transform: translateY(-1px);
  color:     var(--bp-color-bg, var(--bp-color-bg-fallback));
}

/* ---- Surfaces / cards ---------------------------------------------------- */
.entry-content table,
.wp-block-table table {
  border-color: rgba(255,255,255,.12);
}

/* ---- Selection ----------------------------------------------------------- */
::selection {
  background: var(--bp-color-accent, var(--bp-color-accent-fallback));
  color:      var(--bp-color-bg, var(--bp-color-bg-fallback));
}

/* ==========================================================================
   BP LANDING LOOK  (applied site-wide, no detection needed)
   --------------------------------------------------------------------------
   Every page on a BP brand-protection site is a landing page, so instead of
   trying to auto-detect BP patterns (which was unreliable) we apply the whole
   landing treatment across the front end:
     1) Paint the fancy, textured brand background edge-to-edge.
     2) Strip the theme's white content wrappers so nothing "blocks" the
        texture (no more flat dark/white rectangles over the background).
     3) Hide the post/article chrome (date, author, category, tags, comments).
   The .bp-landing class (added by inc/bp-landing.php) is kept as an extra hook
   but is no longer required for any of this to work.
   ========================================================================== */

/* ---- 1. Brand background — let the IMPORTED brand background win -----------
   IMPORTANT: this theme no longer paints its own texture/gradient over the
   page. A previous version layered a CSS texture on `body` AND the patterns
   plugin layered one on every section, so once a brand was imported you saw
   TWO textures stacked on top of the brand's own background ("overlapping
   texture"). We now only set the background COLOUR from the brand variable
   (falling back to the dark casino colour before an import), with no texture
   and no !important, so any background the Brand Importer sets always shows
   through cleanly. Want a texture back? Set --bp-page-texture on body.
   body background-color, background-image and overflow-x are set in the
   base "body" rule at the top of this file. */

/* ---- 2. Make every theme content wrapper transparent (kill white + flat
          dark boxes that block the texture) -------------------------------- */
.site-content,
#content,
#primary,
#main,
main,
.content-area,
.container,
.grid-container,
.container.grid-container,
.inside-container,
article,
.inside-article,
.entry-content,
.page-content,
.wp-site-blocks,
.one-container .site-content,
.separate-containers .inside-article,
.separate-containers .content-area,
.separate-containers .paging-navigation,
.hentry {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---- 2b. Optimised, centred content column ------------------------------
   The content area is one CENTRED column (contentSize from theme.json). This
   is what fixes the "patterns not centred / pushed to the left" problem and
   makes normal content you add read as a tidy centred column too. Full-width
   sections (the BP patterns use align:full) break OUT of this column to span
   the whole viewport, so hero/bonus/games still run edge-to-edge. */
.site-content .inside-article,
.site-content .entry-content,
.entry-content {
  margin: 0 auto !important;
  padding: 0 !important;
}
.content-area,
.content-area .grid-container,
.container.grid-container,
.inside-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
/* Normal (non-full) blocks sit in a centred, comfortable column */
.entry-content > *:not(.alignfull):not(.alignwide) {
  max-width: var(--bp-container-width, 1140px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
.entry-content > .alignwide {
  /* v1.2.87 — cap to min(1280px, 100%). When the content column is
     narrower than 1280px (our .inside-article caps at 1200px), a plain
     max-width:1280px block is WIDER than its container; `margin:auto`
     does NOT centre an over-wide block — per CSS it left-aligns it and
     pushes the surplus onto the right margin, so the block overflowed the
     viewport and produced a horizontal scrollbar (seen on .bp-review-section
     and any .alignwide paragraph). min(1280px,100%) never exceeds the
     container, so auto margins resolve to 0/0 and nothing overflows.
     On viewports wide enough for a >=1280px column, behaviour is unchanged. */
  max-width: min(1280px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Full-width sections span the whole viewport, centred, no side gaps */
.entry-content > .alignfull {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* Close the gap GeneratePress leaves between the header and the first section */
.site-content,
#content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---- 3. Hide the post/article chrome the theme adds ----------------------
   Brand sites never show post date/author/category/tags/comments. GeneratePress
   prints all of these inside `.entry-meta` (in both the header and footer), so
   we hide the whole meta block plus the individual links, everywhere on the
   front end (single, page AND the blog/home index). */
.entry-meta,
.posted-on,
.byline,
.author,
.cat-links,
.tags-links,
.comments-link,
.entry-footer,
.post-navigation,
.nav-links,
.comments-area,
#comments,
.comment-respond,
.comments-title,
.comment-form {
  display: none !important;
}

/* Also hide the duplicate post/page title on explicitly tagged landing pages */
body.bp-landing .entry-header .entry-title,
body.bp-landing .page-header,
body.bp-landing .entry-header {
  display: none !important;
}

/* ---- 4. Clean, on-brand buttons (no theme italic/uppercase). No !important
          so per-block colour/typography edits still win. ------------------- */
.wp-block-button .wp-block-button__link {
  text-transform: none;
  font-style: normal;
  letter-spacing: normal;
}


/* ---- 5. Footer payment logos → SMART per-logo contrast chips ---------------
   The BP importer renders the footer as `.bp-footer` with rows:
     .bp-footer__row--payment    → card / wallet logos (Visa, Mastercard …)
     .bp-footer__row--regulatory → language / help / 18+ icons
     .bp-footer__row--other      → Bizum, Juego Seguro/Autorizado, licence seals

   v1.2.51 — SMART CONTRAST. The importer (>=1.4.19) now analyses each payment
   logo's ink ONCE and tags its pill:
     .bp-footer__pill--onlight → logo has dark/mid/colour ink → LIGHT chip.
     .bp-footer__pill--ondark  → logo ink is near-white → DARK chip (so it
                                  does not vanish, e.g. Swish / Zimpler wordmarks).
     .bp-footer__pill--raw     → no chip at all (site set pay-mode = raw).
   In every smart case the logo keeps its ORIGINAL colours (filter:none), so a
   self-contained badge such as Interac (gold field + black wordmark) shows
   exactly as on the source site instead of being crushed to a black square by
   the old blanket `brightness(0)` silhouette. Shape (radius) still follows the
   imported --bp-border-radius so it adapts to every brand.

   LEGACY FALLBACK: a pre-1.4.19 importer emits bare `.bp-footer__pill` with no
   modifier — those keep the old dark-silhouette-on-light behaviour so nothing
   regresses until the whole suite is updated together.
   Payment token variables are defined in the :root block at the top of this file. */

/* Shared chip shell (all payment pills). */
.bp-footer__row--payment .bp-footer__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-pay-card-bg);
  border: var(--bp-pay-card-border);
  border-radius: var(--bp-pay-card-radius);
  padding: .5rem 1.1rem;
  min-height: calc(var(--bp-pay-logo-h) + 1.4rem);
  min-width: 76px;
  box-shadow: var(--bp-pay-card-shadow);
  box-sizing: border-box;
}
.bp-footer__row--payment .bp-footer__pill img {
  height: var(--bp-pay-logo-h);
  max-width: 100px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  display: block;
  color: #101523; /* fallback for inline SVGs using fill="currentColor" */
}

/* LEGACY (old importer, bare pill, no modifier): keep the silhouette so a
   white wordmark can never disappear before the importer half of the suite is
   updated. Smart pills below override this back to full colour. */
.bp-footer__row--payment .bp-footer__pill img {
  filter: var(--bp-pay-logo-filter, brightness(0));
}

/* SMART pills keep ORIGINAL colours (scoped to beat the legacy rule's
   specificity, and placed later in the cascade). */
.bp-footer__row--payment .bp-footer__pill--onlight img,
.bp-footer__row--payment .bp-footer__pill--ondark img,
.bp-footer__row--payment .bp-footer__pill--raw img {
  filter: none;
}

/* Dark chip for near-white logos so they stay visible with their real colours. */
.bp-footer__row--payment .bp-footer__pill--ondark {
  background: var(--bp-pay-card-bg-dark,
                linear-gradient(180deg, #20242c 0%, #14181f 100%));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Raw mode: no chip — logos exactly as the source ships them. */
.bp-footer__row--payment .bp-footer__pill--raw,
.bp-footer__row--pay-raw .bp-footer__pill {
  background: none;
  border: 0;
  box-shadow: none;
  padding: .25rem .4rem;
  min-height: 0;
  min-width: 0;
}
.bp-footer__row--pay-raw .bp-footer__pill img {
  filter: none;
}

/* INK MODE (logo color / silhouette) — independent of chip style.
   Site-wide switcher (v1.4.23+) gives two independent controls: chip style
   (auto/light/dark/raw) and logo ink (native/white/black).

   IMPORTANT — specificity (fixed v1.2.54): these rules MUST beat the SMART pill
   rules above (`.bp-footer__row--payment .bp-footer__pill--onlight img{filter:none}`,
   3 classes). A 2-class `.bp-footer__row--ink-white .bp-footer__pill img` selector
   LOSES that cascade, so "White silhouette" appeared to do nothing. We therefore
   qualify each ink rule with `.bp-footer__row--payment` (compound, 3 classes) AND
   add `!important`, so the forced ink mode always wins on the front end. (Dark-footer
   brands additionally need the ink-aware `!important` rules in inc/nav-contrast.php,
   which are even higher specificity — this file alone can't override those.) */

/* Native ink: keep brand colors (Visa blue, Mastercard red/orange, Interac gold).
   Matches the smart-pill default (filter:none) but forced so ink-native always
   beats any legacy/bare-pill brightness(0) silhouette. */
.bp-footer__row--payment.bp-footer__row--ink-native .bp-footer__pill img {
  filter: none !important;
}

/* White silhouette: for dark footers or monochrome aesthetic. Crush to black then
   invert to white. Works on any chip (auto/light/dark/raw). */
.bp-footer__row--payment.bp-footer__row--ink-white .bp-footer__pill img {
  filter: brightness(0) invert(1) !important;
}

/* Black silhouette: for light footers or forced monochrome. */
.bp-footer__row--payment.bp-footer__row--ink-black .bp-footer__pill img {
  filter: brightness(0) !important;
}


/* ---- Header nav buttons (Login / Register) ----------------------------------
   Styled from BP Brand Importer CSS variables — automatically matches every
   brand. Text + links are set in Appearance → Customize → BP Header Buttons.
   Button 1 (secondary): ghost/outline pill — draws attention without screaming.
   Button 2 (primary):   solid primary colour — the main conversion CTA.
   Hook: generate_header @priority 20 → appended inside .inside-header after GP's branding+nav.
   Desktop: logo | [nav items (GP auto-margin pushes nav right)] | [Log In][Sign Up]
   Mobile:  logo | [Log In][Sign Up] | [☰]  (CSS flex-order re-slots buttons)
   -------------------------------------------------------------------------- */
.bp-nav-buttons {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  margin-left: .75rem;   /* desktop: small gap after the last nav item */
  flex-shrink: 0;
}

/* Shared shape — follows the imported border-radius and text style.
   !important on display / height / font-size / padding prevents GP Free's
   .main-navigation ul li a rules (which target all header links) from
   overriding the button appearance. */
.bp-nav-btn {
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content: center !important;
  height:         var(--bp-nav-btn-h, 40px) !important;
  padding:        0 var(--bp-nav-btn-px, 1.1rem) !important;
  font-family:    var(--bp-font-button, inherit);
  font-size:      var(--bp-nav-btn-fs, .85rem) !important;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space:    nowrap;
  text-decoration: none;
  border-radius:  var(--bp-border-radius, var(--bp-radius, 6px));
  transition:     filter .15s ease, transform .1s ease, background-color .15s ease;
  line-height:    1;
}
.bp-nav-btn:hover {
  filter:    brightness(1.18);
  transform: translateY(-1px);
}
.bp-nav-btn:active {
  transform: none;
  filter:    brightness(.95);
}
.bp-nav-btn:focus-visible {
  outline:        3px solid var(--bp-color-accent, #ffd600);
  outline-offset: 2px;
}

/* Secondary / Login — outlined ghost */
.bp-nav-btn--secondary {
  background:  rgba(255, 255, 255, .10) !important;
  color:       var(--bp-color-text, #ffffff) !important;
  border:      1px solid rgba(255, 255, 255, .40) !important;
}
.bp-nav-btn--secondary:hover {
  background: rgba(255, 255, 255, .20) !important;
  color:      var(--bp-color-text, #ffffff) !important;
}

/* Primary / Register — solid brand colour.
   !important prevents GP Free's nav link rules from overriding background.
   Fallback #1565c0 (visible medium blue) used before a brand pack is imported. */
.bp-nav-btn--primary {
  background: var(--bp-color-primary, #1565c0) !important;
  color:      var(--bp-color-on-primary, var(--bp-color-text, #ffffff)) !important;
  border:     1px solid transparent !important;
  position:   relative;  /* required for ::after shine sweep */
  overflow:   hidden;
  /* contain:paint is the reliable GPU-compositor-level clip for the shine
     pseudo-element. overflow:hidden alone can fail when the child uses
     CSS transforms (animated skew/translate), because some browsers
     rasterise the animated layer before applying the overflow clip. */
  contain:    paint;
}
.bp-nav-btn--primary:hover {
  color: var(--bp-color-on-primary, var(--bp-color-text, #ffffff)) !important;
  background: var(--bp-color-primary, #1565c0) !important;
  filter: brightness(1.18);
}

/* Mobile (≤768px): re-order so the row reads:
   logo | [Log In][Sign Up] | ☰
   GP uses .site-logo (not .site-branding) and splits the navigation into two:
     .mobile-menu-control-wrapper  — the hamburger toggle (stays on row 1)
     #site-navigation              — the full menu drawer (row 2, opens on tap)
   GP's own rule ".has-inline-mobile-toggle .inside-header > .main-navigation
   { flex-basis: 100% }" has higher specificity (3 classes + element) than a
   class-only selector, so we need !important on flex to override it for the
   hamburger wrapper. */
@media (max-width: 768px) {
  /* Safety: never let a wide logo/button cluster push a horizontal scrollbar.
     (Clip only the x-axis so the row-2 menu drawer can still expand vertically.)
     This is the single home for this rule — it used to be duplicated inside the
     SVG logo helper, which also wrongly forced flex-wrap:nowrap and fought GP's
     own inline-toggle wrap; that duplicate was removed in v1.2.40. */
  .has-inline-mobile-toggle .inside-header                               { overflow-x: clip; flex-wrap: nowrap !important; column-gap: 8px; }
  /* Row 1 */
  .has-inline-mobile-toggle .inside-header .site-logo                    { order: 1 !important; flex: 0 0 auto !important; }
  /* Keep the logo compact on phones so the button cluster + hamburger always
     fit on one row (v1.2.63). The pack logo is ~28px tall / ~100px wide; cap the
     width a little tighter on mobile to leave room for the toggle. */
  .has-inline-mobile-toggle .inside-header .site-logo img,
  .has-inline-mobile-toggle .inside-header .site-logo .header-image      { max-width: 84px !important; height: auto !important; }
  /* The account buttons may SHRINK (flex-shrink:1 + min-width:0) so the
     hamburger is never pushed off the right edge. The base rule sets
     flex-shrink:0; on mobile we deliberately let this cluster yield first. */
  .has-inline-mobile-toggle .inside-header .bp-nav-buttons               { order: 2 !important; margin-left: auto; flex: 0 1 auto !important; min-width: 0 !important; }
  /* The hamburger NEVER shrinks and always keeps its slot, so it can no longer
     be clipped by the logo + buttons overflowing the row (v1.2.63 — fixes the
     reported "no burger on mobile" caused by the toggle being pushed past the
     clipped right edge). */
  .has-inline-mobile-toggle .inside-header .mobile-menu-control-wrapper  { order: 3 !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-left: 8px !important; }
  .has-inline-mobile-toggle .inside-header .mobile-menu-control-wrapper .menu-toggle { display: flex !important; }
  /* Row 2 — full-width menu drawer.
     flex-basis MUST be auto (not 100%) with flex-grow 0: with flex-wrap:nowrap
     on .inside-header, a 100% basis + grow made #site-navigation claim row-1
     width and — because its closed-state min-content (menu labels) resists
     flex-shrink while the button cluster carried min-width:0 — the buttons
     absorbed ALL the overflow and collapsed to ~21px with clipped labels
     ("LOGARE"/"ÎNREGISTRARE" rendered as tall narrow slivers). Yielding the
     row-1 slot (0 1 auto / width:auto) lets the buttons reach natural width;
     the drawer still opens full-width via GP's toggled-state rules. (v1.2.81) */
  .has-inline-mobile-toggle #site-navigation                             { order: 100 !important; flex: 0 1 auto !important; width: auto !important; }
  /* Hide any duplicate hamburger rendered inside #site-navigation */
  .has-inline-mobile-toggle #site-navigation .menu-toggle                { display: none !important; }
}

/* Mobile: trim the buttons so they fit alongside the logo + hamburger.
   768px matches the GP inline-toggle breakpoint (where the main nav collapses
   and the row becomes: logo | [buttons] | [☰]).
   Values use CSS variables so brand packs can tune them without overriding
   this entire block. */
@media (max-width: 768px) {
  .bp-nav-buttons { gap: .3rem !important; overflow: visible; }
  .bp-nav-btn {
    height:    var(--bp-nav-btn-h-mobile, 34px) !important;
    padding:   0 var(--bp-nav-btn-px-mobile, .6rem) !important;
    font-size: var(--bp-nav-btn-fs-mobile, .72rem) !important;
    letter-spacing: .01em !important;
    /* Labels may still compress on very narrow phones so the row (logo + both
       buttons + hamburger) always fits and the toggle stays visible — but a
       min-width FLOOR (was min-width:0) keeps them readable pills and prevents
       the ~21px collapse-to-sliver when space is tight. On roomy phones the
       floor is irrelevant (buttons reach natural width now that the drawer
       yields its row-1 slot); on <360px they degrade gracefully with an
       ellipsis instead of vanishing. (v1.2.81) */
    min-width: 3.5rem;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Both buttons shown at all sizes — both fit comfortably alongside the logo */

/* ---- Mobile facts-table containment (v1.2.31) ------------------------------
   The migrator emits the quick-facts table as a native wp:table with the frozen
   `.bp-facts-table` class inside a constrained `.bp-facts-section` group. On
   mobile the reported problem was the table "moving to the right" / sitting as a
   narrow, edge-touching box that didn't line up with the rest of the page:
     • the constrained layout squeezed the table into a narrow content column
       instead of filling the section, and
     • the frozen `th{white-space:nowrap}` forces wide headers, so any table with
       longer labels/extra columns overflows horizontally and shifts.
   We cannot touch the frozen pattern CSS, so we override from the child theme
   (higher specificity + a mobile media query, which loads after the pattern CSS):
   let the table fill the section, give the section a small side gutter so it
   aligns with the other blocks, allow header labels to wrap, and tighten cell
   padding so the columns fit without a jarring horizontal scroll. `overflow-x`
   stays available on the frozen figure as a last resort for genuinely wide data. */
@media (max-width: 768px) {
  .bp-facts-section {
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box;
  }
  /* GeneratePress lays out content in a flex row (.site-content) whose flex item
     .content-area defaults to min-width:auto — so it refuses to shrink below a
     wide table's min-content and expands the ENTIRE page past the viewport
     (mobile layout zooms out). min-width:0 lets the content column shrink back to
     the viewport, so the table's overflow-x scroll container actually contains it
     and the table scrolls inside its own box instead of widening the page. */
  .site-content,
  .content-area,
  #primary,
  .inside-article,
  .entry-content {
    width: 100% !important;       /* prevent flex-item collapse to min-content when margin:auto is set */
    min-width: 0 !important;
    max-width: 100% !important;   /* cap the flex item to the 390px container so a wide
                                     table can't stretch it to content width and widen the page */
    overflow-x: clip;             /* belt-and-braces: any residual overflow is clipped, not
                                     propagated to the page (the table's own figure still scrolls) */
  }
  /* v1.2.83 — make the facts table (and any wp:table) genuinely SCROLLABLE on
     mobile instead of cramming. The old approach (width:100% + table-layout:fixed)
     forced every column to an equal sliver; with the frozen th/td nowrap the text
     then overflowed the fixed cells and OVERLAPPED (unreadable). Correct pattern:
     the figure is the horizontal-scroll container, the inner table keeps NATURAL
     column widths (table-layout:auto) with a min-width so wide multi-column tables
     scroll sideways inside their own box, and cells WRAP so nothing ever overlaps. */
  .bp-facts-section > .wp-block-table.bp-facts-table,
  .wp-block-table.bp-facts-table,
  .wp-block-table {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .wp-block-table.bp-facts-table table,
  .wp-block-table table {
    width: 100% !important;
    min-width: 600px !important;    /* exceeds phone width => horizontal scroll, columns stay readable */
    table-layout: auto !important;  /* natural column sizing; replaces the cramming 'fixed' layout */
  }
  .wp-block-table.bp-facts-table th,
  .wp-block-table.bp-facts-table td,
  .bp-facts-table th,
  .bp-facts-table td,
  .wp-block-table th,
  .wp-block-table td {
    white-space: normal !important;   /* override frozen nowrap so cells wrap, never overlap */
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    padding: 10px 12px !important;
  }
}

/* ---- Shine sweep — header primary (Sign Up) button ----------------------
   A white-gloss diagonal sweeps across the button every ~3 s.
   The pseudo-element is 200 % wide and oversized vertically so a slight
   skew never clips at the edges. Keyframes: sweep across in the first 40 %
   of the cycle (≈ 1.2 s), then pause off-screen right for the rest.
   Disabled for users who prefer reduced motion.
   -------------------------------------------------------------------------- */
@keyframes bp-shine {
  0%        { transform: translateX(-200%) skewX(-15deg); }
  40%, 100% { transform: translateX(200%)  skewX(-15deg); }
}
.bp-nav-btn--primary::after {
  content:    '';
  position:   absolute;
  top:        -50%;
  left:       -50%;
  width:      200%;
  height:     200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:  bp-shine 3s linear infinite;
  pointer-events: none;
  /* No clip-path here — containment is handled by contain:paint on the
     parent (.bp-nav-btn--primary), which clips at compositor level. */
}
@media (prefers-reduced-motion: reduce) {
  .bp-nav-btn--primary::after { animation: none; }
}



/* ══════════════════════════════════════════════════════════════════════════════
   STICKY HEADER — desktop + mobile
   GP Free does not offer a sticky-header Customizer toggle; we add it via CSS.
   z-index 1000 ensures the header sits above GeneratePress's off-canvas panel
   (z-index 999) and our sticky CTA bar (z-index 9999 is intentionally higher —
   the CTA floats above the header, as expected).
   backdrop-filter gives a frosted-glass feel when the page scrolls underneath.
══════════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   INSIDE-HEADER — explicit flex so order: n works on all GP versions
   GP already sets display:flex in most layouts; this guard ensures it even
   when a child theme or page-builder resets the element.
══════════════════════════════════════════════════════════════════════════════ */
.inside-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BURGER / MOBILE MENU TOGGLE — contrast colours
   GP's .menu-toggle uses an SVG hamburger icon rendered via currentColor.
   Without an explicit colour it inherits the nav background, making it
   invisible. Force it to the brand text colour so it's always visible.
══════════════════════════════════════════════════════════════════════════════ */
.menu-toggle {
  color: var(--bp-color-text, #e8eaf6) !important;
  /* Small explicit padding so the tap-target meets the 44px minimum */
  min-width:  44px;
  min-height: 44px;
  display:    flex;
  align-items: center;
  justify-content: center;
}

/* GP v3 uses inline SVG — target the path/rect/line elements */
.menu-toggle svg,
.menu-toggle svg path,
.menu-toggle svg rect,
.menu-toggle svg line,
.menu-toggle svg circle {
  fill:   var(--bp-color-text, #e8eaf6) !important;
  stroke: var(--bp-color-text, #e8eaf6) !important;
  color:  var(--bp-color-text, #e8eaf6) !important;
}

/* GP v2 / classic icon-bar bars */
.menu-toggle .icon-bar {
  background-color: var(--bp-color-text, #e8eaf6) !important;
}

/* GP "open" state label (screen-reader text already has .sr-only; keep visible text consistent) */
.menu-toggle .mobile-menu {
  color: var(--bp-color-text, #e8eaf6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAV BUTTON SHAPE — inherit per-site button design
   --generate-button-border-radius is set by GP Customizer (Colors → Buttons).
   --wp--custom--button--border-radius is the WP theme.json equivalent.
   For sites using clip-path button shapes, set --bp-button-clip-path in the
   Brand Importer settings; the BP Affiliate Tracker extractor can populate it.
══════════════════════════════════════════════════════════════════════════════ */
.bp-nav-btn {
  border-radius: var(--generate-button-border-radius,
    var(--wp--custom--button--border-radius,
    var(--bp-border-radius, 4px))) !important;
  clip-path: var(--bp-button-clip-path, none) !important;
}



/* ══════════════════════════════════════════════════════════════════════════════
   SMART DESKTOP BURGER  (v1.2.30)
   The client wanted the primary menu collapsed behind a SINGLE clean hamburger
   on desktop instead of every item spread flat across the bar. The button is
   injected by bp-header-nav.js into .inside-header; both native GeneratePress
   toggles stay hidden on desktop so the old "two empty burgers" bug (from the
   removed adaptive-overflow script) cannot recur. Clicking the burger adds
   body.bp-desktop-menu-open, which reveals the EXISTING #site-navigation as an
   absolutely-positioned dropdown (no markup is duplicated — the same WordPress
   menu drives both desktop and mobile). On ≤768 px the burger is hidden and
   GeneratePress's native mobile menu takes over unchanged.
══════════════════════════════════════════════════════════════════════════════ */

/* The custom burger is desktop-only; hidden by default (and on mobile). */
.bp-desktop-burger {
  display: none;
}

/* ── Anti-flash gate — measure while hidden, reveal once (v1.2.38) ───────────
   The header has two moving parts that both finish AFTER the initial HTML:
     1. The burger + account buttons are rendered inside .inside-navigation (the
        only GeneratePress hook that reliably fires) and moved to .inside-header
        by a synchronous inline script (before first paint).
     2. bp-header-nav.js measures the bar and decides which primary-menu items
        fit inline vs. overflow behind the burger (priority nav) — this runs
        AFTER first paint.
   Painting the menu first and reshuffling it in step 2 is what produced the
   reported left→right "jumping" on desktop, and the raw-<ul> flash on mobile.

   IMPORTANT: the actual gate now lives in INLINE critical CSS printed in <head>
   by inc/header-buttons.php (bp_gp_child_header_critical_css), NOT here. Earlier
   the gate lived in this external stylesheet, but in WP Playground this file can
   apply a beat AFTER the HTML paints — so the un-gated header flashed (raw menu
   list + unstyled toggle) before the gate took effect. Inlining the gate in
   <head> makes it part of the document itself, so it is guaranteed to apply on
   the very first frame regardless of when this stylesheet loads. The gate hides
   the nav apparatus while <html> lacks .bp-header-ready and reveals it once
   bp-header-nav.js has measured + placed everything. See that PHP file. */

@media (min-width: 769px) {
  /* Keep BOTH GeneratePress toggles hidden — our custom burger replaces them. */
  .mobile-menu-control-wrapper,
  .main-navigation .menu-toggle,
  .site-header .menu-toggle {
    display: none !important;
  }

  /* Anchor for the absolutely-positioned dropdown. */
  .inside-header {
    position: relative;
  }

  /* Custom burger — now the OVERFLOW toggle (v1.2.35). It is hidden by default
     (see the global `.bp-desktop-burger{display:none}` rule) and revealed by
     bp-header-nav.js ONLY when the inline menu has more items than fit between
     the logo and the account buttons. When everything fits, no burger shows and
     the bar reads as a normal inline nav. Colour follows the brand text colour.
         logo  Home  Games  Bonuses  …  [☰] [Log In] [Sign Up]  */
  .bp-desktop-burger {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 0.4rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--bp-border-radius, 6px);
    cursor: pointer;
    color: var(--bp-color-text, #e8eaf6);
    flex: 0 0 auto;
    order: 3; /* sits just before the Login/Sign-Up buttons */
  }
  .bp-desktop-burger:hover,
  .bp-desktop-burger:focus-visible {
    background: rgba(127, 127, 127, 0.14);
    outline: none;
  }
  .bp-desktop-burger svg { display: block; }

  /* Logo pinned left. No auto-margin here — the inline menu below carries
     margin-right:auto, which is the single reliable right-push anchor for the
     burger + account-buttons group (works across every GP markup variant). */
  .inside-header > .site-branding,
  .inside-header > .site-logo {
    order: 1;
    margin-right: 1.25rem;
  }
  .inside-header .bp-nav-buttons {
    order: 4;
    margin-left: 0.4rem;
  }

  /* ── Inline primary menu (v1.2.35) ──────────────────────────────────────
     The menu now renders INLINE in the bar (logo → menu items → burger →
     buttons) instead of being fully collapsed behind the burger. margin-right:
     auto eats the free space to the menu's right, pinning the burger + buttons
     to the far edge:
         logo  Home  Games  Bonuses  …  [☰] [Log In] [Sign Up]
     bp-header-nav.js measures the bar after paint and, ONLY when the items do
     not all fit, moves the trailing (overflow) items into the .bp-more-panel
     dropdown and reveals the burger. Until the script runs (or if JS is off)
     the list simply wraps, so every link stays reachable. */
  #site-navigation.main-navigation {
    display: flex !important;
    align-items: center;
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
    background: transparent !important;
  }
  #site-navigation .inside-navigation {
    display: flex;
    align-items: center;
    padding: 0;
    width: auto;
  }
  #site-navigation .main-nav {
    display: flex;
    width: auto;
  }
  #site-navigation .main-nav > ul {
    display: flex;
    flex-wrap: wrap;      /* no-JS / pre-measure: wrap so nothing is ever lost */
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Once the script has measured the bar it switches to a single row; any items
     that don't fit are relocated into .bp-more-panel by the JS. overflow stays
     VISIBLE so hover/click sub-menu dropdowns can escape the bar vertically (the
     old `overflow:hidden` clipped them). Overflowing top-level items are already
     parked in the burger panel by the time the nav is revealed, so nothing
     spills horizontally. */
  .inside-header.bp-nav-measured #site-navigation.main-navigation { overflow: visible; }
  .inside-header.bp-nav-measured #site-navigation .main-nav > ul { flex-wrap: nowrap; }
  #site-navigation .main-nav > ul li {
    float: none;
    display: block;
    white-space: nowrap;
    margin: 0;
  }
  #site-navigation .main-nav > ul li a {
    display: block;
    padding: 0.5rem 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--bp-color-text, #e8eaf6);
  }
  #site-navigation .main-nav > ul li a:hover,
  #site-navigation .main-nav > ul li.current-menu-item > a {
    color: var(--bp-color-primary, #cc0000);
  }

  /* ── Overflow "more" dropdown (built by bp-header-nav.js) ─────────────────
     Holds ONLY the items that did not fit inline. Opens under the burger when
     body.bp-desktop-menu-open is set. */
  .bp-more-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 12px;
    left: auto;
    margin-top: 6px;
    min-width: 220px;
    max-width: 320px;
    background: var(--bp-color-nav-bg, var(--bp-color-surface, var(--bp-color-surface-fallback, #16181d))) !important;
    border: 1px solid rgba(127, 127, 127, 0.22);
    border-radius: var(--bp-border-radius, 8px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    z-index: 1200;
    padding: 8px;
  }
  body.bp-desktop-menu-open .bp-more-panel { display: block; }
  .bp-more-panel ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bp-more-panel li {
    display: block;
    width: 100%;
    float: none;
    white-space: normal;
  }
  .bp-more-panel li a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    line-height: 1.3;
    color: var(--bp-color-text, #e8eaf6);
  }
  .bp-more-panel li a:hover,
  .bp-more-panel li.current-menu-item > a {
    background: rgba(127, 127, 127, 0.16);
  }

  /* ── Primary-menu SUB-MENUS (v1.2.68) ────────────────────────────────────
     The inline priority+ nav previously had NO sub-menu styling, so parent
     items with children showed nothing on hover/click. These rules give the
     inline items a proper dropdown (revealed on hover, keyboard focus, OR a
     click on the caret button injected by bp-header-nav.js), and render the
     sub-menu of any parent that got PARKED in the .bp-more-panel overflow list
     as a static indented sub-list (so parked parents expose their children
     too). Designed to scale to many top-level items and multi-level menus. */

  /* Parent <li> anchors the absolute dropdown. */
  #site-navigation .main-nav > ul li.menu-item-has-children {
    position: relative;
  }
  /* Top-level parent: keep the label and its caret on ONE line (the link is
     display:block, which would otherwise push the caret button onto a 2nd row). */
  #site-navigation .main-nav > ul > li.menu-item-has-children {
    display: flex;
    align-items: center;
  }
  /* Nested parent: link stays full width, caret pinned to the right edge. */
  #site-navigation .main-nav ul.sub-menu li.menu-item-has-children {
    padding-right: 1.7em;
  }
  #site-navigation .main-nav ul.sub-menu li.menu-item-has-children > .bp-subtoggle {
    position: absolute;
    top: 0;
    right: 0.25em;
    height: 100%;
    margin: 0;
  }

  /* GeneratePress renders its OWN .dropdown-menu-toggle caret in each parent.
     On desktop our injected .bp-subtoggle replaces it, so hide GP's to avoid a
     doubled chevron. (Mobile keeps GP's toggle — see the ≤768px block, where
     our .bp-subtoggle is hidden instead — so there is always exactly one.) */
  #site-navigation .main-nav .dropdown-menu-toggle {
    display: none !important;
  }

  /* Caret toggle button (injected by JS). Sits after the parent link. */
  #site-navigation .main-nav .bp-subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    padding: 0;
    margin: 0 0.1rem 0 -0.15rem;
    vertical-align: middle;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
  }
  #site-navigation .main-nav .bp-subtoggle:focus-visible {
    outline: 2px solid var(--bp-color-primary, #cc0000);
    outline-offset: 2px;
    border-radius: 4px;
  }
  #site-navigation .main-nav .bp-caret {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.15s ease;
    margin-top: -0.18em;
  }
  #site-navigation .main-nav > ul li.menu-item-has-children:hover > .bp-subtoggle .bp-caret,
  #site-navigation .main-nav > ul li.menu-item-has-children:focus-within > .bp-subtoggle .bp-caret,
  #site-navigation .main-nav > ul li.bp-submenu-open > .bp-subtoggle .bp-caret {
    transform: rotate(-135deg);
    margin-top: 0.12em;
  }

  /* The dropdown itself — matches the .bp-more-panel dark surface.
     It is ALWAYS laid out (display:flex) and shown/hidden via visibility+opacity
     so we can animate it AND, crucially, hold a short grace period on hover-out.
     Two problems the old `display:none` toggle caused (reported by the client):
       1. A 6px margin gap between the parent and the dropdown was a dead zone —
          the cursor left :hover before reaching the panel and it snapped shut.
       2. display toggles cannot animate and gave zero travel time.
     Fixes: margin:0 + a padding-top "bridge" (the hoverable box now touches the
     parent, no dead zone), a slide+fade animation, and a .25s delay before the
     panel becomes non-interactive on hover-out (visibility/pointer-events switch
     AFTER the delay) so there is ample time to move onto the sub-items. */
  #site-navigation .main-nav ul.sub-menu {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease,
                visibility 0s linear 0.25s, pointer-events 0s linear 0.25s;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;              /* no dead-zone gap */
    min-width: 200px;
    max-width: 300px;
    flex-direction: column;
    gap: 2px;
    padding: 14px 8px 8px;  /* extra top = transparent hover bridge to the parent */
    list-style: none;
    background: var(--bp-color-nav-bg, var(--bp-color-surface, var(--bp-color-surface-fallback, #16181d))) !important;
    border: 1px solid rgba(127, 127, 127, 0.22);
    border-radius: var(--bp-border-radius, 8px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    z-index: 1300;
  }
  #site-navigation .main-nav > ul li.menu-item-has-children:hover > ul.sub-menu,
  #site-navigation .main-nav > ul li.menu-item-has-children:focus-within > ul.sub-menu,
  #site-navigation .main-nav > ul li.bp-submenu-open > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease,
                visibility 0s, pointer-events 0s;   /* reveal immediately */
  }
  #site-navigation .main-nav ul.sub-menu li {
    float: none;
    display: block;
    width: 100%;
    white-space: normal;
    margin: 0;
  }
  #site-navigation .main-nav ul.sub-menu li a {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.3;
    white-space: normal;
    color: var(--bp-color-text, #e8eaf6);
  }
  #site-navigation .main-nav ul.sub-menu li a:hover,
  #site-navigation .main-nav ul.sub-menu li.current-menu-item > a {
    background: rgba(127, 127, 127, 0.16);
    color: var(--bp-color-primary, #cc0000);
  }
  /* Second-level (and deeper) sub-menus fly out to the side. margin:0 removes the
     horizontal dead zone; the left padding is the transparent hover bridge. */
  #site-navigation .main-nav ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%;
    margin: 0;
    padding: 8px 8px 8px 14px;
  }
  /* A nested caret points sideways (child menu opens to the right). */
  #site-navigation .main-nav ul.sub-menu .bp-caret {
    transform: rotate(-45deg);
    margin-top: 0;
  }
  #site-navigation .main-nav ul.sub-menu li.menu-item-has-children:hover > .bp-subtoggle .bp-caret,
  #site-navigation .main-nav ul.sub-menu li.menu-item-has-children:focus-within > .bp-subtoggle .bp-caret,
  #site-navigation .main-nav ul.sub-menu li.bp-submenu-open > .bp-subtoggle .bp-caret {
    transform: rotate(135deg);
    margin-top: 0;
  }

  /* Parent items PARKED in the overflow burger panel. These render as a vertical
     list, so their children show as an indented sub-list that is COLLAPSED by
     default and revealed on hover / keyboard focus / caret-click — the client
     asked that parked parents behave like the inline ones (sub-items appear on
     hover) instead of being permanently expanded (which made the panel a wall of
     always-open accordions). The caret toggle is shown here (tap/click support). */
  /* GeneratePress renders its OWN .dropdown-menu-toggle caret inside each parent's
     <a>. The hide at ~L967 is scoped to #site-navigation, but the overflow panel is
     a SEPARATE element appended to .inside-header — so GP's toggle survived here,
     producing a SECOND (small) chevron next to our injected .bp-subtoggle. Hide GP's
     inside the panel too, leaving exactly one caret (our .bp-subtoggle). */
  .bp-more-panel .dropdown-menu-toggle {
    display: none !important;
  }
  .bp-more-panel .bp-subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2px;
    right: 4px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
  }
  .bp-more-panel li.menu-item-has-children {
    position: relative;
  }
  .bp-more-panel li.menu-item-has-children > a {
    padding-right: 2.2rem;   /* room for the caret */
  }
  .bp-more-panel .bp-caret {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.18em;
  }
  .bp-more-panel li.menu-item-has-children:hover > .bp-subtoggle .bp-caret,
  .bp-more-panel li.menu-item-has-children:focus-within > .bp-subtoggle .bp-caret,
  .bp-more-panel li.bp-submenu-open > .bp-subtoggle .bp-caret {
    transform: rotate(-135deg);
    margin-top: 0.12em;
  }
  .bp-more-panel ul.sub-menu {
    display: none;
    position: static;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: none;
    margin: 2px 0 4px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 2px solid rgba(127, 127, 127, 0.28);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    /* reset the inline-dropdown animation props so the static list just shows */
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
  .bp-more-panel li.menu-item-has-children:hover > ul.sub-menu,
  .bp-more-panel li.menu-item-has-children:focus-within > ul.sub-menu,
  .bp-more-panel li.bp-submenu-open > ul.sub-menu {
    display: flex;
  }
  .bp-more-panel ul.sub-menu li a {
    padding: 7px 12px;
    font-size: 0.94em;
    opacity: 0.92;
  }
  /* Keep the panel usable when there are dozens of parked items/children. */
  .bp-more-panel {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STICKY CTA — centre the button when the bar has no headline text  (v1.2.30)
   The frozen bp-patterns.css styles .bp-sticky-cta as a flex row with
   justify-content:space-between. That is correct WHEN a headline is present
   (the text has flex:1 and pushes the button + ✕ to the right). But a bar with
   NO headline has only two children (the button wrapper and the ✕), so
   space-between pinned the lone button to the FAR LEFT — the reported bug.
   The migrator now tags such bars with .bp-sticky-cta--center; here we centre
   the button block and pin the ✕ to the top-right so it reads as a deliberate
   centred CTA. .bp-sticky-cta is position:fixed, so the absolutely-positioned
   ✕ anchors to the bar itself.
══════════════════════════════════════════════════════════════════════════════ */
.bp-sticky-cta--center {
  display: flex !important;          /* self-sufficient — do not rely on cascade */
  align-items: center !important;
  justify-content: center !important;
  position: fixed;                   /* re-assert the frozen positioning context for the ✕ */
}
.bp-sticky-cta--center .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  flex: 0 0 auto !important;         /* stop the button block filling the whole bar */
  width: auto !important;
  margin: 0 !important;
}
.bp-sticky-cta--center .bp-sticky-cta__close {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  height: fit-content;
}

/* ──────────────────────────────────────────────────────────────────────────
   NAVIGATION / HEADER SEARCH — hidden on all BP sites.
   GP Premium places the search toggle in .inside-header (outside the <nav>),
   so we must target .site-header rather than just .main-navigation.
   Three layers of defence:
     1. PHP filters  generate_navigation_search → false  (layout-defaults.php)
     2. Broad CSS on .site-header  (this block)
     3. Attribute wildcard [class*="search"]  (belt-and-suspenders)
──────────────────────────────────────────────────────────────────────────── */

/* Layer 2 — global known class names (no ancestor scope needed) */
.search-item, .search-toggle, .search-modal, .search-input,
.navigation-search, .nav-search, .nav-search-icon,
.gen-search-icon, .generate-search-icon, .generate-search-modal,
.widget_search, .widget-search,
.wp-block-search, .wp-block-search__button, .wp-block-search__inside-wrapper,
.header-search, .header-search-wrap, .search-widget,
/* Layer 2b — scoped belt-and-suspenders (in case global is later overridden) */
.site-header .gp-search,
.inside-header [class*="search"],
.inside-navigation [class*="search"],
.main-navigation [class*="search"],
/* Layer 3 — GLOBAL wildcard: any element with "search" in class, not a BP element */
[class*="search"]:not([class*="bp-"]),
/* Layer 4 — form elements */
form[role="search"],
input[type="search"] {
        display: none !important;
        visibility: hidden !important;
}
/* Safety guard — BP elements are never affected by the search-hide rules above.
   NOTE: no revert on height/width — revert collapses <a> elements to auto height. */
.bp-nav-buttons,
.bp-nav-btn,
.bp-nav-btn--primary,
.bp-nav-btn--secondary {
        display:    inline-flex !important;
        visibility: visible !important;
}
.bp-nav-buttons {
        display: flex !important;
}
.bp-sticky-cta,
.bp-sticky-cta__text,
.bp-sticky-cta__close {
        display:    revert !important;  /* these are div/span, revert is safe */
        visibility: visible !important;
}

/* ── Stylesheet-applied probe (v1.2.38) ──────────────────────────────────────
   bp-header-nav.js waits for this custom property to read "1" before it reveals
   the header (removes the anti-flash gate by adding .bp-header-ready to <html>).
   The property only exists once THIS external stylesheet is actually applied, so
   the gate can never be lifted while the header is still unstyled — which is the
   exact flash reported in WP Playground, where the HTML can paint a beat before
   the external CSS loads. In normal WordPress this stylesheet is render-blocking
   in <head>, so the probe already reads "1" when the footer script runs and the
   reveal is instant. */
body { --bp-css-ready: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER MENU — brand-styled columns (desktop) / accordion (mobile)  (v1.2.68)
   --------------------------------------------------------------------------
   The footer menu (bp_gp_child_render_footer_menu → .bp-footer-nav > ul.bp-footer-menu)
   now supports sub-menus (functions.php depth 0). It renders as a multi-column
   link block on desktop and, on mobile, as a collapsible accordion with chevrons
   whose sub-items open in a two-column grid — the pattern the site owner asked
   for (matching the main brand footer). Built to scale to dozens of pages under
   many top-level sections. All colours come from the brand CSS variables so it
   inherits each site's palette automatically. Gradient buttons are untouched.
   ────────────────────────────────────────────────────────────────────────── */
.bp-footer-nav {
  width: 100%;
  padding: 1.75rem 1rem;
  background: var(--bp-color-nav-bg, var(--bp-color-surface, var(--bp-color-surface-fallback, #16181d)));
}
.bp-footer-menu {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1120px;
}
.bp-footer-menu a {
  text-decoration: none;
}
/* GeneratePress adds its own .dropdown-menu-toggle to parents; the footer uses
   our own .bp-subtoggle (accordion on mobile, none on desktop), so hide GP's. */
.bp-footer-menu .dropdown-menu-toggle {
  display: none !important;
}
/* Chevron toggle (injected by bp-header-nav.js on parents that have children). */
.bp-footer-menu .bp-subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.bp-footer-menu .bp-subtoggle:focus-visible {
  outline: 2px solid var(--bp-color-primary, #cc0000);
  outline-offset: 2px;
  border-radius: 4px;
}
.bp-footer-menu .bp-caret {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.18em;
}
.bp-footer-menu li.bp-submenu-open > .bp-subtoggle .bp-caret {
  transform: rotate(-135deg);
  margin-top: 0.12em;
}

/* ── Desktop (≥769px): expanded columns ─────────────────────────────────── */
@media (min-width: 769px) {
  .bp-footer-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem 3rem;
  }
  .bp-footer-menu > li {
    flex: 0 1 auto;
    min-width: 130px;
  }
  .bp-footer-menu > li > a {
    display: inline-block;
    padding: 0 0 0.55rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bp-color-text, #e8eaf6);
  }
  .bp-footer-menu > li > a:hover {
    color: var(--bp-color-primary, #cc0000);
  }
  /* Always expanded on desktop → the accordion toggle is not needed. */
  .bp-footer-menu .bp-subtoggle {
    display: none;
  }
  .bp-footer-menu ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .bp-footer-menu ul.sub-menu a {
    display: inline-block;
    padding: 0.7rem 0;
    color: var(--bp-color-text, #e8eaf6);
    opacity: 0.72;
    font-size: 0.95em;
  }
  .bp-footer-menu ul.sub-menu a:hover,
  .bp-footer-menu ul.sub-menu li.current-menu-item > a {
    opacity: 1;
    color: var(--bp-color-primary, #cc0000);
  }
}

/* ── Mobile (≤768px): collapsible accordion ─────────────────────────────── */
@media (max-width: 768px) {
  .bp-footer-menu > li {
    position: relative;
    border-top: 1px solid rgba(127, 127, 127, 0.18);
  }
  .bp-footer-menu > li:last-child {
    border-bottom: 1px solid rgba(127, 127, 127, 0.18);
  }
  .bp-footer-menu > li > a {
    display: block;
    padding: 0.95rem 2.75rem 0.95rem 0;
    font-weight: 600;
    color: var(--bp-color-text, #e8eaf6);
  }
  .bp-footer-menu > li.menu-item-has-children > .bp-subtoggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 3.1rem; /* ≥44px tap target */
    color: var(--bp-color-text, #e8eaf6);
  }
  .bp-footer-menu ul.sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 0.9rem;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.25rem;
  }
  .bp-footer-menu > li.bp-submenu-open > ul.sub-menu {
    display: grid;
  }
  .bp-footer-menu ul.sub-menu a {
    display: block;
    padding: 0.55rem 0;
    color: var(--bp-color-text, #e8eaf6);
    opacity: 0.75;
    font-size: 0.95em;
  }
  .bp-footer-menu ul.sub-menu a:hover,
  .bp-footer-menu ul.sub-menu li.current-menu-item > a {
    opacity: 1;
    color: var(--bp-color-primary, #cc0000);
  }
  /* Deeper levels simply indent within the open section. */
  .bp-footer-menu ul.sub-menu ul.sub-menu {
    grid-column: 1 / -1;
    padding-left: 0.75rem;
  }
  /* ── Mobile header accordion (v1.2.69) ───────────────────────────────────
     GeneratePress's native mobile menu renders every sub-menu EXPANDED by
     default (reported bug: the open hamburger showed all children at once).
     We take deterministic control: hide GP's own per-item toggle, show OUR
     injected .bp-subtoggle caret, COLLAPSE sub-menus by default and expand only
     the tapped section (.bp-submenu-open, toggled by bp-header-nav.js). This
     mirrors the footer accordion, so header + footer behave identically on
     mobile and scale cleanly to dozens of items. The main hamburger (GP's
     .menu-toggle) still opens/closes the whole nav unchanged. */
  /* Each parent li must be the positioning context for its own caret. GP's core
     mobile CSS sets these list items to `position:static`, which made ALL the
     absolutely-positioned carets fall back to the shared #primary-menu container
     and STACK on the first row (reported bug: only one visible chevron, and it
     opened the wrong section because the stacked carets belonged to other items).
     !important + the extra .main-nav scope beats GP so each caret sits in its
     own row. */
  #site-navigation .main-nav li.menu-item-has-children,
  #site-navigation li.menu-item-has-children {
    position: relative !important;
  }
  /* Hide GP's native per-item dropdown toggle — our caret replaces it. */
  #site-navigation .dropdown-menu-toggle {
    display: none !important;
  }
  /* Show our caret toggle, right-aligned with a ≥44px tap target. */
  #site-navigation .bp-subtoggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 3.1rem;   /* ≥44px */
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--bp-color-text, #e8eaf6);
    cursor: pointer;
    z-index: 2;
  }
  #site-navigation li.menu-item-has-children > a {
    padding-right: 3.2rem;   /* room for the caret */
  }
  #site-navigation .bp-caret {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.2em;
  }
  #site-navigation li.bp-submenu-open > .bp-subtoggle .bp-caret {
    transform: rotate(-135deg);
    margin-top: 0.15em;
  }
  /* Collapse every sub-menu by default; !important beats GP's expanded default
     (and any inline display GP's script may set). Expand only the open section. */
  #site-navigation ul.sub-menu {
    display: none !important;
  }
  #site-navigation li.bp-submenu-open > ul.sub-menu {
    display: block !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   GLASS ANIMATION VARIANT v1.2.89 — canary: toonie.bet
   Activate via Appearance → Customize → BP Header Buttons → Button animation style → Glass
   All selectors gated on body.bp-btn-anim-glass so classic mode is untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Diagonal glass shine — ease timing so the trailing fade exits the clip
   boundary at the same moment as the white centre: clean snap, no trail. */
@keyframes bp-shine-glass {
  0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX( 100%) translateY( 100%) rotate(45deg); }
}

/* Outer neon glow pulse — brand-colour-adaptive via color-mix().
   No inset shadow here: the 3D highlight is static (::before), never animated. */
@keyframes bp-neon-pulse-glass {
  0%, 100% {
    box-shadow:
      0 0  5px color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent),
      0 0  7px color-mix(in srgb, var(--bp-color-primary, #ea292e) 30%, transparent),
      0 0 10px color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, transparent);
  }
  50% {
    box-shadow:
      0 0  5px color-mix(in srgb, var(--bp-color-primary, #ea292e) 60%, transparent),
      0 0 10px color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent),
      0 0 13px color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent);
  }
}

/* Inset-only pulse for the nav button (contain:paint clips outer box-shadow) */
@keyframes bp-nav-glass-pulse {
  0%, 100% { box-shadow: inset 0 0  4px rgba(255,255,255,.10), inset 0 0 10px rgba(255,255,255,.05); }
  50%       { box-shadow: inset 0 0 10px rgba(255,255,255,.24), inset 0 0 20px rgba(255,255,255,.12); }
}

/* ── NAV PRIMARY BUTTON — glass variant ──────────────────────────────────── */

/* Two-layer blended glass background + inset glow pulse */
.bp-btn-anim-glass .bp-nav-btn--primary {
  background:
    radial-gradient(50% 53.19% at 50% 50%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ffffff) 0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 100%
    ),
    linear-gradient(180deg, rgba(255,255,255,.18) 48.08%, rgba(0,0,0,.18) 51.44%) !important;
  background-blend-mode: overlay !important;
  animation: bp-nav-glass-pulse 2.5s ease-in-out infinite !important;
}

/* Switch shine to diagonal glass keyframe */
.bp-btn-anim-glass .bp-nav-btn--primary::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent) !important;
  animation-name: bp-shine-glass !important;
  animation-timing-function: ease !important;
  animation-duration: 3s !important;
  animation-iteration-count: infinite !important;
}

/* ── BODY CTA — neon glow on wrapper (link has clip-path, clips box-shadow) ── */

.bp-btn-anim-glass .wp-block-button.bp-cta-primary,
.bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta {
  border-radius: var(--bp-border-radius, 8px);
  animation: bp-neon-pulse-glass 2.5s ease-in-out infinite;
}

/* Two-layer blended glass background on the link */
.bp-btn-anim-glass .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-glass .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-glass .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-glass .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-glass a.bp-btn-primary {
  background:
    radial-gradient(50% 53.19% at 50% 50%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ffffff) 0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 100%
    ),
    linear-gradient(180deg, rgba(255,255,255,.18) 48.08%, rgba(0,0,0,.18) 51.44%) !important;
  background-blend-mode: overlay !important;
  /* Remove any neon glow from the link itself (it lives on the wrapper) */
  animation: none !important;
}

/* Switch shine to diagonal glass keyframe */
.bp-btn-anim-glass .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-glass .bp-cta-primary.wp-block-button__link::after,
.bp-btn-anim-glass .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-glass .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-glass a.bp-btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent) !important;
  animation-name: bp-shine-glass !important;
  animation-timing-function: ease !important;
  animation-duration: 3s !important;
  animation-iteration-count: infinite !important;
}

/* Reduced motion — kill glass animations */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-anim-glass .wp-block-button.bp-cta-primary,
  .bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta,
  .bp-btn-anim-glass .bp-nav-btn--primary { animation: none !important; }
  .bp-btn-anim-glass .bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-glass .wp-block-button.bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
  .bp-btn-anim-glass .bp-nav-btn--primary::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTON ANIMATION v2 — canary: toonie.bet (1.2.90)
   New variants: Orbit · Throb · Jackpot · Lava · Ripple
   All brand colours via var(--bp-color-primary) / color-mix() — zero hardcoded hex.
   Duration via --bp-anim-dur (emitted in <head> from Customizer slider, default 2.5s).
   Per-button override: add class has-anim-{style} to any .wp-block-button element
   via the Block editor "Button Animation" panel (Inspector Controls).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Glass: honour --bp-anim-dur slider (overrides hardcoded 2.5s / 3s) ───── */
.bp-btn-anim-glass .bp-nav-btn--primary,
.bp-btn-anim-glass .wp-block-button.bp-cta-primary,
.bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta {
  animation-duration: var(--bp-anim-dur, 2.5s) !important;
}
.bp-btn-anim-glass .bp-nav-btn--primary::after,
.bp-btn-anim-glass .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-glass .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-glass .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-glass .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-glass a.bp-btn-primary::after {
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
}

/* ── @property for smooth orbit angle interpolation ─────────────────────────── */
@property --bp-orbit-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Keyframes ──────────────────────────────────────────────────────────────── */

@keyframes bp-orbit-spin { to { --bp-orbit-angle: 360deg; } }

@keyframes bp-throb {
  0%   { box-shadow: inset 0 0 0 0px rgba(255,255,255,0),   inset 0 0 10px rgba(255,255,255,0);    filter: brightness(1.00); }
  12%  { box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), inset 0 0 22px rgba(255,255,255,.22); filter: brightness(1.20); }
  22%  { box-shadow: inset 0 0 0 0px rgba(255,255,255,0),   inset 0 0  6px rgba(255,255,255,.03); filter: brightness(1.00); }
  36%  { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 14px rgba(255,255,255,.12); filter: brightness(1.10); }
  50%  { box-shadow: inset 0 0 0 0px rgba(255,255,255,0),   inset 0 0  4px rgba(255,255,255,0);   filter: brightness(1.00); }
  100% { box-shadow: inset 0 0 0 0px rgba(255,255,255,0),   inset 0 0  4px rgba(255,255,255,0);   filter: brightness(1.00); }
}

@keyframes bp-spark-float {
  0%   { transform: translateY(0) translateX(0) scale(1) rotate(0deg); opacity: 1; }
  70%  { opacity: .85; }
  100% { transform: translateY(-38px) translateX(var(--dx)) scale(.15) rotate(var(--dr)); opacity: 0; }
}

@keyframes bp-lava-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bp-lava-glow {
  0%, 100% {
    box-shadow:
      0 0 12px color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent),
      0 0 28px color-mix(in srgb, #ff8c00 15%, transparent);
  }
  50% {
    box-shadow:
      0 0 22px color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, transparent),
      0 0 45px color-mix(in srgb, #ff8c00 30%, transparent);
  }
}

/* Inset-only lava glow for nav btn (contain:paint clips outer box-shadow) */
@keyframes bp-lava-glow-inset {
  0%, 100% { box-shadow: inset 0 0  8px color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent); }
  50%       { box-shadow: inset 0 0 18px color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, transparent); }
}

/* Two-ring ripple via staggered box-shadow keyframes */
@keyframes bp-ripple-box {
  0%   { box-shadow: 0 0 0 0px  color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, transparent),
                     0 0 0 0px  color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent); }
  40%  { box-shadow: 0 0 0 8px  color-mix(in srgb, var(--bp-color-primary, #ea292e) 18%, transparent),
                     0 0 0 0px  color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, transparent); }
  80%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent),
                     0 0 0 9px  color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent); }
  100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent),
                     0 0 0 18px color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent); }
}

/* Outline-based ripple for nav btn (outline escapes contain:paint) */
@keyframes bp-ripple-outline {
  0%   { outline-offset: 1px; outline-color: color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, transparent); }
  100% { outline-offset: 9px; outline-color: color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   A — ORBIT  (rotating conic-gradient beam border)
═══════════════════════════════════════════════════════════════════════════ */

/* NAV: spinning beam via ::before overlay (200%×200%, mix-blend-mode: overlay,
   clipped by contain:paint on the nav button — no external bleed) */
.bp-btn-anim-orbit .bp-nav-btn--primary {
  overflow: hidden;
  position: relative;
}
.bp-btn-anim-orbit .bp-nav-btn--primary::before {
  content: '';
  position: absolute;
  width: 200%; height: 200%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from var(--bp-orbit-angle),
    transparent 0deg,
    transparent 50deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent)  75deg,
    var(--bp-color-primary, #ea292e)                                        90deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ffffff)     105deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffffff)     113deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ffffff)     121deg,
    var(--bp-color-primary, #ea292e)                                       135deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent) 155deg,
    transparent 180deg,
    transparent 360deg
  );
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.bp-btn-anim-orbit .bp-nav-btn--primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.6) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  z-index: 1;
  position: relative;
}

/* CTA wrapper: 2px padding exposes the conic gradient as a "spinning border" */
.bp-btn-anim-orbit .wp-block-button.bp-cta-primary,
.bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta {
  padding: 2px !important;
  border-radius: var(--bp-border-radius, 8px) !important;
  background: conic-gradient(
    from var(--bp-orbit-angle),
    transparent 0deg,
    transparent 50deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent)  75deg,
    var(--bp-color-primary, #ea292e)                                        90deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ffffff)     105deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffffff)     113deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ffffff)     121deg,
    var(--bp-color-primary, #ea292e)                                       135deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent) 155deg,
    transparent 180deg,
    transparent 360deg
  ) !important;
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite !important;
}
/* CTA link: keeps its solid brand background; border-radius inset by 2px */
.bp-btn-anim-orbit .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-orbit .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-orbit .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-orbit .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-orbit a.bp-btn-primary {
  border-radius: calc(var(--bp-border-radius, 8px) - 2px) !important;
  animation: none !important;
}
.bp-btn-anim-orbit .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-orbit .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-orbit .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-orbit a.bp-btn-primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.6) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   B — THROB  (double-beat heartbeat — inset shadows + brightness only)
═══════════════════════════════════════════════════════════════════════════ */

.bp-btn-anim-throb .bp-nav-btn--primary {
  animation: bp-throb var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
}
.bp-btn-anim-throb .bp-nav-btn--primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.4) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
.bp-btn-anim-throb .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-throb .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-throb .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-throb .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-throb .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-throb a.bp-btn-primary {
  overflow: hidden;
  animation: bp-throb var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
}
.bp-btn-anim-throb .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-throb .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-throb .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-throb .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-throb a.bp-btn-primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.4) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   C — JACKPOT  (emoji sparks — JS injected, overflow:hidden clips to button)
═══════════════════════════════════════════════════════════════════════════ */

.bp-btn-anim-jackpot .bp-nav-btn--primary {
  overflow: hidden;
  position: relative;
}
.bp-btn-anim-jackpot .bp-nav-btn--primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
.bp-btn-anim-jackpot .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-jackpot .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-jackpot .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-jackpot .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-jackpot a.bp-btn-primary {
  overflow: hidden;
  position: relative;
  animation: none !important;
}
.bp-btn-anim-jackpot .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-jackpot .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-jackpot .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-jackpot a.bp-btn-primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
/* Spark spans injected by JS (bp_gp_child_jackpot_particles) */
.bp-spark {
  position: absolute;
  pointer-events: none;
  animation: bp-spark-float var(--dur, .7s) ease-out forwards;
  z-index: 20;
  text-shadow: 0 0 6px currentColor;
  line-height: 1;
  font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   D — LAVA  (animated fire-gradient + glow)
   Warm anchor #ff8c00 used only as a perceptual heat offset — not a brand colour.
═══════════════════════════════════════════════════════════════════════════ */

/* NAV: animated gradient background + inset glow (outer glow clipped by contain:paint) */
.bp-btn-anim-lava .bp-nav-btn--primary {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000)  0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 12%,
      var(--bp-color-primary, #ea292e)                                   28%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 44%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 25%, #ff8c00) 54%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 64%,
      var(--bp-color-primary, #ea292e)                                   80%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 92%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000) 100%
    ) !important;
  background-size: 260% 260% !important;
  animation:
    bp-lava-flow var(--bp-anim-dur, 2.5s) ease infinite,
    bp-lava-glow-inset var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
}
.bp-btn-anim-lava .bp-nav-btn--primary::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) !important;
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.3) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
/* CTA wrapper: outer neon-fire glow (no contain:paint here) */
.bp-btn-anim-lava .wp-block-button.bp-cta-primary,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta {
  border-radius: var(--bp-border-radius, 8px);
  animation: bp-lava-glow var(--bp-anim-dur, 2.5s) ease-in-out infinite;
}
/* CTA link: fire gradient */
.bp-btn-anim-lava .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-lava .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-lava .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-lava a.bp-btn-primary {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000)  0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 12%,
      var(--bp-color-primary, #ea292e)                                   28%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 44%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 25%, #ff8c00) 54%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 64%,
      var(--bp-color-primary, #ea292e)                                   80%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 92%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000) 100%
    ) !important;
  background-size: 260% 260% !important;
  animation: bp-lava-flow var(--bp-anim-dur, 2.5s) ease infinite !important;
}
.bp-btn-anim-lava .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-lava .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-lava a.bp-btn-primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.3) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E — RIPPLE  (sonar expanding rings)
═══════════════════════════════════════════════════════════════════════════ */

/* NAV: outline animation (outline is not clipped by contain:paint) */
.bp-btn-anim-ripple .bp-nav-btn--primary {
  outline: 2px solid transparent;
  animation: bp-ripple-outline var(--bp-anim-dur, 2.5s) ease-out infinite !important;
}
.bp-btn-anim-ripple .bp-nav-btn--primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
/* CTA wrapper: dual ring via staggered box-shadow keyframe */
.bp-btn-anim-ripple .wp-block-button.bp-cta-primary,
.bp-btn-anim-ripple .wp-block-button.is-style-bp-hero-cta {
  border-radius: var(--bp-border-radius, 8px);
  animation: bp-ripple-box var(--bp-anim-dur, 2.5s) ease-out infinite;
}
/* CTA link: no extra animation; shine only */
.bp-btn-anim-ripple .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-ripple .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-ripple .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-ripple .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-ripple .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-ripple a.bp-btn-primary {
  animation: none !important;
}
.bp-btn-anim-ripple .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-ripple .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-ripple .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-ripple .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-ripple a.bp-btn-primary::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PER-BUTTON OVERRIDES
   Class has-anim-{style} on .wp-block-button (set via Block editor Inspector panel).
   Specificity: (0,2,0) — beats body-class rules (0,2,0) by source order (these come last).
   All use !important to beat existing glass variant rules where present.
═══════════════════════════════════════════════════════════════════════════ */

/* Base reset: strip global animation from any overridden button */
.wp-block-button[class*="has-anim-"] {
  animation: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.wp-block-button[class*="has-anim-"] .wp-block-button__link {
  animation: none !important;
  background-size: auto !important;
}

/* — Classic — */
.wp-block-button.has-anim-classic .wp-block-button__link::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent) !important;
  animation-name: bp-shine !important;
  animation-duration: var(--bp-anim-dur, 2.5s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* — Glass — */
.wp-block-button.has-anim-glass {
  border-radius: var(--bp-border-radius, 8px) !important;
  animation: bp-neon-pulse-glass var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
  padding: 0 !important;
  background: transparent !important;
}
.wp-block-button.has-anim-glass .wp-block-button__link {
  background:
    radial-gradient(50% 53.19% at 50% 50%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ffffff) 0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 100%
    ),
    linear-gradient(180deg, rgba(255,255,255,.18) 48.08%, rgba(0,0,0,.18) 51.44%) !important;
  background-blend-mode: overlay !important;
  animation: none !important;
}
.wp-block-button.has-anim-glass .wp-block-button__link::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent) !important;
  animation-name: bp-shine-glass !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: ease !important;
  animation-iteration-count: infinite !important;
}

/* — Orbit — */
.wp-block-button.has-anim-orbit {
  padding: 2px !important;
  border-radius: var(--bp-border-radius, 8px) !important;
  background: conic-gradient(
    from var(--bp-orbit-angle),
    transparent 0deg,
    transparent 50deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent)  75deg,
    var(--bp-color-primary, #ea292e)                                        90deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ffffff)     105deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffffff)     113deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ffffff)     121deg,
    var(--bp-color-primary, #ea292e)                                       135deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, transparent) 155deg,
    transparent 180deg,
    transparent 360deg
  ) !important;
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite !important;
}
.wp-block-button.has-anim-orbit .wp-block-button__link {
  border-radius: calc(var(--bp-border-radius, 8px) - 2px) !important;
}
.wp-block-button.has-anim-orbit .wp-block-button__link::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.6) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* — Throb — */
.wp-block-button.has-anim-throb .wp-block-button__link {
  overflow: hidden;
  animation: bp-throb var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
}
.wp-block-button.has-anim-throb .wp-block-button__link::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.4) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* — Jackpot — */
.wp-block-button.has-anim-jackpot .wp-block-button__link {
  overflow: hidden;
  position: relative;
}
.wp-block-button.has-anim-jackpot .wp-block-button__link::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* — Lava — */
.wp-block-button.has-anim-lava {
  border-radius: var(--bp-border-radius, 8px) !important;
  animation: bp-lava-glow var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
  padding: 0 !important;
  background: transparent !important;
}
.wp-block-button.has-anim-lava .wp-block-button__link {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000)  0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 12%,
      var(--bp-color-primary, #ea292e)                                   28%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 44%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 25%, #ff8c00) 54%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 64%,
      var(--bp-color-primary, #ea292e)                                   80%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 92%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000) 100%
    ) !important;
  background-size: 260% 260% !important;
  animation: bp-lava-flow var(--bp-anim-dur, 2.5s) ease infinite !important;
}
.wp-block-button.has-anim-lava .wp-block-button__link::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.3) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* — Ripple — */
.wp-block-button.has-anim-ripple {
  border-radius: var(--bp-border-radius, 8px) !important;
  animation: bp-ripple-box var(--bp-anim-dur, 2.5s) ease-out infinite !important;
  padding: 0 !important;
  background: transparent !important;
}
.wp-block-button.has-anim-ripple .wp-block-button__link::after {
  animation-name: bp-shine !important;
  animation-duration: calc(var(--bp-anim-dur, 2.5s) * 1.2) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}


/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Kill all new variant animations */
  .bp-btn-anim-orbit .bp-nav-btn--primary,
  .bp-btn-anim-orbit .bp-nav-btn--primary::before,
  .bp-btn-anim-orbit .bp-nav-btn--primary::after,
  .bp-btn-anim-orbit .wp-block-button.bp-cta-primary,
  .bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta,
  .bp-btn-anim-orbit .wp-block-button.bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
  .bp-btn-anim-throb .bp-nav-btn--primary,
  .bp-btn-anim-throb .bp-nav-btn--primary::after,
  .bp-btn-anim-throb .wp-block-button.bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-throb .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
  .bp-btn-anim-throb .wp-block-button.bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-throb .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
  .bp-btn-anim-jackpot .bp-nav-btn--primary,
  .bp-btn-anim-jackpot .bp-nav-btn--primary::after,
  .bp-btn-anim-jackpot .wp-block-button.bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
  .bp-btn-anim-lava .bp-nav-btn--primary,
  .bp-btn-anim-lava .bp-nav-btn--primary::after,
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary,
  .bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta,
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
  .bp-btn-anim-ripple .bp-nav-btn--primary,
  .bp-btn-anim-ripple .bp-nav-btn--primary::after,
  .bp-btn-anim-ripple .wp-block-button.bp-cta-primary,
  .bp-btn-anim-ripple .wp-block-button.is-style-bp-hero-cta,
  .bp-btn-anim-ripple .wp-block-button.bp-cta-primary .wp-block-button__link::after,
  .bp-btn-anim-ripple .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
  /* Per-button overrides */
  .wp-block-button[class*="has-anim-"],
  .wp-block-button[class*="has-anim-"] .wp-block-button__link,
  .wp-block-button[class*="has-anim-"] .wp-block-button__link::after { animation: none !important; }

  /* Lava: restore static solid background when motion off */
  .bp-btn-anim-lava .bp-nav-btn--primary,
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
  .wp-block-button.has-anim-lava .wp-block-button__link {
    background: var(--bp-color-primary, #ea292e) !important;
    background-size: auto !important;
  }
  /* Orbit: remove spinning border wrapper effect */
  .bp-btn-anim-orbit .wp-block-button.bp-cta-primary,
  .bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta,
  .wp-block-button.has-anim-orbit {
    padding: 0 !important;
    background: transparent !important;
  }
  .bp-btn-anim-orbit .wp-block-button.bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
  .wp-block-button.has-anim-orbit .wp-block-button__link {
    border-radius: var(--bp-border-radius, 8px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION v2 PATCH (1.2.90-p1)

   Fix 1 — Suppress classic shine on new variants:
   The base plugin CSS and child theme base CSS apply animation: bp-shine 3s
   unconditionally to all button ::after elements (no body class gate). The v2
   CSS kept animation-name: bp-shine on ::after for new variants, making them
   visually identical to Classic. Fix: suppress ::after animation entirely so
   each variant's own effect is the only animation running.

   Fix 2 — Lava visibility:
   color-mix with #ff8c00 as warm anchor produces insufficient contrast against
   the brand primary (red-orange). Restore bright gold (#ffc107) as the hot
   peak — same approach as demo. This is an animation colour, not a brand colour.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1A: NAV button ::after — suppress classic shine for new variants ──── */
.bp-btn-anim-orbit .bp-nav-btn--primary::after,
.bp-btn-anim-throb .bp-nav-btn--primary::after,
.bp-btn-anim-jackpot .bp-nav-btn--primary::after,
.bp-btn-anim-lava .bp-nav-btn--primary::after,
.bp-btn-anim-ripple .bp-nav-btn--primary::after {
  animation: none !important;
}

/* ── FIX 1B: CTA button ::after — suppress classic shine for new variants ───── */
.bp-btn-anim-orbit .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-orbit .bp-cta-primary.wp-block-button__link::after,
.bp-btn-anim-orbit .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-orbit .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-orbit .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-orbit a.bp-btn-primary::after,
.bp-btn-anim-throb .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-throb .bp-cta-primary.wp-block-button__link::after,
.bp-btn-anim-throb .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-throb .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-throb .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-throb a.bp-btn-primary::after,
.bp-btn-anim-jackpot .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-jackpot .bp-cta-primary.wp-block-button__link::after,
.bp-btn-anim-jackpot .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-jackpot .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-jackpot a.bp-btn-primary::after,
.bp-btn-anim-lava .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-lava .bp-cta-primary.wp-block-button__link::after,
.bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-lava .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-lava a.bp-btn-primary::after,
.bp-btn-anim-ripple .bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-ripple .bp-cta-primary.wp-block-button__link::after,
.bp-btn-anim-ripple .wp-block-button.bp-cta-primary .wp-block-button__link::after,
.bp-btn-anim-ripple .wp-block-button.is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-ripple .is-style-bp-hero-cta .wp-block-button__link::after,
.bp-btn-anim-ripple a.bp-btn-primary::after {
  animation: none !important;
}

/* ── FIX 1C: Per-button overrides — suppress classic shine ──────────────────── */
.wp-block-button.has-anim-orbit .wp-block-button__link::after,
.wp-block-button.has-anim-throb .wp-block-button__link::after,
.wp-block-button.has-anim-jackpot .wp-block-button__link::after,
.wp-block-button.has-anim-lava .wp-block-button__link::after,
.wp-block-button.has-anim-ripple .wp-block-button__link::after {
  animation: none !important;
}

/* ── FIX 2: Lava — brighter hot peak for visible contrast ───────────────────── */
/* Keyframe update: use #ffc107 (gold) as the fire hot-spot anchor instead of
   #ff8c00 (orange) — gives the yellow-gold "lava core" that makes the effect
   visible. #ffc107 is an animation/fire colour, not a brand colour.           */
@keyframes bp-lava-glow {
  0%, 100% {
    box-shadow:
      0 0 12px color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent),
      0 0 28px color-mix(in srgb, #ff8c00 20%, transparent);
  }
  50% {
    box-shadow:
      0 0 22px color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, transparent),
      0 0 45px color-mix(in srgb, #ffc107 35%, transparent);
  }
}

@keyframes bp-lava-glow-inset {
  0%, 100% { box-shadow: inset 0 0  8px color-mix(in srgb, var(--bp-color-primary, #ea292e) 40%, transparent); }
  50%       { box-shadow: inset 0 0 20px color-mix(in srgb, #ffc107 50%, transparent); }
}

/* Lava gradient — brighter hot stops for NAV button */
.bp-btn-anim-lava .bp-nav-btn--primary {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)  0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000) 10%,
      var(--bp-color-primary, #ea292e)                                   24%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00) 36%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107) 50%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00) 64%,
      var(--bp-color-primary, #ea292e)                                   76%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000) 90%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
    ) !important;
  background-size: 260% 260% !important;
  animation:
    bp-lava-flow var(--bp-anim-dur, 2.5s) ease infinite,
    bp-lava-glow-inset var(--bp-anim-dur, 2.5s) ease-in-out infinite !important;
}

/* Lava gradient — brighter hot stops for CTA link */
.bp-btn-anim-lava .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-lava .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-lava .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-lava a.bp-btn-primary {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)  0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000) 10%,
      var(--bp-color-primary, #ea292e)                                   24%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00) 36%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107) 50%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00) 64%,
      var(--bp-color-primary, #ea292e)                                   76%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000) 90%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
    ) !important;
  background-size: 260% 260% !important;
  animation: bp-lava-flow var(--bp-anim-dur, 2.5s) ease infinite !important;
}

/* Per-button lava override — same bright gradient */
.wp-block-button.has-anim-lava .wp-block-button__link {
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)  0%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000) 10%,
      var(--bp-color-primary, #ea292e)                                   24%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00) 36%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107) 50%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00) 64%,
      var(--bp-color-primary, #ea292e)                                   76%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000) 90%,
      color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
    ) !important;
  background-size: 260% 260% !important;
  animation: bp-lava-flow var(--bp-anim-dur, 2.5s) ease infinite !important;
}

/* Reduced motion: restore static solid for lava (override patched gradient too) */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-anim-lava .bp-nav-btn--primary,
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
  .wp-block-button.has-anim-lava .wp-block-button__link {
    background: var(--bp-color-primary, #ea292e) !important;
    background-size: auto !important;
    animation: none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION v2 PATCH P2 (1.2.90-p2)

   Fix A — Orbit nav button: replace radar-sweep ::before with a true border-ring
   The original ::before was 200%×200% with mix-blend-mode:overlay, which
   rendered as a radar beam sweeping across the full button face.
   Fix: kill ::before; repurpose ::after (conic-gradient full-face, masked to
   show only the 3 px border ring via mask-image radial-gradient).

   Fix B — Lava nav button: bake background-size into the background shorthand
   Having background + background-size as separate !important declarations
   leaves a cascade race: any lower-specificity rule that uses the background
   shorthand silently resets background-size back to auto. The shorthand form
   `linear-gradient(...) center / 260% 260% no-repeat` binds image + size in
   one !important declaration, eliminating the race.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fix A: Orbit nav button — border-ring via ::after + mask-image ─────────── */

/* 1. Kill the full-face radar-sweep pseudo-element */
.bp-btn-anim-orbit .bp-nav-btn--primary::before {
  content: none !important;
  display: none !important;
}

/* 2. Repurpose ::after as a spinning border ring.
      The conic gradient fills the full button face; mask-image cuts away the
      center, leaving only a ~3 px ring at the button edges visible.           */
.bp-btn-anim-orbit .bp-nav-btn--primary::after {
  content: '' !important;
  position: absolute !important;
  /* Override the base 200%×200% / top:-50% / left:-50% positioning */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border-radius: inherit !important;
  background: conic-gradient(
    from var(--bp-orbit-angle),
    transparent  0deg,
    transparent 50deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffffff)  75deg,
    #ffffff                                                              90deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffffff) 105deg,
    transparent 130deg,
    transparent 360deg
  ) !important;
  /* Mask: inner ellipse (3 px inside each edge) = transparent → hides gradient.
     Outer strip (3 px ring) = black/opaque → shows spinning arc.              */
  -webkit-mask-image: radial-gradient(
    ellipse calc(50% - 3px) calc(50% - 3px) at 50% 50%,
    transparent 99%,
    black 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse calc(50% - 3px) calc(50% - 3px) at 50% 50%,
    transparent 99%,
    black 100%
  ) !important;
  mix-blend-mode: normal !important;
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ── Fix B: Lava nav button — bake size into shorthand ──────────────────────── */

.bp-btn-anim-lava .bp-nav-btn--primary {
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)   0%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  10%,
    var(--bp-color-primary, #ea292e)                                    24%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  36%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107)  50%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  64%,
    var(--bp-color-primary, #ea292e)                                    76%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  90%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
  ) center / 260% 260% no-repeat !important;
  animation:
    bp-lava-flow       var(--bp-anim-dur, 2.5s) ease         infinite,
    bp-lava-glow-inset var(--bp-anim-dur, 2.5s) ease-in-out  infinite !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION v2 PATCH P3 (1.2.91)

   Fix A — Per-button has-anim-* ::after suppression (frontend)
   The original has-anim-* section set animation-name: bp-shine on ::after for
   orbit/throb/jackpot/lava/ripple, making them look identical to classic (all
   show the diagonal shine sweep). Suppress ::after for these styles; only
   classic and glass keep a ::after animation.

   Fix B — Orbit nav button: border-ring via ::after + mask-image (rewrite)
   Kills the full-face conic ::before (radar sweep) and draws a spinning white
   arc at the button edge using ::after + mask-image radial-gradient.
   (Same approach as p2 but p3 comes later → wins the cascade.)

   Fix C — Ripple nav: smooth outline animation
   Old keyframe: 2 stops, 1px→9px, abrupt jump at restart.
   New: 0px→18px with fade-out and an invisible hold (65%→100%) so the
   reset from 18px→0px happens while outline-color is fully transparent.

   Fix D — Jackpot nav: allow sparks to escape contain:paint
   With contain:paint/overflow:hidden the emoji sparks are clipped the moment
   they float above the button top edge. Setting contain:style layout (removing
   paint containment) and overflow:visible lets them escape.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fix A: Suppress ::after shine for non-classic/non-glass per-button styles  */
.wp-block-button.has-anim-orbit   .wp-block-button__link::after,
.wp-block-button.has-anim-throb   .wp-block-button__link::after,
.wp-block-button.has-anim-jackpot .wp-block-button__link::after,
.wp-block-button.has-anim-lava    .wp-block-button__link::after,
.wp-block-button.has-anim-ripple  .wp-block-button__link::after {
  animation: none !important;
}

/* ── Fix B: Orbit nav button — border ring (overrides p2, same selector) ─────── */
.bp-btn-anim-orbit .bp-nav-btn--primary::before {
  content:   none !important;
  display:   none !important;
  animation: none !important;
}

.bp-btn-anim-orbit .bp-nav-btn--primary::after {
  content:       '' !important;
  position:      absolute !important;
  top:           0 !important;
  left:          0 !important;
  width:         100% !important;
  height:        100% !important;
  transform:     none !important;
  border-radius: inherit !important;
  /* Bright arc spans ~60 deg; rest is transparent so button shows through */
  background: conic-gradient(
    from var(--bp-orbit-angle),
    transparent                                                         0deg,
    transparent                                                        40deg,
    rgba(255,255,255,.25)                                              60deg,
    rgba(255,255,255,.90)                                              82deg,
    rgba(255,255,255,1.00)                                             90deg,
    rgba(255,255,255,.90)                                              98deg,
    rgba(255,255,255,.25)                                             120deg,
    transparent                                                        150deg,
    transparent                                                        360deg
  ) !important;
  /* Mask: hollow out the center — only the ~3px border ring is opaque */
  -webkit-mask-image: radial-gradient(
    ellipse calc(50% - 3px) calc(50% - 3px) at 50% 50%,
    transparent 99.9%, black 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse calc(50% - 3px) calc(50% - 3px) at 50% 50%,
    transparent 99.9%, black 100%
  ) !important;
  mix-blend-mode: screen !important;   /* white arc on red = bright white ring */
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite !important;
  z-index:        2 !important;
  pointer-events: none !important;
}

/* ── Fix C: Ripple nav button — smooth outline keyframe ──────────────────────── */

/* Override the old 2-stop keyframe with proper fade-out + invisible hold       */
@keyframes bp-ripple-outline {
  0% {
    outline-offset: 0px;
    outline-width:  2px;
    outline-color:  color-mix(in srgb, var(--bp-color-primary, #ea292e) 80%, transparent);
  }
  60% {
    outline-offset: 18px;
    outline-width:  1px;
    outline-color:  color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent);
  }
  /* Jump back to 0 while invisible — no visible "pop" at loop restart */
  60.5%, 100% {
    outline-offset: 0px;
    outline-width:  2px;
    outline-color:  color-mix(in srgb, var(--bp-color-primary, #ea292e) 0%,  transparent);
  }
}

.bp-btn-anim-ripple .bp-nav-btn--primary {
  outline-style: solid !important;
  animation-timing-function: ease-out !important;
}

/* ── Fix D: Jackpot nav — allow sparks to overflow contain:paint ─────────────── */
.bp-btn-anim-jackpot .bp-nav-btn--primary {
  contain:  style layout !important;  /* remove paint containment → sparks escape */
  overflow: visible !important;
}

/* Reduced-motion: cancel new ::after animation on orbit nav */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-anim-orbit .bp-nav-btn--primary::after,
  .bp-btn-anim-orbit .bp-nav-btn--primary::before {
    animation: none !important;
    content:   none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION v2 PATCH P4 (1.2.92)

   Fix A — Lava: @property --bp-lava-x + longhand background-position
   The background shorthand "… center / 260% 260% … !important" bakes
   background-position: center into an !important declaration that CSS animations
   cannot override (spec §15.3 — animations sit below author !important in the
   cascade).  Fix: register --bp-lava-x as an animatable custom property; animate
   IT; reference it in background-position: var(--bp-lava-x) 50% !important (a
   static !important declaration whose computed VALUE changes each frame). Applies
   to both the nav button and the per-button has-anim-lava block.

   Fix B — Orbit nav button: two-layer background replaces mask-image ring
   The mask-image radial-gradient ring (p2/p3) produces a full-face "radar sweep"
   in some browsers within a contain:paint stacking context. New approach: put the
   conic gradient directly as a background layer over a solid fill layer on the
   button element itself; kill both ::before and ::after.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fix A helpers ─────────────────────────────────────────────────────────── */
@property --bp-lava-x {
  syntax:        '<percentage>';
  initial-value: 0%;
  inherits:      false;
}

@keyframes bp-lava-flow-x {
  0%   { --bp-lava-x:   0%; }
  50%  { --bp-lava-x: 100%; }
  100% { --bp-lava-x:   0%; }
}

/* Lava NAV button: longhands so background-position can be driven by animation */
.bp-btn-anim-lava .bp-nav-btn--primary {
  background-image: linear-gradient(
    110deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000)  0%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 12%,
    var(--bp-color-primary, #ea292e)                                   28%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 44%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 25%, #ff8c00) 54%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 55%, #ff8c00) 64%,
    var(--bp-color-primary, #ea292e)                                   80%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 88%, #000000) 92%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 70%, #000000) 100%
  ) !important;
  background-size:     260% 260% !important;
  background-repeat:   no-repeat !important;
  background-position: var(--bp-lava-x, 0%) 50% !important;
  animation:
    bp-lava-flow-x     var(--bp-anim-dur, 2.5s) ease         infinite,
    bp-lava-glow-inset var(--bp-anim-dur, 2.5s) ease-in-out  infinite !important;
}

/* Lava per-button block (has-anim-lava): same !important fix */
.wp-block-button.has-anim-lava .wp-block-button__link {
  background-image: linear-gradient(
    110deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)   0%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  10%,
    var(--bp-color-primary, #ea292e)                                    24%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  36%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107)  50%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  64%,
    var(--bp-color-primary, #ea292e)                                    76%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  90%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
  ) !important;
  background-size:     260% 260% !important;
  background-repeat:   no-repeat !important;
  background-position: var(--bp-lava-x, 0%) 50% !important;
  animation: bp-lava-flow-x var(--bp-anim-dur, 2.5s) ease infinite !important;
}

/* ── Fix B: Orbit NAV button ─────────────────────────────────────────────── */

/* Kill pseudo-elements — no longer needed for the nav ring approach */
.bp-btn-anim-orbit .bp-nav-btn--primary::before,
.bp-btn-anim-orbit .bp-nav-btn--primary::after {
  content:   none !important;
  display:   none !important;
  animation: none !important;
}

/* Two-layer background: spinning white arc (conic) over solid brand fill.
   --bp-orbit-angle is animated directly on the element (inherits:false, each
   element has its own interpolated value from bp-orbit-spin).               */
.bp-btn-anim-orbit .bp-nav-btn--primary {
  background:
    conic-gradient(
      from var(--bp-orbit-angle),
      transparent            0deg,
      transparent           40deg,
      rgba(255,255,255,.30)  60deg,
      rgba(255,255,255,.95)  82deg,
      rgba(255,255,255,1.00) 90deg,
      rgba(255,255,255,.95)  98deg,
      rgba(255,255,255,.30) 120deg,
      transparent           150deg,
      transparent           360deg
    ),
    var(--bp-btn-fill, var(--bp-color-primary, #ea292e)) !important;
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite !important;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-anim-lava .bp-nav-btn--primary {
    background: var(--bp-btn-fill, var(--bp-color-primary, #ea292e)) !important;
    animation:  none !important;
  }
  .wp-block-button.has-anim-lava .wp-block-button__link {
    background: var(--bp-color-primary, #ea292e) !important;
    animation:  none !important;
  }
  .bp-btn-anim-orbit .bp-nav-btn--primary {
    background: var(--bp-btn-fill, var(--bp-color-primary, #ea292e)) !important;
    animation:  none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION v2 PATCH P5 (1.2.93)

   Fix A — Orbit nav button: spinning-border RING via ::before cover
   P4 used a two-layer background (conic over solid fill) — but the conic top
   layer paints across the whole button FACE (a sweep), not a border ring.
   Correct approach: conic gradient IS the button background; a ::before with
   inset:2px and a solid fill (z-index:-1 → paints above the element background
   but below the text) covers the centre, leaving a 2px conic ring at the edge.

   Fix B — Lava on CTA content buttons (PLAY NOW etc.)
   The site-wide CTA lava rule still used "background: linear-gradient(...)
   !important" (shorthand) which bakes background-position:0% 0% !important —
   killing bp-lava-flow so the gradient never moves ("just pulsing"). Same
   @property --bp-lava-x + longhand fix already applied to the nav button in P4.
   (--bp-lava-x and bp-lava-flow-x are defined in the P4 block above.)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fix A: Orbit NAV button — spinning border ring ─────────────────────────── */

/* Kill the ::after (base shine) entirely for orbit nav */
.bp-btn-anim-orbit .bp-nav-btn--primary::after {
  content:   none !important;
  display:   none !important;
  animation: none !important;
}

/* Button background = spinning conic ring (brand-coloured with a bright arc) */
.bp-btn-anim-orbit .bp-nav-btn--primary {
  background: conic-gradient(
    from var(--bp-orbit-angle),
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 80%, #000000)   0deg,
    var(--bp-color-primary, #ea292e)                                    55deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 35%, #ffffff)   80deg,
    #ffffff                                                             90deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 35%, #ffffff)  100deg,
    var(--bp-color-primary, #ea292e)                                   125deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 80%, #000000)  180deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 80%, #000000)  360deg
  ) !important;
  animation: bp-orbit-spin var(--bp-anim-dur, 2.5s) linear infinite !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Solid inner cover: inset 2px, z-index:-1 so it sits above the conic background
   but below the button text. The 2px gap exposes the conic = spinning ring.    */
.bp-btn-anim-orbit .bp-nav-btn--primary::before {
  content:       '' !important;
  display:       block !important;
  position:      absolute !important;
  inset:         2px !important;
  border-radius: inherit !important;
  background:    var(--bp-btn-fill, var(--bp-color-primary, #ea292e)) !important;
  z-index:       -1 !important;
  animation:     none !important;
  /* neutralise base ::before geometry */
  top:           2px !important;
  left:          2px !important;
  width:         auto !important;
  height:        auto !important;
  transform:     none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

/* ── Fix B: Lava on CTA content buttons — longhand + var(--bp-lava-x) ────────── */
.bp-btn-anim-lava .bp-cta-primary .wp-block-button__link,
.bp-btn-anim-lava .bp-cta-primary.wp-block-button__link,
.bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-lava .is-style-bp-hero-cta .wp-block-button__link,
.bp-btn-anim-lava a.bp-btn-primary {
  background-image: linear-gradient(
    110deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)   0%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  10%,
    var(--bp-color-primary, #ea292e)                                    24%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  36%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107)  50%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  64%,
    var(--bp-color-primary, #ea292e)                                    76%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  90%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
  ) !important;
  background-size:     260% 260% !important;
  background-repeat:   no-repeat !important;
  background-position: var(--bp-lava-x, 0%) 50% !important;
  animation: bp-lava-flow-x var(--bp-anim-dur, 2.5s) ease infinite !important;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-anim-orbit .bp-nav-btn--primary {
    background: var(--bp-btn-fill, var(--bp-color-primary, #ea292e)) !important;
    animation:  none !important;
  }
  .bp-btn-anim-orbit .bp-nav-btn--primary::before {
    content: none !important;
  }
  .bp-btn-anim-lava .bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link,
  .bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link,
  .bp-btn-anim-lava a.bp-btn-primary {
    background: var(--bp-color-primary, #ea292e) !important;
    animation:  none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BP BUTTON ANIMATIONS — PATCH 6  (v1.2.94)
   ───────────────────────────────────────────────────────────────────────────
   ROOT CAUSE (confirmed via live-editor + live-frontend console inspection):
   The bp-gutenberg-patterns plugin prints an inline "HERO BUTTON ENGINE"
   <style> block in wp_head — AFTER the child theme stylesheet — with:

       .wp-block-button.bp-cta-primary .wp-block-button__link:not(.has-background){
           background: var(--bp-btn-gloss, radial-gradient(...)),
                       var(--bp-btn-fill, ...) !important;   /* specificity 0,4,0 */
       }

   Our previous site-wide CTA rules were ALSO (0,4,0) !important, so they TIED
   the engine on specificity but LOST on source order (engine prints later).
   Result on the CTA link: the engine's radial-gloss + brand-fill background
   (background-size:auto, background-position:0% 0%) won, our fire/gold gradient
   never applied, only the wrapper box-shadow glow animated → "just pulsing".
   The NAV button (.bp-nav-btn--primary) is NOT targeted by the engine, so it
   flowed correctly ("header is OK").

   FIX: raise our CTA-link selectors to specificity (0,5,0) by appending the
   always-present .wp-element-button class, so they beat the engine's (0,4,0)
   regardless of source order. Use robust classic background-position keyframes
   (bp-lava-flow) — no @property dependency — for maximum browser support across
   the fleet.
   ══════════════════════════════════════════════════════════════════════════════ */


/* Subtle gold "bling" halo for jackpot — pulses on the button WRAPPER only
   (a box-shadow glow, NOT a fill). The jackpot signature is the emoji confetti
   injected by JS (.bp-spark, see bp_gp_child_jackpot_particles). */
@keyframes bp-jackpot-glow {
  0%, 100% { box-shadow: 0 0 3px  rgba(255,193,7,.45), 0 0 7px  rgba(255,193,7,.25); }
  50%      { box-shadow: 0 0 9px  rgba(255,215,0,.90), 0 0 18px rgba(255,193,7,.55); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   A — LAVA on CTA content buttons (PLAY NOW etc.)  — specificity 0,5,0
   Fire gradient that FLOWS (classic background-position keyframe, robust).
═══════════════════════════════════════════════════════════════════════════ */

/* Site-wide (Customizer) lava mode */
.bp-btn-anim-lava .wp-block-button.bp-cta-primary   .wp-block-button__link.wp-element-button,
.bp-btn-anim-lava .bp-cta-primary >                 .wp-block-button__link.wp-element-button,
.bp-btn-anim-lava .wp-block-button.is-style-bp-hero-cta .wp-block-button__link.wp-element-button,
/* Per-button override applied to a CTA button */
.wp-block-button.bp-cta-primary.has-anim-lava      .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-bp-hero-cta.has-anim-lava .wp-block-button__link.wp-element-button {
  background-image: linear-gradient(
    110deg,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000)   0%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  10%,
    var(--bp-color-primary, #ea292e)                                    24%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  36%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 20%, #ffc107)  50%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 50%, #ff8c00)  64%,
    var(--bp-color-primary, #ea292e)                                    76%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 85%, #000000)  90%,
    color-mix(in srgb, var(--bp-color-primary, #ea292e) 65%, #000000) 100%
  ) !important;
  background-size:     260% 100% !important;
  background-repeat:   no-repeat !important;
  /* Drive the flow via the registered @property --bp-lava-x (defined earlier in
     the P4 block). Animating a custom property is NOT blocked by an !important
     background-position — the declared value stays var(--bp-lava-x) 50% while the
     variable itself animates — so this flows even against the hero engine.      */
  background-position: var(--bp-lava-x, 0%) 50% !important;
  animation: bp-lava-flow-x var(--bp-anim-dur, 2.5s) ease infinite !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   B — JACKPOT on CTA content buttons (PLAY NOW etc.)
   ───────────────────────────────────────────────────────────────────────────
   Signature = casino emoji CONFETTI (⭐🔔💎🍒💰🎰) that pops out of the button,
   injected as .bp-spark spans by bp_gp_child_jackpot_particles() on the front
   end and by the editor spark loop in bp-btn-anim-editor.js in the editor.

   The button itself keeps its NORMAL red hero fill (no gold paint) and has NO
   sweeping shine (that read as "classic"). We add only a soft gold "bling" halo
   on the wrapper. Earlier P6 painted the link gold + gave it a shine sweep —
   both are removed here so jackpot is clearly the confetti effect, not classic.
═══════════════════════════════════════════════════════════════════════════ */

/* CTA link: restore the normal hero fill (re-assert the plugin engine's own
   default at specificity 0,5,0 so it overrides any earlier gold rule), make the
   box a positioned, clipped stage for the emoji sparks, and run no gradient. */
.bp-btn-anim-jackpot .wp-block-button.bp-cta-primary   .wp-block-button__link.wp-element-button,
.bp-btn-anim-jackpot .bp-cta-primary >                 .wp-block-button__link.wp-element-button,
.bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta .wp-block-button__link.wp-element-button,
.wp-block-button.bp-cta-primary.has-anim-jackpot      .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-bp-hero-cta.has-anim-jackpot .wp-block-button__link.wp-element-button {
  overflow: visible !important;  /* sparks burst OUT of the button */
  position: relative !important;
  background:
    var(--bp-btn-gloss, radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%)),
    var(--bp-btn-fill, var(--bp-color-primary, #ea292e)) !important;
  color: #fff !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Kill any sweeping shine on the CTA link (both the earlier gold sweep and the
   original white "classic" sweep) — the confetti is the only motion. */
.bp-btn-anim-jackpot .wp-block-button.bp-cta-primary   .wp-block-button__link.wp-element-button::after,
.bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta .wp-block-button__link.wp-element-button::after,
.wp-block-button.bp-cta-primary.has-anim-jackpot      .wp-block-button__link.wp-element-button::after,
.wp-block-button.is-style-bp-hero-cta.has-anim-jackpot .wp-block-button__link.wp-element-button::after {
  content: none !important;
  animation: none !important;
  background: none !important;
}

/* Soft gold "bling" halo — on the WRAPPER only (a glow, not a fill). */
.bp-btn-anim-jackpot .wp-block-button.bp-cta-primary,
.bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta,
.wp-block-button.bp-cta-primary.has-anim-jackpot,
.wp-block-button.is-style-bp-hero-cta.has-anim-jackpot {
  border-radius: var(--bp-border-radius, 8px) !important;
  animation: bp-jackpot-glow calc(var(--bp-anim-dur, 2.5s) * 0.6) ease-in-out infinite !important;
}


/* P10/P11 FIX — body-append strategy: sparks appended to document.body with
   position:fixed bypass ALL ancestor overflow:hidden (Cover block, wrappers).
   z-index:99999 ensures sparks paint ABOVE the sticky button bar (which uses
   high z-index values) so they are visible while still inside button bounds. */
.bp-spark { position: fixed !important; z-index: 99999 !important; }

/* Override the base bp-spark-float keyframe so sparks travel far enough to
   escape the CTA button visually. --rise is set per-spark by JS.
   The nav button keeps overflow:hidden so the extra travel is clipped there. */
@keyframes bp-spark-float {
  0%   { transform: translateY(0) translateX(0) scale(1.1) rotate(0deg); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateY(var(--rise, -65px)) translateX(var(--dx, 0px)) scale(.18) rotate(var(--dr, 0deg)); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Reduced motion — freeze the lava flow and the jackpot gold halo.
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-anim-lava .wp-block-button.bp-cta-primary .wp-block-button__link.wp-element-button {
    animation: none !important;
    background-position: 0% 50% !important;
  }
  .bp-btn-anim-jackpot .wp-block-button.bp-cta-primary,
  .bp-btn-anim-jackpot .wp-block-button.is-style-bp-hero-cta,
  .wp-block-button.bp-cta-primary.has-anim-jackpot,
  .wp-block-button.is-style-bp-hero-cta.has-anim-jackpot {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ SPACING FIX (fleet-wide, all sites)
   ───────────────────────────────────────────────────────────────────────────
   The plugin CSS sets `margin: 0` on `.bp-faq__answer p` (a nested <p>),
   but on these sites the <p> IS the `.bp-faq__answer` element — so the
   selector misses it. The element keeps its native browser <p> margin (16px 0)
   PLUS the 24px WP is-layout-flow blockGap injected before it as
   margin-block-start. Both render as an empty block below the question row
   even though max-height:0 hides the content.

   Some sites (e.g. the newer .ro brands) additionally render the answer with an
   INLINE margin: `<p class="bp-faq__answer" style="margin-top:8px;margin-bottom:24px">`.
   An inline style has higher priority than any external selector, so a plain
   `.bp-faq__answer { margin: 0 }` is IGNORED and the ~32px gap remains below the
   collapsed question. `margin: 0 !important` overrides the inline declaration
   (inline styles without !important always lose to an !important stylesheet
   rule), so this covers both the inline-margin and no-inline markup variants.
   A hair of padding-top restores breathing room in the open state only.
═══════════════════════════════════════════════════════════════════════════ */
.bp-faq__answer {
  margin: 0 !important;
}
.bp-faq__item.is-open .bp-faq__answer {
  padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ: prevent sticky hover on touch/mobile (P13)
   ───────────────────────────────────────────────────────────────────────────
   On touch screens, tapping fires a synthetic :hover that sticks until the
   next tap. The plugin's .bp-faq__question:hover rule colours the question
   text primary-red — so the previously-tapped item stays red while a new one
   is open. `@media (hover: none)` matches devices whose primary pointer cannot
   truly hover (all touch screens); cancelling the rule there restores normal
   text colour immediately after the tap is released.
═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .bp-faq__question:hover {
    color: var(--bp-color-text, #e8eaf6);
  }
}