/*
Theme Name: PokerPro Theme
Theme URI: https://en.pokerpro.cc/
Description: PokerPro official theme - clean homepage layout with news, recommended sites, promotions and more.
Author: PokerPro
Author URI: https://en.pokerpro.cc/
Template: mercury
Version: 1.0.0
*/

/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS  (source of truth — mirrors GEMINI.md)
───────────────────────────────────────────────────────── */
:root {
    /* ── Surfaces ── */
    --pp-bg:              #FFFFFF;
    --pp-bg-alt:          #F5F7FA;
    --pp-bg-dark:         #0E1419;
    --pp-bg-card:         #1A2028;
    --pp-bg-card-2:       #232A33;
    --pp-border:          #E5E8EC;
    --pp-border-dark:     #2A323B;

    /* ── Type ── */
    --pp-text:            #0E1419;
    --pp-text-soft:       #2A323B;
    --pp-text-muted:      #6B7785;
    --pp-text-invert:     #FFFFFF;
    --pp-text-invert-muted: #8A9BB0;

    /* ── Accent — cyan only ── */
    --pp-cyan-500:        #19C8E0;
    --pp-cyan-600:        #14AAC0;
    --pp-cyan-400:        #4DD5E8;
    --pp-cyan-tint:       #E8FAFD;

    /* ── Semantic ── */
    --pp-red:             #E63946;
    --pp-green:           #06D6A0;
    --pp-gold:            #D4AF37;

    /* ── Typography ── */
    --pp-font-display:    "Oswald", system-ui, sans-serif;
    --pp-font-body:       "Poppins", system-ui, -apple-system, sans-serif;
    --pp-font-logo:       "Outfit", system-ui, sans-serif;
    --pp-fs-section:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --pp-fs-h1:           clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --pp-fs-h2:           clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
    --pp-fs-h3:           1rem;
    --pp-fs-body:         1rem;
    --pp-fs-meta:         0.75rem;
    --pp-fs-tag:          0.7rem;

    /* ── Spacing ── */
    --pp-space-1:         0.25rem;
    --pp-space-2:         0.5rem;
    --pp-space-3:         0.75rem;
    --pp-space-4:         1rem;
    --pp-space-5:         1.5rem;
    --pp-space-6:         2rem;
    --pp-space-7:         3rem;
    --pp-space-8:         4rem;

    /* ── Radius ── */
    --pp-radius-sm:       4px;
    --pp-radius-md:       8px;
    --pp-radius-lg:       12px;
    --pp-radius-pill:     999px;

    /* ── Layout ── */
    --pp-container-max:   1240px;
    --pp-container-pad:   clamp(1rem, 4vw, 2rem);

    /* ── Shadow ── */
    --pp-shadow-xs:       0 1px 2px rgba(0,0,0,.04);
    --pp-shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
    --pp-shadow-md:       0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --pp-shadow-lg:       0 8px 40px rgba(0,0,0,.14);

    /* ── Compatibility aliases (old names → new tokens) ── */
    --pp-accent:          var(--pp-cyan-500);
    --pp-accent-dark:     var(--pp-cyan-600);
    --pp-accent-glow:     var(--pp-cyan-tint);
    --pp-green-dark:      #04b589;
    --pp-gray-btn:        #64748b;
    --pp-gray-btn-dark:   #475569;
    --pp-header-bg:       var(--pp-bg-dark);
    --pp-nav-bg:          var(--pp-bg-card);
    --pp-nav-border:      var(--pp-border-dark);
    --pp-page-bg:         var(--pp-bg);
    --pp-white:           var(--pp-bg);
    --pp-card-border:     var(--pp-border);
    --pp-dark-bg:         var(--pp-bg-dark);
    --pp-dark-card:       var(--pp-bg-card);
    --pp-dark-border:     var(--pp-border-dark);
    --pp-footer-bg:       var(--pp-bg-dark);
    --pp-footer-bottom:   #0A0F14;
    --pp-text-body:       var(--pp-text-soft);
    --pp-text-dim:        var(--pp-text-invert-muted);
    --pp-radius:          var(--pp-radius-md);
    --pp-container:       var(--pp-container-max);
    --pp-section-pad:     var(--pp-space-8);
    --pp-font:            var(--pp-font-body);
}

/* ─────────────────────────────────────────────────────────
   GLOBAL BASE
───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--pp-font);
    background: var(--pp-page-bg);
    color: var(--pp-text);
    -webkit-font-smoothing: antialiased;
    /* Mercury sets overflow:hidden on body which creates a scroll container
       and breaks position:sticky on all descendants. Restore normal vertical
       scroll while still clipping any stray horizontal overflow. */
    overflow-x: clip;
    overflow-y: visible;
    /* Opacity-only (no transform) so the fixed header's containing block
       is never disturbed mid-animation. Entrance only — no exit fade,
       since hiding the outgoing page before the next one is ready just
       turns any slow navigation into a blank white gap instead of the
       old page staying visible like a normal browser navigation. */
    animation: pp-page-in .22s ease-out both;
}
@keyframes pp-page-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}

h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a,
.pp-section-title,
.pp-section-title-standalone,
.pp-hero-heading,
.pp-hero-news-title,
.pp-hero-banner-name,
.pp-card-title,
.pp-news-feat-title,
.pp-news-sub-heading,
.pp-news-card-title,
.pp-article-card-title,
.pp-promo-card-title,
.pp-video-card-title {
    font-family: var(--pp-font-display);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.1;
}

h5, h6,
h5 a, h6 a {
    font-family: var(--pp-font-body);
    font-weight: 700;
}

h2, h2 a { font-size: 2em; line-height: 1.2; }
h2 a     { font-size: unset; }

a { color: var(--pp-accent); }

img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────────────────
   CONTAINER
───────────────────────────────────────────────────────── */
.pp-container,
.space-header-2-top-ins,
.space-page-wrapper,
.space-shortcode-wrap-ins,
.space-footer-ins {
    max-width: var(--pp-container-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--pp-container-pad);
}

/* Full-width section wrapper — use for header, footer, hero band, promotions */
.pp-bleed { width: 100%; }

/* Mercury boxed-layout override — allow full-width rendering */
.space-box.enabled {
    max-width: none;
    margin: 0;
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────
   HEADER — single unified row, full-width
───────────────────────────────────────────────────────── */

/* Mercury height spacer */
.space-header-2-height { position: relative; min-height: 80px; }

/* Always-fixed header */
.pp-hdr-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: var(--pp-bg-dark);
    border-bottom: 1px solid var(--pp-border-dark);
    transition:
        border-color     0.4s ease,
        box-shadow       0.4s ease,
        background       0.4s ease;
}

/* WP admin bar offset */
.admin-bar .pp-hdr-wrap { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .pp-hdr-wrap { top: 46px; }
}

/* Frosted-glass upgrade when scrolled — Mercury adds .fixed */
.pp-hdr-wrap.fixed {
    background: rgba(14, 20, 25, 0.94);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border-color: var(--pp-border-dark);
    box-shadow: 0 2px 20px rgba(0,0,0,.28);
}

/* Header row — logo left, actions right, nav absolutely centered */
/* Taller at rest, shrinks when scrolled */
.pp-hdr-row {
    position: relative;
    width: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    transition: height 0.4s ease;
}
.pp-hdr-wrap.fixed .pp-hdr-row {
    height: 64px;
}

/* ── Logo ── */
.pp-hdr-logo {
    flex-shrink: 0;
    margin-right: 36px;
    display: flex;
    align-items: center;
}
.pp-hdr-logo img,
.space-header-2-top-logo-ins img {
    max-height: 36px;
    width: auto;
    display: block;
}
/* Per-site language flag (set in wp-admin > PokerPro) — sits quietly right of the wordmark */
.pp-hdr-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 10px;
    width: 20px;
    height: 14px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    /* --pp-border-dark reads fine against a white/red flag (old GB) but is
       nearly invisible edge-on-edge with the EU flag's own dark blue field —
       a light hairline plus a touch of shadow separates any flag color from
       the dark header instead of relying on the flag's own contrast. */
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pp-hdr-flag img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* Globe stand-in for the "eu" flag — a colored glyph on a dark field reads
   far more reliably at this tiny badge size than a colored field with a
   glyph cut out of it (every version of that kept vanishing against the
   header). --pp-bg-card-2 is lighter than the header itself so the chip
   still has a visible edge, and cyan is the one color guaranteed to pop
   against it. */
.pp-hdr-flag--globe {
    background: var(--pp-bg-card-2);
    border-color: var(--pp-cyan-500);
}
.pp-hdr-flag--globe i {
    font-size: 10px;
    line-height: 1;
    color: var(--pp-cyan-500);
}
/* Text logo — concept 05 "Pro Badge": lowercase "poker" + PRO as a tag.
   Sizes are in em off the link so the mobile-menu/footer copies only
   need to change one font-size to scale the whole lockup. */
.pp-hdr-text-logo {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.175em;
    font-size: 2.25rem;
    line-height: 1;
    font-family: var(--pp-font-logo);
    font-weight: 800;
}
.pp-hdr-text-logo-poker {
    color: var(--pp-text-invert);
    letter-spacing: -0.04em;
}
/* Nudged down so the tag sits on the x-height band of "poker" rather than
   centring on the full ascender/descender box. */
.pp-hdr-text-logo-pro {
    font-size: 0.375em;
    letter-spacing: 0.04em;
    color: var(--pp-bg-dark);
    background: var(--pp-cyan-500);
    padding: 0.27em 0.47em 0.33em;
    border-radius: var(--pp-radius-sm);
    margin-top: 0.47em;
}

/* ── Navigation — absolutely centered relative to the full header width ── */
.pp-hdr-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pp-hdr-nav .pp-nav-list,
.pp-hdr-nav .pp-nav-list > li > a,
.pp-hdr-nav .pp-nav-list li ul.sub-menu {
    pointer-events: auto;
}
.pp-hdr-nav .pp-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}
.pp-hdr-nav .pp-nav-list > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.pp-hdr-nav .pp-nav-list > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--pp-font-display);
    font-size: .85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    transition: color .25s ease;
}

/* Radial glow — blooms up from the bottom of the nav item */
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0.2);
    width: 100%;
    height: 56px;
    background: radial-gradient(ellipse at 50% 100%, rgba(25, 200, 224, 0.36) 0%, transparent 68%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a:hover::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* Underline — grows from centre outward with a glow */
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--pp-cyan-500), transparent);
    box-shadow: 0 0 8px rgba(25, 200, 224, 0.55);
    transition: width .32s ease;
}
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a:hover::after {
    width: 70%;
}

.pp-hdr-nav .pp-nav-list > li > a:hover,
.pp-hdr-nav .pp-nav-list > li:hover > a {
    color: var(--pp-text-invert);
}

/* Active page state — regular nav items (including PLAY NOW) */
.pp-hdr-nav .pp-nav-list > li.current-menu-item:not(.live-reporting):not(.live) > a,
.pp-hdr-nav .pp-nav-list > li.current-menu-ancestor:not(.live-reporting):not(.live) > a,
.pp-hdr-nav .pp-nav-list > li.current_page_item:not(.live-reporting):not(.live) > a {
    color: var(--pp-text-invert);
}
.pp-hdr-nav .pp-nav-list > li.current-menu-item:not(.live-reporting):not(.live) > a::before,
.pp-hdr-nav .pp-nav-list > li.current-menu-ancestor:not(.live-reporting):not(.live) > a::before,
.pp-hdr-nav .pp-nav-list > li.current_page_item:not(.live-reporting):not(.live) > a::before {
    opacity: 0.65;
    transform: translateX(-50%) scaleX(1);
}
.pp-hdr-nav .pp-nav-list > li.current-menu-item:not(.live-reporting):not(.live) > a::after,
.pp-hdr-nav .pp-nav-list > li.current-menu-ancestor:not(.live-reporting):not(.live) > a::after,
.pp-hdr-nav .pp-nav-list > li.current_page_item:not(.live-reporting):not(.live) > a::after {
    width: 70%;
}

/* Active page state — LIVE REPORTING pill */
.pp-hdr-nav .pp-nav-list > li.live-reporting.current-menu-item > a,
.pp-hdr-nav .pp-nav-list > li.live.current-menu-item > a {
    background: rgba(230, 57, 70, 0.18);
    border-color: rgba(230, 57, 70, 0.85);
    box-shadow: 0 0 16px rgba(230, 57, 70, 0.5), 0 0 32px rgba(230, 57, 70, 0.18);
}

/* PLAY NOW — reset to plain nav link */
.pp-hdr-nav .pp-nav-list > li.highlight > a {
    background: none;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0;
    border: none;
    padding: 0 14px;
    height: 100%;
    margin: 0;
    font-weight: 400;
    box-shadow: none;
}
.pp-hdr-nav .pp-nav-list > li.highlight > a:hover {
    background: none;
    color: var(--pp-text-invert);
    border: none;
    box-shadow: none;
}

/* LIVE REPORTING — broadcast pill */
.pp-hdr-nav .pp-nav-list > li.live-reporting > a,
.pp-hdr-nav .pp-nav-list > li.live > a {
    color: var(--pp-red) !important;
    border-radius: var(--pp-radius-pill);
    padding: 0 13px;
    height: 36px;
    margin: 0 6px;
    border: 1px solid rgba(230, 57, 70, 0.45);
    border-bottom: 1px solid rgba(230, 57, 70, 0.45);
    background: rgba(230, 57, 70, 0.06);
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: 0 0 0 rgba(230, 57, 70, 0);
    transition: background .22s ease, border-color .22s ease, box-shadow .28s ease;
}
.pp-hdr-nav .pp-nav-list > li.live-reporting > a:hover,
.pp-hdr-nav .pp-nav-list > li.live > a:hover {
    background: rgba(230, 57, 70, 0.12);
    border-color: rgba(230, 57, 70, 0.7);
    box-shadow: 0 0 12px rgba(230, 57, 70, 0.25);
}
.pp-hdr-nav .pp-nav-list > li.live-reporting > a::before,
.pp-hdr-nav .pp-nav-list > li.live > a::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--pp-red);
    border-radius: 50%;
    margin-right: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 5px var(--pp-red);
    animation: pp-live-pulse 1.8s ease-in-out infinite;
}
@keyframes pp-live-pulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 5px var(--pp-red); }
    50%       { opacity: .4; box-shadow: 0 0 2px var(--pp-red); }
}

/* Sub-menu */
.pp-hdr-nav .pp-nav-list li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-top: 2px solid var(--pp-accent);
    border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm);
    box-shadow: var(--pp-shadow-md);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s;
    z-index: 100;
}
.pp-hdr-nav .pp-nav-list li:hover > ul.sub-menu,
.pp-hdr-nav .pp-nav-list li.toggled > ul.sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.pp-hdr-nav .pp-nav-list li ul.sub-menu li a {
    display: block;
    padding: 9px 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .3px;
    transition: color .12s, background .12s;
}
.pp-hdr-nav .pp-nav-list li ul.sub-menu li a:hover {
    color: var(--pp-text-invert);
    background: var(--pp-bg-card-2);
}

/* ── Mega menu (News, Play now, Promotions, Strategy) ─────
   Full-width panel injected into the li by Mega_Menu_Walker (inc/mega-menu.php).
   Anchored with position:absolute; top:100% against .pp-hdr-row — same
   pattern this theme already uses for its plain-submenu items
   (.pp-nav-list li ul.sub-menu, a few rules up), just spanning full width
   instead of a narrow dropdown. That requires .pp-hdr-row (position:relative,
   full viewport width, sits flush at the top of .pp-hdr-wrap) to be this
   panel's containing block rather than its own <li> — see the
   `li:has(.pp-mega-panel)` override below. This replaced an earlier
   position:fixed + JS-synced-custom-property approach: computing the
   header's rendered edge in JS and writing it to a CSS var broke silently
   whenever the script's execution was delayed past DOMContentLoaded (e.g.
   by a "delay JS until interaction" perf optimization), leaving the panel
   on its unadjusted fallback and reopening the exact gap this exists to
   prevent. Anchoring in pure CSS removes that entire failure mode — no
   script has to run, at any point, for this to be correctly positioned.
   The seam is a soft cyan gradient glow (::before) rather than a flat
   border — a hard 2px bar read as a second, competing line right under the
   header's own border-bottom. Background carries a faint cyan light-leak,
   the one gradient use this theme allows outside image overlays. */
.pp-hdr-nav .pp-nav-list > li:has(.pp-mega-panel) {
    position: static;
}
.pp-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    background:
        radial-gradient(900px 220px at 12% 0%, rgba(25, 200, 224, .07), transparent 60%),
        var(--pp-bg-card);
    box-shadow: var(--pp-shadow-lg), 0 12px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    /* Opacity-only, no transform — panels differ in height per nav item
       (Play Now's room cards vs. Promotions' short strip vs. News/Strategy),
       and sliding a translateY offset in read as the whole panel "jumping"
       into place, worse the bigger that height gap was. Same fix as body's
       page-in animation above for the same reason. */
    transition: opacity .18s ease;
}
.pp-mega-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25, 200, 224, .85) 25%, rgba(77, 213, 232, .95) 50%, rgba(25, 200, 224, .85) 75%, transparent);
    box-shadow: 0 0 14px rgba(25, 200, 224, .55);
}

/* On a room's own review page, tint the panel's top seam and corner
   light-leak with that room's own brand color instead of the site-wide
   cyan — same "this page belongs to this room" treatment already applied
   to the header search toggle/dropdown below via --pp-review-brand-rgb
   (set on <html> by the color-extraction script in single-casino/style-1.php,
   scoped to body.single-organization so it can't leak onto other pages).
   No separate lighter shade to fake the shine highlight here (unlike the
   cyan version above, which has one baked in) — full-opacity brand color at
   the gradient's center against lower-opacity brand color at the edges
   produces the same shine using only the one extracted hue. */
body.single-organization .pp-mega-panel {
    background:
        radial-gradient(900px 220px at 12% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), .07), transparent 60%),
        var(--pp-bg-card);
}
body.single-organization .pp-mega-panel::before {
    background: linear-gradient(90deg, transparent, rgba(var(--pp-review-brand-rgb, 25,200,224), .85) 25%, rgba(var(--pp-review-brand-rgb, 25,200,224), 1) 50%, rgba(var(--pp-review-brand-rgb, 25,200,224), .85) 75%, transparent);
    box-shadow: 0 0 14px rgba(var(--pp-review-brand-rgb, 25,200,224), .55);
}

/* Mega menu temporarily disabled for launch (2026-09-28) — client hasn't
   given final direction on its content/behavior yet, and the site needs to
   ship without it in the meantime. Everything else (markup, PHP content,
   panel styling/positioning below, JS toggle) is untouched — re-enable by
   uncommenting this rule once we have client sign-off. */
/*
.pp-hdr-nav .pp-nav-list li:hover > .pp-mega-panel,
.pp-hdr-nav .pp-nav-list li.toggled > .pp-mega-panel,
.pp-hdr-nav .pp-nav-list li:focus-within > .pp-mega-panel {
    opacity: 1;
    pointer-events: auto;
}
*/

.pp-mega-panel-inner {
    position: relative;
    max-width: var(--pp-container-max);
    margin: 0 auto;
    padding: var(--pp-space-6) var(--pp-container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-6);
}

.pp-mega-row {
    display: flex;
    gap: var(--pp-space-8);
}

.pp-mega-col { flex: 1; min-width: 0; }
.pp-mega-col--wide { flex: 2; }

.pp-mega-col-title {
    display: block;
    font-family: var(--pp-font-display);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-text-invert-muted);
    margin-bottom: var(--pp-space-4);
}

.pp-mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-mega-links--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px var(--pp-space-6);
}
.pp-mega-links li a {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--pp-radius-sm);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--pp-font-body);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.pp-mega-links li a:hover {
    color: var(--pp-text-invert);
    background: var(--pp-bg-card-2);
}

/* Latest-articles strip — shared by the News headlines row and the
   Promotions/Strategy panels (their only content, since both are flat
   categories with nothing to build columns from). */
.pp-mega-headlines {
    padding-top: var(--pp-space-5);
    border-top: 1px solid var(--pp-border-dark);
}
.pp-mega-headline-list {
    display: flex;
    gap: var(--pp-space-4);
}
.pp-mega-headline-list--wide { gap: var(--pp-space-5); }

.pp-mega-headline {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px;
    margin: -8px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    transition: background .15s;
}
.pp-mega-headline:hover { background: var(--pp-bg-card-2); }

.pp-mega-headline-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    background: var(--pp-bg-card-2);
}
.pp-mega-headline-list--wide .pp-mega-headline-thumb { width: 80px; height: 80px; }
.pp-mega-headline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-mega-headline-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.pp-mega-headline-title {
    font-family: var(--pp-font-body);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pp-text-invert);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-mega-headline-date {
    font-size: .68rem;
    color: var(--pp-text-invert-muted);
}

/* Play now — compact recommended-room cards, same data as the homepage's
   "Recommended Poker Sites" block, restyled for the dark mega panel. Each
   card picks up that room's own brand color (--room-brand-rgb, same source
   as the homepage list) for its top accent and hover glow, so the row reads
   as distinct rooms rather than repeated generic tiles. */
.pp-mega-rooms {
    display: flex;
    gap: var(--pp-space-4);
}
.pp-mega-room {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pp-space-3);
    padding: var(--pp-space-5) var(--pp-space-4) var(--pp-space-4);
    background: var(--pp-bg-card-2);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pp-mega-room::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    width: 220px;
    height: 160px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse closest-side, rgba(var(--room-brand-rgb, 25,200,224), .22), transparent 72%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: -1;
}
.pp-mega-room:hover {
    border-color: rgba(var(--room-brand-rgb, 25,200,224), .4);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.pp-mega-room:hover::after { opacity: 1; }

.pp-mega-room-num {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    color: var(--pp-text-invert-muted);
    font-family: var(--pp-font-display);
    font-size: .68rem;
    font-weight: 700;
}

.pp-mega-room-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    /* Card padding-top (24px) + this margin must clear the absolutely
       positioned num badge (top:12px, 20px tall → bottom edge at 32px from
       the card's own top edge, ignoring padding). At the old 4px margin the
       logo box started at 28px — inside the badge's own box — so on wide
       wordmark logos centered close to the left edge (e.g. PokerPlanets),
       the badge's chip painted over and clipped the logo's leading glyphs. */
    margin-top: 14px;
}
.pp-mega-room-logo img {
    /* height:100% + width:auto (not width:100%) so every logo is scaled off
       the SAME axis — height. Forcing width:100% too made object-fit:contain
       pick whichever axis bound first per image's own aspect ratio: wide
       wordmarks (PokerPlanets, party poker) got letterboxed short while
       squarer marks (GG Poker, BetKings) filled the full box — same nominal
       box, visibly different logo heights. Sizing off height alone keeps
       every logo's cap-height identical; max-width is just an overflow
       guard for unusually wide marks, not the primary constraint.
       (Same fix should apply to .pp-room-logo img below if that list shows
       the same unevenness.) */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Card is permanently dark (unlike .pp-room-row, which only goes dark on
       hover) — flatten every room's logo to a white mark unconditionally,
       same brightness(0)+invert(1) technique as .pp-room-row above. */
    filter: brightness(0) invert(1);
}
.pp-mega-room-logo-ph {
    font-size: .7rem;
    font-weight: 700;
    color: var(--pp-text-invert-muted);
    text-transform: uppercase;
}

.pp-mega-room-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pp-mega-room-bonus {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pp-text-invert);
    line-height: 1.25;
}
.pp-mega-room-rating { display: flex; gap: 1px; }
.pp-mega-room-rating .pp-star { font-size: .72rem; }
.pp-mega-room-rating .pp-star--empty { color: rgba(255, 255, 255, .25); }

