/**
 * WDBC Member Dashboard & Page Styles
 *
 * Brand Kit:
 *   Navy:       #16233F (primary, headings, text)
 *   Dark Navy:  #0E1728 (hover, deep backgrounds)
 *   Cream:      #FBF3DE (page backgrounds, stat cards)
 *   Gold:       #FFC24B (accent, CTAs, active indicators)
 *   Burnt:      #C67300 (secondary accent)
 *   Blue:       #B7E2FF (info accents, links)
 *   Fonts:      Space Grotesk (display/ui), Inter (body), IBM Plex Mono (data)
 *               — self-hosted by the child theme, see assets/fonts
 */

:root {
    --wbbc-navy: #16233F;
    --wbbc-dark: #0E1728;
    --wbbc-cream: #FBF3DE;
    --wbbc-blue: #B7E2FF;
    --wbbc-orange: #FFC24B;
    --wbbc-burnt: #C67300;
    --wbbc-border: rgba(30, 50, 69, 0.12);
    --wbbc-text: #16233F;
    --wbbc-text-light: rgba(30, 50, 69, 0.6);
    --wbbc-radius: 10px;
    --wbbc-radius-sm: 6px;
    --wbbc-pro: #16a34a;
    --wbbc-anti: #dc2626;
    /* These three names are consumed by most rules in this file — headings,
       nav, buttons, cards — so they are the single point where the site's
       typography is actually decided, whatever the Elementor kit says.

       They used to name Agenda, Lato and Poppins. None of the three is served
       by this site, so they only ever rendered for someone who happened to
       have them installed locally; Chrome reported real visitors getting
       Arial for body copy and buttons. They now defer to the Brand Kit v2
       tokens in the child theme, which ARE self-hosted (see assets/fonts).
       The literal stacks are repeated as var() fallbacks so the brand face
       still wins if this plugin is ever loaded without the theme. */
    --wbbc-font-heading: var(--wdbc-font-display, "Space Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    --wbbc-font-body: var(--wdbc-font-body, "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    --wbbc-font-ui: var(--wdbc-font-display, "Space Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);

    /* civic-engagement.css asks for these four names and they were never
       defined anywhere, so every one of its thirteen font rules silently fell
       through to its own literal "Agenda"/"Lato"/"Poppins" fallback. Defining
       them here fixes all thirteen at the token rather than rule by rule. */
    --wbbc-font-primary: var(--wbbc-font-heading);
    --wbbc-font-secondary: var(--wbbc-font-heading);
    --wbbc-font-text: var(--wbbc-font-body);
    --wbbc-font-accent: var(--wbbc-font-ui);
}

/* ==========================================================================
   SITE HEADER (PHP-rendered, replaces Elementor header)
   ========================================================================== */

.wbbc-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--wbbc-cream);
    border-bottom: 3px solid var(--wbbc-navy);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.wbbc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The gap is capped rather than a flat 5%. Two 5% gaps plus 5% padding on
       each side spend a fifth of the viewport on air before a single nav item
       is placed, which is affordable at 1440 and is not at 1100: the nav list
       needed 27px more than its box there, and 54px more at 1025, painting out
       into the gutter. Capping the gap hands that width back to the nav while
       leaving the padding alone, since the padding is what aligns the logo
       with the page gutters below. */
    gap: clamp(16px, 2vw, 48px);
    padding: 0 5%;
    min-height: 10vh;
}

.wbbc-header-logo {
    flex: 0 0 10%;
    max-width: 10%;
}

.wbbc-header-logo img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

.wbbc-header-logo:hover img {
    transform: scale(1.1);
}

.wbbc-header-nav {
    flex: 1;
}

.wbbc-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: center;
}

.wbbc-nav-list li a {
    display: block;
    padding: 10px 16px;
    font-family: var(--wbbc-font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--wbbc-navy);
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
}

.wbbc-nav-list li a:hover,
.wbbc-nav-list li.current-menu-item a {
    color: var(--wbbc-burnt);
}

.wbbc-nav-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--wbbc-burnt);
    transform: scaleX(0);
    transition: transform 0.25s;
}

.wbbc-nav-list li a:hover::after,
.wbbc-nav-list li.current-menu-item a::after {
    transform: scaleX(1);
}

.wbbc-header-actions {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.wbbc-header-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--wbbc-font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--wbbc-navy);
    background: var(--wbbc-cream);
    border: 2px solid var(--wbbc-navy);
    border-radius: var(--wbbc-radius);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.wbbc-header-btn:hover {
    background: var(--wbbc-navy);
    color: var(--wbbc-cream);
}

/* Mobile toggle */
.wbbc-header-toggle {
    display: none;
    background: var(--wbbc-cream);
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--wbbc-navy);
}

.wbbc-header-toggle svg {
    width: 24px;
    height: 24px;
}

.wbbc-toggle-close {
    display: none;
}

.wbbc-header.is-open .wbbc-toggle-open {
    display: none;
}

.wbbc-header.is-open .wbbc-toggle-close {
    display: block;
}

/* The desktop row is logo + the full nav + two nowrap buttons, separated by
   percentage gaps and padding that eat 20% of the viewport before any content
   is placed. Measured, it stops fitting at ~1024px: the row needs 1033px in a
   1024px bar, and by 768px it overflows by 146px — 52px of which escapes as a
   horizontal scroll on the whole document.

   So the hamburger has to take over well before 767. The old rule at 1024 did
   the opposite of helping: it grew the logo from 10% to 18% (99px to 166px) at
   exactly the width where the row had already run out of room.

   The breakpoint is 1100 because that is where the nav list measurably stops
   needing more width than its box — at 1060 it still wanted 15px more and at
   1025 it wanted 29px, painting out into the gutter. Below 1100 an eight-item
   nav plus two buttons does not fit honestly, so it collapses. With the nav
   and buttons behind the toggle the logo is free to be larger again, but it is
   capped in px so it cannot scale into the toggle on a wide tablet the way a
   bare percentage does. */
@media (max-width: 1099px) {
    .wbbc-header-logo {
        flex: 0 0 auto;
        width: min(240px, 42vw);
        max-width: min(240px, 42vw);
    }

    .wbbc-header-toggle {
        display: block;
    }

    .wbbc-header-nav,
    .wbbc-header-actions {
        display: none;
    }

    .wbbc-header.is-open .wbbc-header-nav,
    .wbbc-header.is-open .wbbc-header-actions {
        display: flex;
    }

    .wbbc-header.is-open .wbbc-header-inner {
        flex-wrap: wrap;
    }

    .wbbc-header.is-open .wbbc-header-nav {
        flex: 0 0 100%;
        order: 10;
    }

    .wbbc-header.is-open .wbbc-nav-list {
        flex-direction: column;
        padding: 12px 0;
    }

    .wbbc-header.is-open .wbbc-header-actions {
        flex: 0 0 100%;
        order: 11;
        justify-content: center;
        padding-bottom: 16px;
    }

    .wbbc-header-btn {
        padding: 10px 10px;
        font-size: 13px;
    }
}

/* ==========================================================================
   GLOBAL PAGE WRAPPER
   Applies to all pages that load this stylesheet.
   ========================================================================== */

.wbbc-page-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 5%;
    font-family: var(--wbbc-font-body);
    color: var(--wbbc-text);
    line-height: 1.65;
}

.wbbc-page-wrap h1,
.wbbc-page-wrap h2,
.wbbc-page-wrap h3,
.wbbc-page-wrap h4 {
    font-family: var(--wbbc-font-heading);
    color: var(--wbbc-navy);
    margin: 0 0 12px;
    line-height: 1.25;
}