.pp-mega-room-play {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: var(--pp-radius-pill);
    transition: background .15s;
}
.pp-mega-room-play:hover { background: var(--pp-cyan-600); }

.pp-mega-more {
    display: inline-flex;
    margin-top: var(--pp-space-5);
    padding: 10px 20px;
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: var(--pp-radius-pill);
    transition: background .15s;
}
.pp-mega-more:hover { background: #000; }

/* ── Right actions: search + hamburger ── */
.pp-hdr-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

/* ── Unified search widget ── */
.pp-search-widget {
    display: flex;
    align-items: center;
}

/* Shell: owns background + border-radius + overflow — contains both pill and toggle */
.pp-sw-shell {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    transition:
        background .32s ease,
        border-color .32s ease,
        box-shadow .32s ease,
        border-radius .15s ease;
}
.pp-sw-open .pp-sw-shell {
    background: var(--pp-bg-card);
    border-color: rgba(25, 200, 224, .4);
    box-shadow: 0 0 22px rgba(25, 200, 224, .18);
}
.pp-sw-open.pp-sdrop-active .pp-sw-shell {
    border-radius: 18px 18px 0 0;
}

/* Pill: slides open to reveal the input */
.pp-sw-pill {
    width: 0;
    height: 36px;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: width .42s cubic-bezier(.4,0,.2,1);
}
.pp-sw-open .pp-sw-pill {
    width: 264px;
}

/* Toggle — rightmost cap of the shell, always visible. Resting state is an
   outline cyan pill (same variant as the site's other pill CTAs) so search
   reads as a control instead of disappearing into the dark header. */
.pp-sw-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--pp-cyan-500);
    border-radius: var(--pp-radius-pill);
    background: transparent;
    cursor: pointer;
    color: var(--pp-cyan-500);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    box-shadow: 0 0 14px rgba(25, 200, 224, .18);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .18s ease, color .15s ease, padding .18s ease, width .18s ease, box-shadow .18s ease;
}
.pp-sw-toggle:hover {
    background: rgba(25, 200, 224, .1);
    border-color: var(--pp-cyan-600);
    box-shadow: 0 0 20px rgba(25, 200, 224, .3);
}
.pp-sw-toggle:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}

/* Icon — JS swaps fa-search ↔ fa-times with a scale transition */
.pp-sw-toggle i {
    font-size: .85rem;
    transition: transform .2s ease, opacity .15s ease;
}
.pp-sw-toggle-label { white-space: nowrap; }

/* Open state: the shell itself becomes the visible pill (see .pp-sw-open
   .pp-sw-shell below), so the toggle reverts to a plain icon-only close cap. */
.pp-sw-open .pp-sw-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    border-color: transparent;
    background: transparent;
    color: var(--pp-cyan-500);
    box-shadow: none;
}
.pp-sw-open .pp-sw-toggle:hover { color: var(--pp-cyan-600); }
.pp-sw-open .pp-sw-toggle-label { display: none; }
/* The shell already shows its own border/glow while open — a second
   focus-visible ring on the close button just reads as a stray circle. */
.pp-sw-open .pp-sw-toggle:focus-visible { outline: none; }

/* Form inside the pill */
.pp-sw-form {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    white-space: nowrap;
    background: transparent !important;
}
.pp-sw-open .pp-sw-form {
    opacity: 1;
    pointer-events: auto;
}

/* Input — force dark theme to override any Mercury / browser defaults.
   Mercury's global `input[type="text"]` reset (border-radius, 1px bottom
   border, 45px height) beats a bare `.pp-sw-input` class on specificity
   (attribute+type selector outranks a single class), so those three
   need !important here or they leak through. */
.pp-sw-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    outline: none;
    box-shadow: none;
    color: var(--pp-text-invert) !important;
    font-size: .875rem;
    font-family: inherit;
    letter-spacing: .01em;
    -webkit-appearance: none;
    appearance: none;
}
.pp-sw-input::placeholder { color: #6B7785; }
/* Kill all browser-native search decorations */
.pp-sw-input::-webkit-search-cancel-button,
.pp-sw-input::-webkit-search-decoration,
.pp-sw-input::-webkit-search-results-button,
.pp-sw-input::-webkit-search-results-decoration { display: none; }
/* Kill autofill yellow on Chrome */
.pp-sw-input:-webkit-autofill,
.pp-sw-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--pp-bg-card) inset !important;
    -webkit-text-fill-color: var(--pp-text-invert) !important;
}

/* Hamburger (mobile) */
.pp-hdr-hamburger {
    background: none;
    border: none;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 6px;
}
.pp-hdr-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--pp-text-muted);
    border-radius: 2px;
    transition: background .15s;
}
.pp-hdr-hamburger:hover span { background: var(--pp-cyan-500); }

/* ── Casino review pages: recolor the existing cyan accents to the
   room's own brand color (same --pp-review-brand-rgb the hero/sidebar
   use) — same header, same effects, just the color swapped. The aces
   plugin rewrites the "single-casino" body class to
   "single-organization" (aces_change_casino_body_classes), so that's
   the class to key off, not WP's default. ── */
body.single-organization .pp-hdr-wrap .pp-hdr-text-logo-pro {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-hdr-wrap {
    border-bottom-color: rgba(var(--pp-review-brand-rgb, 25,200,224), 0.22);
}
body.single-organization .pp-hdr-wrap.fixed {
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), 0.22);
}
body.single-organization .pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.36) 0%, transparent 68%);
}
body.single-organization .pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::after {
    background: linear-gradient(90deg, transparent, rgb(var(--pp-review-brand-rgb, 25,200,224)), transparent);
    box-shadow: 0 0 8px rgba(var(--pp-review-brand-rgb, 25,200,224), 0.55);
}
body.single-organization .pp-hdr-hamburger:hover span {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
/* The nav's own always-visible bottom glow (.pp-hdr-wrap::after, used
   site-wide) is hardcoded cyan by design so it blends into whatever's
   below it. On review pages that "whatever's below" is the brand-
   colored hero, so this glow needs to follow the brand color too —
   this is likely the "navigation blue accent" that stayed cyan. */
body.single-organization .pp-hdr-wrap::after {
    background:
        radial-gradient(ellipse 45% 100% at 28% 100%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 100%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 50%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.09) 0%, transparent 65%);
}

/* ── Search widget: adapt to the room's brand color too (button, opened
   bar, results dropdown) — same body.single-organization scope as the
   rest of the header. Desktop-only for the toggle's own border/glow since
   mobile intentionally strips that chrome down to a bare icon. ── */
@media (min-width: 968px) {
    body.single-organization .pp-sw-toggle {
        border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
        box-shadow: 0 0 14px rgba(var(--pp-review-brand-rgb, 25,200,224), .18);
    }
    body.single-organization .pp-sw-toggle:hover {
        background: rgba(var(--pp-review-brand-rgb, 25,200,224), .1);
        border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .82);
        box-shadow: 0 0 20px rgba(var(--pp-review-brand-rgb, 25,200,224), .3);
    }
}
body.single-organization .pp-sw-toggle { color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }
body.single-organization .pp-sw-toggle:focus-visible { outline-color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }
body.single-organization .pp-sw-open .pp-sw-shell {
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .4);
    box-shadow: 0 0 22px rgba(var(--pp-review-brand-rgb, 25,200,224), .18);
}
body.single-organization .pp-sw-open .pp-sw-toggle {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
    border-color: transparent;
    box-shadow: none;
}
body.single-organization .pp-sw-open .pp-sw-toggle:hover { color: rgba(var(--pp-review-brand-rgb, 25,200,224), .82); }
body.single-organization .pp-search-dropdown { border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .4); }
body.single-organization .pp-sdrop-cat { color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }
body.single-organization .pp-sdrop-see-all:hover,
body.single-organization .pp-sdrop-see-all.pp-sdrop--focused { color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }

@media (max-width: 967px) {
    body.single-organization .pp-sw-toggle { color: var(--pp-text-invert); }
    body.single-organization .pp-sw-open .pp-sw-shell,
    body.single-organization .pp-sw-open.pp-sdrop-active .pp-sw-shell {
        box-shadow:
            0 0 0 1px rgba(var(--pp-review-brand-rgb, 25,200,224), .4),
            0 0 22px rgba(var(--pp-review-brand-rgb, 25,200,224), .18),
            0 8px 24px rgba(0, 0, 0, .35);
    }
}

/* Suppress mercury's two-row chrome (our header uses none of these elements) */
.space-header-2-top { display: none !important; }

/* ── Mobile menu — cyan glassmorphic off-canvas ──
   Template: theme-parts/mobile-menu.php (overrides mercury's version).
   Dims + blurs the page behind, panel is a frosted dark-glass surface
   with a soft cyan radial-gradient light-leak (the one gradient effect
   the style guide allows) instead of a flat solid fill. */
.space-mobile-menu {
    background: rgba(6, 10, 13, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.space-mobile-menu .space-mobile-menu-block {
    width: 88vw;
    max-width: 380px;
    background: linear-gradient(180deg, rgba(26, 32, 40, .90) 0%, rgba(12, 16, 20, .96) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    border-left: 1px solid rgba(25, 200, 224, .22);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .5), inset 1px 0 0 rgba(255, 255, 255, .04);
    overflow-x: hidden;
}
.space-mobile-menu .space-mobile-menu-block::before,
.space-mobile-menu .space-mobile-menu-block::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.space-mobile-menu .space-mobile-menu-block::before {
    top: -18%;
    right: -35%;
    width: 75%;
    height: 40%;
    background: radial-gradient(circle, rgba(25, 200, 224, .30) 0%, transparent 70%);
}
.space-mobile-menu .space-mobile-menu-block::after {
    bottom: -12%;
    left: -25%;
    width: 60%;
    height: 32%;
    background: radial-gradient(circle, rgba(25, 200, 224, .14) 0%, transparent 70%);
}
.space-mobile-menu .space-mobile-menu-block-ins {
    position: relative;
    z-index: 1;
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Header row — text logo + close button */
.space-mobile-menu .space-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Mercury's ".space-mobile-menu-header a { display: inline-block }" would
   drop the flex layout, losing the gap and vertical centring of the tag. */
.space-mobile-menu .space-mobile-menu-header a.pp-hdr-text-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-family: var(--pp-font-logo);
}
/* Keep logo + flag as one group on the left; header is a 3-item flex
   row (logo, flag, close button) so space-between would otherwise
   spread the flag away from the logo it belongs next to. */
.space-mobile-menu .space-mobile-menu-header .pp-hdr-flag {
    margin-right: auto;
}
/* Mercury's ".space-mobile-menu-header span { display: block; font-family:
   'Roboto'; color: #7f8c8d; … }" targets every span in this header —
   including our logo spans — and its explicit declarations beat the
   logo font/color the spans would otherwise inherit from the parent
   link (including its 0.75em font-size, which would shrink "poker" and
   blow up the PRO tag). Restate font, size and color so the panel
   matches the header. */
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-poker,
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-pro {
    display: inline-block;
    font-family: var(--pp-font-logo);
    font-weight: 800;
    line-height: 1;
}
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-poker {
    font-size: 1em;
    color: var(--pp-text-invert);
}
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-pro {
    font-size: 0.375em;
    color: var(--pp-bg-dark);
}
.space-mobile-menu .space-mobile-menu-close-button {
    position: relative;
    top: auto;
    right: auto;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background .15s, border-color .15s;
}
.space-mobile-menu .space-mobile-menu-close-button:hover {
    background: rgba(25, 200, 224, .12);
    border-color: rgba(25, 200, 224, .4);
}
.space-mobile-menu .space-close-icon .to-right,
.space-mobile-menu .space-close-icon .to-left {
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1.5px;
    margin: -1px 0 0 -8px;
    background: var(--pp-text-invert-muted);
    transition: background .15s;
}
.space-mobile-menu .space-mobile-menu-close-button:hover .to-right,
.space-mobile-menu .space-mobile-menu-close-button:hover .to-left { background: var(--pp-cyan-500); }

/* Nav list */
.space-mobile-menu .space-mobile-menu-list { flex: 1; }
.space-mobile-menu .space-mobile-menu-list ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.space-mobile-menu .space-mobile-menu-list ul li:last-child { border-bottom: none; }
.space-mobile-menu .space-mobile-menu-list ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0;
    color: var(--pp-text-invert);
    font-family: var(--pp-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    transition: color .15s, padding-left .15s;
}
.space-mobile-menu .space-mobile-menu-list ul li a:hover,
.space-mobile-menu .space-mobile-menu-list ul li a:focus-visible {
    color: var(--pp-cyan-500);
    padding-left: 6px;
}
.space-mobile-menu li.menu-item.highlight { background: none; margin: 0; }
.space-mobile-menu .space-mobile-menu-list ul li.menu-item-has-children:after,
.space-mobile-menu .space-mobile-menu-list ul li.menu-item-has-children.space-up:after {
    color: var(--pp-text-invert-muted);
}
.space-mobile-menu .space-mobile-menu-list ul li ul.sub-menu {
    padding: 0 0 8px 4px;
}
.space-mobile-menu .space-mobile-menu-list ul li ul.sub-menu li {
    border-bottom: none;
}
.space-mobile-menu .space-mobile-menu-list ul li ul.sub-menu li a {
    min-height: 40px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--pp-text-invert-muted);
}

/* Footer copyright */
.space-mobile-menu .space-mobile-menu-copy {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--pp-text-invert-muted);
    font-family: var(--pp-font-body);
    font-size: .75rem;
}
.space-mobile-menu .space-mobile-menu-copy a { color: var(--pp-text-invert-muted); }

/* Mercury sets Roboto on form fields; Roboto is no longer loaded, so pin
   them to the body face instead of letting them fall back to sans-serif. */
input[type="text"],
input[type="tel"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    font-family: var(--pp-font-body);
}
.space-mobile-menu .space-mobile-menu-copy a:hover { color: var(--pp-cyan-500); }

.space-mobile-menu-icon div,
.space-mobile-menu-icon span { height: 2px !important; }

@media (max-width: 380px) {
    .space-mobile-menu .space-mobile-menu-block { width: 100vw; max-width: none; }
}

/* Mercury overlay + close button — hidden; replaced by inline search */
.space-header-search-block,
.desktop-search-close-button { display: none !important; }

/* ── Search on tablet/mobile — same breakpoint the hamburger takes over
   nav. Inline expansion (desktop) has no room here once the hamburger
   sits next to it, so the pill breaks out into a full-width bar
   docked to the bottom of the header instead of squeezing sideways. ── */
@media (max-width: 967px) {
    /* No room for the label pill next to the hamburger — collapse back to a
       bare white icon at the 44px touch-target minimum (no border/glow; the
       circle chrome doesn't read well at this size, and cyan is too loud
       next to the plain white hamburger). */
    .pp-sw-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border: none;
        background: transparent;
        box-shadow: none;
        color: var(--pp-text-invert);
    }
    .pp-sw-toggle:hover { background: transparent; border-color: transparent; box-shadow: none; }
    .pp-sw-toggle:focus,
    .pp-sw-toggle:active { outline: none; box-shadow: none; background: transparent; }
    .pp-sw-toggle-label { display: none; }
    .pp-sw-toggle i { font-size: 1.05rem; }

    .pp-hdr-hamburger span { background: var(--pp-text-invert); }

    .pp-sw-open .pp-sw-shell,
    .pp-sw-open.pp-sdrop-active .pp-sw-shell {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        border-radius: 0;
        box-shadow: 0 0 0 1px rgba(25, 200, 224, .4), 0 0 22px rgba(25, 200, 224, .18), 0 8px 24px rgba(0, 0, 0, .35);
    }
    .pp-sw-open .pp-sw-pill {
        width: auto;
        flex: 1 1 auto;
        height: 52px;
    }
    .pp-sw-open .pp-sw-toggle { width: 52px; height: 52px; }
    .pp-sw-open .pp-sw-form { padding: 0 16px 0 20px; }
    .pp-sw-open .pp-sw-input { font-size: 1rem; }
}

/* ── Live search dropdown ── */
.pp-search-dropdown {
    position: fixed;
    z-index: 9999;
    background: var(--pp-bg-card);
    border: 1px solid rgba(25, 200, 224, .4);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: none;
}

.pp-search-dropdown.pp-sdrop--visible {
    display: block;
    animation: ppSdropIn .14s ease;
}

/* Full-width mobile search bar (see .pp-sw-open .pp-sw-shell) sits flush
   with the viewport edges — the results list should match, not float
   with rounded corners mid-screen. */
@media (max-width: 967px) {
    .pp-search-dropdown { border-left: none; border-right: none; border-radius: 0; }
}

@keyframes ppSdropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pp-sdrop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none;
    border-bottom: 1px solid var(--pp-border-dark);
    transition: background .1s;
    color: inherit;
}

.pp-sdrop-item:last-of-type { border-bottom: none; }

.pp-sdrop-item:hover,
.pp-sdrop-item.pp-sdrop--focused { background: var(--pp-bg-dark); }

.pp-sdrop-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
}

.pp-sdrop-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert-muted);
    font-size: .75rem;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
}

.pp-sdrop-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pp-sdrop-title {
    font-size: .8rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0;
    color: var(--pp-text-invert);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.pp-sdrop-cat {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #19C8E0;
}

.pp-sdrop-see-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--pp-text-invert-muted);
    text-decoration: none;
    background: var(--pp-bg-dark);
    transition: color .15s;
}

.pp-sdrop-see-all:hover,
.pp-sdrop-see-all.pp-sdrop--focused { color: var(--pp-cyan-500); }

.pp-sdrop-see-all i { font-size: .65rem; }

.pp-sdrop-empty {
    padding: 14px;
    font-size: .8rem;
    color: var(--pp-text-invert-muted);
    text-align: center;
}

.pp-sdrop-empty strong { color: var(--pp-text-invert); font-weight: 600; }

/* ── Live search: searching state ── */
.pp-sdrop-skel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--pp-border-dark);
}

.pp-sdrop-skel:last-child { border-bottom: none; }

.pp-sdrop-skel-thumb,
.pp-sdrop-skel-line {
    border-radius: 4px;
    background: linear-gradient(
        100deg,
        var(--pp-bg-dark) 40%,
        #232b34 55%,
        var(--pp-bg-dark) 70%
    );
    background-size: 200% 100%;
    animation: ppSdropPulse 1.2s ease-in-out infinite;
}

.pp-sdrop-skel-thumb { width: 40px; height: 40px; flex-shrink: 0; }

.pp-sdrop-skel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pp-sdrop-skel-line--title { height: 10px; width: 70%; }
.pp-sdrop-skel-line--cat   { height: 8px;  width: 35%; }

@keyframes ppSdropPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-sdrop-skel-thumb,
    .pp-sdrop-skel-line { animation: none; background: var(--pp-bg-dark); }
}

/* ─────────────────────────────────────────────────────────
   INNER-PAGE TITLE BOX
───────────────────────────────────────────────────────── */
.space-title-box {
    background: #fff;
    border-bottom: 1px solid var(--pp-card-border);
}
.space-archive-title-box {
    text-align: center;
    background: linear-gradient(to bottom, #f9fafb, #fff);
    border-bottom: 1px solid var(--pp-card-border);
}
.space-title-box h1,
.space-title-box-h1 h1 {
    color: var(--pp-text);
    font-weight: 800;
    font-size: 2.25em;
    line-height: 1.2;
}
.space-title-box h1 { text-align: center; }
.space-title-box-ins { padding: 48px 24px; }

/* Archive / exposed-news list title */
.space-archive-loop-item-title a { font-size: 2.1em !important; }

/* Inner-page content */
.space-page-content a { color: var(--pp-accent); text-decoration: underline; }
.space-page-content-excerpt { display: none; }
.space-content-section.no-sidebar { max-width: 1200px; margin: 0 auto; }

/* ─────────────────────────────────────────────────────────
   SINGLE ARTICLE
───────────────────────────────────────────────────────── */

/* Hero band — white background with animated gradient orbs */
.pp-single-hero {
    background-color: var(--pp-bg-dark);
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--pp-border-dark);
}
/* Same edge-anchored glow bands as .pp-review-hero, fixed to the
   default site cyan (articles have no per-brand color to key off). */
.pp-single-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 38% 100% at  8% 100%, rgba(25,200,224, .68), transparent),
        radial-gradient(ellipse 38% 100% at 92% 100%, rgba(25,200,224, .62), transparent),
        radial-gradient(ellipse 32% 100% at 50% 100%, rgba(25,200,224, .50), transparent);
}
.pp-single-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 45% 100% at 28% 0%, rgba(25,200,224, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 0%, rgba(25,200,224, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 0%, rgba(25,200,224, 0.16) 0%, transparent 65%);
}
.pp-single-hero .pp-container { position: relative; z-index: 1; }
.pp-single-hero-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pp-single-hero-cat {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--pp-radius-sm);
    text-decoration: none;
    transition: background .15s;
}
.pp-single-hero-cat:hover { background: var(--pp-cyan-600); }

.pp-single-title {
    color: var(--pp-text-invert);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 20px;
    max-width: 820px;
}
.pp-single-excerpt {
    color: rgba(255,255,255,.65);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 720px;
    margin: 0 0 24px;
}
.pp-single-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
}
.pp-single-byline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-single-byline-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-single-byline-author {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-text-invert);
}
.pp-single-byline-author a {
    color: var(--pp-cyan-500);
    text-decoration: none;
}
.pp-single-byline-author a:hover { text-decoration: underline; }
.pp-single-byline-date {
    font-size: .8rem;
    color: rgba(255,255,255,.45);
}

/* Featured image — inside the hero band */
.pp-single-feat-img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--pp-radius-md);
    margin-top: 32px;
}

/* Article body section */
.pp-single-body-section {
    background-color: #ffffff;
}

/* Two-column layout */
.pp-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    padding: 48px 0 72px;
    align-items: start;
}
.pp-single-body { min-width: 0; }

/* Prose */
.pp-single-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--pp-text);
}
.pp-single-content > * + * { margin-top: 1.25em; }

/* Section headings — same accent-underline system as .pp-review-content,
   using the plain site cyan */
.pp-single-content h2 {
    position: relative;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-top: 2.2em;
    padding-bottom: .55em;
    color: var(--pp-text);
}
.pp-single-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg, var(--pp-cyan-500) 0%, rgba(25,200,224,.15) 100%);
}
.pp-single-content h3 {
    position: relative;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 700;
    margin-top: 1.7em;
    padding-left: 14px;
    letter-spacing: -.01em;
    color: var(--pp-text);
}
.pp-single-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
    opacity: .55;
}
.pp-single-content a {
    color: var(--pp-cyan-600);
    text-decoration: underline;
    text-decoration-color: rgba(25,200,224,.35);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s;
}
.pp-single-content a:hover { text-decoration-color: rgba(25,200,224,.8); }
.pp-single-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--pp-radius-md);
}

/* Blockquotes — glass callout, matching review/play-now content */
.pp-single-content blockquote {
    position: relative;
    padding: 18px 22px 18px 26px;
    margin: 1.8em 0;
    background: linear-gradient(160deg, rgba(25,200,224,.08), rgba(25,200,224,.02));
    border: 1px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-soft);
    font-style: italic;
}
.pp-single-content blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
}
.pp-single-content blockquote p:last-child { margin-bottom: 0; }

/* Lists — custom markers instead of default browser bullets/numbers */
.pp-single-content ul,
.pp-single-content ol {
    padding-left: .2em;
    list-style: none;
}
.pp-single-content ol { counter-reset: pp-sc-ol; }
.pp-single-content li {
    position: relative;
    padding-left: 1.5em;
}
.pp-single-content li + li { margin-top: .55em; }
.pp-single-content ul > li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pp-cyan-500);
}
.pp-single-content ol > li { counter-increment: pp-sc-ol; }
.pp-single-content ol > li::before {
    content: counter(pp-sc-ol);
    position: absolute;
    left: 0;
    top: .05em;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(25,200,224,.12);
    color: var(--pp-cyan-600);
}

/* Tables — same unified glass treatment as review/play-now content */
.pp-single-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: .9rem;
    margin: 1.8em 0;
    border-radius: var(--pp-radius-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(25,200,224,.20) !important;
    background: rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}
.pp-single-content table thead tr,
.pp-single-content table th,
.pp-single-content table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
.pp-single-content table thead tr,
.pp-single-content table thead th {
    background:
        linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 100%),
        rgba(25,200,224,.16) !important;
    background-color: rgba(25,200,224,.16) !important;
    border-bottom: 1px solid rgba(25,200,224,.24) !important;
}
.pp-single-content table thead th {
    padding: 13px 18px;
    text-align: left;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text) !important;
    white-space: nowrap;
}
.pp-single-content table tbody tr,
.pp-single-content table tbody td {
    background: transparent !important;
    background-color: transparent !important;
}
.pp-single-content table tbody tr {
    border-bottom: 1px solid var(--pp-border) !important;
    transition: background .15s;
}
.pp-single-content table tbody tr:last-child { border-bottom: none !important; }
.pp-single-content table tbody tr:nth-child(even) { background: rgba(25,200,224,.05) !important; }
.pp-single-content table tbody tr:hover,
.pp-single-content table tbody tr:nth-child(even):hover { background: rgba(25,200,224,.10) !important; }
.pp-single-content table td {
    padding: 13px 18px;
    color: var(--pp-text) !important;
    vertical-align: top;
    line-height: 1.5;
}
.pp-single-content table td:first-child {
    font-weight: 700;
    color: var(--pp-text-soft);
    white-space: nowrap;
}

/* Dividers hidden — same editorial choice as review/play-now content */
.pp-single-content hr { display: none; }

/* Tags */
.pp-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 32px;
    margin-top: 40px;
    border-top: 1px solid var(--pp-border);
}
.pp-single-tags a {
    display: inline-block;
    border: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
    font-size: .8rem;
    padding: 5px 14px;
    border-radius: var(--pp-radius-pill);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pp-single-tags a:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
}

/* Page pagination */
.pp-single-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}
.pp-single-pages span a,
.pp-single-pages span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    font-size: .85rem;
    text-decoration: none;
    color: var(--pp-text-muted);
}
.pp-single-pages span a:hover { border-color: var(--pp-cyan-500); color: var(--pp-cyan-500); }

/* Sidebar */
.pp-single-sidebar {
    position: sticky;
    top: 80px; /* 64px compact header + 16px clearance */
}

/* WP admin bar offset — keep clearance under the fixed header, which
   itself shifts down via .admin-bar .pp-hdr-wrap */
.admin-bar .pp-single-sidebar { top: 112px; }
@media (max-width: 782px) {
    .admin-bar .pp-single-sidebar { top: 126px; }
}

/* ── Sidebar: Share widget (single article page) ──
   Namespaced pp-share-widget* — independent from .pp-share-btn used on
   the dark casino-review hero (aces/single-casino/style-1.php); that
   one's tuned for a dark band, this one for a white sidebar card. */
.pp-share-widget {
    position: relative;
    margin-top: 16px;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 240px 160px at 110% -5%, rgba(25,200,224,.08), transparent),
        radial-gradient(ellipse 140px 100px at -5% 105%, rgba(25,200,224,.05), transparent);
    border: 1px solid var(--pp-border);
    padding: 18px;
}

.pp-share-widget-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0 0 14px;
}

.pp-share-widget-list {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Black glassmorphic circle, cyan on hover/focus — background never
   matches the icon color so the glyph stays visible in every state. */
.pp-share-widget-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(14,20,25,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(25,200,224,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.pp-share-widget-btn svg { width: 18px; height: 18px; }
.pp-share-widget-btn:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(25,200,224,.14);
    transform: translateY(-1px);
}
.pp-share-widget-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(25,200,224,.35);
}

.pp-share-widget-btn--copy { position: relative; }
.pp-share-widget-btn--copy .pp-share-widget-icon-check { display: none; }
.pp-share-widget-btn--copy.is-copied {
    border-color: #22c55e;
    color: #22c55e;
}
.pp-share-widget-btn--copy.is-copied .pp-share-widget-icon-copy  { display: none; }
.pp-share-widget-btn--copy.is-copied .pp-share-widget-icon-check { display: block; }

/* Collapsed to zero height at rest so it doesn't reserve bottom
   whitespace and unbalance the card's top/bottom padding. */
.pp-share-widget-toast {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 600;
    color: var(--pp-cyan-600);
    opacity: 0;
    transition: opacity .2s, max-height .2s, margin-top .2s;
    pointer-events: none;
}
.pp-share-widget-toast.is-visible {
    max-height: 20px;
    margin-top: 10px;
    opacity: 1;
}

/* Related posts */
.pp-single-related {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 2px solid var(--pp-border);
}
.pp-single-related-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 24px;
    color: var(--pp-text);
}
.pp-single-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pp-single-related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.pp-single-related-card-img {
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--pp-bg-alt);
}
.pp-single-related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.pp-single-related-card:hover .pp-single-related-card-img img { transform: scale(1.05); }
.pp-single-related-card-cat {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
    margin-top: 4px;
}
.pp-single-related-card-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pp-text);
    transition: color .15s;
}
.pp-single-related-card:hover .pp-single-related-card-title { color: var(--pp-cyan-500); }
.pp-single-related-card-date {
    font-size: .75rem;
    color: var(--pp-text-muted);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pp-single-layout {
        /* minmax(0, …): a bare 1fr can't shrink below its widest item's
           min-content, so the stacked sidebar pushed the column ~8px past
           the screen on 360px phones */
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .pp-single-sidebar { position: static; min-width: 0; }
}
@media (max-width: 768px) {
    .pp-single-hero { padding: 40px 0 32px; }
    /* The three side-by-side glow ellipses only blend at desktop width; on a
       phone each is ~140px wide, so they read as separate lumps with dark
       valleys between them. One wide, evenly fading glow instead. */
    .pp-single-hero::after {
        height: 96px;
        background: radial-gradient(140% 100% at 50% 100%,
            rgba(25,200,224, .40) 0%,
            rgba(25,200,224, .16) 45%,
            rgba(25,200,224, 0) 80%);
    }
    .pp-single-hero::before {
        height: 72px;
        background: radial-gradient(130% 100% at 30% 0%,
            rgba(25,200,224, .12) 0%,
            rgba(25,200,224, 0) 75%);
    }
    .pp-single-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .pp-single-related-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   SHARED SECTION UTILITIES
───────────────────────────────────────────────────────── */
.pp-section { padding: var(--pp-section-pad) 0; }

/* Per-section backgrounds — intentional, not nth-child */
.pp-hero        { background: #ffffff; }
.pp-news        { background: #f3f4f6; }
.pp-sites       { background: var(--pp-white); }
.pp-articles    { background: var(--pp-bg); }
.pp-promotions  { background: var(--pp-bg); overflow: hidden; }
.pp-videos      { background: var(--pp-bg); }
.pp-ewallets    { background: var(--pp-page-bg); }

/* Section header row (title + see all) */
.pp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

/* Section titles — clean, no decorative bar */
.pp-section-title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--pp-text);
    margin: 0 0 48px;
    line-height: 1.1;
    position: relative;
    display: inline-block;
    isolation: isolate;
}
.pp-section-title::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 38%;
    background: rgba(25, 200, 224, 0.13);
    border-radius: 3px;
    z-index: -1;
}
.pp-section-header .pp-section-title { margin: 0; }

/* "See all" link */
.pp-see-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pp-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.pp-see-all::after { content: '›'; font-size: 1rem; line-height: 1; }
.pp-see-all:hover { opacity: .75; text-decoration: none; }

/* Standalone section title (no row) */
.pp-section-title-standalone {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--pp-text);
    margin: 0 0 48px;
    line-height: 1.1;
    position: relative;
    display: inline-block;
    isolation: isolate;
}
.pp-section-title-standalone::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 38%;
    background: rgba(25, 200, 224, 0.13);
    border-radius: 3px;
    z-index: -1;
}

/* ─────────────────────────────────────────────────────────
   TOP STORIES HERO
───────────────────────────────────────────────────────── */
.pp-hero { padding: 40px 0 52px; }

/* "Top Stories" heading */
.pp-hero-heading {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--pp-text);
    margin: 0;
    line-height: 1.1;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--pp-text);
}

/* Top bar: heading + see-all link */
.pp-hero-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.pp-hero-top-bar .pp-hero-heading {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
    width: fit-content;
    isolation: isolate;
}
.pp-hero-top-bar .pp-hero-heading::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 38%;
    background: rgba(25, 200, 224, 0.13);
    border-radius: 3px;
    z-index: -1;
}

/* Outer grid: main content + right sidebar */
.pp-hero-outer-grid {
    display: grid;
    grid-template-columns: 1fr 272px;
    gap: 40px;
    align-items: start;
}

/* 2×3 news grid below the featured article */
.pp-hero-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-card-border);
}

/* ── Featured article (left) ── */
.pp-hero-news-card { display: block; }

.pp-hero-news-img {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 16/9;
    background: #e2eaf2;
    margin-bottom: 18px;
}
.pp-hero-news-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.pp-hero-news-card:hover .pp-hero-news-img img { transform: scale(1.04); }
.pp-hero-news-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pp-bg) 0%, transparent 20%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.pp-hero-news-card:hover .pp-hero-news-img::after { opacity: 0; }
.pp-hero-news-img-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dde3ea, #c8d0d9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8fa0b0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .5px;
}

/* Category pill — below image, above title */
.pp-hero-news-cat {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 10px;
}

.pp-hero-news-body { padding: 0; }
.pp-hero-news-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--pp-text);
}
.pp-hero-news-title a { color: inherit; text-decoration: none; transition: color .15s; }
.pp-hero-news-title a:hover { color: var(--pp-accent); }
.pp-hero-news-deck {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--pp-text-body);
    margin: 0 0 12px;
    line-height: 1.55;
}
.pp-hero-news-meta {
    font-size: .78rem;
    color: var(--pp-text-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pp-hero-news-meta strong { color: var(--pp-text-body); font-weight: 600; }

/* ── Right sidebar: poker site banner cards ── */
.pp-hero-banners {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pp-hero-banner-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pp-white);
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius-sm);
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.pp-hero-banner-card:hover {
    border-color: var(--pp-accent);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    text-decoration: none;
    color: inherit;
}

.pp-hero-banner-img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    background: #e8eaef;
}
.pp-hero-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.pp-hero-banner-img-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2eaf2, #c8d4e0);
}
.pp-hero-banner-img-ph span {
    font-size: .65rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-align: center;
    padding: 4px;
    line-height: 1.2;
}

.pp-hero-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-hero-banner-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-hero-banner-bonus {
    font-size: .72rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-hero-banner-cta {
    display: inline-block;
    margin-top: 4px;
    background: var(--pp-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--pp-radius-pill);
    align-self: flex-start;
    transition: background .15s;
}
.pp-hero-banner-card:hover .pp-hero-banner-cta { background: var(--pp-accent-dark, #0088bb); }

/* ── PP Approved widgets above casino cards ── */
.pp-hero-approved-widgets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-hero-approved-widgets .pp-hero-widget,
.pp-hero-approved-widgets figure {
    margin: 0;
}
.pp-hero-approved-widgets img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--pp-radius-md);
}
.pp-hero-approved-widgets figure a,
.pp-hero-approved-widgets a {
    display: block;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    transition: opacity .15s;
}
.pp-hero-approved-widgets figure a:hover,
.pp-hero-approved-widgets a:hover { opacity: .9; }

/* ── Category pill below grid news card images ── */
.pp-news-card-cat {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────
   CONTENT CARDS  (shared base)
───────────────────────────────────────────────────────── */
.pp-card {
    background: var(--pp-white);
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-card-border);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}
.pp-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
}

.pp-card-img {
    position: relative;
    overflow: hidden;
    background: #e8eaef;
}
.pp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-card:hover .pp-card-img img { transform: scale(1.05); }

.pp-card-img-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea 0%, #cdd3da 100%);
}

/* Category badge on image */
.pp-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--pp-accent);
    color: #fff;
    font-family: var(--pp-font);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    line-height: 1;
    z-index: 1;
}

.pp-card-body { padding: 14px 16px 18px; }

.pp-card-type {
    display: block;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pp-accent);
    margin-bottom: 7px;
}

.pp-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-card a .pp-card-title,
.pp-card-link .pp-card-title { color: var(--pp-text); }
.pp-card:hover .pp-card-title { color: var(--pp-accent); }

.pp-card-date {
    display: block;
    font-size: .72rem;
    color: var(--pp-text-muted);
}

.pp-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────
   RECENT NEWS  — featured hero + sub-grid
───────────────────────────────────────────────────────── */

/* ── Featured (first) article ── */
.pp-news-featured {
    margin-bottom: 52px;
    border-bottom: 2px solid var(--pp-card-border);
    padding-bottom: 52px;
}
.pp-news-featured-img {
    display: block;
    border-radius: var(--pp-radius);
    overflow: hidden;
    margin-bottom: 24px;
    aspect-ratio: 16/7;
}
.pp-news-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.pp-news-featured:hover .pp-news-featured-img img { transform: scale(1.03); }
.pp-news-featured-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
.pp-news-featured-body { max-width: 720px; }
.pp-news-feat-cat {
    display: inline-block;
    background: var(--pp-accent);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    line-height: 1;
    margin-bottom: 16px;
}
.pp-news-feat-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 14px;
    color: var(--pp-text);
}
.pp-news-feat-title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.pp-news-feat-title a:hover { color: var(--pp-accent); }
.pp-news-feat-deck {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--pp-text-body);
    margin: 0 0 16px;
    line-height: 1.55;
}
.pp-news-feat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--pp-text-muted);
    margin-bottom: 22px;
}
.pp-news-feat-meta strong { color: var(--pp-text-body); font-weight: 600; }
.pp-news-meta-sep { opacity: .4; }
.pp-btn-read-more {
    display: inline-block;
    background: transparent;
    color: var(--pp-text) !important;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    text-decoration: none !important;
    transition: background .18s, border-color .18s, color .18s;
}
.pp-btn-read-more:hover {
    background: var(--pp-bg-alt);
    border-color: var(--pp-text-muted);
    color: var(--pp-text) !important;
    text-decoration: none;
}

/* ── Sub-grid heading ── */
.pp-news-sub-heading {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--pp-text);
    margin: 0 0 28px;
    line-height: 1;
}

/* ── Sub-grid (2 col) ── */
.pp-news-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
}

/* ── News card (sub-grid and fallback) ── */
.pp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.pp-news-card {
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible;
    transition: none;
}
.pp-news-card:hover { transform: none; box-shadow: none; }
.pp-news-card-link { display: block; text-decoration: none; color: inherit; }
.pp-news-card-img  {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 3/2;
    background: #e8eaef;
    margin-bottom: 14px;
}
.pp-news-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-news-card-link:hover .pp-news-card-img img { transform: scale(1.05); }
.pp-news-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
/* Inline category pill (below image, in card body) */
.pp-news-card-cat-inline {
    display: inline-block;
    background: var(--pp-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    line-height: 1;
    margin-bottom: 9px;
}
.pp-news-card-body { padding: 0; }
.pp-news-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 9px;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-news-card-link:hover .pp-news-card-title { color: var(--pp-accent); }
.pp-news-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--pp-text-muted);
    flex-wrap: wrap;
}
.pp-news-card-meta strong { color: var(--pp-text-body); font-weight: 600; }
.pp-news-card-date {
    display: inline;
    font-size: .75rem;
    color: var(--pp-text-muted);
}

/* ─────────────────────────────────────────────────────────
   RECOMMENDED POKER SITES
   Shares markup/classes with the play-now room list (.pp-room-row etc.,
   defined further down) so both look and behave identically.
───────────────────────────────────────────────────────── */

/* Show more */
.pp-sites-more { text-align: center; margin-top: 28px; }
.pp-btn-more {
    display: inline-block;
    padding: 13px 36px;
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    background: transparent;
    color: var(--pp-text) !important;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s;
}
.pp-btn-more:hover {
    background: var(--pp-bg-alt);
    border-color: var(--pp-text-muted);
    color: var(--pp-text) !important;
}

/* ─────────────────────────────────────────────────────────
   FEATURED ARTICLES  (3-col grid)
───────────────────────────────────────────────────────── */
.pp-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.pp-article-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
}
.pp-article-card:hover { transform: none; box-shadow: none; }
.pp-article-card-link { display: block; text-decoration: none; color: inherit; }
.pp-article-card-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius-md);
    aspect-ratio: 16/9;
    background: #e8eaef;
    margin-bottom: 16px;
}
.pp-article-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-article-card:hover .pp-article-card-img img { transform: scale(1.05); }
.pp-article-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pp-bg) 0%, transparent 20%);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.pp-article-card:hover .pp-article-card-img::after { opacity: 0; }
.pp-article-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
.pp-article-card-body { padding: 0; }
.pp-article-card-type {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 10px;
}
.pp-article-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-article-card:hover .pp-article-card-title { color: var(--pp-accent); }

/* ─────────────────────────────────────────────────────────
   CURRENT PROMOTIONS  (full-width owl carousel)
───────────────────────────────────────────────────────── */

/* Full-width wrapper with left/right fade edges */
.pp-promo-carousel-wrap {
    position: relative;
    padding: 0 48px;
}
.pp-promo-carousel-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to right, #fff 25%, rgba(255,255,255,.5) 60%, transparent 100%);
}
.pp-promo-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 260px;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to left, #fff 25%, rgba(255,255,255,.5) 60%, transparent 100%);
}

.pp-promo-carousel { margin: 0; }
.pp-promo-carousel .owl-stage { padding: 8px 0 24px; }

/* Arrow nav hidden — dots are the primary navigation */
.pp-promo-carousel .owl-nav { display: none !important; }

/* Dots — centered pill-style pagination */
.pp-promo-carousel .owl-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 20px;
}
.pp-promo-carousel .owl-dots .owl-dot span {
    display: block;
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db !important;
    transition: background .2s ease, width .2s ease;
}
.pp-promo-carousel .owl-dots .owl-dot.active span {
    background: var(--pp-accent) !important;
    width: 36px;
}

/* Card — unified with pp-news-card */
.pp-promo-card {
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible;
    margin: 0 12px;
    transition: none;
}
.pp-promo-card:hover { transform: none; box-shadow: none; }
.pp-promo-card > a { display: block; text-decoration: none; color: inherit; }
.pp-promo-card-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 3/2;
    background: #e8eaef;
    margin-bottom: 14px;
}
.pp-promo-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-promo-card:hover .pp-promo-card-img img { transform: scale(1.05); }
.pp-promo-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pp-bg) 0%, transparent 20%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.pp-promo-card:hover .pp-promo-card-img::after { opacity: 0; }
.pp-promo-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
/* Category label — below image, above title */
.pp-promo-card-brand {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 6px;
}
.pp-promo-card-body { padding: 0; }
.pp-promo-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 9px;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-promo-card:hover .pp-promo-card-title { color: var(--pp-accent); }
.pp-promo-card-date { font-size: .75rem; color: var(--pp-text-muted); }

/* ─────────────────────────────────────────────────────────
   POKER VIDEOS  (dark section, 4-col)
───────────────────────────────────────────────────────── */
.pp-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.pp-video-card {
    background: var(--pp-bg);
    border-radius: var(--pp-radius-md);
    border: none;
    overflow: hidden;
    transition: transform .2s ease;
}
.pp-video-card:hover {
    transform: translateY(-4px);
}
.pp-video-card > a { display: block; text-decoration: none; color: inherit; }
.pp-video-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--pp-bg-alt);
}
.pp-video-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    filter: grayscale(100%);
    transition: opacity .3s ease, transform .35s ease, filter .3s ease;
}
.pp-video-card:hover .pp-video-card-img img { opacity: 1; transform: scale(1.05); filter: grayscale(0%); }
.pp-video-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f1117, #1d2028);
}
.pp-video-card-body { padding: 12px 14px 0; }
.pp-video-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-video-card:hover .pp-video-card-title { color: var(--pp-cyan-600); }

/* Play button — shared */
.pp-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--pp-cyan-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    padding-left: 5px;
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 2;
}
.pp-video-card:hover .pp-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 0 10px rgba(25,200,224,.2), 0 4px 24px rgba(25,200,224,.35);
}
.space-post-format {
    background: var(--pp-cyan-500) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   BEST E-WALLETS
───────────────────────────────────────────────────────── */
.pp-ewallets-head { margin-bottom: 40px; }
.pp-ewallets-head .pp-section-title { margin-bottom: 12px; }
.pp-ewallets-intro {
    max-width: 62ch;
    margin: 0;
    color: var(--pp-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.pp-ewallets-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Dark card tinted with the wallet's own brand colour (set per card in
   PokerPro > E-Wallets) — a deliberate exception to the no-gradient rule,
   so each wallet is recognisable at a glance. Cyan stays the action colour. */
.pp-ewallet {
    display: flex;
    flex-direction: column;
    --pp-ew-c: var(--pp-ew-brand, var(--pp-bg-card));
    background-color: var(--pp-bg-card);
    /* One continuous wash instead of a separate header block, so the logo
       area melts into the body with no hard edge. The top layer adds a soft
       diagonal sheen over the logo only. */
    background-image:
        radial-gradient(120% 220px at 15% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%),
        linear-gradient(
            180deg,
            var(--pp-ew-c) 0,
            color-mix(in srgb, var(--pp-ew-c) 92%, var(--pp-bg-card)) 60px,
            color-mix(in srgb, var(--pp-ew-c) 80%, var(--pp-bg-card)) 120px,
            color-mix(in srgb, var(--pp-ew-c) 66%, var(--pp-bg-card)) 180px,
            color-mix(in srgb, var(--pp-ew-c) 52%, var(--pp-bg-card)) 250px,
            color-mix(in srgb, var(--pp-ew-c) 38%, var(--pp-bg-card)) 330px,
            color-mix(in srgb, var(--pp-ew-c) 26%, var(--pp-bg-card)) 420px,
            color-mix(in srgb, var(--pp-ew-c) 15%, var(--pp-bg-card)) 520px,
            color-mix(in srgb, var(--pp-ew-c) 6%, var(--pp-bg-card)) 640px,
            var(--pp-bg-card) 100%
        );
    background-repeat: no-repeat;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    color: var(--pp-text-invert);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.pp-ewallet > * { position: relative; z-index: 1; }

/* Light sweep that crosses the card once on hover. */
.pp-ewallet::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .13) 50%, transparent 65%);
    transform: translateX(-110%);
    pointer-events: none;
}

/* Lift plus a soft glow in the wallet's own colour — the glow is the only
   shadow, and it's diffuse, so it reads as light rather than depth. */
.pp-ewallet:hover,
.pp-ewallet:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--pp-ew-c) 85%, transparent);
}
.pp-ewallet:hover::before,
.pp-ewallet:focus-within::before {
    transform: translateX(110%);
    transition: transform .9s ease;
}
.pp-ewallet:hover .pp-ewallet-logo img,
.pp-ewallet:focus-within .pp-ewallet-logo img { transform: scale(1.06); }
.pp-ewallet:hover .pp-btn-ewallet::after,
.pp-ewallet:focus-within .pp-btn-ewallet::after { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
    .pp-ewallet,
    .pp-ewallet::before,
    .pp-ewallet-logo img,
    .pp-btn-ewallet::after { transition: none !important; }
    .pp-ewallet:hover,
    .pp-ewallet:focus-within,
    .pp-ewallet:hover .pp-ewallet-logo img,
    .pp-ewallet:hover .pp-btn-ewallet::after { transform: none; }
    .pp-ewallet::before { display: none; }
}