.wbbc-page-wrap a {
    color: var(--wbbc-navy);
    text-decoration-color: var(--wbbc-orange);
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.wbbc-page-wrap a:hover {
    color: var(--wbbc-burnt);
}

/* Page Hero */
.wbbc-page-hero {
    text-align: center;
    padding: 40px 20px 36px;
    margin: 0 0 28px;
    background: linear-gradient(145deg, var(--wbbc-navy) 0%, var(--wbbc-dark) 100%);
    color: #fff;
    border-radius: var(--wbbc-radius);
}

.wbbc-page-hero h1 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.wbbc-page-hero p {
    font-size: 16px;
    opacity: 0.8;
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.wbbc-page-hero .wbbc-hero-accent {
    color: var(--wbbc-orange);
}

.wbbc-page-wrap .wbbc-page-hero {
    margin-bottom: 28px;
}

/* Info Cards Grid */
.wbbc-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.wbbc-info-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 28px 24px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.wbbc-info-card:hover {
    box-shadow: 0 4px 16px rgba(30, 50, 69, 0.1);
    transform: translateY(-2px);
}

.wbbc-info-card svg {
    width: 36px;
    height: 36px;
    color: var(--wbbc-orange);
    margin-bottom: 16px;
}

.wbbc-info-card h3 {
    font-family: var(--wbbc-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 8px;
}

.wbbc-info-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #5a6b7d;
    margin: 0;
}

.wbbc-info-card a {
    color: var(--wbbc-orange);
    text-decoration: none;
    font-weight: 600;
}

.wbbc-info-card a:hover {
    text-decoration: underline;
}

/* Value Proposition Section */
.wbbc-value-section {
    margin-bottom: 36px;
}

.wbbc-value-section h2 {
    font-family: var(--wbbc-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--wbbc-navy);
    text-align: center;
    margin: 0 0 8px;
}

.wbbc-value-section > p {
    text-align: center;
    color: #5a6b7d;
    font-size: 15px;
    margin: 0 0 24px;
}

.wbbc-value-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
}

.wbbc-value-card:hover {
    box-shadow: 0 4px 16px rgba(30, 50, 69, 0.1);
}

.wbbc-value-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 191, 0, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wbbc-value-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--wbbc-orange);
}

.wbbc-value-card h3 {
    font-family: var(--wbbc-font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 6px;
}

.wbbc-value-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #5a6b7d;
    margin: 0;
}

/* CTA Banner */
.wbbc-cta-banner {
    text-align: center;
    padding: 36px 24px;
    background: linear-gradient(145deg, var(--wbbc-navy) 0%, var(--wbbc-dark) 100%);
    border-radius: var(--wbbc-radius);
    color: #fff;
    margin: 36px 0;
}

.wbbc-cta-banner h2 {
    font-family: var(--wbbc-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.wbbc-cta-banner p {
    font-size: 15px;
    opacity: 0.8;
    margin: 0 0 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.wbbc-cta-btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--wbbc-orange);
    color: #fff;
    font-family: var(--wbbc-font-ui);
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s;
}

.wbbc-cta-btn:hover {
    background: #d98200;
    color: #fff;
}

/* Social Links Row */
.wbbc-social-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.wbbc-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transition: background 0.2s;
}

.wbbc-social-link:hover {
    background: rgba(255, 191, 0, 0.3);
}

.wbbc-social-link svg {
    width: 20px;
    height: 20px;
}

/* Membership separator */
.wbbc-membership-divider {
    text-align: center;
    margin: 40px 0 28px;
    position: relative;
}

.wbbc-membership-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--wbbc-border);
}

.wbbc-membership-divider span {
    position: relative;
    background: var(--wbbc-cream);
    padding: 0 20px;
    font-family: var(--wbbc-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--wbbc-navy);
}

@media (max-width: 768px) {
    .wbbc-info-grid {
        grid-template-columns: 1fr;
    }
    .wbbc-value-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .wbbc-page-wrap .wbbc-page-hero {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   UR PRO NAVIGATION OVERRIDE
   ========================================================================== */

.user-registration-MyAccount-navigation {
    background: var(--wbbc-navy) !important;
    border-radius: var(--wbbc-radius) !important;
    padding: 16px 0 !important;
    border: none !important;
}

.user-registration-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.user-registration-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.user-registration-MyAccount-navigation ul li a,
.user-registration-MyAccount-navigation-link a {
    display: block !important;
    padding: 10px 24px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--wbbc-font-ui) !important;
}

.user-registration-MyAccount-navigation ul li a:hover,
.user-registration-MyAccount-navigation-link a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.user-registration-MyAccount-navigation ul li.is-active a,
.user-registration-MyAccount-navigation ul li.user-registration-MyAccount-navigation-link--badges.is-active a {
    color: var(--wbbc-cream) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid var(--wbbc-orange) !important;
}

/* UR Pro Content Area Override */
.user-registration-MyAccount-content {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide UR Pro default dashboard greeting */
.user-registration-MyAccount-content > p:first-child,
.user-registration-MyAccount-content .ur-hello-text {
    display: none !important;
}

/* ==========================================================================
   DASHBOARD LAYOUT
   ========================================================================== */

.wbbc-dash {
    font-family: var(--wbbc-font-body);
    color: var(--wbbc-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 5%;
}

.wbbc-dash h2,
.wbbc-dash h3,
.wbbc-dash h4 {
    font-family: var(--wbbc-font-heading);
    color: var(--wbbc-navy);
    margin: 0;
}

/* Welcome Header */
.wbbc-dash-welcome {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--wbbc-orange);
}

.wbbc-dash-welcome h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 6px;
}

.wbbc-dash-meta {
    font-size: 14px;
    color: var(--wbbc-text-light);
    margin: 0;
}

.wbbc-dash-sep {
    margin: 0 8px;
    opacity: 0.5;
}

/* Stats Row */
.wbbc-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.wbbc-dash-stat {
    text-align: center;
    padding: 20px 12px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius);
    border: 1px solid var(--wbbc-border);
    transition: transform 0.15s, box-shadow 0.15s;
}

.wbbc-dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 50, 69, 0.08);
}

.wbbc-dash-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--wbbc-navy);
    font-family: var(--wbbc-font-ui);
    line-height: 1;
    margin-bottom: 6px;
}

.wbbc-dash-stat-label {
    font-size: 11px;
    color: var(--wbbc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-family: var(--wbbc-font-ui);
}

/* Two-Column Grid */
.wbbc-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Cards */
.wbbc-dash-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 20px;
    transition: box-shadow 0.15s;
}

.wbbc-dash-card:hover {
    box-shadow: 0 4px 16px rgba(30, 50, 69, 0.06);
}

.wbbc-dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.wbbc-dash-card-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.wbbc-dash-card-header a {
    font-size: 13px;
    color: var(--wbbc-burnt);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--wbbc-font-ui);
    transition: color 0.15s;
}

.wbbc-dash-card-header a:hover {
    color: var(--wbbc-navy);
}

/* Campaign Items */
.wbbc-dash-campaign-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wbbc-dash-campaign-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius-sm);
    border: 1px solid var(--wbbc-border);
    transition: border-color 0.15s;
}

.wbbc-dash-campaign-item:hover {
    border-color: var(--wbbc-orange);
}

.wbbc-dash-campaign-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wbbc-dash-campaign-info {
    flex: 1;
    min-width: 0;
}

.wbbc-dash-campaign-info strong {
    display: block;
    font-size: 14px;
    color: var(--wbbc-navy);
}

.wbbc-dash-campaign-info span {
    font-size: 12px;
    color: var(--wbbc-text-light);
}