.pp-ewallet-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 28px 32px 0;
}
.pp-ewallet-logo img {
    display: block;
    width: auto;
    max-width: min(200px, 100%);
    max-height: 44px;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pp-ewallet-wordmark {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.pp-ewallet-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
    padding: 20px 28px 28px;
}

.pp-ewallet-perk {
    padding: 16px 18px;
    border-radius: var(--pp-radius-md);
    background: rgba(14, 20, 25, .28);
    backdrop-filter: blur(2px);
}
.pp-ewallet-perk-label {
    display: block;
    margin-bottom: 6px;
    color: var(--pp-cyan-500);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pp-ewallet-perk p {
    margin: 0;
    color: var(--pp-text-invert);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.55;
}

.pp-ewallet-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-ewallet-benefits li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    line-height: 1.5;
}
/* Check mark drawn in CSS: no icon font or extra request needed. */
.pp-ewallet-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(25, 200, 224, .18);
}
.pp-ewallet-benefits li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: calc(.2em + 4px);
    width: 5px;
    height: 9px;
    border: solid var(--pp-cyan-500);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pp-btn-ewallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: auto;
    padding: .625rem 1.25rem;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark) !important;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
.pp-btn-ewallet::after {
    content: '\2197';
    font-size: 1rem;
    line-height: 1;
    transition: transform .25s ease;
}
.pp-btn-ewallet:hover { background: var(--pp-cyan-600); }
.pp-btn-ewallet:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}
.pp-ewallet .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tablet: three narrow columns crush the copy, and 2+1 leaves an orphan —
   go full width with the logo panel beside the content instead. */
@media (max-width: 1024px) and (min-width: 768px) {
    .pp-ewallet { flex-direction: row; }
    .pp-ewallet-logo { flex: 0 0 220px; height: auto; }
}
@media (max-width: 767px) {
    .pp-ewallets-grid { grid-template-columns: 1fr; gap: 16px; }
    .pp-ewallet-logo { height: 84px; }
    .pp-ewallet-body { padding: 16px 22px 22px; gap: 20px; }
}

/* ─────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────── */
.pp-footer {
    background: var(--pp-bg-dark);
    padding: 60px 0 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--pp-border-dark);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, .25);
}

/* Cyan radial glows — mirrors header treatment, emanating from the top edge */
.pp-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 120% at 22% 0%, rgba(25, 200, 224, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 28% 90%  at 55% 0%, rgba(25, 200, 224, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.pp-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 38% 110% at 80% 0%, rgba(25, 200, 224, 0.11) 0%, transparent 65%),
        radial-gradient(ellipse 22% 80%  at 98% 35%, rgba(25, 200, 224, 0.13) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.pp-footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 52px;
    position: relative;
    z-index: 1;
}

/* Brand */
.pp-footer-logo { display: inline-flex; margin-bottom: 14px; }
.pp-footer-logo img { max-width: 160px; filter: none; opacity: 1; }
.pp-footer-logo-text {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pp-text-invert);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.pp-footer-tagline {
    font-size: .82rem;
    line-height: 1.65;
    color: var(--pp-text-muted);
    margin-bottom: 16px;
}

/* Nav column headings — with a short cyan gradient underline */
.pp-footer-nav-col h4,
.pp-footer-newsletter h4 {
    font-family: var(--pp-font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-invert);
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
}
.pp-footer-nav-col h4::after,
.pp-footer-newsletter h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--pp-cyan-500), transparent);
    box-shadow: 0 0 6px rgba(25, 200, 224, 0.45);
}

.pp-footer-nav-col ul { list-style: none; margin: 0; padding: 0; }
.pp-footer-nav-col ul li {
    margin-bottom: 11px;
    color: var(--pp-text-muted);
    font-size: .84rem;
}
.pp-footer-nav-col ul li a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.pp-footer-nav-col ul li a:hover { color: var(--pp-cyan-500); }

/* Newsletter */
.pp-footer-newsletter p {
    font-size: .82rem;
    color: var(--pp-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}
.pp-footer-newsletter-form { display: flex; }
.pp-footer-newsletter-form input[type="email"] {
    flex: 1;
    padding: 11px 14px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-right: none;
    color: var(--pp-text-invert);
    font-size: .82rem;
    font-family: var(--pp-font);
    border-radius: var(--pp-radius-sm) 0 0 var(--pp-radius-sm);
    outline: none;
    transition: border-color .15s;
}
.pp-footer-newsletter-form input[type="email"]:focus { border-color: var(--pp-cyan-500); }
.pp-footer-newsletter-form input[type="email"]::placeholder { color: var(--pp-text-muted); }
.pp-footer-newsletter-form button {
    padding: 11px 20px;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    border: none;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    font-family: var(--pp-font);
    cursor: pointer;
    border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0;
    transition: background .15s;
}
.pp-footer-newsletter-form button:hover { background: var(--pp-cyan-600); }

/* Bottom bar */
.pp-footer-bottom {
    background: var(--pp-footer-bottom);
    padding: 16px 0;
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--pp-border-dark);
}
.pp-footer-bottom-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.pp-footer-copy-text { font-size: .75rem; color: var(--pp-text-muted); }
.pp-footer-social { display: flex; gap: 8px; }
.pp-footer-social a {
    width: 30px;
    height: 30px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-text-muted);
    font-size: .78rem;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pp-footer-social a:hover {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

/* ── Casino review pages: recolor the footer's cyan accents (glows,
   logo, headings underline, links, newsletter, back-to-top) to the
   room's brand color — same body.single-organization scope as the
   header. Unlike the header, the footer logo IS included here. ── */
body.single-organization .pp-footer::before {
    background:
        radial-gradient(ellipse 45% 120% at 22% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 28% 90%  at 55% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.07) 0%, transparent 65%);
}
body.single-organization .pp-footer::after {
    background:
        radial-gradient(ellipse 38% 110% at 80% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.11) 0%, transparent 65%),
        radial-gradient(ellipse 22% 80%  at 98% 35%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.13) 0%, transparent 60%);
}
body.single-organization .pp-footer-logo .pp-hdr-text-logo-pro {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-nav-col h4::after,
body.single-organization .pp-footer-newsletter h4::after {
    background: linear-gradient(90deg, rgb(var(--pp-review-brand-rgb, 25,200,224)), transparent);
    box-shadow: 0 0 6px rgba(var(--pp-review-brand-rgb, 25,200,224), 0.45);
}
body.single-organization .pp-footer-nav-col ul li a:hover {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-form input[type="email"]:focus {
    border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-form button {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-form button:hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .82);
}
body.single-organization .pp-footer-social a:hover {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
    border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization #scrolltop {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
@media (hover: hover) {
    body.single-organization #scrolltop:hover {
        background: rgb(var(--pp-review-brand-rgb, 25,200,224));
        border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
        color: var(--pp-bg-dark);
        box-shadow: 0 8px 20px -8px rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
    }
}

/* Override mercury's footer styles */
.space-footer-top, .space-footer-copy { background-color: var(--pp-bg-dark); }

/* ─────────────────────────────────────────────────────────
   MERCURY / ACES PLUGIN OVERRIDES
───────────────────────────────────────────────────────── */
.space-organization-content-button a,
.space-unit-content-button a,
.space-organizations-3-archive-item-button-ins a,
.space-organizations-4-archive-item-button-two-ins a,
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a,
.space-shortcode-wrap .space-organizations-4-archive-item-button-two-ins a {
    color: #fff !important;
    background-color: var(--pp-accent) !important;
}
.space-organizations-4-archive-item-ins {
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
}
.space-organizations-4-archive-item-logo {
    flex: inherit;
    display: inline-block;
    line-height: 0;
    order: 1;
    width: 80px;
    margin-right: 20px;
}
.space-organizations-3-archive-item-logo-ins img { max-width: 180px; }
.space-organizations-3-archive-item-terms-ins strong { font-size: 24px; }

/* Buttons */
.wp-block-button .wp-block-button__link {
    border: 1.5px solid var(--pp-accent);
    color: var(--pp-accent) !important;
    background: transparent;
    text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover {
    background: var(--pp-accent) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   PLAYER PROFILES
───────────────────────────────────────────────────────── */
.player-profile {
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
    padding: 24px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
}
.player-profile--updated { margin-bottom: 30px; }
.player-profile--header { display: flex; justify-content: space-between; gap: 25px; }
.player-profile h2 { margin-top: 0; }
.player-profile--left-wrap { display: flex; gap: 25px; }
.player-profile--custom-fields { text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.player-profile--custom-fields b { display: block; }
small { font-size: .7rem; color: var(--pp-text-muted); }
.player-profile--header .player-profile--image img { max-width: 200px; width: 100%; border-radius: 14px; }
.player-profile--social-links { display: flex; align-items: center; gap: 20px; }
.player-profile--social-links a { text-decoration: none; }
.player-profile--nationality { margin-top: 20px; }
.player-profile--nationality span { font-weight: 600; }
.player-profile--extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--pp-card-border);
    margin-top: 20px;
    padding-top: 20px;
}
.player-profile--extra-column p { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.5; }

/* ─────────────────────────────────────────────────────────
   MISC / UTILITY (ported from mercury-child)
───────────────────────────────────────────────────────── */
.dash-top-space              { padding-left: 20px; padding-right: 20px; }
.broken_link, a.broken_link  { text-decoration: underline; }
.contact-icon                { text-align: center; color: var(--pp-accent); font-size: 6rem; margin: 30px 0 20px; }
.fa-gradient {
    background: -webkit-gradient(linear, left top, left bottom, from(#6dd5ed), to(var(--pp-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.iframe-container            { overflow: hidden; padding-top: 56.25%; position: relative; height: 1200px; }
.iframe-container iframe     { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.live-blog-page .status-update-post { background: var(--pp-accent); }
.twitter-tweet               { margin: 10px auto; }
.contact-us                  { padding: 12px 20px; background: rgba(0,143,212,.12); border-radius: 10px; }
.neteller-box, .skrill-box   { padding: 25px; border-radius: 10px; color: #eee; }
.neteller-box img, .skrill-box img { filter: brightness(0) invert(1); }
.neteller-box                { background: #86B64A; }
.skrill-box                  { background: #862165; }
.company-information table   { margin: .5em 0; }
.operator-screenshots .wp-block-columns { text-align: center; }
.wp-block-table td, .wp-block-table th  { border: none; padding: .5em; }
.wp-block-table thead        { border-bottom: none; }
.wp-block-column.has-background,
.wp-block-group.has-background          { padding: 15px; border-radius: 8px; }
.uagb-toc__wrap              { padding: 10px 0 50px !important; width: 100%; }
p.wp-block                   { margin-bottom: 30px !important; }
.no-dots ul                  { list-style: none; margin: 0; padding: 0; }
.no-dots ul li               { list-style: none; margin: 0; padding: 0; margin-bottom: -15px; }
.no-dots a                   { text-decoration: none; }
h2.with-ico .ico-wrap {
    background: linear-gradient(to right, #6dd5ed, var(--pp-accent));
    border-radius: 50%;
    width: 50px; height: 50px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    margin-right: 15px;
    font-size: 1.8rem;
}
.headline-symbol             { position: relative; padding-left: 50px; }
.headline-symbol::before     { position: absolute; content: ''; width: 40px; height: 100%; left: 0; }

/* Footer widget area */
.space-footer-ins h4         { color: #fff; margin-bottom: 1em; }
.space-footer-ins .wp-block-columns.is-layout-flex { gap: 4em; }
.space-widget ul.footer-partners li        { width: 100%; height: auto; padding: 0 0 10px 0; }
.space-widget ul.footer-partners li a      { text-decoration: none; color: #6b7280; }
.space-widget ul.footer-partners li a:hover { color: var(--pp-accent); }
.space-footer-area.space-widget            { margin-bottom: 0; color: #6b7280; }
.space-widget ul li                        { border: none; width: 50px; height: 50px; }
.space-widget ul.wp-block-social-links li  { border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg { fill: currentColor; color: currentColor; display: flex; justify-content: center; }

/* ── Back to Top (redesign — dark FAB, cyan accent) ── */
#scrolltop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    right: 24px;
    bottom: 24px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-bg-dark);
    border: 1.5px solid var(--pp-border-dark);
    color: var(--pp-cyan-500);
    font-size: 18px;
    line-height: 1;
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease, opacity .3s ease-in-out, visibility .3s ease-in-out;
}
#scrolltop.show { bottom: 24px; transform: translateY(0); }
#scrolltop:not(.show) { transform: translateY(8px); }
#scrolltop i { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
#scrolltop:active { transform: translateY(-1px) scale(.94); }
#scrolltop:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 3px; }
@media (hover: hover) {
    #scrolltop:hover {
        background: var(--pp-cyan-500);
        border-color: var(--pp-cyan-500);
        color: var(--pp-bg-dark);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px -8px rgba(25, 200, 224, .45);
    }
    #scrolltop:hover i { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    #scrolltop { transition: background-color .25s ease, border-color .25s ease, opacity .3s ease-in-out, visibility .3s ease-in-out; }
    #scrolltop i { transition: none; }
    #scrolltop:hover, #scrolltop:active { transform: none; }
    #scrolltop:not(.show) { transform: none; }
}
#wp-admin-bar-customlocations-default { height: 500px; overflow-y: scroll; overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */

/* Wide */
@media (max-width: 1280px) {
    .pp-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
}

/* Tablet landscape */
@media (max-width: 1100px) {
    .pp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .pp-videos-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-hero-outer-grid { grid-template-columns: 1fr 240px; gap: 28px; }
    .pp-hero-news-title { font-size: 1.5rem; }
    .pp-nav-list > li > a { padding: 0 10px; font-size: .72rem; }
}

/* Tablet */
@media (max-width: 967px) {
    :root { --pp-section-pad: 48px; }
    .pp-hdr-nav      { display: none !important; }
    .pp-hdr-hamburger { display: flex !important; }
    .pp-hero-outer-grid { grid-template-columns: 1fr; gap: 32px; }
    .pp-hero-news-grid  { grid-template-columns: repeat(2, 1fr); }
    .pp-hero-banners { flex-direction: row; flex-wrap: wrap; }
    .pp-hero-banner-card { flex: 1 1 calc(50% - 7px); }
    .pp-hero-news-title { font-size: 1.35rem; }
    .pp-news-feat-title { font-size: 1.9rem; }
    .pp-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .space-header-2-top-logo-ins img { max-width: 200px !important; }
}

/* Mobile */
@media (max-width: 767px) {
    :root { --pp-section-pad: 36px; }
    .pp-container, .space-header-2-top-ins { padding-left: 16px; padding-right: 16px; }
    .pp-hdr-row { padding-left: 16px; padding-right: 16px; }
    .pp-hero { padding: 20px 0; }
    .pp-hero-news-grid { grid-template-columns: 1fr; gap: 20px; }
    .pp-hero-banners { flex-direction: column; }
    .pp-hero-banner-card { flex: none; }
    .pp-news-sub-grid { grid-template-columns: 1fr; }
    .pp-news-feat-title { font-size: 1.55rem; }
    .pp-news-featured { margin-bottom: 36px; padding-bottom: 36px; }
    .pp-articles-grid { grid-template-columns: 1fr; }
    .pp-videos-grid   { grid-template-columns: 1fr 1fr; }
    .pp-footer-grid   { grid-template-columns: 1fr; gap: 28px; }
    .pp-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .pp-section-header { margin-bottom: 20px; }
    .space-title-box-ins { padding: 28px 16px; }
    .space-title-box-h1 h1 { font-size: 2em; }
    .player-profile--header, .player-profile--extra { flex-direction: column; }
    .player-profile--custom-fields { text-align: left; }
    .player-profile--left-wrap { flex-direction: column; }
    .player-profile--extra-column { display: flex; align-items: center; gap: 10px; }
    .player-profile--extra { gap: 20px; align-items: flex-start; }
    h2.with-ico .ico-wrap { width: 40px; height: 40px; font-size: 1.3rem; margin-right: 12px; }
}

@media (max-width: 480px) {
    .pp-videos-grid { grid-template-columns: 1fr; }
    .space-header-2-top-logo-ins img { max-width: 180px; }
}

/* Desktop-only rules */
@media (min-width: 768px) {
    .space-header-2-height .space-header-2-top-ins { padding-left: 24px; padding-right: 24px; }
    .align-desktop--right { text-align: right; }
    .player-profile--extra-column { text-align: center; }
}
@media (min-width: 968px) {
    .hide-for-mobile { display: none; }

    .pp-section-title,
    .pp-section-title-standalone,
    .pp-hero-heading { font-size: 2.4rem; }

    .pp-news-sub-heading { font-size: 2rem; }
}

/* ─────────────────────────────────────────────────────────
   NEWS ARCHIVE (home.php)
───────────────────────────────────────────────────────── */
.pp-archive-news {
    padding: var(--pp-section-pad) 0;
}

/* Two-column layout: main content + sidebar */
.pp-archive-layout {
    display: grid;
    grid-template-columns: 1fr 272px;
    gap: 40px;
    align-items: start;
}

/* Exposed featured article above the grid (same card as homepage hero) */
.pp-archive-featured {
    margin-bottom: 40px;
}

/* Featured banner above the grid */
.pp-archive-banner {
    margin-bottom: 32px;
}
.pp-archive-banner a {
    display: block;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    line-height: 0;
}
.pp-archive-banner img {
    width: 100%;
    height: auto;
    border-radius: var(--pp-radius-md);
    transition: opacity .2s;
}
.pp-archive-banner a:hover img { opacity: .92; }

/* 3-column news card grid */
.pp-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}

/* Sidebar */
.pp-archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px; /* 64px compact header + 16px clearance */
}

/* WP admin bar offset — keep clearance under the fixed header, which
   itself shifts down via .admin-bar .pp-hdr-wrap */
.admin-bar .pp-archive-sidebar { top: 112px; }
@media (max-width: 782px) {
    .admin-bar .pp-archive-sidebar { top: 126px; }
}

.pp-sidebar-heading {
    font-family: var(--pp-font-display);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--pp-text-muted);
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pp-border);
}

/* ── Poker rooms grouped widget (sidebar) ── */
.pp-sidebar-brands {
    position: relative;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 240px 160px at 110% -5%, rgba(25,200,224,.08), transparent),
        radial-gradient(ellipse 140px 100px at -5% 105%, rgba(25,200,224,.05), transparent);
    border: 1px solid var(--pp-border);
}

.pp-sidebar-brands-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.pp-sidebar-brands-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0;
}

.pp-sidebar-brands-seeall {
    font-size: .7rem;
    font-weight: 500;
    color: var(--pp-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.pp-sidebar-brands-seeall:hover { color: var(--pp-text); text-decoration: none; }

.pp-sidebar-brands-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}

/* Individual room row */
.pp-sidebar-room {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 10px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.pp-sidebar-room:hover { background: var(--pp-bg-alt); text-decoration: none; color: inherit; }

.pp-sidebar-room-logo {
    width: 54px;
    height: 54px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--pp-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-sidebar-room-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 6px;
}
.pp-sidebar-room-logo-ph {
    font-size: .7rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
}

.pp-sidebar-room-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.pp-sidebar-room-name {
    display: block;
    font-family: var(--pp-font-body);
    font-size: .83rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Stars */
.pp-sidebar-room-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}
.pp-star { font-size: .78rem; line-height: 1; }
.pp-star--full  { color: #f5a623; }
.pp-star--half  { color: #f5a623; opacity: .55; }
.pp-star--empty { color: #d1d5db; }
.pp-sidebar-room-rating-val {
    font-size: .68rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    margin-left: 4px;
}

/* Bonus text */
.pp-sidebar-room-bonus {
    font-size: .7rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────
   SEARCH RESULTS
───────────────────────────────────────────────────────── */
.pp-search-empty {
    padding: 40px 0;
}
.pp-search-empty p {
    color: var(--pp-text-muted);
    font-size: .9rem;
    margin: 0 0 20px;
}

.pp-searchform {
    display: flex;
    align-items: center;
    max-width: 420px;
    background: var(--pp-bg-alt);
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    padding: 4px 4px 4px 18px;
    transition: border-color .15s;
}
.pp-searchform:focus-within { border-color: var(--pp-cyan-500); }
.pp-searchform-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: .9rem;
    color: var(--pp-text);
    outline: none;
}
.pp-searchform-input::placeholder { color: var(--pp-text-muted); }
.pp-searchform-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    cursor: pointer;
    transition: background .15s;
}
.pp-searchform-submit:hover { background: var(--pp-cyan-600); }

/* Empty state */
.pp-archive-empty {
    color: var(--pp-text-muted);
    font-size: .9rem;
    padding: 40px 0;
}

/* ── Sidebar: Live Reporting widget ── */
.pp-sidebar-lr {
    position: relative;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 260px 180px at 110% -10%, rgba(25,200,224,.07), transparent),
        radial-gradient(ellipse 160px 120px at -10% 110%, rgba(25,200,224,.04), transparent);
    border: 1px solid var(--pp-border);
}

.pp-sidebar-lr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.pp-sidebar-lr-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0;
}

.pp-sidebar-lr-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp-red);
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(25,200,224,.55);
    animation: pp-lr-pulse 1.8s ease-in-out infinite;
}

.pp-sidebar-lr-seeall {
    font-size: .7rem;
    font-weight: 500;
    color: var(--pp-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.pp-sidebar-lr-seeall:hover { color: var(--pp-text); text-decoration: none; }

.pp-sidebar-lr-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}

.pp-sidebar-lr-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 10px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.pp-sidebar-lr-card:hover {
    background: var(--pp-bg-alt);
    text-decoration: none;
    color: inherit;
}
.pp-sidebar-lr-card--live { background: rgba(25,200,224,.04); }
.pp-sidebar-lr-card--live:hover { background: rgba(25,200,224,.08); }

.pp-sidebar-lr-img {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--pp-bg-alt);
}
.pp-sidebar-lr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pp-sidebar-lr-img--ph { background: var(--pp-bg-alt); }

.pp-sidebar-lr-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .08em;
    background: var(--pp-red);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
}

.pp-sidebar-lr-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.pp-sidebar-lr-name {
    font-size: .83rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    color: var(--pp-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pp-sidebar-lr-dates {
    font-size: .7rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sidebar-lr-venue {
    font-size: .68rem;
    color: var(--pp-text-muted);
    opacity: .65;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sidebar-lr-empty {
    padding: 20px 18px;
    font-size: .82rem;
    color: var(--pp-text-muted);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────
   TOURNAMENTS CALENDAR sidebar widget
───────────────────────────────────────────────────────── */
.pp-sidebar-cal {
    position: relative;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 260px 180px at 110% -10%, rgba(25, 200, 224, .07), transparent),
        radial-gradient(ellipse 160px 120px at -10% 110%, rgba(25, 200, 224, .04), transparent);
    border: 1px solid var(--pp-border);
}
.pp-sidebar-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}
.pp-sidebar-cal-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0;
}
.pp-sidebar-cal-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}
.pp-sidebar-cal-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}
.pp-sidebar-cal-card:hover {
    background: var(--pp-bg-alt);
    text-decoration: none;
    color: inherit;
}
/* Date chip: cyan month band + big day number */
.pp-sidebar-cal-chip {
    width: 44px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--pp-border);
}
.pp-sidebar-cal-chip-month {
    display: block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 2px;
    line-height: 1;
}
.pp-sidebar-cal-chip-day {
    display: block;
    background: #fff;
    color: var(--pp-text);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    padding: 6px 2px 7px;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────
   PAGINATION
───────────────────────────────────────────────────────── */
.pp-pagination {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-border);
}

/* WordPress outputs .navigation.pagination > .nav-links */
.pp-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    background: transparent;
    color: var(--pp-text);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1;
}

.pp-pagination .page-numbers:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
}

.pp-pagination .page-numbers.current {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

.pp-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
    color: var(--pp-text-muted);
    min-width: 24px;
    padding: 0;
}

.pp-pagination .page-numbers.prev,
.pp-pagination .page-numbers.next {
    font-size: 1.1rem;
    font-weight: 400;
}

/* ── Archive responsive ── */
@media (max-width: 1100px) {
    .pp-archive-layout { grid-template-columns: 1fr 240px; gap: 28px; }
    .pp-archive-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 967px) {
    .pp-archive-layout { grid-template-columns: 1fr; }
    .pp-sidebar-heading { width: 100%; }
    .pp-archive-sidebar { position: static; }
    /* Play-now: filters sit above the room list once stacked (grid-item order works the same as flex) */
    .pp-play-now-layout .pp-archive-sidebar { order: -1; }
}

@media (max-width: 767px) {
    .pp-archive-grid { grid-template-columns: 1fr; }
    .pp-archive-sidebar { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────
   PLAY NOW PAGE — full poker rooms list
───────────────────────────────────────────────────────── */
.pp-play-now-page {
    padding: var(--pp-section-pad) 0;
}

/* ── Hero banner — dark band, same shell as .pp-review-hero ── */
.pp-pn-hero { padding: 44px 0 36px; }
.pp-pn-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.pp-pn-hero-badge {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
}
.pp-review-hero-title.pp-pn-hero-title { margin-bottom: 22px; max-width: 980px; }
.pp-pn-hero-desc-wrap { max-width: 980px; }
.pp-pn-hero-desc {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .95rem;
    line-height: 1.6;
}

/* ── Results count ── */
.pp-pn-results-count {
    margin: 0 0 16px;
    font-size: .85rem;
    color: var(--pp-text-muted);
}

/* ── Sidebar: Filters panel ── */
.pp-sidebar-filters {
    position: relative;
    border-radius: var(--pp-radius-lg);
    background: #fff;
    background-image:
        radial-gradient(ellipse 240px 160px at 110% -5%, rgba(25, 200, 224, .08), transparent),
        radial-gradient(ellipse 140px 100px at -5% 105%, rgba(25, 200, 224, .05), transparent);
    border: 1px solid var(--pp-border);
    padding: 18px;
}
.pp-sidebar-filters-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0 0 16px;
}
.pp-filter-group { margin-bottom: 18px; }
.pp-filter-group:last-of-type { margin-bottom: 0; }
.pp-filter-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.pp-filter-select-wrap { position: relative; }
.pp-filter-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    padding: 9px 32px 9px 12px;
    font-size: .85rem;
    color: var(--pp-text);
    background: var(--pp-bg-alt);
    cursor: pointer;
    transition: border-color .15s;
}
.pp-filter-select:focus { outline: none; border-color: var(--pp-cyan-500); }
.pp-filter-select-wrap::after {
    content: '';
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--pp-text-muted);
    border-bottom: 1.5px solid var(--pp-text-muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}
.pp-filter-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    font-size: .85rem;
    color: var(--pp-text);
    cursor: pointer;
}
.pp-filter-checkbox-name { display: flex; align-items: center; gap: 9px; }

/* Custom checkbox/radio — native accent-color renders an inconsistent
   ring+dot two-tone in Chrome; this keeps it a single solid cyan fill. */
.pp-filter-checkbox input[type="checkbox"],
.pp-filter-checkbox input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--pp-border);
    background: var(--pp-bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pp-filter-checkbox input[type="checkbox"] { border-radius: 4px; }
.pp-filter-checkbox input[type="radio"] { border-radius: 50%; }
.pp-filter-checkbox input[type="checkbox"]:hover,
.pp-filter-checkbox input[type="radio"]:hover { border-color: var(--pp-cyan-500); }
.pp-filter-checkbox input[type="checkbox"]:checked,
.pp-filter-checkbox input[type="radio"]:checked { border-color: var(--pp-cyan-500); }
.pp-filter-checkbox input[type="checkbox"]:checked { background: var(--pp-cyan-500); }
.pp-filter-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid var(--pp-bg-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pp-filter-checkbox input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pp-cyan-500);
}
.pp-filter-checkbox input[type="checkbox"]:focus-visible,
.pp-filter-checkbox input[type="radio"]:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-filter-checkbox-count { color: var(--pp-text-muted); font-size: .78rem; }
.pp-filter-clear {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 9px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pp-filter-clear:hover { border-color: var(--pp-cyan-500); color: var(--pp-cyan-500); text-decoration: none; }
.pp-filter-clear--hidden { display: none; }

/* Loading state while a filter change fetches via AJAX */
.pp-pn-filters-form--loading { opacity: .6; pointer-events: none; }
.pp-pn-rooms-list--loading { opacity: .45; transition: opacity .15s; pointer-events: none; }

/* ── Rooms list ── */
.pp-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 48px;
}
.pp-room-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 32px 120px 1fr 160px 220px;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: 18px 24px;
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1),
                box-shadow .14s cubic-bezier(.4, 0, .2, 1);
}
/* Frosted-glass layer faded in on hover — its own pseudo-element because
   browsers can't interpolate between two different background gradients;
   animating opacity + backdrop-filter blur radius (matching filter functions
   on both ends) is what actually animates smoothly. */