/* Dashboard Button */
.wbbc-dash-btn {
    display: inline-block;
    background: var(--wbbc-orange);
    color: var(--wbbc-dark) !important;
    padding: 10px 22px;
    border-radius: var(--wbbc-radius-sm);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--wbbc-font-ui);
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.wbbc-dash-btn:hover {
    background: var(--wbbc-burnt);
    color: #fff !important;
    transform: translateY(-1px);
}

.wbbc-dash-btn-secondary {
    background: var(--wbbc-navy);
    color: #fff !important;
}

.wbbc-dash-btn-secondary:hover {
    background: var(--wbbc-dark);
    color: #fff !important;
}

/* Badge Grid (Dashboard) */
.wbbc-dash-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wbbc-dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
}

/* Empty State */
.wbbc-dash-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--wbbc-text-light);
}

.wbbc-dash-empty p {
    margin: 0 0 12px;
}

/* Briefing Items */
.wbbc-dash-briefing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wbbc-dash-briefing-item {
    padding: 12px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius-sm);
    border: 1px solid var(--wbbc-border);
}

.wbbc-dash-briefing-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wbbc-burnt);
    margin-bottom: 4px;
    font-family: var(--wbbc-font-ui);
}

.wbbc-dash-briefing-item strong {
    display: block;
    font-size: 14px;
    color: var(--wbbc-navy);
    margin-bottom: 4px;
}

.wbbc-dash-briefing-item p {
    font-size: 13px;
    color: var(--wbbc-text-light);
    margin: 0;
}

/* Tracker Items */
.wbbc-dash-tracker-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wbbc-dash-tracker-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius-sm);
    border: 1px solid var(--wbbc-border);
}

.wbbc-dash-tracker-item strong {
    display: block;
    font-size: 14px;
    color: var(--wbbc-navy);
}

.wbbc-dash-tracker-item p {
    font-size: 13px;
    color: var(--wbbc-text-light);
    margin: 4px 0 0;
}

/* Status Pills */
.wbbc-dash-tracker-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--wbbc-font-ui);
}

.wbbc-dash-tracker-active {
    background: #dcfce7;
    color: #166534;
}

.wbbc-dash-tracker-watching {
    background: #dbeafe;
    color: #1e40af;
}

.wbbc-dash-tracker-passed {
    background: #d1fae5;
    color: #065f46;
}

.wbbc-dash-tracker-inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* ==========================================================================
   STANDALONE PAGES
   ========================================================================== */

/* Page Header */
.wbbc-dash-page-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--wbbc-orange);
}

.wbbc-dash-page-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wbbc-dash-page-header p {
    font-size: 15px;
    color: var(--wbbc-text-light);
    margin: 0;
}

/* Briefing Cards (Full Page) */
.wbbc-briefings-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.wbbc-briefing-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 24px;
    transition: box-shadow 0.15s;
}

.wbbc-briefing-card:hover {
    box-shadow: 0 4px 16px rgba(30, 50, 69, 0.06);
}

.wbbc-briefing-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.wbbc-briefing-card-meta {
    font-size: 13px;
    color: var(--wbbc-text-light);
    margin-bottom: 10px;
}

.wbbc-briefing-card p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.wbbc-briefing-card-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--wbbc-orange);
    color: var(--wbbc-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    margin-bottom: 12px;
    font-family: var(--wbbc-font-ui);
}

.wbbc-briefing-card-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.wbbc-briefing-card-topics span {
    display: inline-block;
    padding: 4px 10px;
    background: var(--wbbc-cream);
    border: 1px solid var(--wbbc-border);
    border-radius: 14px;
    font-size: 12px;
    color: var(--wbbc-text-light);
}

.wbbc-briefing-card-note {
    font-size: 13px;
    font-style: italic;
    color: var(--wbbc-text-light);
}

.wbbc-briefing-upcoming {
    border-color: var(--wbbc-orange);
    border-width: 2px;
    border-left: 4px solid var(--wbbc-orange);
}

/* Tracker Cards (Full Page) */
.wbbc-tracker-list {
    margin-bottom: 32px;
}

.wbbc-tracker-session {
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wbbc-border);
}

.wbbc-tracker-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 20px;
    margin-bottom: 12px;
}

.wbbc-tracker-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wbbc-tracker-bill-id {
    font-family: var(--wbbc-font-ui);
    font-weight: 700;
    font-size: 13px;
    color: var(--wbbc-navy);
}

.wbbc-tracker-card h4 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.wbbc-tracker-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wbbc-text-light);
    margin-bottom: 12px;
}

.wbbc-tracker-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--wbbc-text-light);
}

.wbbc-tracker-card-meta a {
    color: var(--wbbc-navy);
    font-weight: 600;
    text-decoration: none;
}

.wbbc-tracker-card-meta a:hover {
    text-decoration: underline;
}

.wbbc-tracker-card-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--wbbc-border);
}

.wbbc-tracker-action-count {
    font-size: 13px;
    color: var(--wbbc-text-light);
    font-style: italic;
}

.wbbc-tracker-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius-sm);
    border: 1px solid var(--wbbc-border);
}

/* CTA Block */
.wbbc-dash-cta {
    text-align: center;
    padding: 36px 28px;
    background: var(--wbbc-navy);
    border-radius: var(--wbbc-radius);
    margin-top: 32px;
    color: #fff;
}

.wbbc-dash-cta p {
    margin: 0 0 16px;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}

.wbbc-dash-cta .wbbc-dash-btn {
    font-size: 15px;
    padding: 12px 28px;
}

/* Member Directory */
.wbbc-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.wbbc-directory-member {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    transition: border-color 0.15s;
}

.wbbc-directory-member:hover {
    border-color: var(--wbbc-orange);
}

.wbbc-directory-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--wbbc-cream);
}

.wbbc-directory-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wbbc-directory-info strong {
    font-size: 15px;
    color: var(--wbbc-navy);
}

.wbbc-directory-org,
.wbbc-directory-title,
.wbbc-directory-location {
    font-size: 13px;
    color: var(--wbbc-text-light);
}

/* Login Gate */
.wbbc-login-gate {
    text-align: center;
    padding: 56px 32px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius);
    border: 1px solid var(--wbbc-border);
    max-width: 480px;
    margin: 40px auto;
}

.wbbc-login-gate h3 {
    font-family: var(--wbbc-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 8px;
}

.wbbc-login-gate p {
    font-size: 15px;
    color: var(--wbbc-text-light);
    margin: 0 0 24px;
}

.wbbc-login-gate-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.wbbc-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--wbbc-navy) !important;
    padding: 10px 22px;
    border-radius: var(--wbbc-radius-sm);
    border: 2px solid var(--wbbc-navy);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--wbbc-font-ui);
    transition: all 0.15s;
    letter-spacing: 0.02em;
}

.wbbc-btn-outline:hover {
    background: var(--wbbc-navy);
    color: #fff !important;
}

/* ==========================================================================
   LEGISLATION CPT
   ========================================================================== */

.wbbc-legislation {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 5%;
    font-family: var(--wbbc-font-body);
    color: var(--wbbc-text);
}

/* Policy Score Card */
.wbbc-policy-score {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    margin-bottom: 24px;
}

.wbbc-score-ring-wrap {
    flex-shrink: 0;
}

.wbbc-score-ring {
    width: 120px;
    height: 120px;
}

.wbbc-score-ring-fill {
    transition: stroke-dashoffset 1s ease-out;
}

.wbbc-score-grade {
    font-family: var(--wbbc-font-ui);
    font-size: 32px;
    font-weight: 800;
}