.pp-room-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(140% 220% at 8% -30%, rgba(var(--room-brand-rgb, 25,200,224), .18), transparent 55%),
        rgba(6, 9, 12, .96);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1),
                -webkit-backdrop-filter .14s cubic-bezier(.4, 0, .2, 1),
                backdrop-filter .14s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.pp-room-row:hover {
    border-color: rgba(var(--room-brand-rgb, 25,200,224), .35);
    box-shadow: 0 0 0 1px rgba(var(--room-brand-rgb, 25,200,224), .14), 0 4px 22px rgba(0, 0, 0, .32);
}
.pp-room-row:hover::before {
    opacity: 1;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

/* Brand-color glow — originates behind the logo and grows rightward into
   the row on hover, like a light source switching on. transform-origin is
   pinned to the left edge (where the logo sits) so scale() reads as
   spreading right, not growing symmetrically in place. Tinted per-room via
   --room-brand-rgb (extracted from that casino's own logo — see script in
   page-play-now.php), falling back to poker.pro cyan if extraction hasn't
   run yet. */
.pp-room-row::after {
    content: "";
    position: absolute;
    top: calc(50% - 150px);
    left: 60px;
    width: 620px;
    height: 300px;
    transform-origin: left center;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse closest-side, rgba(var(--room-brand-rgb, 25,200,224), .32), transparent 72%);
    filter: blur(22px);
    opacity: 0;
    transform: scale(.12);
    transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
                transform .85s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Number badge */
.pp-room-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--pp-bg-dark);
    color: #fff;
    border-radius: 6px;
    font-family: var(--pp-font-display);
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .14s cubic-bezier(.4, 0, .2, 1), color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-num {
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

/* Logo */
.pp-room-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
}
.pp-room-logo img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
    /* Same fix as .pp-mega-room-logo img: flex items default to
       min-width:auto (intrinsic width as a floor), which beats
       max-width:100% inside this 120px flex box — wide wordmark logos
       (e.g. PokerPlanets) overflowed and got clipped by .pp-room-row's
       overflow:hidden. */
    min-width: 0;
    object-fit: contain;
    transition: filter .14s cubic-bezier(.4, 0, .2, 1);
}
/* Most partner logos are dark wordmarks on a transparent background — a
   white chip behind them on the dark glass looked like a boxed-in sticker.
   Flattening the logo itself to a white silhouette (brightness(0) keeps the
   alpha/shape, invert(1) flips black to white) reads as a clean mono mark
   instead, the way premium "as seen on" partner strips usually handle it. */
.pp-room-row:hover .pp-room-logo img {
    filter: brightness(0) invert(1);
}
.pp-room-logo-ph {
    font-size: .75rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-logo-ph {
    color: var(--pp-text-invert);
}

/* Info: bonus + notice */
.pp-room-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 20px;
    border-left: 1px solid var(--pp-border);
    border-right: 1px solid var(--pp-border);
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-info {
    border-left-color: rgba(255, 255, 255, .14);
    border-right-color: rgba(255, 255, 255, .14);
}
.pp-room-bonus {
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.25;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
/* Homepage-only bump — .pp-room-row/.pp-room-bonus is shared with the Play
   Now page's room list (theme-parts/play-now-rooms-list.php), so this is
   scoped to .pp-sites (front-page.php's "Recommended Poker Sites" section)
   rather than changing the shared base rule. */
.pp-sites .pp-room-bonus {
    font-size: 1.15rem;
}
.pp-room-row:hover .pp-room-bonus {
    color: var(--pp-text-invert);
}
.pp-room-notice {
    font-size: .68rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-notice {
    color: rgba(255, 255, 255, .6);
}

/* Rating */
.pp-room-rating {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
    border-right: 1px solid var(--pp-border);
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-rating {
    border-right-color: rgba(255, 255, 255, .14);
}
.pp-room-stars { display: flex; gap: 2px; }
.pp-room-stars .pp-star { transition: color .14s cubic-bezier(.4, 0, .2, 1); font-size: .9rem; }
.pp-room-row:hover .pp-star--empty { color: rgba(255, 255, 255, .22); }
.pp-room-rating-val {
    font-size: .78rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-rating-val {
    color: rgba(255, 255, 255, .7);
}

/* CTA buttons */
.pp-room-actions {
    position: relative;
    z-index: 1;
    /* Pinned to the last track: rooms without a rating (e.g. LuxonPay) omit
       .pp-room-rating, and auto-placement would drop the CTAs into its
       narrower column, misaligning them against the other rows. */
    grid-column: -2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.pp-btn-room-play,
.pp-btn-room-review {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--pp-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 16px;
    white-space: nowrap;
    transition: background .14s cubic-bezier(.4, 0, .2, 1),
                border-color .14s cubic-bezier(.4, 0, .2, 1),
                color .14s cubic-bezier(.4, 0, .2, 1),
                box-shadow .22s ease, transform .18s ease;
}
.pp-btn-room-play {
    background: var(--pp-bg-dark) !important;
    border: 1.5px solid rgba(25, 200, 224, 0.25) !important;
    color: var(--pp-cyan-500) !important;
    box-shadow: none !important;
    cursor: pointer;
}
.pp-btn-room-play:hover {
    transition: background .2s, border-color .2s, box-shadow .2s, color .2s, transform .2s !important;
    background: var(--pp-cyan-500) !important;
    border-color: var(--pp-cyan-500) !important;
    color: var(--pp-bg-dark) !important;
    box-shadow: 0 6px 20px rgba(25, 200, 224, 0.38) !important;
}
.pp-room-row:hover .pp-btn-room-play {
    background: var(--pp-cyan-500) !important;
    border-color: var(--pp-cyan-500) !important;
    color: var(--pp-bg-dark) !important;
}
.pp-btn-room-review {
    background: transparent;
    color: var(--pp-text);
    border: 2px solid var(--pp-border);
}
.pp-btn-room-review:hover {
    background: rgba(14, 20, 25, 0.04);
    border-color: var(--pp-text);
    color: var(--pp-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
.pp-room-row:hover .pp-btn-room-review {
    border-color: rgba(255, 255, 255, .28);
    color: var(--pp-text-invert);
}
.pp-room-row:hover .pp-btn-room-review:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--pp-text-invert);
    color: var(--pp-text-invert);
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────
   INLINE "PLAY NOW" SHORTCODE  ([pokerpro-aces-casinos-4])
   Restyled to match .pp-room-row above. This markup comes from
   wp-content/plugins/pokerpro-geoblock/shortcodes/pokerpro-casinos-shortcode-4.php
   (the one used in article bodies), not our theme templates, so the DOM is
   fixed — every rule below overrides that plugin's own aces-style.css,
   hence the .space-shortcode-wrap prefix and !important on anything the
   plugin also declares (needed to win the cascade regardless of stylesheet
   load order). Note: pokerpro-aces-casinos-5 is a DIFFERENT markup family
   (space-organizations-4-archive-item*, a multi-column card grid, not a
   row list) and is untouched by this block. Stacked vertically (badge+logo,
   then bonus text, then rating, then buttons side by side) rather than
   trying to fit the play-now page's wide 5-column row into a narrow space
   — this shortcode runs inline in article bodies, often next to a sidebar,
   where a squeezed horizontal row just wraps awkwardly. No per-room
   --room-brand-rgb here (this markup isn't touched by room-brand-color.js),
   so the glow/border always read as poker.pro cyan — fine as a default,
   can be wired up to real extraction later if wanted.
───────────────────────────────────────────────────────── */
.space-shortcode-wrap.space-shortcode-4 {
    margin: 8px 0 28px !important;
}
/* .space-shortcode-wrap-ins picks up the generic .pp-container rule
   (max-width + padding-inline) meant for full-bleed sections like the
   header/footer. This shortcode instead sits inline inside the already-
   narrower article content column, so that padding-inline was adding a
   second, unwanted inset on top of the card's own padding — the card
   never reached the paragraph text's left/right edges. Scoped to
   .space-shortcode-4 only — .space-shortcode-wrap-ins is shared by many
   other shortcodes across the site that still need the container rule. */
.space-shortcode-wrap.space-shortcode-4 .space-shortcode-wrap-ins {
    max-width: none;
    padding-inline: 0;
}
.space-shortcode-wrap .space-organizations-3-archive-items {
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}
.space-shortcode-wrap .space-organizations-3-archive-item {
    display: block;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins {
    margin: 0 !important;
    padding: 20px !important;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: none !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1), box-shadow .14s cubic-bezier(.4, 0, .2, 1) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover {
    border-color: rgba(var(--room-brand-rgb, 25,200,224), .35);
    box-shadow: 0 0 0 1px rgba(var(--room-brand-rgb, 25,200,224), .14), 0 4px 22px rgba(0, 0, 0, .32) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(140% 220% at 8% -30%, rgba(var(--room-brand-rgb, 25,200,224), .18), transparent 55%),
        rgba(6, 9, 12, .96);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1),
                -webkit-backdrop-filter .14s cubic-bezier(.4, 0, .2, 1),
                backdrop-filter .14s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover::before {
    opacity: 1;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 160px;
    transform-origin: left center;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse closest-side, rgba(var(--room-brand-rgb, 25,200,224), .32), transparent 72%);
    filter: blur(18px);
    opacity: 0;
    transform: scale(.12);
    transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
                transform .85s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Logo + number badge — its own top row */
.space-shortcode-wrap .space-organizations-3-archive-item-logo {
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 56px;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    z-index: 1;
}
/* Fixed logo box the image can never exceed. The image used to be allowed
   wider (220px) than its box (160px), so wide wordmarks overflowed both ways
   and the left overflow sat on top of the rank badge. Left-aligned so every
   logo starts at the same x after the badge, whatever its aspect ratio. */
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins {
    padding: 0 !important;
    width: 180px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins a {
    display: flex;
    align-items: center;
    max-width: 100%;
    height: 100%;
}
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins img {
    max-width: 100% !important;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0 !important;
    transition: filter .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-logo-ins img {
    filter: brightness(0) invert(1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-count {
    order: -1;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 26px !important;
    height: 26px !important;
    background: var(--pp-bg-dark) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 18px;
    transition: background .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-count::before { display: none !important; }
.space-shortcode-wrap .space-organizations-3-archive-item-count span {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    font-family: var(--pp-font-display);
    font-size: .72rem !important;
    font-weight: 700;
    color: #fff !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-count {
    background: var(--pp-cyan-500) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-count span {
    color: var(--pp-bg-dark) !important;
}

/* Bonus text — own full-width row, no column divider */
.space-shortcode-wrap .space-organizations-3-archive-item-terms {
    order: 3;
    flex: 1 1 100% !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
}
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins {
    padding: 0 !important;
    border-left: none !important;
    text-align: left !important;
    font-size: 1.4rem !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: var(--pp-text) !important;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins strong,
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins span,
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins p {
    font-family: var(--pp-font-body) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: inherit !important;
    line-height: 1.3 !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-terms-ins {
    color: var(--pp-text-invert) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins::after,
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins::after,
.space-shortcode-wrap .space-organizations-3-archive-item-rating-ins::after {
    display: none !important;
}

/* Rating — shares the top line with the logo/badge (normal flex flow,
   pushed to the far right via margin-left:auto) instead of being pulled
   out with position:absolute, which was overlapping other content because
   its top/right offsets couldn't reliably track this card's actual
   (variable) content height. */
.space-shortcode-wrap .space-organizations-3-archive-item-rating {
    order: 2;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto;
    position: relative;
    z-index: 1;
}
.space-shortcode-wrap .space-organizations-3-archive-item-rating-ins {
    padding: 0 !important;
    text-align: right !important;
    display: flex !important;
    align-items: center;
}
.space-shortcode-wrap .space-organizations-3-archive-item-rating-box {
    height: auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}
.space-shortcode-wrap .star-rating { display: flex; gap: 2px; }
.space-shortcode-wrap .star-rating .star {
    width: auto !important;
    height: auto !important;
    color: transparent;
}
.space-shortcode-wrap .star-rating .star::before {
    font-family: inherit !important;
    content: "★" !important;
    font-weight: 400 !important;
    font-size: .9rem;
}
.space-shortcode-wrap .star-rating .star-full::before,
.space-shortcode-wrap .star-rating .star-half::before {
    color: #f5a623 !important;
}
.space-shortcode-wrap .star-rating .star-empty::before {
    color: #d1d5db !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-rating-box > span {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    font-size: .78rem !important;
    font-weight: 700;
    color: var(--pp-text-muted);
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .star-rating .star-empty::before {
    color: rgba(255, 255, 255, .22) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-rating-box > span {
    color: rgba(255, 255, 255, .7);
}

/* Buttons — own row, side by side now that they have the full width */
.space-shortcode-wrap .space-organizations-3-archive-item-button {
    order: 4;
    flex: 0 0 auto;
    width: 100% !important;
    margin-left: 0;
    position: relative;
    z-index: 1;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a {
    display: block !important;
    flex: 1;
    min-width: 0 !important;
    text-align: center;
    text-decoration: none !important;
    border-radius: var(--pp-radius-pill) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 11px 16px !important;
    margin: 0 !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background .14s cubic-bezier(.4, 0, .2, 1),
                border-color .14s cubic-bezier(.4, 0, .2, 1),
                color .14s cubic-bezier(.4, 0, .2, 1) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a i { display: none !important; }
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a:first-child {
    background: var(--pp-bg-dark) !important;
    background-color: var(--pp-bg-dark) !important;
    border: 1.5px solid rgba(var(--room-brand-rgb, 25,200,224), .3) !important;
    color: rgb(var(--room-brand-rgb, 25,200,224)) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a:first-child:hover {
    background: rgb(var(--room-brand-rgb, 25,200,224)) !important;
    background-color: rgb(var(--room-brand-rgb, 25,200,224)) !important;
    border-color: rgb(var(--room-brand-rgb, 25,200,224)) !important;
    color: var(--pp-bg-dark) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a:last-child {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid var(--pp-border) !important;
    color: var(--pp-text) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-button-ins a:last-child {
    border-color: rgba(255, 255, 255, .28) !important;
    color: var(--pp-text-invert) !important;
}

/* T&C / disclaimer footer text — the "New Customers Only | 18+ | T&C Apply"
   line is dynamic content from that casino's own casino_button_notice field
   (same source as .pp-room-notice on the play-now page), not something we
   added. Hidden for now per request; remove this rule to bring it back. */
.space-shortcode-wrap .space-organizations-archive-item-button-notice {
    display: none !important;
}
.space-shortcode-wrap .space-organizations-archive-item-detailed-tc,
.space-shortcode-wrap .space-organization-header-button-notice {
    width: 100% !important;
    margin-top: 6px !important;
    font-size: .68rem !important;
    color: var(--pp-text-muted) !important;
    position: relative;
    z-index: 1;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-archive-item-detailed-tc,
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organization-header-button-notice {
    color: rgba(255, 255, 255, .5) !important;
}
/* .tc-desc is a hover-reveal T&C tooltip (opacity:0/visibility:hidden by
   default in the plugin's own CSS) — visibility:hidden still reserves
   layout space and its content was bleeding through, showing as stray
   text/glyphs below the buttons and adding a phantom gap. Removing it
   from flow entirely fixes both. */
.space-shortcode-wrap .tc-desc {
    display: none !important;
}

/* Inline PLAY NOW shortcode — responsive. No breakpoints existed for this
   block before, so at squeezed/tablet/mobile widths the fixed 160px logo
   made badge+logo+rating overflow their line unpredictably — rating would
   wrap onto its own line and edge spacing varied card to card. Shrinking
   the logo keeps that trio reliably on one row at any width; terms/button/
   notice already force their own full-width lines via flex-basis:100%,
   so they're unaffected. */
@media (max-width: 900px) {
    .space-shortcode-wrap .space-organizations-3-archive-item-ins {
        padding: 24px 18px 18px !important;
        gap: 12px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-logo {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-logo-ins {
        width: 130px;
        height: 48px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-logo-ins img {
        max-height: 36px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-count {
        margin-right: 12px;
    }
}
@media (max-width: 480px) {
    .space-shortcode-wrap .space-organizations-3-archive-item-ins {
        padding: 20px 14px 14px !important;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins,
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins strong,
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins span,
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins p {
        font-size: 1.15rem !important;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-button-ins {
        gap: 8px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-button-ins a {
        font-size: .66rem !important;
        padding: 10px 10px !important;
    }
}

/* ── Play-now responsive ── */
@media (max-width: 1100px) {
    .pp-room-row { grid-template-columns: 28px 100px 1fr 140px 200px; gap: 14px; padding: 16px 18px; }
}
@media (max-width: 900px) {
    .pp-room-row { grid-template-columns: 28px 80px 1fr 180px; gap: 12px; }
    .pp-room-rating { border-right: none; }
}
@media (max-width: 640px) {
    .pp-room-row {
        grid-template-columns: 28px 1fr;
        gap: 10px 12px;
        padding: 14px 16px;
    }
    .pp-room-logo  { grid-column: 2; width: auto; height: 34px; justify-content: flex-start; margin-bottom: 8px; }
    .pp-room-logo img { max-width: 100px; max-height: 34px; }
    .pp-room-info  { grid-column: 1 / -1; border: none; padding: 0; }
    .pp-room-rating { grid-column: 1 / -1; flex-direction: row; border: none; padding: 0; }
    .pp-room-actions { grid-column: 1 / -1; flex-direction: row; }
    .pp-btn-room-play, .pp-btn-room-review { flex: 1; }
}
@media (max-width: 480px) {
    .pp-pn-hero-meta { flex-wrap: wrap; row-gap: 4px; }
}

/* ─────────────────────────────────────────────────────────
   TOURNAMENT CALENDAR
───────────────────────────────────────────────────────── */
.pp-tc-filters {
    position: relative;
    z-index: 10;
    background:
        linear-gradient(135deg, rgba(14,20,25,.92) 0%, rgba(14,20,25,.72) 55%, rgba(20,40,48,.82) 100%),
        linear-gradient(165deg, rgba(25,200,224,.16), rgba(25,200,224,.02));
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(25,200,224,.28);
    border-radius: var(--pp-radius-lg);
    padding: 22px 24px 18px;
    margin-bottom: 32px;
    box-shadow:
        0 0 0 1px rgba(25,200,224,.05),
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(25,200,224,.08);
}

.pp-tc-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 10px;
}

/* ── Custom dropdown ── */
.pp-tc-drop { position: relative; }

.pp-tc-drop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.6rem 0.875rem;
    border: 1.5px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    background: rgba(255,255,255,.04);
    font-size: .82rem;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    text-align: left;
    font-family: inherit;
}
.pp-tc-drop-btn:hover               { border-color: rgba(25,200,224,.45); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-drop--open .pp-tc-drop-btn   { border-color: var(--pp-cyan-500); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-drop--active .pp-tc-drop-btn { border-color: var(--pp-cyan-500); background: rgba(25,200,224,.10); color: var(--pp-text-invert); }

.pp-tc-drop-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-tc-drop--active .pp-tc-drop-label { font-weight: 600; color: var(--pp-text-invert); }

.pp-tc-drop-chevron {
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    transition: transform .2s;
    flex-shrink: 0;
}
.pp-tc-drop--open .pp-tc-drop-chevron { transform: rotate(180deg); color: var(--pp-cyan-500); }

.pp-tc-drop-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    background: var(--pp-bg-card);
    border: 1.5px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    z-index: 200;
    overflow: hidden;
    display: none;
}
.pp-tc-drop--open .pp-tc-drop-panel { display: block; }

.pp-tc-drop-list {
    list-style: none;
    margin: 0;
    padding: 5px 0;
    max-height: 230px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.35) transparent;
}
.pp-tc-drop-list::-webkit-scrollbar { width: 6px; }
.pp-tc-drop-list::-webkit-scrollbar-track { background: transparent; }
.pp-tc-drop-list::-webkit-scrollbar-thumb {
    background: rgba(25,200,224,.35);
    border-radius: var(--pp-radius-pill);
}
.pp-tc-drop-list::-webkit-scrollbar-thumb:hover { background: rgba(25,200,224,.6); }
.pp-tc-drop-item {
    padding: 8px 14px;
    font-size: .82rem;
    color: rgba(255,255,255,.68);
    cursor: pointer;
    transition: background .1s, color .1s;
    white-space: nowrap;
}
.pp-tc-drop-item:hover        { background: rgba(255,255,255,.06); color: var(--pp-text-invert); }
.pp-tc-drop-item--placeholder { color: rgba(255,255,255,.4); }
.pp-tc-drop-item--active      { color: var(--pp-cyan-500); font-weight: 600; background: rgba(25,200,224,.10); }

/* ── Search row ── */
.pp-tc-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.pp-tc-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.pp-tc-search-wrap .pp-tc-search-input {
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: 0.6rem 0.875rem;
    border: 1.5px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    font-size: .82rem;
    background: rgba(255,255,255,.04);
    color: var(--pp-text-invert);
    height: auto;
    transition: border-color .15s, background .15s, color .15s;
    font-family: inherit;
}
.pp-tc-search-wrap .pp-tc-search-input:focus        { outline: none; border-color: var(--pp-cyan-500); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-search-wrap .pp-tc-search-input::placeholder { color: rgba(255,255,255,.4); }

.pp-tc-search-btn {
    padding: 0.6rem 1.25rem;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    border: none;
    border-radius: var(--pp-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.pp-tc-search-btn:hover { background: var(--pp-cyan-600); }

.pp-tc-live-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.pp-tc-live-label input[type="checkbox"] {
    accent-color: var(--pp-cyan-500);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.pp-tc-clear {
    display: inline-block;
    margin-top: 12px;
    font-size: .75rem;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .15s;
}
.pp-tc-clear:hover { color: var(--pp-cyan-500); }

/* ── Tournament card list ── */
.pp-tc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-tc-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(25,200,224,.07), rgba(120,130,140,.02));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(120,130,140,.20);
    border-radius: var(--pp-radius-lg);
    box-shadow:
        0 6px 24px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.pp-tc-card:hover {
    border-color: var(--pp-cyan-500);
    box-shadow:
        0 8px 28px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
}
.pp-tc-card--live {
    overflow: hidden;
    position: relative;
}
.pp-tc-card--live::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(230,57,70,.10) 0%, rgba(230,57,70,.04) 50%, transparent 72%);
    pointer-events: none;
}
.pp-tc-card--sticky {
    overflow: hidden;
    position: relative;
}
.pp-tc-card--sticky::after {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 420px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(107,119,133,.14) 0%, rgba(107,119,133,.05) 50%, transparent 72%);
    pointer-events: none;
}
.pp-tc-card-glow--partner {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 420px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(6,214,160,.12) 0%, rgba(6,214,160,.05) 50%, transparent 72%);
    pointer-events: none;
}

.pp-tc-logo {
    width: 84px;
    height: 84px;
    min-width: 84px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--pp-bg-alt);
}
.pp-tc-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pp-tc-body { flex: 1; min-width: 0; }

.pp-tc-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pp-tc-title {
    font-family: var(--pp-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pp-text);
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pp-tc-news-link {
    color: var(--pp-text-muted);
    font-size: .78rem;
    text-decoration: none;
    transition: color .15s;
}
.pp-tc-news-link:hover { color: var(--pp-cyan-500); }

.pp-tc-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.pp-tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.pp-tc-badge--live    { background: #fef2f2; color: var(--pp-red); border: 1px solid rgba(25,200,224,.2); }
.pp-tc-badge--partner { background: rgba(6,214,160,.08); color: var(--pp-green); border: 1px solid rgba(6,214,160,.25); }
.pp-tc-badge--mixed   { background: rgba(25,200,224,.08); color: var(--pp-cyan-600); border: 1px solid rgba(25,200,224,.25); }
.pp-tc-badge--ladies  { background: rgba(147,51,234,.06); color: #9333ea; border: 1px solid rgba(147,51,234,.2); }
.pp-tc-badge--seniors { background: var(--pp-bg-alt); color: var(--pp-text-soft); border: 1px solid var(--pp-border); }

.pp-tc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    margin-bottom: 8px;
}
.pp-tc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--pp-text-muted);
    line-height: 1;
}
.pp-tc-meta-item img { height: 14px; border-radius: 1px; }
.pp-tc-meta-item i   { font-size: .72rem; }

.pp-tc-meta-link {
    color: var(--pp-cyan-500);
    font-size: .78rem;
    text-decoration: none;
}
.pp-tc-meta-link:hover { color: var(--pp-cyan-600); }

/* ─────────────────────────────────────────────────────────
   POKER ROOM REVIEW  (pp-review-*)
───────────────────────────────────────────────────────── */

/* ── Hero band ── */
.pp-review-hero {
    --hr-c1-rgb: 25, 200, 224;
    --hr-c2-rgb: 25, 200, 224;
    --hr-c3-rgb: 25, 200, 224;
    background: var(--pp-bg-dark); /* Exact nav color — top is always clean */
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--pp-border-dark);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Bottom: vivid accents anchored to bottom edge */
.pp-review-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 38% 100% at  8% 100%, rgba(var(--hr-c1-rgb), .68), transparent),
        radial-gradient(ellipse 38% 100% at 92% 100%, rgba(var(--hr-c2-rgb), .62), transparent),
        radial-gradient(ellipse 32% 100% at 50% 100%, rgba(var(--hr-c3-rgb), .50), transparent);
}
/* Top: mirrors the nav's own cyan glows — same positions (28%, 72%, 96%), same cyan, flipped to y=0% */
.pp-review-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 45% 100% at 28% 0%, rgba(var(--hr-c1-rgb), 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 0%, rgba(var(--hr-c1-rgb), 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 0%, rgba(var(--hr-c1-rgb), 0.16) 0%, transparent 65%);
}
.pp-review-orb { display: none; }
.pp-review-hero .pp-container { position: relative; z-index: 1; }
.pp-review-crumbs { padding-bottom: 16px; opacity: .65; font-size: .78rem; }

/* Title row: title-group left, share buttons pushed to far right */
.pp-review-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.pp-review-hero-title-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

/* Author byline under title — matches news article pp-single-byline style */
.pp-review-hero-byline {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-review-hero-byline img {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-review-hero-byline-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-review-hero-byline-author {
    font-size: .95rem;
    color: rgba(255,255,255,.6);
}
.pp-review-hero-byline-author a {
    color: var(--pp-text-invert);
    font-weight: 700;
    text-decoration: none;
}
.pp-review-hero-byline-author a:hover { color: var(--pp-cyan-500); }
.pp-review-hero-byline-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .83rem;
    color: rgba(255,255,255,.45);
}

/* Title — identical to pp-single-title on news article pages */
.pp-review-hero-title {
    color: var(--pp-text-invert);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0;
}

/* Share buttons */
.pp-review-share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 6px;
}
.pp-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--pp-border-dark);
    background: var(--pp-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    cursor: pointer;
    padding: 0;
}
.pp-share-btn:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
}
.pp-share-btn--copied {
    border-color: #22c55e;
    color: #22c55e;
}

/* Byline bar — below the hero band */
.pp-review-byline-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-review-byline-logo {
    width: 52px;
    height: 52px;
    background: var(--pp-bg);
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}
.pp-review-logo-img {
    width: 100%;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

/* Data chips */
.pp-review-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pp-review-hero-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    padding: 6px 12px;
}
.pp-review-hero-chip-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text-muted);
}
.pp-review-hero-chip-val {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.2;
}
.pp-review-hero-geo { display: flex; align-items: center; }

/* CTA column */
.pp-review-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Score ring */
.pp-review-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pp-review-score-ring {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--pp-cyan-500) calc(var(--score-pct) * 1%), var(--pp-border) 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pp-review-score-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    background: var(--pp-bg);
    border-radius: 50%;
}
.pp-review-score-num {
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--pp-text);
    position: relative;
    z-index: 1;
    line-height: 1;
}
.pp-review-score-max {
    font-size: .65rem;
    color: var(--pp-text-muted);
    position: relative;
    z-index: 1;
    line-height: 1;
}
.pp-review-score-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text-muted);
}
.pp-review-hero-btn {
    width: 100%;
    text-align: center;
    font-size: .85rem;
    padding: .7rem 1.2rem;
}

/* T&C block */
.pp-review-tc {
    font-size: .72rem;
    color: var(--pp-text-muted);
    text-align: center;
    width: 100%;
    line-height: 1.5;
}
.pp-review-tc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-text-muted);
    font-size: .72rem;
    padding: 0;
    border-bottom: 1px dashed currentColor;
}
.pp-review-tc-toggle svg { transition: transform .2s; }
.pp-review-tc-body { margin-top: 8px; }
.pp-review-tc-body[hidden] { display: none; }
.pp-review-btn-notice {
    font-size: .72rem;
    color: var(--pp-text-muted);
    text-align: center;
}

/* ── Rating strip ── */
.pp-review-rstrip {
    background: var(--pp-bg-alt);
    border-bottom: 1px solid var(--pp-border);
    padding: 22px 0;
}
.pp-review-rstrip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.pp-review-rbar {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pp-review-rbar-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pp-text-muted);
}
.pp-review-rbar-track {
    height: 5px;
    background: var(--pp-border);
    border-radius: 99px;
    overflow: hidden;
}
.pp-review-rbar-fill {
    height: 100%;
    background: var(--pp-cyan-500);
    border-radius: 99px;
    transition: width .4s ease;
}
.pp-review-rbar-val {
    font-size: .88rem;
    font-weight: 700;
    color: var(--pp-text);
}

/* ── Body layout ── */
.pp-review-body {
    background: var(--pp-bg);
    padding: 52px 0 80px;
}
.pp-review-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 52px;
    align-items: start;
}
/* Grid items default to min-width: auto, so an oversized child anywhere
   in the article body (a wide table, a classic-editor [caption] div with
   a fixed inline width, etc.) refuses to shrink and pushes this whole
   grid — sidebar included — past .pp-container's max-width. min-width: 0
   lets the column actually shrink to fit instead of forcing overflow. */
.pp-review-main {
    min-width: 0;
}
/* align-self: stretch makes this aside span the full row height (the
   row is as tall as the long article), so its sticky child has real
   room to travel instead of being boxed into the aside's own short
   natural height. */
.pp-review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}
.pp-review-news {
    position: sticky;
    top: 80px; /* 64px compact header + 16px clearance */
}

/* WP admin bar offset — keep clearance under the fixed header, which
   itself shifts down via .admin-bar .pp-hdr-wrap */
.admin-bar .pp-review-news { top: 112px; }
@media (max-width: 782px) {
    .admin-bar .pp-review-news { top: 126px; }
}

/* ── Main column ── */
.pp-review-lead {
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--pp-text-soft);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-review-author {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pp-border);
}

/* Pros / Cons */
.pp-review-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 44px;
}
.pp-review-pro,
.pp-review-con {
    background: var(--pp-bg-card);
    border-radius: var(--pp-radius-md);
    padding: 24px;
    border: 1px solid var(--pp-border-dark);
}
.pp-review-pc--full { grid-column: 1 / -1; }
.pp-review-pc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pp-text-invert);
    margin: 0 0 16px;
}
.pp-review-pc-body {
    color: var(--pp-text-invert-muted);
    font-size: .88rem;
    line-height: 1.65;
}
.pp-review-pc-body ul { padding-left: 0; list-style: none; margin: 0; }
.pp-review-pc-body li {
    padding: 7px 0;
    border-bottom: 1px solid var(--pp-border-dark);
}
.pp-review-pc-body li:last-child { border-bottom: none; }

/* Article body */
.pp-review-content {
    font-size: .95rem;
    line-height: 1.78;
    color: var(--pp-text);
    margin-bottom: 44px;
}
.pp-review-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--pp-radius-md);
}

/* Country flags pasted into articles (Mercury-era markup:
   <img class="flag-ico" style="height:18px">). The content-image rules above
   force height:auto, and the SVGs have no intrinsic size, so without this
   they blow up to the full cell width. Sized as an inline icon instead. */
.pp-single-content img.flag-ico,
.pp-review-content img.flag-ico,
.pp-single-content img[src*="/flags/svg/"],
.pp-review-content img[src*="/flags/svg/"] {
    display: inline-block;
    width: 20px !important;
    height: 15px !important;
    max-width: none !important;
    margin: 0 8px 0 0;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
    box-shadow: 0 0 0 1px rgba(14, 20, 25, .08);
}
.pp-review-content h2 {
    position: relative;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    margin: 2.2em 0 .9em;
    padding-bottom: .55em;
    letter-spacing: -.02em;
}
.pp-review-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg,
        rgb(var(--pp-review-brand-rgb, 25,200,224)) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .15) 100%);
}
.pp-review-content h3 {
    position: relative;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 700;
    margin: 1.7em 0 .6em;
    padding-left: 14px;
    letter-spacing: -.01em;
}
.pp-review-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
    opacity: .55;
}
.pp-review-content h4 { font-size: 1.05rem; font-weight: 700; margin: 1.4em 0 .5em; }
.pp-review-content p  { margin: 0 0 1.2em; }
.pp-review-content a  {
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
    text-decoration: underline;
    text-decoration-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .35);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s;
}
.pp-review-content a:hover { text-decoration-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .8); }
.pp-review-content ul,
.pp-review-content ol { padding-left: .2em; margin-bottom: 1.2em; list-style: none; }
.pp-review-content ol { counter-reset: pp-content-ol; }
.pp-review-content li {
    position: relative;
    margin-bottom: .55em;
    padding-left: 1.5em;
}
.pp-review-content ul > li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
.pp-review-content ol > li {
    counter-increment: pp-content-ol;
}
.pp-review-content ol > li::before {
    content: counter(pp-content-ol);
    position: absolute;
    left: 0;
    top: .05em;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
}

/* ── Blockquotes — glass callout ── */
.pp-review-content blockquote {
    position: relative;
    margin: 1.8em 0;
    padding: 18px 22px 18px 26px;
    background: linear-gradient(160deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .08), rgba(var(--pp-review-brand-rgb, 25,200,224), .02));
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .18);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-soft);
    font-style: italic;
}
.pp-review-content blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
.pp-review-content blockquote p:last-child { margin-bottom: 0; }