.wbbc-score-pct {
    font-family: var(--wbbc-font-ui);
    font-size: 13px;
    font-weight: 600;
    fill: var(--wbbc-text-light);
}

.wbbc-score-detail h3 {
    font-family: var(--wbbc-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 6px;
}

.wbbc-score-detail > p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wbbc-text-light);
    margin: 0 0 14px;
}

.wbbc-score-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wbbc-score-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--wbbc-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--wbbc-text);
    background: var(--wbbc-cream);
    padding: 4px 10px;
    border-radius: 20px;
}

/* Filter Bar */
.wbbc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    margin-bottom: 16px;
    align-items: center;
}

.wbbc-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wbbc-filter-label {
    font-family: var(--wbbc-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wbbc-text-light);
    margin-right: 4px;
}

.wbbc-filter-btn,
.wbbc-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--wbbc-border);
    border-radius: 20px;
    background: #fff;
    font-family: var(--wbbc-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--wbbc-text-light);
    cursor: pointer;
    transition: all 0.15s;
}

.wbbc-filter-btn:hover,
.wbbc-sort-btn:hover {
    border-color: var(--wbbc-navy);
    color: var(--wbbc-navy);
}

.wbbc-filter-btn.active,
.wbbc-sort-btn.active {
    background: var(--wbbc-navy);
    border-color: var(--wbbc-navy);
    color: #fff;
}

.wbbc-filter-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Legend */
.wbbc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--wbbc-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--wbbc-text-light);
}

.wbbc-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.wbbc-legend-sep {
    color: var(--wbbc-border);
    margin: 0 4px;
}

/* Impact badge with icon */
.wbbc-bill-impact-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--wbbc-font-ui);
}

.wbbc-bill-impact-badge.wbbc-impact-pro {
    background: #dcfce7;
    color: #166534;
}

.wbbc-bill-impact-badge.wbbc-impact-anti {
    background: #fee2e2;
    color: #991b1b;
}

.wbbc-bill-impact-badge.wbbc-impact-regulatory {
    background: #fef3c7;
    color: #92400e;
}

.wbbc-bill-impact-badge.wbbc-impact-neutral {
    background: #f1f5f9;
    color: #475569;
}

/* No results */
.wbbc-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--wbbc-text-light);
    font-family: var(--wbbc-font-ui);
    font-size: 15px;
}

/* Summary Stats */
.wbbc-legislation-summary,
.wbbc-press-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.wbbc-legislation-stat {
    text-align: center;
    padding: 20px 14px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius);
    border: 1px solid var(--wbbc-border);
    transition: transform 0.15s, box-shadow 0.15s;
}

.wbbc-legislation-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 50, 69, 0.08);
}

.wbbc-legislation-stat-value {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: var(--wbbc-navy);
    font-family: var(--wbbc-font-ui);
    line-height: 1;
    margin-bottom: 6px;
}

.wbbc-legislation-stat-label {
    font-size: 11px;
    color: var(--wbbc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-family: var(--wbbc-font-ui);
}

/* Bill List */
.wbbc-legislation-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Bill Cards */
.wbbc-bill-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 28px;
    border-left: 5px solid var(--wbbc-border);
    transition: box-shadow 0.2s, transform 0.15s;
}

.wbbc-bill-card:hover {
    box-shadow: 0 6px 20px rgba(30, 50, 69, 0.08);
    transform: translateY(-1px);
}

/* (impact border colors are set on .wbbc-impact-* directly) */

.wbbc-bill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.wbbc-bill-header-left,
.wbbc-bill-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wbbc-bill-number {
    font-family: var(--wbbc-font-ui);
    font-weight: 700;
    font-size: 14px;
    color: var(--wbbc-navy);
    background: var(--wbbc-cream);
    padding: 2px 10px;
    border-radius: var(--wbbc-radius-sm);
}

.wbbc-bill-session {
    font-family: var(--wbbc-font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--wbbc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wbbc-bill-position {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--wbbc-font-ui);
}

.wbbc-position-strong_support,
.wbbc-position-support {
    background: #dcfce7;
    color: #166534;
}

.wbbc-position-monitor {
    background: #dbeafe;
    color: #1e40af;
}

.wbbc-position-concern,
.wbbc-position-oppose {
    background: #fee2e2;
    color: #991b1b;
}

/* Impact colors on bill-card left border */
.wbbc-impact-pro {
    border-left-color: var(--wbbc-pro);
}

.wbbc-impact-anti {
    border-left-color: var(--wbbc-anti);
}

.wbbc-impact-regulatory {
    border-left-color: var(--wbbc-orange);
}

.wbbc-impact-neutral {
    border-left-color: #94a3b8;
}

.wbbc-bill-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--wbbc-navy);
    font-family: var(--wbbc-font-heading);
    line-height: 1.3;
}

.wbbc-bill-description {
    font-size: 15px;
    line-height: 1.65;
    color: var(--wbbc-text);
    margin-bottom: 16px;
    opacity: 0.85;
}

.wbbc-bill-description p {
    margin: 0 0 8px;
}

.wbbc-bill-points {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.wbbc-bill-points li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wbbc-text);
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
}

.wbbc-bill-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wbbc-orange);
}

.wbbc-bill-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--wbbc-border);
    font-size: 13px;
    color: var(--wbbc-text-light);
    font-family: var(--wbbc-font-body);
}

.wbbc-bill-meta strong {
    color: var(--wbbc-navy);
}

.wbbc-bill-meta a {
    color: var(--wbbc-burnt);
    font-weight: 700;
    text-decoration: none;
    font-family: var(--wbbc-font-ui);
    transition: color 0.15s;
}

.wbbc-bill-meta a:hover {
    color: var(--wbbc-navy);
}

/* ==========================================================================
   PRESS QUOTES
   ========================================================================== */

.wbbc-press {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 5%;
    font-family: var(--wbbc-font-body);
    color: var(--wbbc-text);
}

/* Press Hero */
.wbbc-press-hero {
    text-align: center;
    padding: 48px 24px 40px;
    background: linear-gradient(145deg, var(--wbbc-navy) 0%, var(--wbbc-dark) 100%);
    border-radius: var(--wbbc-radius);
    color: #fff;
    margin-bottom: 24px;
}

.wbbc-press-hero-icon {
    width: 36px;
    height: 36px;
    color: var(--wbbc-orange);
    margin-bottom: 16px;
}

.wbbc-press-hero h2 {
    font-family: var(--wbbc-font-heading);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.wbbc-press-hero p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.8;
    max-width: 560px;
    margin: 0 auto;
}

/* Press Summary Stats */
.wbbc-press-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.wbbc-press-stat {
    text-align: center;
    padding: 24px 16px 20px;
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    transition: transform 0.15s, box-shadow 0.15s;
}

.wbbc-press-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 50, 69, 0.08);
}

.wbbc-press-stat svg {
    width: 24px;
    height: 24px;
    color: var(--wbbc-orange);
    margin-bottom: 8px;
}

.wbbc-press-stat-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--wbbc-navy);
    font-family: var(--wbbc-font-ui);
    line-height: 1;
    margin-bottom: 4px;
}

.wbbc-press-stat-label {
    font-size: 11px;
    color: var(--wbbc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-family: var(--wbbc-font-ui);
}

.wbbc-press-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 20px;
}

.wbbc-quote-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 28px 28px 24px;
    margin: 0;
    border-left: 5px solid var(--wbbc-navy);
    position: relative;
    transition: box-shadow 0.2s, transform 0.15s;
}

.wbbc-quote-card:hover {
    box-shadow: 0 6px 20px rgba(30, 50, 69, 0.08);
    transform: translateY(-1px);
}

.wbbc-quote-card::before {
    content: "\201C";
    position: absolute;
    top: 10px;
    left: 18px;
    font-size: 56px;
    line-height: 1;
    color: var(--wbbc-orange);
    font-family: Georgia, "Times New Roman", serif;
    opacity: 0.4;
}

.wbbc-quote-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--wbbc-text);
    font-style: italic;
    padding-left: 32px;
    margin-bottom: 20px;
}

.wbbc-quote-text p {
    margin: 0;
}

.wbbc-quote-attribution {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--wbbc-border);
}

.wbbc-quote-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--wbbc-font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wbbc-quote-meta {
    flex: 1;
    min-width: 0;
}

.wbbc-quote-person strong {
    display: block;
    font-size: 15px;
    color: var(--wbbc-navy);
    font-style: normal;
    font-family: var(--wbbc-font-ui);
    font-weight: 600;
}

.wbbc-quote-role {
    display: block;
    font-size: 12px;
    color: var(--wbbc-text-light);
    font-style: normal;
    margin-top: 2px;
}

.wbbc-quote-source {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--wbbc-text-light);
    font-style: normal;
}

.wbbc-quote-source a {
    color: var(--wbbc-burnt);
    text-decoration: none;
    font-weight: 700;
    font-family: var(--wbbc-font-ui);
}

.wbbc-quote-source a:hover {
    color: var(--wbbc-navy);
}

.wbbc-quote-date {
    font-size: 11px;
    color: var(--wbbc-text-light);
    font-family: var(--wbbc-font-ui);
}

.wbbc-quote-context {
    font-size: 11px;
    color: var(--wbbc-text-light);
}

.wbbc-quote-context::before {
    content: "\2014 ";
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.wbbc-about {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 5%;
    font-family: var(--wbbc-font-body);
    color: var(--wbbc-text);
}

/* Hero */
.wbbc-about-hero {
    text-align: center;
    padding: 56px 24px 48px;
    background: linear-gradient(145deg, var(--wbbc-navy) 0%, var(--wbbc-dark) 100%);
    border-radius: var(--wbbc-radius);
    color: #fff;
    margin-bottom: 32px;
}

.wbbc-about-hero-badge {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255, 191, 0, 0.15);
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 20px;
    font-family: var(--wbbc-font-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--wbbc-orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}

.wbbc-about-hero h1 {
    font-family: var(--wbbc-font-heading);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 16px;
}

.wbbc-about-accent {
    color: var(--wbbc-orange);
}

.wbbc-about-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.85;
    max-width: 620px;
    margin: 0 auto;
}

/* Stats Grid */
.wbbc-about-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.wbbc-about-stat {
    text-align: center;
    padding: 24px 12px 20px;
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    transition: transform 0.15s, box-shadow 0.15s;
}

.wbbc-about-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(30, 50, 69, 0.08);
}

.wbbc-about-stat-icon {
    width: 28px;
    height: 28px;
    color: var(--wbbc-orange);
    margin-bottom: 10px;
}

.wbbc-about-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--wbbc-navy);
    font-family: var(--wbbc-font-ui);
    line-height: 1;
    margin-bottom: 4px;
}

.wbbc-about-stat-label {
    font-size: 10px;
    color: var(--wbbc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-family: var(--wbbc-font-ui);
}

/* Section */
.wbbc-about-section {
    margin-bottom: 40px;
    text-align: center;
}

.wbbc-about-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--wbbc-cream);
    border-radius: 50%;
    margin-bottom: 16px;
}

.wbbc-about-section-icon svg {
    width: 24px;
    height: 24px;
    color: var(--wbbc-orange);
}

.wbbc-about-section h2 {
    font-family: var(--wbbc-font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 12px;
}

.wbbc-about-section > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--wbbc-text);
    max-width: 680px;
    margin: 0 auto;
    opacity: 0.85;
}

/* Feature Cards */
.wbbc-about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.wbbc-about-card {
    background: #fff;
    border: 1px solid var(--wbbc-border);
    border-radius: var(--wbbc-radius);
    padding: 28px 24px;
    text-align: left;
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}

.wbbc-about-card:hover {
    box-shadow: 0 8px 24px rgba(30, 50, 69, 0.08);
    transform: translateY(-2px);
}

.wbbc-about-card-icon {
    width: 44px;
    height: 44px;
    background: var(--wbbc-cream);
    border-radius: var(--wbbc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.wbbc-about-card-icon svg {
    width: 22px;
    height: 22px;
    color: var(--wbbc-navy);
}

.wbbc-about-card h3 {
    font-family: var(--wbbc-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 8px;
}

.wbbc-about-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wbbc-text);
    opacity: 0.8;
    margin: 0 0 16px;
    flex: 1;
}

.wbbc-about-card-link {
    font-family: var(--wbbc-font-ui);
    font-size: 13px;
    font-weight: 700;
    color: var(--wbbc-burnt) !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.wbbc-about-card-link:hover {
    color: var(--wbbc-navy) !important;
}

/* Steps */
.wbbc-about-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.wbbc-about-step {
    text-align: center;
    padding: 24px 16px;
}

.wbbc-about-step-num {
    width: 40px;
    height: 40px;
    background: var(--wbbc-orange);
    color: var(--wbbc-dark);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wbbc-font-ui);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
}

.wbbc-about-step h4 {
    font-family: var(--wbbc-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--wbbc-navy);
    margin: 0 0 6px;
}

.wbbc-about-step p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wbbc-text-light);
    margin: 0;
}

/* CTA */
.wbbc-about-cta {
    text-align: center;
    padding: 48px 32px;
    background: var(--wbbc-navy);
    border-radius: var(--wbbc-radius);
    color: #fff;
}

.wbbc-about-cta h2 {
    font-family: var(--wbbc-font-heading);
    font-size: 26px;
    color: #fff;
    margin: 0 0 10px;
}