/* ── Section dividers ──
   No visible rule line at all — section breaks read from heading
   spacing and the h2 accent underline alone (editorial style, no
   decorative hr). !important clears any inline border/background an
   editor set on older posts so nothing leaks through. */
.pp-review-content hr,
.pp-review-content .wp-block-separator {
    display: none !important;
}

/* ── Tables inside review body ── */
/* Unified glassmorphic table — forced with !important so any inline
   row/cell colors an editor picked in the block editor on older posts
   can't fragment the look post-to-post. */
.pp-review-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: .9rem;
    margin: 1.8em 0;
    border-radius: var(--pp-radius-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .20) !important;
    background: rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}
/* Core wraps table blocks in .wp-block-table with overflow-x: auto by
   default — the inner table above is overflow: hidden, so on genuinely
   wide tables this wrapper (not the table) is what scrolls. Give it the
   site's own scrollbar instead of the bare OS default; the table already
   owns the vertical margin/radius, so zero those out here to avoid
   doubling them. */
.pp-review-content .wp-block-table {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .45) transparent;
}
.pp-review-content .wp-block-table table { margin: 0 !important; }
.pp-review-content .wp-block-table::-webkit-scrollbar { height: 6px; }
.pp-review-content .wp-block-table::-webkit-scrollbar-track { background: transparent; }
.pp-review-content .wp-block-table::-webkit-scrollbar-thumb {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
    border-radius: var(--pp-radius-pill);
}
.pp-review-content .wp-block-table::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .7);
}
.pp-review-content table thead tr,
.pp-review-content table th,
.pp-review-content table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
.pp-review-content table thead th {
    background:
        linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 100%),
        rgba(var(--pp-review-brand-rgb, 25,200,224), .16) !important;
    background-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .16) !important;
    border-bottom: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .24) !important;
}
.pp-review-content table thead th {
    padding: 13px 18px;
    text-align: left;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text) !important;
}
.pp-review-content table tbody tr,
.pp-review-content table tbody td {
    background: transparent !important;
    background-color: transparent !important;
}
.pp-review-content table tbody tr {
    border-bottom: 1px solid var(--pp-border) !important;
    transition: background .15s;
}
.pp-review-content table tbody tr:last-child { border-bottom: none !important; }
.pp-review-content table tbody tr:nth-child(even) {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .05) !important;
}
.pp-review-content table tbody tr:hover,
.pp-review-content table tbody tr:nth-child(even):hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .10) !important;
}
.pp-review-content table td {
    padding: 13px 18px;
    color: var(--pp-text) !important;
    vertical-align: top;
    line-height: 1.5;
}
.pp-review-content table td:first-child {
    font-weight: 700;
    color: var(--pp-text-soft) !important;
    white-space: nowrap;
}

/* ── "Contact us" callout box (custom block class, not has-background) ──
   Editors add this via the block editor's "Additional CSS class" field
   on a Group block — confirmed via the actual markup, which carries no
   has-background class at all, only .contact-us. That's why the
   has-background rule below never touched it. */
.pp-review-content .contact-us {
    position: relative;
    margin: 2.4em 0 !important;
    padding: 28px 32px !important;
    background: linear-gradient(160deg,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .14) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .03) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
    border-radius: var(--pp-radius-lg) !important;
    box-shadow: 0 8px 28px rgba(var(--pp-review-brand-rgb, 25,200,224), .12) !important;
    overflow: hidden;
}
.pp-review-content .contact-us::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.pp-review-content .contact-us > * { position: relative; }

/* ── Gutenberg group blocks with background (glass callout boxes) ──
   Selector specificity is boosted (.has-background repeated) and every
   visual property is !important because WordPress' own generated
   global-styles CSS ships editor-picked colors as !important too —
   without the boost, a picked preset/custom color wins the tie and the
   box reverts to whatever flat color an editor happened to choose. */
.pp-review-content .wp-block-group.has-background.has-background {
    position: relative;
    background: linear-gradient(
        160deg,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .14) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .03) 100%
    ) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
    border-radius: var(--pp-radius-lg) !important;
    box-shadow: 0 8px 28px rgba(var(--pp-review-brand-rgb, 25,200,224), .12) !important;
    padding: 20px 32px 32px !important;
    margin: 2em 0 !important;
    overflow: hidden;
}
.pp-review-content .wp-block-group.has-background.has-background > *:first-child {
    margin-top: 0 !important;
}
.pp-review-content .wp-block-group.has-background.has-background h2 {
    margin-top: .3em !important;
}
/* Glass specular sheen along the top edge */
.pp-review-content .wp-block-group.has-background.has-background::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.pp-review-content .wp-block-group.has-background.has-background > * { position: relative; }
.pp-review-content .wp-block-group.has-background.has-background hr,
.pp-review-content .wp-block-group.has-background.has-background .wp-block-separator {
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
    background-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
}

/* Inner nested group (e.g. the form sub-box) */
.pp-review-content .wp-block-group.has-background .wp-block-group {
    background: var(--pp-bg) !important;
    border: 1px solid var(--pp-border) !important;
    border-top: none !important;
    border-radius: var(--pp-radius-md) !important;
    padding: 20px !important;
    margin: 1.2em 0 0 !important;
}

/* ── Forms inside review content ── */
.pp-review-content form,
.pp-review-content .aces-form,
.pp-review-content .wpcf7 {
    position: relative;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--pp-radius-lg);
    box-shadow:
        0 8px 28px rgba(var(--pp-review-brand-rgb, 25,200,224), .10),
        inset 0 1px 0 rgba(255,255,255,.8);
    padding: 28px 24px;
    margin: 2em 0;
    overflow: hidden;
}
.pp-review-content form p { margin: 0; }

.pp-review-content input[type="text"],
.pp-review-content input[type="email"],
.pp-review-content input[type="number"],
.pp-review-content input[type="tel"],
.pp-review-content input[type="url"],
.pp-review-content input[type="password"],
.pp-review-content textarea,
.pp-review-content select {
    width: 100%;
    padding: 11px 14px;
    font-size: .9rem;
    color: var(--pp-text);
    background: rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,.8);
    border-radius: var(--pp-radius-md);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    margin-bottom: 12px;
    display: block;
    font-family: inherit;
}
.pp-review-content input[type="text"]:focus,
.pp-review-content input[type="email"]:focus,
.pp-review-content input[type="number"]:focus,
.pp-review-content input[type="tel"]:focus,
.pp-review-content input[type="url"]:focus,
.pp-review-content input[type="password"]:focus,
.pp-review-content textarea:focus,
.pp-review-content select:focus {
    background: rgba(255,255,255,.92);
    border-color: var(--pp-review-brand, var(--pp-cyan-500));
    box-shadow: 0 0 0 3px rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
}
.pp-review-content textarea { resize: vertical; min-height: 100px; }

.pp-review-content input[type="submit"],
.pp-review-content button[type="submit"],
.pp-review-content .submit input,
.pp-review-content .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.5rem;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: var(--pp-radius-pill);
    border: none;
    cursor: pointer;
    background: var(--pp-review-brand, var(--pp-cyan-500));
    color: #fff;
    transition: opacity .15s, transform .1s;
    font-family: inherit;
    margin-top: 4px;
}
.pp-review-content input[type="submit"]:hover,
.pp-review-content button[type="submit"]:hover,
.pp-review-content .wpcf7-submit:hover { opacity: .88; transform: translateY(-1px); }

.pp-review-pagination { margin-top: 24px; display: flex; gap: 8px; }

/* Details table */
.pp-review-details {
    position: relative;
    background: linear-gradient(165deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .05), rgba(255,255,255,0) 55%);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    margin-bottom: 44px;
}
.pp-review-details-title {
    position: relative;
    font-size: 1rem;
    font-weight: 800;
    padding: 20px 22px 16px;
    margin: 0;
    letter-spacing: -.01em;
    color: var(--pp-text);
}
.pp-review-details-title::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 0;
    width: 48px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg,
        rgb(var(--pp-review-brand-rgb, 25,200,224)) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .15) 100%);
}
.pp-review-details-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .14);
    align-items: center;
    transition: background .15s;
}
.pp-review-details-row:hover { background: rgba(var(--pp-review-brand-rgb, 25,200,224), .04); }
.pp-review-details-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pp-review-details-value {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pp-review-term-logo { display: inline-flex; }
.pp-review-term-img  { height: 26px; width: auto; }
.pp-review-term-text {
    font-size: .8rem;
    font-weight: 500;
    color: var(--pp-text-soft);
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .07);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .22);
    border-radius: var(--pp-radius-pill);
    padding: 4px 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.pp-review-term-text:hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .16);
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
    color: var(--pp-text);
}