.wbbc-about-cta p {
    font-size: 16px;
    opacity: 0.8;
    margin: 0 0 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.wbbc-about-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.wbbc-about-cta-buttons .wbbc-dash-btn {
    font-size: 15px;
    padding: 14px 28px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .wbbc-page-hero {
        padding: 28px 16px;
        margin: 0 0 24px;
    }

    .wbbc-page-hero h1 {
        font-size: 24px;
    }

    .wbbc-page-hero p {
        font-size: 14px;
    }

    /* Policy score: stack vertically */
    .wbbc-policy-score {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
    }

    .wbbc-score-ring {
        width: 100px;
        height: 100px;
    }

    .wbbc-score-detail h3 {
        font-size: 17px;
    }

    .wbbc-score-breakdown {
        justify-content: center;
    }

    /* Filter bar: stack groups, bigger tap targets */
    .wbbc-filter-bar {
        flex-direction: column;
        gap: 12px;
        padding: 12px 14px;
    }

    .wbbc-filter-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .wbbc-filter-btn,
    .wbbc-sort-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Hide legend on mobile — info is in the filter bar + badges */
    .wbbc-tracker-legend {
        display: none;
    }

    .wbbc-dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .wbbc-dash-grid {
        grid-template-columns: 1fr;
    }

    .wbbc-directory-grid {
        grid-template-columns: 1fr;
    }

    .wbbc-tracker-card-meta {
        flex-direction: column;
        gap: 4px;
    }

    .wbbc-press-quotes {
        grid-template-columns: 1fr;
    }

    /* Bill cards: tighter padding, smaller text */
    .wbbc-bill-card {
        padding: 16px;
    }

    .wbbc-bill-title {
        font-size: 17px;
    }

    .wbbc-bill-description {
        font-size: 14px;
    }

    .wbbc-bill-points li {
        font-size: 13px;
    }

    .wbbc-bill-meta {
        flex-direction: column;
        gap: 8px;
        font-size: 12px;
    }

    .wbbc-quote-card {
        padding: 20px;
    }

    .wbbc-quote-text {
        padding-left: 24px;
    }

    .wbbc-quote-attribution {
        padding-left: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .wbbc-legislation-summary,
    .wbbc-press-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .wbbc-legislation-stat {
        padding: 14px 10px;
    }

    .wbbc-legislation-stat-value {
        font-size: 24px;
    }

    .wbbc-bill-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .wbbc-page-wrap {
        padding: 32px 4%;
    }

    .wbbc-about-hero h1 {
        font-size: 28px;
    }

    .wbbc-about-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .wbbc-about-cards {
        grid-template-columns: 1fr;
    }

    .wbbc-about-steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wbbc-about-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .wbbc-legislation-summary,
    .wbbc-press-summary {
        grid-template-columns: 1fr;
    }

    .wbbc-dash-stats {
        grid-template-columns: 1fr;
    }

    .wbbc-login-gate-actions {
        flex-direction: column;
    }
}

/* ==========================================================================
   LOGIN & REGISTRATION FORMS
   Override UR Pro default styles with WDBC branding.
   ========================================================================== */

/* Center the form and constrain width */
.ur-frontend-form.login,
.ur-frontend-form.register {
    max-width: 520px;
    margin: 40px auto !important;
    background: #fff !important;
    border: 1px solid var(--wbbc-border) !important;
    border-radius: var(--wbbc-radius) !important;
    padding: 40px 36px !important;
    box-shadow: 0 4px 24px rgba(30, 50, 69, 0.06) !important;
    font-family: var(--wbbc-font-body) !important;
}

/* Page title above form */
.user-registration-page .entry-title,
.user-registration-page .page-title {
    text-align: center;
    font-family: var(--wbbc-font-heading);
    color: var(--wbbc-navy);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Form labels */
.ur-frontend-form label,
.user-registration-form-row label {
    font-family: var(--wbbc-font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wbbc-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 6px !important;
}

/* Text inputs */
.ur-frontend-form input[type="text"],
.ur-frontend-form input[type="email"],
.ur-frontend-form input[type="password"],
.ur-frontend-form input[type="tel"],
.ur-frontend-form input[type="url"],
.ur-frontend-form input[type="number"],
.ur-frontend-form select,
.ur-frontend-form textarea,
.user-registration-Input {
    font-family: var(--wbbc-font-body) !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    border: 2px solid var(--wbbc-border) !important;
    border-radius: var(--wbbc-radius-sm) !important;
    background: #fff !important;
    color: var(--wbbc-text) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Select dropdowns need different padding to avoid text cutoff */
.ur-frontend-form select {
    padding: 10px 30px 10px 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}

.ur-frontend-form input:focus,
.ur-frontend-form select:focus,
.ur-frontend-form textarea:focus,
.user-registration-Input:focus {
    border-color: var(--wbbc-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.15) !important;
    outline: none !important;
}

/* Submit button */
.ur-frontend-form input[type="submit"],
.ur-frontend-form button[type="submit"],
.user-registration-form-login__submit,
.ur-submit-button,
.user-registration-Button {
    background: var(--wbbc-orange) !important;
    color: var(--wbbc-dark) !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: var(--wbbc-radius-sm) !important;
    font-family: var(--wbbc-font-ui) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.1s !important;
    width: 100% !important;
    margin-top: 8px !important;
}

.ur-frontend-form input[type="submit"]:hover,
.ur-frontend-form button[type="submit"]:hover,
.user-registration-form-login__submit:hover,
.ur-submit-button:hover,
.user-registration-Button:hover {
    background: var(--wbbc-burnt) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* "Remember me" checkbox row */
.user-registration-form__label-for-checkbox {
    font-family: var(--wbbc-font-body) !important;
    font-size: 14px !important;
    color: var(--wbbc-text-light) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Lost password link */
.user-registration-LostPassword a,
.ur-frontend-form .lost_password a {
    color: var(--wbbc-burnt) !important;
    font-family: var(--wbbc-font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.user-registration-LostPassword a:hover,
.ur-frontend-form .lost_password a:hover {
    color: var(--wbbc-navy) !important;
}

/* "Don't have an account? Register" link area */
.ur-frontend-form .user-registration-register-link,
.ur-frontend-form .ur-login-to-register,
.ur-frontend-form .ur-register-to-login {
    text-align: center !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--wbbc-border) !important;
    font-family: var(--wbbc-font-body) !important;
    font-size: 14px !important;
    color: var(--wbbc-text-light) !important;
}

.ur-frontend-form .user-registration-register-link a,
.ur-frontend-form .ur-login-to-register a,
.ur-frontend-form .ur-register-to-login a {
    color: var(--wbbc-navy) !important;
    font-weight: 700 !important;
    text-decoration-color: var(--wbbc-orange) !important;
    text-underline-offset: 3px !important;
}

/* Registration form specific */
.ur-frontend-form.register {
    max-width: 640px;
}

/* Form row spacing */
.ur-frontend-form .ur-form-row,
.user-registration-form-row {
    margin-bottom: 16px !important;
}

/* Error messages */
.ur-frontend-form .user-registration-error,
.ur-frontend-form .ur-error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    padding: 12px 16px !important;
    border-radius: var(--wbbc-radius-sm) !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}

/* Success messages */
.ur-frontend-form .user-registration-message,
.ur-frontend-form .ur-message {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    padding: 12px 16px !important;
    border-radius: var(--wbbc-radius-sm) !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}

/* Password strength meter */
.ur-frontend-form .user-registration-password-strength {
    font-family: var(--wbbc-font-ui) !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    padding: 4px 10px !important;
    border-radius: var(--wbbc-radius-sm) !important;
}

/* Form bordered variant override */
.ur-frontend-form--bordered {
    border: none !important;
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .ur-frontend-form.login,
    .ur-frontend-form.register {
        margin: 24px 16px !important;
        padding: 28px 20px !important;
    }
}

/* ==========================================================================
   UR Pro Message Container — success / status screens
   (e.g. /lost-password/?reset-link-sent=true, registration confirmations)
   Renders the message as a centered WDBC-branded hero card on a full-height
   stage so the page doesn't look like a half-page leftover.
   ========================================================================== */

.user-registration-page #user-registration {
    min-height: calc(100vh - 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 5%;
    box-sizing: border-box;
}

.user-registration-page .ur-message-container {
    background: linear-gradient(135deg, #16233F 0%, #0E1728 100%) !important;
    color: #FBF3DE !important;
    padding: 56px 48px !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 64px rgba(21, 37, 54, 0.25) !important;
    max-width: 560px;
    width: 100%;
    text-align: center !important;
    border: 1px solid rgba(255, 191, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
}

.user-registration-page .ur-message-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: #FFC24B;
}

.user-registration-page .ur-message-container svg {
    width: 56px !important;
    height: 56px !important;
    display: block !important;
    margin: 0 auto 18px !important;
}

.user-registration-page .ur-message-container svg path[stroke] {
    stroke: #FFC24B !important;
}

.user-registration-page .user-registration-message {
    font-family: var(--wbbc-font-heading, "Space Grotesk", "Segoe UI", system-ui, sans-serif) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #FBF3DE !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.2 !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

.user-registration-page .ur-message-content {
    font-family: var(--wbbc-font-body, "Inter", "Segoe UI", system-ui, sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #B7E2FF !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.user-registration-page .ur-message-container a {
    color: #FFC24B !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 191, 0, 0.4) !important;
}
.user-registration-page .ur-message-container a:hover {
    color: #ffffff !important;
    text-decoration-color: #ffffff !important;
}

@media (max-width: 600px) {
    .user-registration-page #user-registration {
        min-height: calc(100vh - 180px);
        padding: 24px 5%;
    }
    .user-registration-page .ur-message-container {
        padding: 40px 24px !important;
    }
    .user-registration-page .user-registration-message {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   MEMBERSHIP CHECKOUT — the registration page as one continuous step

   The User Registration form arrived looking like a different website: system
   fonts, plugin-blue accents, no container, and a payment step that read as raw
   markup. This section dresses the whole checkout in the WDBC tokens declared on
   :root by the child theme (--wdbc-navy / --wdbc-gold / --wdbc-gold-deep /
   --wdbc-cream / --wdbc-cool and the display, body and mono families).

   Two constraints shaped how it is written:

   1. Load order. This file is enqueued BEFORE the child theme stylesheet and
      before User Registration's own membership CSS. The plugin's selectors run
      four levels deep, so overriding them needs !important — but that
      deliberately still loses to the child theme, which loads later. The
      two-tone focus ring in the theme therefore keeps winning on every field,
      which is exactly what should happen. Nothing below sets `outline: none`.

   2. The markup belongs to the plugin and cannot be restructured, so the
      checked plan is detected with :has() rather than a class the plugin does
      not add.
   ========================================================================== */

/* ---------- The form itself, as a card ---------- */

.user-registration-page .ur-frontend-form {
    max-width: 760px !important;
    margin: 0 auto 48px !important;
    background: #fff !important;
    border: 1px solid #E3DCCA !important;
    border-radius: 14px !important;
    padding: clamp(22px, 3vw, 38px) !important;
    box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 12px 30px rgba(22, 35, 63, .07) !important;
    font-family: var(--wdbc-font-body) !important;
}

.user-registration-page .ur-frontend-form .ur-form-row {
    margin-bottom: 4px !important;
}

.user-registration-page .ur-frontend-form label,
.user-registration-page .ur-frontend-form .ur-label {
    font-family: var(--wdbc-font-mono) !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--wdbc-navy) !important;
    margin-bottom: 7px !important;
}
.user-registration-page .ur-frontend-form abbr.required {
    color: var(--wdbc-gold-deep) !important;
    border: 0 !important;
    text-decoration: none !important;
}

/* Field help text — was indistinguishable from a label. */
.user-registration-page .ur-frontend-form .description {
    display: block !important;
    font-family: var(--wdbc-font-body) !important;
    font-size: .84rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #5A6884 !important;
    margin: 0 0 10px !important;
}

.user-registration-page .ur-frontend-form input[type="text"],
.user-registration-page .ur-frontend-form input[type="email"],
.user-registration-page .ur-frontend-form input[type="password"],
.user-registration-page .ur-frontend-form input[type="tel"],
.user-registration-page .ur-frontend-form input[type="url"],
.user-registration-page .ur-frontend-form input[type="number"],
.user-registration-page .ur-frontend-form select,
.user-registration-page .ur-frontend-form textarea {
    font-family: var(--wdbc-font-body) !important;
    font-size: 1rem !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(22, 35, 63, .22) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--wdbc-navy) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.user-registration-page .ur-frontend-form input:hover,
.user-registration-page .ur-frontend-form select:hover,
.user-registration-page .ur-frontend-form textarea:hover {
    border-color: rgba(22, 35, 63, .4) !important;
}
/* A quieter own-state for pointer focus. The theme's two-tone keyboard ring
   loads after this file and still wins for :focus-visible. */
.user-registration-page .ur-frontend-form input:focus,
.user-registration-page .ur-frontend-form select:focus,
.user-registration-page .ur-frontend-form textarea:focus {
    border-color: var(--wdbc-gold-deep) !important;
    box-shadow: 0 0 0 3px rgba(255, 194, 75, .28) !important;
}

.user-registration-page .ur-frontend-form ::placeholder { color: #8A94A6 !important; }

/* Checkbox / radio rows outside the plan list (bylaws consent, etc.) */
.user-registration-page .ur-frontend-form .ur-checkbox-list,
.user-registration-page .ur-frontend-form .ur-radio-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.user-registration-page .ur-frontend-form .ur-checkbox-label,
.user-registration-page .ur-frontend-form .ur-radio-label {
    font-family: var(--wdbc-font-body) !important;
    font-size: .92rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #4A5568 !important;
    line-height: 1.55 !important;
}
.user-registration-page .ur-frontend-form .ur-checkbox-label a {
    color: var(--wdbc-gold-deep) !important;
    text-underline-offset: 2px !important;
}
.user-registration-page .ur-frontend-form input[type="checkbox"],
.user-registration-page .ur-frontend-form input[type="radio"] {
    accent-color: var(--wdbc-navy) !important;
    width: 17px !important;
    height: 17px !important;
}

/* ---------- Step 1 restated: the plan list ---------- */

.user-registration-page #ur-membership-registration {
    background: var(--wdbc-cool) !important;
    border: 1px solid rgba(22, 35, 63, .1) !important;
    border-radius: 12px !important;
    padding: 20px 20px 4px !important;
    margin-bottom: 26px !important;
}

.user-registration-page #urm-membership-list > label.ur_membership_input_label:first-child {
    font-family: var(--wdbc-font-mono) !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--wdbc-navy) !important;
}

/* Every plan is a card; the chosen one is unmistakable. */
.user-registration-page #urm-membership-list label[data-membership-id] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #fff !important;
    border: 1px solid rgba(22, 35, 63, .16) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.user-registration-page #urm-membership-list label[data-membership-id]:hover {
    border-color: rgba(22, 35, 63, .38) !important;
}
.user-registration-page #urm-membership-list label[data-membership-id]:has(input:checked) {
    border-color: var(--wdbc-gold) !important;
    box-shadow: 0 0 0 2px var(--wdbc-gold), 0 8px 20px rgba(22, 35, 63, .1) !important;
    background: #FFFDF7 !important;
}
.user-registration-page #urm-membership-list label[data-membership-id] input[type="radio"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
    accent-color: var(--wdbc-gold-deep) !important;
}
.user-registration-page #urm-membership-list label[data-membership-id] .ur-membership-duration {
    font-family: var(--wdbc-font-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--wdbc-navy) !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}
.user-registration-page #urm-membership-list label[data-membership-id] .ur-membership-period-span {
    margin-left: auto !important;
    font-family: var(--wdbc-font-body) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--wdbc-gold-deep) !important;
    text-align: right !important;
}

/* ---------- Total ---------- */

.user-registration-page #urm-total_container {
    background: var(--wdbc-navy) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin: 6px 0 18px !important;
}
.user-registration-page #urm-total_container label,
.user-registration-page #urm-total_container .ur_membership_input_label {
    color: var(--wdbc-gold) !important;
    font-family: var(--wdbc-font-mono) !important;
    font-size: .66rem !important;
    letter-spacing: .16em !important;
    margin: 0 !important;
}
.user-registration-page #urm-total_container .urm-membership-total-value,
.user-registration-page #urm-total_container .urm-membership-sub-total-value,
.user-registration-page #urm-total_container .urm-membership-tax-value,
.user-registration-page #urm-total_container .urm-membership-coupons-value {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.user-registration-page #urm-total_container .ur_membership_input_class {
    font-family: var(--wdbc-font-display) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--wdbc-cream) !important;
}