/* ── Sidebar ── */
/* Shared glass card shell — mirrors .pp-sidebar-brands so all sidebar
   widgets read as one design language across the site. Grid placement
   and sticky positioning for these two live up in .pp-review-layout. */
.pp-review-sidecard,
.pp-review-news {
    background: var(--pp-bg);
    background-image:
        radial-gradient(ellipse 260px 180px at 108% -8%, rgba(var(--pp-review-brand-rgb, 25,200,224), .12), transparent),
        radial-gradient(ellipse 160px 120px at -8% 108%, rgba(var(--pp-review-brand-rgb, 25,200,224), .07), transparent);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
}

.pp-review-sidecard {
    position: relative;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Welcome bonus highlight — same frosted glass treatment as .pp-scscore */
.pp-review-sidecard-bonus {
    position: relative;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .20), rgba(var(--pp-review-brand-rgb, 25,200,224), .04));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--pp-radius-md);
    box-shadow:
        0 6px 24px rgba(var(--pp-review-brand-rgb, 25,200,224), .14),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(var(--pp-review-brand-rgb, 25,200,224), .10);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    overflow: hidden;
}
.pp-review-sidecard-bonus-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
}
.pp-review-sidecard-bonus-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.35;
}

/* Sidecard logo at top */
.pp-review-sidecard-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 14px;
}
.pp-review-sidecard-logo .pp-review-logo-img {
    max-height: 56px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
}

/* ── Expert score widget (frosted glass panel) ── */
.pp-scscore {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .20), rgba(var(--pp-review-brand-rgb, 25,200,224), .04));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--pp-radius-md);
    box-shadow:
        0 6px 24px rgba(var(--pp-review-brand-rgb, 25,200,224), .14),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(var(--pp-review-brand-rgb, 25,200,224), .10);
    overflow: hidden;
}
.pp-scscore-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pp-scscore-label {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--pp-text-muted);
    line-height: 1.4;
}
.pp-scscore-badge {
    display: flex;
    align-items: baseline;
    gap: 2px;
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .30);
    border-radius: var(--pp-radius-pill);
    padding: 3px 10px 3px 12px;
}
.pp-scscore-num {
    font-size: 1.3rem;
    font-weight: 900;
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
    line-height: 1.3;
    letter-spacing: -.03em;
}
.pp-scscore-denom {
    font-size: .68rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    line-height: 1;
}
.pp-scscore-stars {
    display: flex;
    gap: 4px;
    line-height: 1;
}

/* SVG stars */
.pp-scs-star {
    position: relative;
    width: 17px;
    height: 17px;
    display: inline-flex;
    flex: 0 0 auto;
}
.pp-scs-star-svg { width: 100%; height: 100%; display: block; }
.pp-scs-star--full .pp-scs-star-svg {
    fill: rgb(var(--pp-review-brand-rgb, 25,200,224));
    filter: drop-shadow(0 0 3px rgba(var(--pp-review-brand-rgb, 25,200,224), .45));
}
.pp-scs-star--empty .pp-scs-star-svg { fill: rgba(var(--pp-review-brand-rgb, 25,200,224), .15); }
.pp-scs-star--half .pp-scs-star-svg--bg {
    position: absolute;
    inset: 0;
    fill: rgba(var(--pp-review-brand-rgb, 25,200,224), .15);
}
.pp-scs-star--half .pp-scs-star-svg--fg {
    position: absolute;
    inset: 0;
    fill: rgb(var(--pp-review-brand-rgb, 25,200,224));
    clip-path: inset(0 50% 0 0);
    filter: drop-shadow(0 0 3px rgba(var(--pp-review-brand-rgb, 25,200,224), .45));
}

/* Category breakdown bars inside score widget */
.pp-scscore-bars {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .16);
}
.pp-scscore-bars .pp-review-rbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 5px;
    column-gap: 8px;
}
.pp-scscore-bars .pp-review-rbar-label {
    order: 1;
    flex: 1 1 auto;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    color: var(--pp-text-soft);
    white-space: nowrap;
}
.pp-scscore-bars .pp-review-rbar-val {
    order: 2;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
    text-align: right;
}
.pp-scscore-bars .pp-review-rbar-track {
    order: 3;
    flex: 1 1 100%;
    height: 6px;
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
}
.pp-scscore-bars .pp-review-rbar-fill {
    background: linear-gradient(90deg,
        rgb(var(--pp-review-brand-rgb, 20,170,192)),
        rgba(var(--pp-review-brand-rgb, 25,200,224), .75));
    box-shadow: 0 0 8px rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
}
.pp-review-sidecard-btn {
    width: 100%;
    text-align: center;
    font-size: .9rem;
    padding: .75rem 1.25rem;
    display: block;
    box-shadow: 0 4px 16px rgba(25,200,224,.16) !important;
}
.pp-review-sidecard-tc,
.pp-review-sidecard-notice {
    font-size: .7rem;
    color: var(--pp-text-muted);
    text-align: center;
    line-height: 1.5;
    width: 100%;
}
.pp-review-sidecard-facts {
    width: 100%;
    border-top: 1px solid var(--pp-border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pp-review-sidecard-fact {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
}
.pp-review-sidecard-fact-key { color: var(--pp-text-muted); }
.pp-review-sidecard-fact-val { color: var(--pp-text); font-weight: 600; text-align: right; }

/* ── Sidecard reveal animation ── */
.pp-review-sidecard > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s ease;
}
.pp-review-sidecard.pp-sc-revealed > * {
    opacity: 1;
    transform: none;
}
/* bar fill gets a slower ease so the number sweep feels deliberate */
.pp-scscore-bars .pp-review-rbar-fill {
    transition: width .7s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) {
    .pp-review-sidecard > *,
    .pp-scscore-bars .pp-review-rbar-fill {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Latest news widget ── */
.pp-review-news-heading {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--pp-text);
    padding: 16px 18px 12px;
    margin: 0;
}
.pp-review-news-list {
    list-style: none;
    margin: 0;
    padding: 0 10px 10px;
}
.pp-review-news-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: var(--pp-radius-md);
    transition: background .15s;
}
.pp-review-news-item:hover { background: var(--pp-bg-alt); }
.pp-review-news-thumb {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    display: block;
    background: var(--pp-bg-alt);
}
.pp-review-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pp-review-news-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 1px;
}
.pp-review-news-title {
    font-size: .81rem;
    font-weight: 700;
    color: var(--pp-text);
    text-decoration: none;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-review-news-title:hover { color: var(--pp-cyan-600); }
.pp-review-news-date {
    font-size: .7rem;
    color: var(--pp-text-muted);
}

/* ── Related sections ── */
.pp-review-related {
    padding: 52px 0;
    background: var(--pp-bg);
    border-top: 1px solid var(--pp-border);
}
.pp-review-related--alt { background: var(--pp-bg-alt); }
.pp-review-related-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 28px;
}

/* ── Comments ── */
.pp-review-comments {
    padding: 52px 0;
    border-top: 1px solid var(--pp-border);
    background: var(--pp-bg);
}

/* ── Float bar ── */
.pp-review-floatbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pp-bg-dark);
    border-top: 1px solid var(--pp-border-dark);
    padding: 14px 0;
    z-index: 999;
    transform: translateY(100%);
    transition: transform .25s ease;
}
.pp-review-floatbar--show { transform: translateY(0); }
.pp-review-floatbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.pp-review-floatbar-left { display: flex; align-items: center; gap: 14px; }
.pp-review-floatbar-logo { height: 40px; width: auto; }
.pp-review-floatbar-name {
    font-weight: 700;
    color: var(--pp-text-invert);
    font-size: .9rem;
}
.pp-review-floatbar-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-text-invert-muted);
    font-size: .78rem;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .pp-review-layout { grid-template-columns: 1fr 300px; gap: 36px; }
}
@media (max-width: 860px) {
    .pp-review-rstrip-inner { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .pp-review-layout { grid-template-columns: 1fr; }
    .pp-review-sidebar { align-self: auto; order: -1; }
    .pp-review-news { position: static; }
}
@media (max-width: 600px) {
    .pp-review-hero { padding: 32px 0 28px; }
    .pp-review-byline-bar { gap: 10px; }
    .pp-review-pros-cons { grid-template-columns: 1fr; }
    .pp-review-rstrip-inner { grid-template-columns: 1fr 1fr; }
    .pp-review-details-row { grid-template-columns: 1fr; gap: 6px; }
    .pp-review-layout { gap: 28px; }
    .pp-review-body { padding: 32px 0 56px; }
}

.pp-tc-desc {
    font-size: .8rem;
    color: var(--pp-text-muted);
    line-height: 1.55;
    margin: 0 0 8px;
}

.pp-tc-highlights {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .78rem;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pp-border);
}
.pp-tc-highlights-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-text);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.pp-tc-highlights-label i {
    font-size: .8em;
    position: relative;
    top: .5px;
}
.pp-tc-highlights-val {
    color: var(--pp-text-muted);
    line-height: 1.45;
}

@media (max-width: 600px) {
    .pp-tc-filter-grid { grid-template-columns: 1fr 1fr; }
    .pp-tc-search-row  { flex-direction: column; align-items: stretch; padding-top: 12px; }
    .pp-tc-search-wrap { min-width: 0; }
    .pp-tc-search-btn  { justify-content: center; }
    .pp-tc-logo        { width: 64px; height: 64px; min-width: 64px; }
    .pp-tc-meta        { gap: 5px 12px; }
}

/* ==========================================================================
   Live Reporting Page  (.pp-lr-*)
   ========================================================================== */

/* Intro description rendered from WP page content (inside main column) */
.pp-lr-intro {
    margin-bottom: 24px;
    font-size: 1rem;
    color: var(--pp-text);
    line-height: 1.65;
}
.pp-lr-intro p { margin: 0 0 .75em; }
.pp-lr-intro p:last-child { margin-bottom: 0; }

/* ── Tab filter pills ── */
.pp-lr-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.pp-lr-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-cyan-500);
    color: var(--pp-cyan-500);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.pp-lr-tab:hover {
    background: rgba(25, 200, 224, .08);
    text-decoration: none;
    color: var(--pp-cyan-500);
}
.pp-lr-tab--active {
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}
.pp-lr-tab--active:hover {
    background: var(--pp-cyan-600);
    color: var(--pp-bg-dark);
}

/* ── Event sections ── */
.pp-lr-section {
    margin-bottom: 40px;
}
.pp-lr-section--hidden { display: none; }

h2.pp-lr-section-heading,
.pp-lr-section-heading {
    position: relative;
    font-family: var(--pp-font-display);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--pp-text-muted);
    margin: 0 0 20px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
h2.pp-lr-section-heading::after,
.pp-lr-section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg, var(--pp-red) 0%, rgba(230,57,70,.15) 100%);
}
h2.pp-lr-section-heading--live,
.pp-lr-section-heading--live { color: var(--pp-text); }

/* Animated red dot for live sections */
.pp-lr-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    flex-shrink: 0;
    animation: pp-lr-pulse 1.8s ease-in-out infinite;
}
@keyframes pp-lr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, .5); }
    50%       { box-shadow: 0 0 0 5px rgba(230, 57, 70, 0); }
}

/* ── Event card list ── */
.pp-lr-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Event card ── */
/* Neutral gray glass for every card — red carries the "live" identity
   through the badge/border-left/link accents instead of the whole
   card background, so it doesn't compete with those accents.
   Compact list-row layout (matches .pp-sidebar-room sizing) — a fixed
   square thumbnail centered against the row instead of a full-height
   bleed image, so the card height tracks its text content. */
.pp-lr-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(120,130,140,.10), rgba(120,130,140,.02));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(120,130,140,.20);
    border-radius: var(--pp-radius-lg);
    box-shadow:
        0 6px 24px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
    transition: border-color .15s, box-shadow .15s;
}
.pp-lr-card:hover {
    border-color: rgba(120,130,140,.45);
    box-shadow:
        0 8px 28px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
}
.pp-lr-card--live {
    border-left: 3px solid var(--pp-red);
}

.pp-lr-card-img {
    width: 84px;
    height: 84px;
    min-width: 84px;
    position: relative;
    background: var(--pp-bg-alt);
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}
.pp-lr-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.pp-lr-card-img-ph {
    width: 100%;
    height: 100%;
    background: var(--pp-bg-alt);
}

.pp-lr-card-live-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--pp-radius-sm);
    background: #fef2f2;
    color: var(--pp-red);
    border: 1px solid rgba(230, 57, 70, .2);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pp-lr-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.pp-lr-card-title {
    font-family: var(--pp-font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0;
    color: var(--pp-text);
}
.pp-lr-card-title a {
    color: inherit;
    text-decoration: none;
}
.pp-lr-card-title a:hover { color: var(--pp-cyan-600); }

.pp-lr-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
}
.pp-lr-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--pp-text-muted);
}
.pp-lr-card-meta-item i { font-size: .85em; }

.pp-lr-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--pp-cyan-500);
    text-decoration: none;
    transition: color .15s, gap .15s;
    width: fit-content;
}
.pp-lr-card-link:hover {
    color: var(--pp-cyan-600);
    gap: 8px;
    text-decoration: none;
}
.pp-lr-card-link i { font-size: .85em; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .pp-lr-card-img { width: 64px; height: 64px; min-width: 64px; }
    .pp-lr-card { padding: 8px; gap: 10px; }
    .pp-lr-tabs { gap: 8px; }
    .pp-lr-tab { padding: 0.5rem 1rem; font-size: .75rem; }
}

/* ==========================================================================
   Single Tournament / Live Reporting Detail  (.pp-lt-*)
   ========================================================================== */

.pp-lt-card {
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: 24px 28px;
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    transition: border-color .15s;
}
.pp-lt-card--live {
    border-left: 3px solid var(--pp-red);
}

.pp-lt-card-logo {
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pp-lt-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pp-lt-card-body { flex: 1; min-width: 0; }

.pp-lt-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

h2.pp-lt-card-name,
.pp-lt-card-name {
    font-family: var(--pp-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pp-text);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pp-lt-card-news-link {
    color: var(--pp-text-muted);
    font-size: .78rem;
    text-decoration: none;
    transition: color .15s;
}
.pp-lt-card-news-link:hover { color: var(--pp-cyan-500); }

.pp-lt-card-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.pp-lt-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 14px;
}
.pp-lt-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    color: var(--pp-text-muted);
}
.pp-lt-card-meta-item i { font-size: .88em; }
.pp-lt-flag {
    height: 14px;
    width: auto;
    border-radius: 2px;
}

.pp-lt-card-desc {
    font-size: .9rem;
    color: var(--pp-text-soft);
    line-height: 1.65;
    margin: 0 0 12px;
}

.pp-lt-card-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: .82rem;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
    line-height: 1.5;
}
.pp-lt-card-highlights-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-text);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Live blog content */
.pp-lt-content {
    margin-bottom: 32px;
}
.pp-lt-content > * + * { margin-top: 1.25em; }

/* Back button row */
.pp-lt-back {
    margin-top: 8px;
}
.pp-lt-back .pp-btn-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

@media (max-width: 600px) {
    .pp-lt-card { flex-direction: column; padding: 16px; }
    .pp-lt-card-logo { width: 52px; min-width: 52px; height: 52px; }
    .pp-lt-card-title-row { flex-direction: column; gap: 8px; }
}

/* ─────────────────────────────────────────────────────────
   TOP-PAGE GLOW — soft cyan radial light from the top
   Applied on all light pages; suppressed where a dark
   hero section sits directly below the header.
───────────────────────────────────────────────────────── */

/* Ensure nav row stacks above the gradient overlay */
.pp-hdr-row { z-index: 1; }


/* Header — cyan radial glows on dark nav */
.pp-hdr-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 100% at 28% 100%, rgba(25, 200, 224, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 100%, rgba(25, 200, 224, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 50%, rgba(25, 200, 224, 0.16) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Casino pages: keep nav glows active so they blend into the hero top */

/* Live Reporting — keep default cyan nav gradient (no red override) */

/* All pages — smooth slate grey fade */
.home .pp-hero,
.pp-archive-news,
.pp-page-promotions,
.pp-page-strategy,
.pp-page-news,
.pp-page-calendar,
.pp-partners-page,
.pp-play-now-page {
    background: #ffffff;
}

/* Live Reporting — slate fade */
.pp-lr-page {
    background: #ffffff;
}

/* Heading highlight: red instead of cyan */
.pp-lr-page .pp-hero-top-bar .pp-hero-heading::after {
    background: rgba(230, 57, 70, 0.12);
}

/* Tab pills */
.pp-lr-page .pp-lr-tab {
    border-color: var(--pp-red);
    color: var(--pp-red);
}
.pp-lr-page .pp-lr-tab:hover {
    background: rgba(230, 57, 70, 0.08);
    color: var(--pp-red);
}
.pp-lr-page .pp-lr-tab--active {
    background: var(--pp-red);
    color: #fff;
}
.pp-lr-page .pp-lr-tab--active:hover {
    background: #c62f3b;
    color: #fff;
}

/* Card hover accent */
.pp-lr-page .pp-lr-card:hover { border-color: rgba(230, 57, 70, 0.4); }
.pp-lr-page .pp-lr-card-title a:hover { color: var(--pp-red); }

/* "Go to Live Reporting" link */
.pp-lr-page .pp-lr-card-link { color: var(--pp-red); }
.pp-lr-page .pp-lr-card-link:hover { color: #c62f3b; }

/* All cards: very faint grey orb at bottom-right corner */
.pp-lr-page .pp-lr-card {
    background: radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.04) 0%, transparent 55%), #ffffff;
}

/* Live cards: normal border (no thick left override), same grey orb */
.pp-lr-page .pp-lr-card--live {
    border-left: 1px solid var(--pp-border);
    background: radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.04) 0%, transparent 55%), #ffffff;
}

/* ═══════════════════════════════════════════
   Partners Page  (.pp-partners-page)
═══════════════════════════════════════════ */

/* ── CTA hero banner ── */
.pp-partner-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    margin-bottom: 40px;
}

.pp-partner-hero-text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.pp-partner-hero-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
    margin: 0;
}

.pp-partner-hero-title {
    font-family: var(--pp-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pp-text-invert);
    margin: 0;
    line-height: 1.1;
}

.pp-partner-hero-body {
    color: rgba(255, 255, 255, 0.65);
    font-size: .9rem;
    line-height: 1.65;
    margin: 0;
    max-width: 38ch;
}

.pp-btn-partner-cta {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: var(--pp-bg-dark);
    border: 1.5px solid rgba(25, 200, 224, 0.25);
    color: var(--pp-cyan-500);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--pp-radius-pill);
    text-decoration: none;
    margin-top: 4px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.pp-btn-partner-cta:hover {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(25, 200, 224, 0.38);
}

.pp-partner-hero-img {
    width: 280px;
    flex-shrink: 0;
}
.pp-partner-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── "Who We Work With" section heading ── */
.pp-partner-section-title {
    font-family: var(--pp-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 24px;
}

/* ── Partner card grid ── */
.pp-partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card — works as <a> or <div>. Frosted glass, tinted per-brand: each
   card sets --pp-partner-accent (pulled from its logo, see the meta
   box / page template) as a full-width wash across the top of the
   body, right under the logo, fading out — kept faint so it reads as
   a hint of brand color, not a colored spotlight. Falls back to the
   site cyan when a partner has no accent set. */
.pp-partner-card {
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 4px 16px rgba(14, 20, 25, .05);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
a.pp-partner-card:hover {
    border-color: color-mix(in srgb, var(--pp-partner-accent, var(--pp-cyan-500)) 45%, var(--pp-border));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--pp-partner-accent, var(--pp-cyan-500)) 14%, transparent);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
@media (prefers-reduced-motion: reduce) {
    a.pp-partner-card:hover { transform: none; }
}

.pp-partner-card-logo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--pp-bg-alt);
}
.pp-partner-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
a.pp-partner-card:hover .pp-partner-card-logo img { transform: scale(1.03); }

.pp-partner-card-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(14, 20, 25, .07);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pp-partner-accent, var(--pp-cyan-500)) 10%, transparent) 0%, transparent 60%);
}

.pp-partner-card-name {
    font-family: var(--pp-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
    line-height: 1.2;
}

.pp-partner-card-desc {
    color: var(--pp-text-muted);
    font-size: .82rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pp-partner-hero { grid-template-columns: 1fr; }
    .pp-partner-hero-img { width: 100%; height: 220px; }
}

@media (max-width: 700px) {
    .pp-partner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .pp-partner-hero-text { padding: 24px; }
    .pp-partner-hero-title { font-size: 1.5rem; }
    .pp-partner-hero-img { height: 180px; }
}

/* ─────────────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────────────── */

/* Hero band */
.pp-contact-hero {
    padding-block: var(--pp-space-7) var(--pp-space-6);
}
.pp-contact-hero .pp-hero-top-bar { margin-bottom: 10px; }
.pp-contact-hero-sub {
    color: var(--pp-text-muted);
    font-size: .95rem;
    margin: 0 0 var(--pp-space-4);
}

/* Main section */
.pp-contact-section { padding-block: var(--pp-space-8); }

/* Two-column layout */
.pp-contact-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 44px;
    align-items: start;
}

/* Shared column heading */
.pp-contact-col-heading {
    font-family: var(--pp-font-display);
    font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pp-text);
    margin: 0 0 var(--pp-space-5);
}
.pp-contact-col-heading--dark { color: var(--pp-text-invert); }

/* Notice banners */
.pp-contact-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--pp-radius-md);
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: var(--pp-space-5);
    line-height: 1.45;
}
.pp-contact-notice--success {
    background: rgba(6, 214, 160, 0.08);
    border: 1px solid var(--pp-green);
    color: var(--pp-green);
}
.pp-contact-notice--error {
    background: rgba(230, 57, 70, 0.08);
    border: 1px solid var(--pp-red);
    color: var(--pp-red);
}

/* Form layout */
.pp-contact-form { display: flex; flex-direction: column; gap: 20px; }

.pp-contact-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pp-contact-field { display: flex; flex-direction: column; gap: 6px; }

.pp-contact-field label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--pp-text-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pp-contact-req { color: var(--pp-cyan-500); margin-left: 2px; }

.pp-contact-field input[type="text"],
.pp-contact-field input[type="email"],
.pp-contact-field textarea {
    width: 100%;
    padding: 11px 15px;
    background: var(--pp-bg);
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    font-family: var(--pp-font-body);
    font-size: .95rem;
    color: var(--pp-text);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-sizing: border-box;
    appearance: none;
}
.pp-contact-field input:focus,
.pp-contact-field textarea:focus {
    border-color: var(--pp-cyan-500);
    box-shadow: 0 0 0 3px rgba(25, 200, 224, 0.12);
}
.pp-contact-field input::placeholder,
.pp-contact-field textarea::placeholder { color: var(--pp-text-muted); }
.pp-contact-field textarea { resize: vertical; min-height: 155px; }

/* Submit button */
.pp-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1.75rem;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    border: none;
    border-radius: var(--pp-radius-pill);
    font-family: var(--pp-font-body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
}
.pp-contact-submit:hover { background: var(--pp-cyan-600); }
.pp-contact-submit:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}

/* Info card */
.pp-contact-info-card {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    padding: 28px 28px 32px;
}
.pp-contact-info-body {
    color: var(--pp-text-invert-muted);
    font-size: .86rem;
    line-height: 1.7;
    margin: 0 0 var(--pp-space-5);
}

/* Info list (email / location) */
.pp-contact-info-list {
    list-style: none;
    margin: 0 0 var(--pp-space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-contact-info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-contact-info-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(25, 200, 224, 0.1);
    border-radius: var(--pp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-cyan-500);
}
.pp-contact-info-link {
    color: var(--pp-cyan-500);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
    transition: color .15s;
}
.pp-contact-info-link:hover { color: var(--pp-cyan-400); }
.pp-contact-info-label { color: var(--pp-text-invert-muted); font-size: .86rem; }

/* Divider */
.pp-contact-divider {
    border: none;
    border-top: 1px solid var(--pp-border-dark);
    margin: var(--pp-space-5) 0;
}

/* Sub-headings inside info card */
.pp-contact-subheading {
    font-family: var(--pp-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-text-invert-muted);
    margin: 0 0 var(--pp-space-4);
}

/* Social buttons */
.pp-contact-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-contact-social-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-invert-muted);
    font-size: 1rem;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.pp-contact-social-btn:hover {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

/* Topic tags — on the form column (light bg) */
.pp-contact-topics { margin-top: var(--pp-space-6); }
.pp-contact-topics-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 var(--pp-space-3);
}
.pp-contact-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pp-contact-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--pp-radius-sm);
    font-size: .73rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.pp-contact-tag--light {
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
}

/* Channel list (messaging apps in info card) */
.pp-contact-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-contact-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.pp-contact-channel:hover {
    background: rgba(25, 200, 224, .07);
    border-color: rgba(25, 200, 224, .25);
}
.pp-contact-channel-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #fff;
}
.pp-contact-channel-icon--whatsapp { background: #25D366; }
.pp-contact-channel-icon--telegram { background: #229ED9; }
.pp-contact-channel-icon--discord  { background: #5865F2; }

.pp-contact-channel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pp-contact-channel-info strong {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pp-text-invert);
    line-height: 1.25;
}
.pp-contact-channel-info span {
    font-size: .71rem;
    color: var(--pp-text-invert-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-contact-channel-arrow { color: var(--pp-text-invert-muted); flex-shrink: 0; }

/* Email list in info card */
.pp-contact-email-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-contact-email-list li { display: flex; flex-direction: column; gap: 3px; }
.pp-contact-email-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-text-invert-muted);
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .pp-contact-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
@media (max-width: 560px) {
    .pp-contact-row-2col { grid-template-columns: 1fr; }
    .pp-contact-section { padding-block: var(--pp-space-6); }
    .pp-contact-hero { padding-block: var(--pp-space-6) var(--pp-space-5); }
}

/* ═══════════════════════════════════════════════════════════════
   Live reporting hub — event posts (e.g. /live-reporting/<event>/)
   These are ordinary posts whose content is a Spectra tabs block with
   a Query Loop of `livestream` updates per tab. Everything is scoped to
   those blocks so normal article prose is untouched. Spectra prints
   per-block CSS with 4-class selectors (.uagb-block-<id>…), so the
   tab rules below anchor on .pp-single-content + 4 classes to win
   without !important.
   ═══════════════════════════════════════════════════════════════ */

/* WP swaps emoji for <img class="emoji">; the prose rule forcing
   width/height:auto on content images blew them up to the SVG's
   native 72px. Keep them text-sized everywhere in articles. */
.pp-single-content img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    max-width: none !important;
    margin: 0 .1em !important;
    vertical-align: -.1em !important;
    border-radius: 0;
    box-shadow: none !important;
    background: none !important;
}

/* ── Tabs: dark segmented bar, same voice as the header nav ── */
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap {
    display: block;
    margin-top: 2em;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > ul.uagb-tabs__panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    /* Outer radius (12) = tab radius (8) + this padding, so the active
       tab's corners run parallel to the bar's */
    padding: 4px;
    list-style: none;
    /* Cyan light-leak (sanctioned gradient) so the bar isn't a flat slab */
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(25,200,224,.20) 0%, transparent 55%),
        radial-gradient(90% 140% at 100% 100%, rgba(25,200,224,.10) 0%, transparent 60%),
        var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab {
    /* Grow to fill each row: with many tabs the bar wraps, and a ragged
       half-empty second row looked unfinished */
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pp-radius-md);
    background: transparent;
    text-align: left;
}
/* The prose list rules would add a cyan dot + indent to every tab */
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab::before { content: none; }
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab + .uagb-tab { margin-top: 0; }

.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
    padding: .625rem 1.25rem;
    border-radius: var(--pp-radius-md);
    font-family: var(--pp-font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list:hover {
    color: var(--pp-text-invert);
    background: rgba(255,255,255,.08);
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab.uagb-tabs__active {
    background: transparent;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab.uagb-tabs__active > .uagb-tabs-list {
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-weight: 600;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-single-content .uagb-tabs__panel .uagb-tabs-list img.emoji { font-size: .95em; }

/* "Recent" is the live feed — same pulsing red dot as the header's
   Live Reporting pill (red is reserved for exactly this). Class added in
   inc/live-reporting-event.php. */
.pp-single-content .uagb-tabs-list.pp-tab-live::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    animation: pp-lr-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .pp-single-content .uagb-tabs-list.pp-tab-live::before { animation: none; }
}

.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__body-wrap {
    margin-top: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.pp-single-content .uagb-tabs__body-container > :first-child { margin-top: 0; }
/* Mercury's `.no-dots ul li { padding:0; margin:0 0 -15px }` hits every list
   inside a Spectra tab (the panels carry .no-dots): the bullet sat on the
   first letter and each line rode up into the one above. Restore the prose
   list spacing — the update feed and tab bar lists are styled separately. */
.pp-single-content .no-dots :is(ul, ol):not(.wp-block-post-template):not(.uagb-tabs__panel):not(.pp-evsw-list) > li {
    margin: 0;
    padding-left: 1.5em;
}
.pp-single-content .no-dots :is(ul, ol):not(.wp-block-post-template):not(.uagb-tabs__panel):not(.pp-evsw-list) > li + li { margin-top: .55em; }

/* The prose rhythm (.pp-single-content > * + *) only reaches direct children,
   so headings and tables inside a tab panel sat flush against each other */
.pp-single-content .uagb-tabs__body-container > * + * { margin-top: 1.25em; }

/* ── Update feed: vertical timeline ── */
.pp-single-content .liveblog > .wp-block-post-template {
    position: relative;
    margin: 0;
    /* Rail and node both position off these, so they can't drift apart */
    --lr-gutter: 36px;
    --lr-node: 16px;
    --lr-rail: 2px;
    --lr-meta-h: 24px;
    --lr-gap: 40px;
    padding: 0 0 0 var(--lr-gutter);
    list-style: none;
}
/* Rail */
.pp-single-content .liveblog > .wp-block-post-template::before {
    content: "";
    position: absolute;
    left: calc((var(--lr-node) - var(--lr-rail)) / 2);
    top: 8px;
    bottom: 0;
    width: var(--lr-rail);
    /* Rail fades in from the latest update */
    background: linear-gradient(180deg, var(--pp-cyan-500) 0%, var(--pp-border) 220px);
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 40px;
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post + li.wp-block-post {
    margin-top: 0;
    padding-top: var(--lr-gap);
    border-top: 1px solid var(--pp-border);
}
/* Timeline node — replaces the prose bullet that showed on every title */
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post::before {
    content: "";
    position: absolute;
    left: calc(var(--lr-gutter) * -1);
    top: calc((var(--lr-meta-h) - var(--lr-node)) / 2);
    width: var(--lr-node);
    height: var(--lr-node);
    box-shadow: 0 0 0 5px rgba(25,200,224,.14);
    border-radius: 50%;
    background: var(--pp-bg);
    border: 2px solid var(--pp-cyan-500);
    box-sizing: border-box;
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post + li.wp-block-post::before { top: calc(var(--lr-gap) + (var(--lr-meta-h) - var(--lr-node)) / 2); }
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post:first-child::before {
    background: var(--pp-cyan-500);
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post > * + * { margin-top: 0; }

/* Timestamp + author read before the headline, like a wire feed */
.pp-single-content .liveblog .wp-block-post > .wp-block-group {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    margin: 0 0 10px;
    line-height: var(--lr-meta-h, 24px);
}
.pp-single-content .liveblog .wp-block-post-date {
    font-style: normal !important;   /* overrides block inline style */
    font-weight: 700 !important;
    font-size: .875rem !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    /* cyan-600 on white is 2.8:1 — too faint for 12px text; the timeline
       node already carries the accent */
    color: var(--pp-text-soft);
}
.pp-single-content .liveblog .wp-block-post-author-name {
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    color: var(--pp-text-muted);
}
.pp-single-content .liveblog .wp-block-post-author-name::before {
    content: "·";
    margin-right: 10px;
    color: var(--pp-text-muted);
}
.pp-single-content .liveblog .wp-block-post-author-name a {
    color: inherit;
    text-decoration: none;
}
.pp-single-content .liveblog .wp-block-post-author-name a:hover { color: var(--pp-text); }

.pp-single-content .liveblog h2.wp-block-post-title {
    margin: 0;
    padding: 0;
    /* !important: the block carries .has-medium-font-size, which core
       sets with !important */
    font-size: clamp(1.45rem, 2.3vw, 1.9rem) !important;
    line-height: 1.2;
}
.pp-single-content .liveblog h2.wp-block-post-title::after { content: none; }
.pp-single-content .liveblog h2.wp-block-post-title a {
    color: var(--pp-text);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .15s;
}
/* Underline rather than a cyan text swap, which would drop below AA */
.pp-single-content .liveblog h2.wp-block-post-title a:hover { text-decoration-color: var(--pp-cyan-500); }

/* Update body: same prose, but headings scaled down a step so they
   don't outrank the update's own headline */
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post > .wp-block-post-content { margin-top: 20px; }
.pp-single-content .liveblog .wp-block-post-content > :first-child { margin-top: 0; }
/* The prose rhythm only targets direct children of .pp-single-content */
.pp-single-content .liveblog .wp-block-post-content > * + * { margin-top: 1.1em; }
.pp-single-content .liveblog .wp-block-post-content h2 {
    font-size: 1.15rem;
    margin-top: 1.6em;
    padding-bottom: .45em;
}
.pp-single-content .liveblog .wp-block-post-content h2::after { width: 40px; height: 2px; }
.pp-single-content .liveblog .wp-block-post-content p:empty { display: none; }
.pp-single-content .liveblog figcaption,
.pp-single-content .wp-block-image figcaption {
    margin-top: 8px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--pp-text-muted);
}

/* ── Query Loop pagination — matches .pp-pagination ── */
.pp-single-content .wp-block-query-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-border);
}
.pp-single-content .wp-block-query-pagination-numbers {
    display: flex;
    gap: 6px;
    margin: 0;
}
.pp-single-content .wp-block-query-pagination .page-numbers,
.pp-single-content .wp-block-query-pagination-next,
.pp-single-content .wp-block-query-pagination-previous {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    color: var(--pp-text);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pp-single-content .wp-block-query-pagination-next,
.pp-single-content .wp-block-query-pagination-previous {
    padding: 0 1.25rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-color: var(--pp-cyan-500);
}
.pp-single-content .wp-block-query-pagination a:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-single-content .wp-block-query-pagination a:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-600);
}
.pp-single-content .wp-block-query-pagination .page-numbers.current {
    background: var(--pp-bg-dark);
    border-color: var(--pp-bg-dark);
    color: var(--pp-text-invert);
}

/* ── Spectra gallery (Images tab) ── */
.pp-single-content .spectra-image-gallery__layout--grid { gap: 8px; }
.pp-single-content .spectra-image-gallery__media {
    border-radius: var(--pp-radius-md);
    overflow: hidden;
}
.pp-single-content .spectra-image-gallery__media img { border-radius: 0; }

/* Chip-count and schedule tables are wider than a phone. The inner table
   is overflow:hidden (for its radius), so the block wrapper has to be the
   thing that scrolls — same approach as .pp-review-content. */
.pp-single-content .wp-block-table {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.45) transparent;
}
.pp-single-content .wp-block-table table { margin: 0 !important; }

/* ── Event switcher (Menu In Post dropdown on multi-event series) ──
   Editors write it as <p><span style="…">Select Event:</span> [shortcode]</p>,
   so the paragraph becomes the bar and the inline-styled span its label. */
.pp-single-content p:has(.mip-drop-nav) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 2em;
    padding: 14px 16px 14px 20px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(25,200,224,.20) 0%, transparent 55%),
        var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
}
.pp-single-content p:has(.mip-drop-nav) > span {
    font-family: var(--pp-font-display);
    font-size: 1rem !important;      /* overrides inline 20px */
    font-weight: 500 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255,255,255,.78);
}
.pp-single-content select.mip-drop-nav {
    flex: 1 1 280px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 48px 0 16px;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pp-text);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%230E1419' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center,
        var(--pp-bg);
    border: 1.5px solid transparent;
    border-radius: var(--pp-radius-md);
    box-shadow: none;
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .15s;
}
.pp-single-content select.mip-drop-nav:hover { border-color: var(--pp-cyan-500); }
.pp-single-content select.mip-drop-nav:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}

/* Custom switcher built by js/event-switcher.js (the native select above
   is the no-JS fallback and is hidden once this exists) */
.pp-evsw {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}
/* Something upstream gives these a display value, which beats the UA's
   [hidden] rule — without this the panel never closes */
.pp-evsw [hidden] { display: none !important; }
.pp-evsw-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 18px 0 16px;
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--pp-text);
    background: var(--pp-bg);
    border: 1.5px solid transparent;
    border-radius: var(--pp-radius-md);
    cursor: pointer;
    transition: border-color .15s;
}
.pp-evsw-btn:hover,
.pp-evsw.is-open .pp-evsw-btn { border-color: var(--pp-cyan-500); }
.pp-evsw-btn:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-evsw-btn-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.pp-evsw-btn .pp-evsw-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pp-evsw-name--placeholder { color: var(--pp-text-muted); font-weight: 500; }
.pp-evsw-chevron {
    flex-shrink: 0;
    transition: transform .2s;
}
.pp-evsw.is-open .pp-evsw-chevron { transform: rotate(180deg); }

/* Event number reads as a fixed-width column so names line up */
.pp-evsw-num {
    flex-shrink: 0;
    min-width: 2.6em;
    font-family: var(--pp-font-display);
    font-weight: 500;
    font-size: .95em;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    color: var(--pp-text-muted);
}

.pp-evsw-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 6px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    /* Floats over article content, so it needs some lift — kept soft */
    box-shadow: 0 12px 32px rgba(14,20,25,.12);
    animation: pp-evsw-in .14s ease-out;
}
@keyframes pp-evsw-in {
    from { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-evsw-panel { animation: none; }
    .pp-evsw-chevron { transition: none; }
}
.pp-evsw-filter {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 6px;
    padding: 10px 14px;
    font-family: var(--pp-font-body);
    font-size: .9375rem;
    color: var(--pp-text);
    background: var(--pp-bg-alt);
    border: 1.5px solid transparent;
    border-radius: var(--pp-radius-md);
    outline: none;
}
.pp-evsw-filter:focus { border-color: var(--pp-cyan-500); background: var(--pp-bg); }

.pp-single-content .pp-evsw-list {
    max-height: min(380px, 55vh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
}
.pp-single-content .pp-evsw-list > li {
    margin: 0;
    padding: 0;
}
.pp-single-content .pp-evsw-list > li::before { content: none; }
.pp-single-content .pp-evsw-list > li + li { margin-top: 2px; }
.pp-single-content a.pp-evsw-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pp-text);
    text-decoration: none;
    border-radius: var(--pp-radius-md);
    transition: background .12s;
}
.pp-single-content a.pp-evsw-item:hover,
.pp-single-content a.pp-evsw-item:focus-visible {
    background: var(--pp-bg-alt);
    outline: none;
}
.pp-single-content a.pp-evsw-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pp-cyan-500); }
.pp-single-content a.pp-evsw-item[aria-current="page"] {
    font-weight: 700;
    background: rgba(25,200,224,.10);
}
.pp-evsw-item .pp-evsw-name { flex: 1; min-width: 0; }
.pp-evsw-check {
    flex-shrink: 0;
    align-self: center;
    color: var(--pp-cyan-600);
}
.pp-single-content .pp-evsw-empty {
    margin: 0;
    padding: 14px 12px;
    font-size: .875rem;
    color: var(--pp-text-muted);
}

/* ── Mobile: tabs wrap into full rows (client didn't want to swipe to find
   tabs); smaller type so most rows hold 2–3 tabs ── */
@media (max-width: 767px) {
    .pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list {
        min-height: 44px;
        padding: .5rem .75rem;
        font-size: .8125rem;
        letter-spacing: .04em;
        white-space: normal;
        text-align: center;
    }
    /* 44px touch targets */
    .pp-single-content .wp-block-query-pagination .page-numbers,
    .pp-single-content .wp-block-query-pagination-next,
    .pp-single-content .wp-block-query-pagination-previous { min-width: 44px; height: 44px; }
    .pp-single-content table thead th,
    .pp-single-content table td { padding: 10px 12px; }
    /* Denser feed on phones: client found too little fitted on one screen.
       Body drops from 17px/1.85 to 15px/1.6, headlines and gaps tighten. */
    .pp-single-content .liveblog > .wp-block-post-template { --lr-gutter: 24px; --lr-node: 14px; --lr-gap: 28px; --lr-meta-h: 20px; }
    .pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post { padding-bottom: 28px; }
    .pp-single-content .liveblog .wp-block-post > .wp-block-group { margin-bottom: 6px; }
    .pp-single-content .liveblog .wp-block-post-date,
    .pp-single-content .liveblog .wp-block-post-author-name { font-size: .75rem !important; }
    .pp-single-content .liveblog h2.wp-block-post-title { font-size: 1.2rem !important; line-height: 1.25; }
    .pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post > .wp-block-post-content { margin-top: 12px; }
    .pp-single-content .liveblog .wp-block-post-content,
    .pp-single-content .liveblog .wp-block-post-content :is(p, li) { font-size: .9375rem; line-height: 1.6; }
    .pp-single-content .liveblog .wp-block-post-content > * + * { margin-top: .8em; }
    .pp-single-content .liveblog .wp-block-post-content h2 { font-size: 1rem; margin-top: 1.3em; }
    .pp-single-content .liveblog .wp-block-post-content table { font-size: .8125rem; margin: 1em 0; }
    .pp-single-content .liveblog .wp-block-post-content table thead th,
    .pp-single-content .liveblog .wp-block-post-content table td { padding: 8px 10px; }
    .pp-single-content .liveblog figcaption { font-size: .75rem; margin-top: 6px; }
    .pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post::before { box-shadow: 0 0 0 4px rgba(25,200,224,.14); }
}

/* ═══════════════════════════════════════════════════════════════
   Newsletter popup (Mailster block form, type "popup")
   Mailster prints the popup inside the article body, so the prose
   rules leaked in: the heading's .alignfull got the theme's
   full-bleed negative margins (cutting off its first letter on
   phones) and the h2 accent underline. Everything here is scoped to
   the popup wrapper; !important is only used where Mailster sets the
   value inline or with its own !important.
   ═══════════════════════════════════════════════════════════════ */
.wp-block-mailster-form-outside-wrapper.mailster-block-form-type-popup {
    padding: 16px;
    box-sizing: border-box;
    background-color: rgba(14,20,25,.72);
}
.mailster-block-form-type-popup form.mailster-block-form.wp-block-mailster-form-wrapper {
    /* The editor's inline rule sets flex-basis:40%, which beats width */
    flex: 0 1 460px !important;
    width: min(460px, 100%) !important;
    max-width: none;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 36px 32px 28px !important;
    color: var(--pp-text-invert);
    /* Cyan light-leak over the dark surface — replaces the editor's
       blue linear gradient + casino-table photo */
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(25,200,224,.22) 0%, transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(25,200,224,.10) 0%, transparent 65%),
        var(--pp-bg-dark) !important;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.mailster-block-form-type-popup .wp-block-mailster-form-wrapper::before { display: none !important; }

.mailster-block-form-type-popup .mailster-block-form-inner {
    overflow: visible !important;
    max-height: none !important;
}
/* Eyebrow above the heading */
.mailster-block-form-type-popup .mailster-block-form-inner::before {
    content: "Newsletter";
    width: 100%;
    margin-bottom: 10px;
    font-family: var(--pp-font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
}
.mailster-block-form-type-popup .mailster-block-form h2 {
    position: static;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: var(--pp-font-display);
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-align: left;
    color: var(--pp-text-invert) !important;
}
.mailster-block-form-type-popup .mailster-block-form h2::after { content: none !important; }
.mailster-block-form-type-popup .mailster-block-form p {
    margin: 0 0 22px !important;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255,255,255,.72) !important;
}
.mailster-block-form-type-popup img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 .1em !important;
    vertical-align: -.1em !important;
}

/* Fields */
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-inner .mailster-wrapper {
    margin: 0 0 14px !important;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper input.input {
    height: 50px;
    padding: 0 16px;
    font-family: var(--pp-font-body);
    font-size: 1rem;              /* 16px stops iOS zooming on focus */
    color: var(--pp-text-invert);
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--pp-radius-md);
    outline: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper input.input:focus {
    border-color: var(--pp-cyan-500);
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 0 0 3px rgba(25,200,224,.25);
}
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper-inline label.mailster-label {
    font-size: .9375rem;
    color: rgba(255,255,255,.55) !important;
}
/* Asterisk was red; red is reserved for the LIVE dot */
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper-required.mailster-wrapper-asterisk label.mailster-label::after {
    color: var(--pp-cyan-500);
}

/* Consent checkbox */
.mailster-block-form-type-popup .wp-block-mailster-gdpr .mailster-group { align-items: flex-start; }
.mailster-block-form-type-popup .wp-block-mailster-gdpr input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0 !important;
    accent-color: var(--pp-cyan-500);
    cursor: pointer;
}
.mailster-block-form-type-popup .wp-block-mailster-gdpr label.mailster-label {
    padding: 0 0 0 10px;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255,255,255,.72) !important;
}
.mailster-block-form-type-popup .wp-block-mailster-gdpr a {
    color: var(--pp-cyan-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit — solid cyan pill, full width */
.mailster-block-form-type-popup .wp-block-mailster-field-submit {
    width: 100% !important;
    margin: 8px 0 0 !important;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper input.submit-button {
    height: 50px;
    padding: 0 1.25rem;
    /* !important: Mailster resets the button with font:inherit at higher specificity */
    font-family: var(--pp-font-body) !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-bg-dark) !important;
    background: var(--pp-cyan-500) !important;
    border: 0 !important;
    border-radius: var(--pp-radius-pill) !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper input.submit-button:hover { background: var(--pp-cyan-600) !important; }
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper input.submit-button:focus-visible {
    outline: 2px solid var(--pp-text-invert);
    outline-offset: 2px;
}

/* Close — inside the card instead of hanging off its corner */
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255,255,255,.08) !important;
    opacity: 1;
    transform: none !important;
    transition: background-color .15s;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close:hover { background: rgba(255,255,255,.16) !important; }
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close svg path {
    fill: var(--pp-text-invert) !important;
    stroke: none !important;
}

/* Success / error messages — on-brand instead of Mailster's green/red */
.mailster-block-form-type-popup .mailster-block-form-info > div {
    padding: 10px 14px !important;
    font-size: .875rem;
    border-radius: var(--pp-radius-md);
}
.mailster-block-form-type-popup .mailster-block-form-info-success {
    color: var(--pp-bg-dark) !important;
    background: var(--pp-cyan-500) !important;
}
.mailster-block-form-type-popup .mailster-block-form-info-error {
    color: var(--pp-text-invert) !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.28);
}
.mailster-block-form-type-popup .mailster-block-form .mailster-wrapper.is-error input {
    border-color: var(--pp-text-invert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

@media (max-width: 480px) {
    .mailster-block-form-type-popup form.mailster-block-form.wp-block-mailster-form-wrapper {
        padding: 32px 20px 22px !important;
    }
}