/* ---------- Payment ---------- */

.user-registration-page .ur_payment_gateway_container {
    border: 1px solid rgba(22, 35, 63, .14) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin-bottom: 22px !important;
    background: #fff !important;
}
.user-registration-page .ur_payment_gateway_container .ur_membership_divider { display: none !important; }
.user-registration-page .ur_payment_gateway_container > .ur_membership_input_label {
    display: block !important;
    font-family: var(--wdbc-font-mono) !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--wdbc-navy) !important;
    margin-bottom: 12px !important;
}
.user-registration-page .ur-membership-payment-gateway-lists {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.user-registration-page .ur-membership-payment-gateway-lists label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(22, 35, 63, .18) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    min-width: 150px !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.user-registration-page .ur-membership-payment-gateway-lists label:has(input:checked) {
    border-color: var(--wdbc-gold) !important;
    box-shadow: 0 0 0 2px var(--wdbc-gold) !important;
    background: #FFFDF7 !important;
}
.user-registration-page .ur-membership-payment-gateway-lists label .ur-membership-duration {
    font-family: var(--wdbc-font-body) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--wdbc-navy) !important;
    text-transform: capitalize !important;
}
.user-registration-page .ur-membership-payment-gateway-logo { max-height: 22px !important; width: auto !important; }

/* Stripe's hosted card field, so it stops looking like a hole in the page. */
.user-registration-page .stripe-container {
    border: 1px solid rgba(22, 35, 63, .14) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin-bottom: 22px !important;
    background: #fff !important;
}
.user-registration-page .stripe-card-indicator {
    font-family: var(--wdbc-font-mono) !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--wdbc-navy) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 12px !important;
}
.user-registration-page #card-element {
    border: 1px solid rgba(22, 35, 63, .22) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    background: #fff !important;
}

/* ---------- Notices ---------- */

.user-registration-page .ur-frontend-form .notice_red,
.user-registration-page .ur-frontend-form .user-registration-error,
.user-registration-page .ur-frontend-form label.ur-error {
    font-family: var(--wdbc-font-body) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #8C1D18 !important;
    background: #FDF3F2 !important;
    border: 1px solid rgba(140, 29, 24, .28) !important;
    border-left: 3px solid #8C1D18 !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    margin-top: 8px !important;
    display: block !important;
}
.user-registration-page .ur-frontend-form .notice_red:empty,
.user-registration-page .ur-frontend-form .user-registration-error:empty { display: none !important; }

/* ---------- Submit ---------- */

.user-registration-page .ur-frontend-form .ur-button-container {
    margin-top: 26px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(22, 35, 63, .12) !important;
}
.user-registration-page .ur-frontend-form .ur-submit-button {
    background: var(--wdbc-navy) !important;
    color: var(--wdbc-cream) !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 15px 34px !important;
    font-family: var(--wdbc-font-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 240px !important;
    transition: background .15s ease !important;
}
.user-registration-page .ur-frontend-form .ur-submit-button:hover {
    background: var(--wdbc-gold) !important;
    color: var(--wdbc-navy) !important;
}

@media (max-width: 600px) {
    .wdbc-join-summary { padding: 18px 18px !important; }
    .wdbc-join-summary-change { flex-basis: 100%; }
    .user-registration-page #urm-membership-list label[data-membership-id] {
        flex-wrap: wrap !important;
    }
    .user-registration-page #urm-membership-list label[data-membership-id] .ur-membership-period-span {
        margin-left: 29px !important;
        text-align: left !important;
        flex-basis: 100% !important;
    }
    .user-registration-page .ur-frontend-form .ur-submit-button { width: 100% !important; min-width: 0 !important; }
    .wdbc-join-ticker.is-pinned { font-size: .78rem; gap: 10px; }
}

/* ---------- Living with the plugin's JavaScript ----------

   Selecting a plan makes the script drop the gateways that plan does not
   accept, by adding .urm-d-none (and, in a couple of paths, an inline
   display:none). The layout rules above need !important to beat User
   Registration's four-deep selectors — and !important also beats both of those
   — so without this guard a bank-only plan kept showing the PayPal and Stripe
   buttons the script had just removed, and the lone-gateway auto-select never
   fired. Re-assert the hidden state at the same weight.
   -------------------------------------------------------- */

.user-registration-page .ur-membership-payment-gateway-lists label.urm-d-none,
.user-registration-page .ur-membership-payment-gateway-lists label[style*="display: none"],
.user-registration-page .ur-membership-payment-gateway-lists label[style*="display:none"],
.user-registration-page #urm-membership-list label.urm-d-none,
.user-registration-page #urm-membership-list label[style*="display: none"],
.user-registration-page #urm-membership-list label[style*="display:none"] {
    display: none !important;
}

/* ---------- Empty half-rows ----------

   Form 254 has rows whose left cell is empty, so "User Email" sat marooned in
   the right column under nothing. Where a row has an empty cell, let the cell
   that does have a field take the full width. The inline width the plugin
   prints is per-cell, so this is the only place it can be corrected without
   rebuilding the form.
   -------------------------------------------------------- */

.user-registration-page .ur-frontend-form .ur-form-row:has(.ur-form-grid:not(:has(*))) .ur-form-grid:has(*) {
    width: 100% !important;
}
.user-registration-page .ur-frontend-form .ur-form-grid:not(:has(*)) { display: none !important; }

/* ---------- Profile picture control ---------- */

.user-registration-page .ur-frontend-form .ur-profile-picture-upload a,
.user-registration-page .ur-frontend-form .ur-profile-picture-upload button,
.user-registration-page .ur-frontend-form .profile_pic_url_field a,
.user-registration-page .ur-frontend-form .ur-profile-pic-actions a {
    font-family: var(--wdbc-font-body) !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    color: var(--wdbc-navy) !important;
    border: 1px solid rgba(22, 35, 63, .22) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
    background: #fff !important;
    display: inline-block !important;
}

/* ---------- Payment method: give the control back to the user ----------

   User Registration hides the gateway radio with display:none and makes the
   whole label the hit target. Three things follow from that, and all three are
   worth undoing here:

     * a display:none input is not in the tab order, so the payment method was
       unreachable by keyboard and the theme's focus ring had nothing to draw on;
     * with the input not rendered there is no checked state to see, only a
       border tint that the brand palette does not use;
     * the plugin's own "if only one gateway is left, tick it" shortcut tests
       jQuery :visible, which a display:none radio always fails — so a bank-only
       plan arrived with no method selected and failed validation on submit.

   Rendering the radio again fixes all three at once.
   -------------------------------------------------------- */

.user-registration-page .ur-membership-payment-gateway-lists label input[type="radio"] {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    accent-color: var(--wdbc-gold-deep) !important;
}
.user-registration-page .ur-membership-payment-gateway-lists label {
    justify-content: flex-start !important;
    height: auto !important;
    margin-bottom: 0 !important;
    flex: 0 1 auto !important;
}

/* The gateway is otherwise identified by a logo alone — a generic bank glyph
   for the invoice route, which reads as nothing in particular. Name it. The
   label keeps its accessible name from the image alt text; this is a visual
   caption only. */
.user-registration-page .ur-membership-payment-gateway-lists label::after {
    font-family: var(--wdbc-font-body);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wdbc-navy);
}
.user-registration-page .ur-membership-payment-gateway-lists label[for="ur-membership-bank"]::after {
    content: "Invoice — ACH or check";
}
.user-registration-page .ur-membership-payment-gateway-lists label[for="ur-membership-stripe"]::after {
    content: "Credit or debit card";
}
.user-registration-page .ur-membership-payment-gateway-lists label[for="ur-membership-paypal"]::after {
    content: "PayPal";
}