/*
 * Connection Verification™ — Brand & Operational Presentation Layer
 *
 * Centralised design tokens, traffic-light operational status colours,
 * and Shelf-app shell styling for the WooCommerce My Account area.
 *
 * Block 2 Milestone 4 — applies consistently across navigation, dashboards,
 * lifecycle views, notifications, reports, and exports.
 *
 * Status colour semantics (traffic-light):
 *   --cv-green   = aligned / completed / Connection Verified™
 *   --cv-amber   = review required / partial / under review
 *   --cv-red     = operational variance / error / at risk
 *   --cv-blue    = informational / neutral / reference only
 */

:root {
    /* Brand primary */
    --cv-brand:           #0b3d5c;
    --cv-brand-dark:      #082a40;
    --cv-brand-light:     #155a85;
    --cv-accent:          #1f7ab8;

    /* Brand accent (logo red) — sidebar chrome only. Distinct from the
     * traffic-light --cv-red, which is reserved for operational status. */
    --cv-brand-accent:      #e1242b;
    --cv-brand-accent-soft: rgba(225, 36, 43, 0.16);

    /* Operational traffic-light palette */
    --cv-green:           #10b981;
    --cv-green-soft:      #ecfdf5;
    --cv-green-border:    #a7f3d0;
    --cv-green-text:      #047857;

    --cv-amber:           #f59e0b;
    --cv-amber-soft:      #fffbeb;
    --cv-amber-border:    #fde68a;
    --cv-amber-text:      #b45309;

    --cv-red:             #ef4444;
    --cv-red-soft:        #fef2f2;
    --cv-red-border:      #fecaca;
    --cv-red-text:        #b91c1c;

    --cv-blue:            #3b82f6;
    --cv-blue-soft:       #eff6ff;
    --cv-blue-border:     #bfdbfe;
    --cv-blue-text:       #1e40af;

    /* Neutrals (information / reference) */
    --cv-ink:             #0f172a;
    --cv-ink-muted:       #475569;
    --cv-ink-faint:       #64748b;
    --cv-line:            #e2e8f0;
    --cv-line-soft:       #f1f5f9;
    --cv-surface:         #ffffff;
    --cv-surface-soft:    #f8fafc;
    --cv-page:            #f1f5f9;

    /* Typography hierarchy */
    --cv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --cv-h1: 22px;
    --cv-h2: 18px;
    --cv-h3: 15px;
    --cv-label: 11px;

    /* Spacing scale */
    --cv-radius:          10px;
    --cv-radius-sm:       6px;
    --cv-shadow:          0 1px 2px rgba(15, 23, 42, 0.04);
    --cv-shadow-lift:     0 2px 4px rgba(15, 23, 42, 0.06),
                          0 4px 12px rgba(15, 23, 42, 0.04);
}

/* ---------------------------------------------------------------------------
 * BRAND IDENTITY HEADER (shown above operational areas)
 * ------------------------------------------------------------------------- */

.cv-brand-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    background: linear-gradient(135deg, var(--cv-brand) 0%, var(--cv-brand-light) 100%);
    border-radius: var(--cv-radius);
    color: #fff;
    margin: 0 auto 14px auto;
    box-shadow: 0 1px 2px rgba(11, 61, 92, 0.18);
}
.cv-brand-banner__mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
}
.cv-brand-banner__mark .cv-mark-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--cv-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}
.cv-brand-banner__tag {
    font-size: 12px;
    opacity: 0.85;
    font-style: italic;
}
@media (max-width: 600px) {
    .cv-brand-banner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; }
    .cv-brand-banner__tag { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
 * STATUS PILLS (traffic-light)
 * ------------------------------------------------------------------------- */

.cv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}
.cv-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.cv-pill--green  { background: var(--cv-green-soft); color: var(--cv-green-text); border-color: var(--cv-green-border); }
.cv-pill--amber  { background: var(--cv-amber-soft); color: var(--cv-amber-text); border-color: var(--cv-amber-border); }
.cv-pill--red    { background: var(--cv-red-soft);   color: var(--cv-red-text);   border-color: var(--cv-red-border); }
.cv-pill--blue   { background: var(--cv-blue-soft);  color: var(--cv-blue-text);  border-color: var(--cv-blue-border); }
.cv-pill--neutral{ background: var(--cv-line-soft);  color: var(--cv-ink-muted);  border-color: var(--cv-line); }

/* Aliases for in-place adoption from existing namespaces */
.cs-brief__pill--ok,
.cs-pdc__pill--ok,
.cs-notif__pill--ok        { background: var(--cv-green-soft); color: var(--cv-green-text); border-color: var(--cv-green-border); }
.cs-brief__pill--warn,
.cs-pdc__pill--variance,
.cs-notif__pill--variance  { background: var(--cv-amber-soft); color: var(--cv-amber-text); border-color: var(--cv-amber-border); }
.cs-brief__pill--danger,
.cs-pdc__pill--warn,
.cs-notif__pill--warn      { background: var(--cv-red-soft);   color: var(--cv-red-text);   border-color: var(--cv-red-border); }
.cs-brief__pill--neutral,
.cs-pdc__pill--neutral,
.cs-notif__pill--neutral   { background: var(--cv-line-soft);  color: var(--cv-ink-muted);  border-color: var(--cv-line); }

/* ---------------------------------------------------------------------------
 * EXPECTED vs ACTUAL — per-variance Booked/Delivered grid (Block 2 P3)
 * Self-contained white card so it reads on both the light Campaign View and
 * the dark /dashboard. Rendered by cv_expected_actual_html() (inc/cv-brand.php).
 * ------------------------------------------------------------------------- */
.cv-ea {
    margin: 8px 0 2px 0;
    border: 1px solid var(--cv-line);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    max-width: 600px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cv-ea__title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cv-ink-muted);
    background: var(--cv-line-soft);
    padding: 6px 10px;
    border-bottom: 1px solid var(--cv-line);
}
/* Item #6 — Variance Type chip inside the Expected-vs-Actual header. */
.cv-ea__type {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.cv-ea__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #ffffff;
    margin: 0;
}
.cv-ea__table thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--cv-ink-faint);
    font-weight: 600;
    padding: 5px 10px;
    border-bottom: 1px solid var(--cv-line-soft);
    background: #ffffff;
    white-space: nowrap;
}
.cv-ea__table tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--cv-line-soft);
    color: var(--cv-ink);
    vertical-align: top;
    line-height: 1.45;
}
.cv-ea__table tbody tr:last-child td { border-bottom: 0; }
.cv-ea__field { font-weight: 600; color: var(--cv-ink-muted); white-space: nowrap; }
.cv-ea__exp   { color: var(--cv-ink-muted); }
.cv-ea__act   { color: var(--cv-ink); }
.cv-ea__row--changed .cv-ea__field { color: var(--cv-amber-text); }
.cv-ea__row--changed .cv-ea__act {
    background: var(--cv-amber-soft);
    color: var(--cv-amber-text);
    font-weight: 600;
}
.cv-ea__note {
    font-size: 11px;
    color: var(--cv-ink-faint);
    padding: 6px 10px;
    background: var(--cv-line-soft);
    border-top: 1px solid var(--cv-line);
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * BRANDED PDF EXPORT (Block 2 M4)
 * The .cv-pdf-doc is positioned off-screen (NOT display:none — html2canvas
 * cannot rasterise hidden nodes) and cloned report content is injected into
 * its body at click time by assets/js/cv-pdf.js.
 * ------------------------------------------------------------------------- */
.cv-pdf-doc {
    position: absolute;
    left: -99999px;
    top: 0;
    width: 1040px;
    background: #ffffff;
    color: var(--cv-ink);
    padding: 28px 32px;
    font-family: var(--cv-font);
}
.cv-pdf-banner {
    border-bottom: 3px solid var(--cv-brand);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.cv-pdf-banner__brand {
    font-size: 22px;
    font-weight: 700;
    color: var(--cv-brand);
    letter-spacing: -0.01em;
}
.cv-pdf-banner__tm { font-size: 10px; vertical-align: super; }
.cv-pdf-banner__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cv-ink);
    margin-top: 4px;
}
.cv-pdf-banner__meta {
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 12px;
}
.cv-pdf-banner__meta th {
    text-align: left;
    color: var(--cv-ink-muted);
    font-weight: 600;
    padding: 2px 14px 2px 0;
    white-space: nowrap;
}
.cv-pdf-banner__meta td { color: var(--cv-ink); padding: 2px 0; }
.cv-pdf-banner__strap {
    margin-top: 10px;
    font-size: 11px;
    color: var(--cv-ink-muted);
    font-style: italic;
}
.cv-pdf-doc__body table { width: 100%; border-collapse: collapse; }

/* ---------------------------------------------------------------------------
 * NOTIFICATION / SHARE RECIPIENT HIERARCHY (Block 2 M4)
 * ------------------------------------------------------------------------- */
.cs-notif__recipients { margin: 12px 0 16px; }
.cs-notif__recipients-title,
.cs-nshare__section-title {
    margin: 0 0 10px;
    font-size: var(--cv-h3, 15px);
    font-weight: 700;
    color: var(--cv-ink);
}
.cs-notif__recipients-list { list-style: none; margin: 0; padding: 0; }
.cs-notif__recipient {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cv-line-soft);
}
.cs-notif__recipient:last-child { border-bottom: 0; }
.cs-notif__recipient--muted { color: var(--cv-ink-muted); }
.cs-notif__recipient-email,
.cs-nshare__owner-email { font-weight: 600; color: var(--cv-ink); }
.cs-notif__recipient-channel { font-size: 11px; color: var(--cv-ink-muted); }
.cs-notif__recipients-manage { margin: 10px 0 0; font-size: 13px; }
.cs-nshare__owner { margin-bottom: 16px; }
.cs-nshare__owner-line { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.cs-nshare__owner-note { margin: 0; font-size: 12px; color: var(--cv-ink-muted); }

/* ---------------------------------------------------------------------------
 * KPI CARDS (operational headline tiles)
 * ------------------------------------------------------------------------- */

.cv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 16px 0;
}
.cv-kpi {
    position: relative;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
    padding: 16px 18px;
    box-shadow: var(--cv-shadow);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cv-kpi:hover { transform: translateY(-1px); box-shadow: var(--cv-shadow-lift); }
.cv-kpi::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--cv-line);
}
.cv-kpi--green::before { background: var(--cv-green); }
.cv-kpi--amber::before { background: var(--cv-amber); }
.cv-kpi--red::before   { background: var(--cv-red); }
.cv-kpi--blue::before  { background: var(--cv-blue); }

.cv-kpi__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--cv-ink-muted);
}
.cv-kpi__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--cv-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 4px;
}
.cv-kpi__sub {
    font-size: 12px;
    color: var(--cv-ink-faint);
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * CAMPAIGN VIEW — tabbed lifecycle layout (Block 2 #1)
 *
 * Turns the single-campaign view from a long table scroll into guided tabs
 * led by a verdict-first Overview. The tab bar lives inside the sticky
 * .cs-campaign-lifecycle strip; panels show/hide via .is-active.
 * ------------------------------------------------------------------------- */

.cs-campaign-lifecycle .cv-campaign-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
}
.cv-campaign-tab {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--cv-line);
    background: #ffffff;
    color: var(--cv-ink);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cv-campaign-tab:hover { background: #eef2ff; border-color: #c7d2fe; }
.cv-campaign-tab:focus-visible { outline: 2px solid var(--cv-blue); outline-offset: 2px; }
.cv-campaign-tab.is-active {
    background: var(--cv-brand);
    border-color: var(--cv-brand);
    color: #ffffff;
}

.cv-tabpanels { margin-top: 4px; }
.cv-tabpanel { display: none; }
.cv-tabpanel.is-active { display: block; animation: cvFadeIn 0.18s ease; }
@keyframes cvFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Overview panel ----------------------------------------------------------- */
.cv-overview { margin: 4px 0 8px; }
.cv-overview__charts {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
    margin: 16px 0 0;
}
.cv-chart-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
    padding: 14px 16px;
    box-shadow: var(--cv-shadow);
    min-width: 0;
}
.cv-chart-card__title {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cv-ink-muted);
}
.cv-chart-card__canvas { position: relative; height: 240px; }
.cv-overview__cta { margin: 0 0 6px; }
.cv-overview__foot { font-size: 12px; color: var(--cv-ink-faint); margin: 12px 0 0; }
@media (max-width: 900px) {
    .cv-overview__charts { grid-template-columns: 1fr; }
}

/* Verification verdict banner ---------------------------------------------- */
.cv-verdict {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--cv-radius);
    border: 1px solid var(--cv-line);
    background: var(--cv-surface);
    margin: 0 0 16px;
    box-shadow: var(--cv-shadow);
}
.cv-verdict__badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #ffffff;
    font-size: 15px;
    background: var(--cv-ink-muted);
}
.cv-verdict__text { display: flex; flex-direction: column; gap: 2px; }
.cv-verdict__headline { font-size: 16px; font-weight: 700; color: var(--cv-ink); }
.cv-verdict__detail { font-size: 13px; color: var(--cv-ink-muted); }
.cv-verdict--green { border-color: #a7f3d0; background: #ecfdf5; }
.cv-verdict--green .cv-verdict__badge { background: var(--cv-green); }
.cv-verdict--amber { border-color: #fde68a; background: #fffbeb; }
.cv-verdict--amber .cv-verdict__badge { background: var(--cv-amber); }
.cv-verdict--red { border-color: #fecaca; background: #fef2f2; }
.cv-verdict--red .cv-verdict__badge { background: var(--cv-red); }
.cv-verdict--neutral .cv-verdict__badge { background: var(--cv-ink-muted); }

/* ---------------------------------------------------------------------------
 * SHELF APP SHELL — sidebar lifecycle navigation styling
 * Re-skins WooCommerce default My Account nav into an app-like sidebar.
 * Uses elevated specificity + !important to beat the active theme's
 * default link / list / border colours.
 * ------------------------------------------------------------------------- */

@media (min-width: 901px) {
    body.woocommerce-account nav.woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        background: var(--cv-brand) !important;
        border-radius: var(--cv-radius) !important;
        padding: 14px 10px !important;
        box-shadow: var(--cv-shadow) !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation > ul,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li,
    body.woocommerce-account .woocommerce-MyAccount-navigation li {
        list-style: none !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        border-top: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Kill any pseudo-element underlines/separators the theme is injecting
     * between menu items (the "_" looking marks in the screenshots).
     * Excludes:
     *   - .cv-nav-group--first LIs — we render the lifecycle section
     *     header labels (OVERVIEW / SETUP & SCHEDULING / etc.) via
     *     the ::before pseudo-element of those items.
     *   - dashboard_disabled LI — we render the disabled-state tooltip
     *     via that item's ::after pseudo-element.
     */
    body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.cv-nav-group--first)::before,
    body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.woocommerce-MyAccount-navigation-link--dashboard_disabled)::after,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul::before,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        background: transparent !important;
    }
    /* Also hide any <hr> some themes drop between items. */
    body.woocommerce-account .woocommerce-MyAccount-navigation hr {
        display: none !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
    body.woocommerce-account .woocommerce-MyAccount-navigation li a,
    body.woocommerce-account .woocommerce-MyAccount-navigation li > a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 14px !important;
        color: #ffffff !important;
        background: transparent !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: var(--cv-radius-sm) !important;
        border: 0 !important;
        outline: none !important;
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
        line-height: 1.3 !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    /* Hover — subtle lift: light translucent fill + thin white accent on
     * the left edge. Distinct from the active state (which uses a 3px
     * solid red bar) so the user can tell hover from selection at a
     * glance. Slightly brighter icon/label for a tactile feel. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
        box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.30) !important;
        text-decoration: none !important;
    }

    /* Keyboard focus — slightly stronger than hover so keyboard users
     * can clearly see where they are. Mouse :focus (which lingers after
     * click) intentionally does NOT get this treatment — only :focus-
     * visible — so clicked-but-not-active links don't look stuck. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
        outline: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
        background: rgba(255, 255, 255, 0.10) !important;
        box-shadow: inset 2px 0 0 var(--cv-brand-accent), 0 0 0 2px rgba(220, 38, 38, 0.22) !important;
        outline: none !important;
        text-decoration: none !important;
    }

    /* Active — strongest indicator, with the brand red bar. Unchanged. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active > a {
        background: rgba(255, 255, 255, 0.10) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        box-shadow: inset 3px 0 0 var(--cv-brand-accent) !important;
    }
    /* Hovering the already-active item — keep the red bar, slightly
     * brighten the background. Don't switch back to the hover's thin
     * white accent, which would feel like a regression. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a:hover,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active > a:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        box-shadow: inset 3px 0 0 var(--cv-brand-accent) !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-content {
        background: var(--cv-surface) !important;
        border-radius: var(--cv-radius) !important;
        padding: 22px 26px !important;
        box-shadow: var(--cv-shadow) !important;
        color: var(--cv-ink) !important;
    }
    /* Ensure content area readable text colour overrides dark theme defaults */
    body.woocommerce-account .woocommerce-MyAccount-content,
    body.woocommerce-account .woocommerce-MyAccount-content p,
    body.woocommerce-account .woocommerce-MyAccount-content li,
    body.woocommerce-account .woocommerce-MyAccount-content label,
    body.woocommerce-account .woocommerce-MyAccount-content td,
    body.woocommerce-account .woocommerce-MyAccount-content th,
    body.woocommerce-account .woocommerce-MyAccount-content span:not(.cv-pill):not(.cv-chip):not(.cs-stat__label):not(.cs-stat__value) {
        color: var(--cv-ink);
    }
}

/* Tighter spacing inside the content area */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
    color: var(--cv-ink);
    letter-spacing: -0.01em;
}

/* Mobile: turn the sidebar into a horizontal scroll strip */
@media (max-width: 900px) {
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        background: var(--cv-brand) !important;
        border-radius: var(--cv-radius) !important;
        padding: 8px !important;
        margin-bottom: 14px !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border: 0 !important;
        background: transparent !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li::before,
    body.woocommerce-account .woocommerce-MyAccount-navigation li::after {
        content: none !important;
        display: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation hr {
        display: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        list-style: none !important;
        margin: 0; padding: 0;
        -webkit-overflow-scrolling: touch;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li {
        flex: 0 0 auto;
        list-style: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li a {
        display: inline-flex !important;
        padding: 8px 14px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.10) !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        align-items: center !important;
        border: 0 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active > a {
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        box-shadow: inset 0 -3px 0 var(--cv-brand-accent) !important;
    }
}

/* ---------------------------------------------------------------------------
 * LIFECYCLE SECTION CARDS
 * Groups operational outputs (Setup → Uploads → Validation → Outcomes →
 * Reporting → Archive) into framed sections so the workflow reads top-to-
 * bottom without engineering-style text-link clutter.
 * ------------------------------------------------------------------------- */

.cv-section {
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
    box-shadow: var(--cv-shadow);
    padding: 18px 20px;
    margin: 0 0 16px 0;
}
.cv-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cv-line-soft);
}
.cv-section__title {
    margin: 0;
    font-size: var(--cv-h2);
    font-weight: 700;
    color: var(--cv-ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cv-section__title .cv-stage-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cv-blue);
    flex-shrink: 0;
}
.cv-section__title--green .cv-stage-dot { background: var(--cv-green); }
.cv-section__title--amber .cv-stage-dot { background: var(--cv-amber); }
.cv-section__title--red   .cv-stage-dot { background: var(--cv-red); }

.cv-section__sub {
    color: var(--cv-ink-faint);
    font-size: 12px;
    margin: 0;
}
.cv-section__body { font-size: 13px; line-height: 1.55; color: var(--cv-ink); }

/* ---------------------------------------------------------------------------
 * LIFECYCLE STAGE STRIP (top of campaign view)
 * ------------------------------------------------------------------------- */

.cv-stage-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 auto 14px auto;
}
.cv-stage {
    flex: 1 1 140px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius-sm);
    padding: 10px 12px;
    min-width: 0;
    position: relative;
}
.cv-stage__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--cv-ink-faint);
    font-weight: 600;
}
.cv-stage__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-ink);
    margin-top: 2px;
}
.cv-stage--done { border-color: var(--cv-green-border); background: var(--cv-green-soft); }
.cv-stage--done .cv-stage__label { color: var(--cv-green-text); }
.cv-stage--review { border-color: var(--cv-amber-border); background: var(--cv-amber-soft); }
.cv-stage--review .cv-stage__label { color: var(--cv-amber-text); }
.cv-stage--issue { border-color: var(--cv-red-border); background: var(--cv-red-soft); }
.cv-stage--issue .cv-stage__label { color: var(--cv-red-text); }

/* ---------------------------------------------------------------------------
 * BUTTONS — consistent operational actions
 * ------------------------------------------------------------------------- */

.cv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--cv-radius-sm);
    border: 1px solid var(--cv-line);
    background: var(--cv-surface);
    color: var(--cv-ink);
    cursor: pointer;
    min-height: 40px;
    text-decoration: none !important;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    font-family: var(--cv-font);
    line-height: 1;
}
.cv-btn:hover { background: var(--cv-line-soft); border-color: var(--cv-ink-faint); }
.cv-btn--primary { background: var(--cv-brand); border-color: var(--cv-brand); color: #fff; }
.cv-btn--primary:hover { background: var(--cv-brand-light); border-color: var(--cv-brand-light); color: #fff; }
.cv-btn--green   { background: var(--cv-green); border-color: var(--cv-green); color: #fff; }
.cv-btn--red     { background: var(--cv-red); border-color: var(--cv-red); color: #fff; }
.cv-btn--ghost   { background: transparent; }

/* ---------------------------------------------------------------------------
 * RESPONSIVE TABLE FRAME (shared)
 * ------------------------------------------------------------------------- */

.cv-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
    background: var(--cv-surface);
    box-shadow: var(--cv-shadow);
}
.cv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: var(--cv-surface);
}
.cv-table thead th {
    background: var(--cv-surface-soft);
    text-align: left;
    font-weight: 600;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cv-line);
    color: var(--cv-ink-muted);
    text-transform: uppercase;
    font-size: var(--cv-label);
    letter-spacing: 0.5px;
}
.cv-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cv-line-soft);
    color: var(--cv-ink);
    vertical-align: top;
}
.cv-table tbody tr:last-child td { border-bottom: 0; }
.cv-table tbody tr:hover { background: var(--cv-surface-soft); }

@media (max-width: 600px) {
    .cv-section { padding: 14px; }
    .cv-section__head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cv-table thead th, .cv-table tbody td { padding: 9px 10px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
 * INVENTORY-TYPE CHIPS (Units-of-Truth visibility)
 * Surfaced in lifecycle views — read-only badges sourced from Brief lines.
 * ------------------------------------------------------------------------- */

.cv-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    border: 1px solid var(--cv-line);
    background: var(--cv-line-soft);
    color: var(--cv-ink-muted);
    line-height: 1.4;
}
.cv-chip--paid       { background: var(--cv-blue-soft);  color: var(--cv-blue-text);  border-color: var(--cv-blue-border); }
.cv-chip--bonus      { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.cv-chip--sponsorship{ background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.cv-chip--makegood   { background: var(--cv-amber-soft); color: var(--cv-amber-text); border-color: var(--cv-amber-border); }
.cv-chip--added_value{ background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.cv-chip--excluded   { background: var(--cv-line-soft);  color: var(--cv-ink-faint);  border-color: var(--cv-line); }

/* ---------------------------------------------------------------------------
 * UTILITY
 * ------------------------------------------------------------------------- */

.cv-mt-0 { margin-top: 0 !important; }
.cv-mt-1 { margin-top: 6px; }
.cv-mt-2 { margin-top: 12px; }
.cv-mt-3 { margin-top: 18px; }

.cv-muted { color: var(--cv-ink-faint); }
.cv-small { font-size: 12px; }
.cv-bold  { font-weight: 600; }
.cv-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* WC menu badge alignment for the brand sidebar */
@media (min-width: 901px) {
    .woocommerce-MyAccount-navigation-link--notifications > a::after {
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------------------
 * SIDEBAR LIFECYCLE GROUP LABELS (Block 2 M1)
 *
 * Injected by cs_shelf_tag_menu_groups() in shelf-navigation.php. Each
 * .cv-nav-group--first li gets a small label above it so the menu reads as
 * grouped operational stages. Desktop only — on mobile (horizontal scroll
 * strip) the labels are hidden so the strip stays compact.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * MY ACCOUNT TWO-COLUMN LAYOUT — theme-independent (Block 2 M4)
 *
 * The plugin must OWN the two-column shell. Themes either don't define one
 * (so content drops below the sidebar on pages with real content like
 * Notifications / Makegoods / Notification Sharing), or constrain the outer
 * page container too narrowly. We define the layout entirely in the plugin
 * so installing it on any theme produces the same nav-left / content-right
 * account shell.
 *
 * Strategy:
 *   - Widen the page container on body.woocommerce-account so the account
 *     area has room for real content.
 *   - Flex the wrapper that contains BOTH the nav and the content. We find
 *     it via :has(.woocommerce-MyAccount-navigation) plus the canonical WC
 *     wrapper classes for browsers without :has() and for non-standard
 *     themes.
 *   - Pin the sidebar to 260px so the theme cannot stretch it.
 *   - Let the content flex-fill, with min-width:0 so wide tables shrink and
 *     scroll inside the content column instead of overflowing the row and
 *     pushing the content below the sidebar.
 *   - Strip any float on both children so the flex layout is authoritative.
 * ------------------------------------------------------------------------- */

@media (min-width: 901px) {
    /* Widen the page container. Themes constrain WC pages via various
     * wrappers; cover the common ones so the account area gets ~1400px. */
    body.woocommerce-account .site-content,
    body.woocommerce-account .site-main,
    body.woocommerce-account .content-area,
    body.woocommerce-account main,
    body.woocommerce-account main.site-main,
    body.woocommerce-account #primary,
    body.woocommerce-account #main,
    body.woocommerce-account #content,
    body.woocommerce-account .entry-content,
    body.woocommerce-account .page-content,
    body.woocommerce-account article.page,
    body.woocommerce-account article.type-page,
    body.woocommerce-account .container,
    body.woocommerce-account .container-fluid,
    body.woocommerce-account .e-con-inner,
    body.woocommerce-account .elementor-container,
    body.woocommerce-account .elementor-widget-shortcode,
    body.woocommerce-account .elementor-widget-woocommerce-my-account {
        max-width: 1400px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* Two-column flex shell — own the layout. The :has() selectors find the
     * actual parent of the nav regardless of theme markup; the static
     * selectors are fallbacks for non-:has browsers and non-standard wrappers.
     * After the defensive JS runs the nav is wrapped in .cv-sidebar, which
     * becomes the flex item; the selectors also match the unwrapped fallback. */
    body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation),
    body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
    body.woocommerce-account .woocommerce:has(> .cv-sidebar),
    body.woocommerce-account .woocommerce:has(.cv-sidebar),
    body.woocommerce-account div:not(.cv-sidebar):has(> .woocommerce-MyAccount-navigation),
    body.woocommerce-account div:not(.cv-sidebar):has(> .cv-sidebar),
    body.woocommerce-account .woocommerce-MyAccount,
    body.woocommerce-account form.woocommerce-MyAccount,
    body.woocommerce-account .u-columns.woocommerce-MyAccount,
    body.woocommerce-account .woocommerce-MyAccount.u-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    /* Fixed-width sidebar column. Applies to .cv-sidebar (when the defensive
     * JS has wrapped the nav) AND to the bare .woocommerce-MyAccount-navigation
     * (fallback for any environment where the JS has not yet run). */
    body.woocommerce-account .cv-sidebar,
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 260px !important;
        width: 260px !important;
        max-width: 260px !important;
        min-width: 0 !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
        order: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

    /* When wrapped by .cv-sidebar, the inner nav fills the wrapper and lets
     * .cv-sidebar own the column dimensions / chrome. */
    body.woocommerce-account .cv-sidebar > .woocommerce-MyAccount-navigation,
    body.woocommerce-account .cv-sidebar > nav.woocommerce-MyAccount-navigation {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: 0 !important;
    }

    /* Content fills the rest. min-width:0 is critical so the flex item can
     * shrink (and inner tables can scroll) instead of pushing the row wider
     * than the parent and wrapping below the sidebar. */
    body.woocommerce-account .woocommerce-MyAccount-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
        order: 2 !important;
    }

    /* Wide tables scroll horizontally inside the content column rather than
     * forcing the column wider and breaking the flex row. */
    body.woocommerce-account .woocommerce-MyAccount-content .cv-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .my-campaigns-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .campaigns-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .ads-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .ads-booked-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table-wrap,
    body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders-wrap {
        overflow-x: auto !important;
        max-width: 100% !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive,
    body.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders,
    body.woocommerce-account .woocommerce-MyAccount-content table.cv-table,
    body.woocommerce-account .woocommerce-MyAccount-content table.cs-uploads,
    body.woocommerce-account .woocommerce-MyAccount-content table.cs-upload-history-table {
        max-width: 100% !important;
    }
}

/* Mobile: stack content BELOW the nav strip at full width. The fixed 260px
 * sidebar from the desktop rules must NOT apply here — the nav becomes a
 * horizontal scroll strip (styled in the earlier max-width: 900px block). */
@media (max-width: 900px) {
    body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation),
    body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
    body.woocommerce-account div:not(.cv-sidebar):has(> .woocommerce-MyAccount-navigation),
    body.woocommerce-account .woocommerce-MyAccount,
    body.woocommerce-account form.woocommerce-MyAccount,
    body.woocommerce-account .u-columns.woocommerce-MyAccount,
    body.woocommerce-account .woocommerce-MyAccount.u-columns {
        display: block !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
    }
}

@media (min-width: 901px) {
    /* Visible section divider: thin top border + small uppercase label above
     * each group's first item. Together these make the menu read as grouped
     * lifecycle stages instead of one flat list. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--first {
        position: relative;
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    /* The OVERVIEW group always anchors the top of the sidebar directly
     * below the logo header — which already has its own border-bottom.
     * Suppress the redundant top border on the first --first item so we
     * don't get two parallel divider lines stacking. Both selectors are
     * listed so the rule wins regardless of which class WC happens to
     * write first on the <li>. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--overview.cv-nav-group--first,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--first.cv-nav-group--overview,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--first:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }
    /* Also ensure the label text inside the dashboardd link sits next to
     * the icon (left-aligned), in case any legacy stylesheet leaves a
     * stray text-align: center / display: inline-block on the anchor. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboardd a {
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--first::before {
        display: block;
        padding: 0 14px 8px 14px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55) !important;
        opacity: 1 !important;
        background: transparent !important;
        border: 0 !important;
    }
    /* Group label text per stage (set via the modifier class). */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--overview::before  { content: "OVERVIEW"; }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--setup::before     { content: "SETUP & SCHEDULING"; }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--outcomes::before  { content: "OUTCOMES & NOTIFICATIONS"; }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--history::before   { content: "HISTORY & REFERENCE"; }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--account::before   { content: "ACCOUNT"; }
}

@media (max-width: 900px) {
    body.woocommerce-account .woocommerce-MyAccount-navigation li.cv-nav-group--first::before {
        content: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * SIDEBAR SHELL (Block 2 M5) — logo header + bottom-pinned logout
 *
 * The defensive JS in shelf-navigation.php wraps the WC <nav> in a
 * <div class="cv-sidebar"> and prepends a .cv-sidebar-logo header so the
 * sidebar reads as an app-shell rather than a bare WC link list. CSS pins
 * .cv-sidebar to the viewport (sticky), gives it a flex column so the
 * logout li can be pushed to the bottom, and moves the dark brand chrome
 * from the inner nav onto the wrapper so the logo header shares the
 * background.
 * ------------------------------------------------------------------------- */

@media (min-width: 901px) {
    /* Move the dark brand chrome from the inner nav onto .cv-sidebar so the
     * logo header is part of the same dark panel. The earlier rules dressing
     * .woocommerce-MyAccount-navigation are reset here when it sits inside
     * .cv-sidebar (the wrapper now owns background / padding / shadow). */
    body.woocommerce-account .cv-sidebar {
        background: var(--cv-brand) !important;
        border-radius: var(--cv-radius) !important;
        box-shadow: var(--cv-shadow) !important;
        padding: 14px 10px 12px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        position: sticky !important;
        top: 24px !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 48px) !important;
        overflow-y: auto !important;
        /* Hide the scrollbar entirely — scrolling still works (wheel /
         * trackpad / keyboard) but no visible track or thumb is rendered
         * against the navy chrome. */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    body.woocommerce-account .cv-sidebar::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }
    body.woocommerce-account .cv-sidebar > nav.woocommerce-MyAccount-navigation,
    body.woocommerce-account .cv-sidebar > .woocommerce-MyAccount-navigation {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    body.woocommerce-account .cv-sidebar .woocommerce-MyAccount-navigation > ul {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    /* The active theme (or another plugin) sets explicit `order:` values on
     * each menu <li> via CSS, which would otherwise visually re-sort the
     * sidebar regardless of DOM order — defeating the lifecycle reorder we
     * do server-side + via JS. Force `order: 0` everywhere so flex follows
     * the actual DOM order. Customer-logout already sits last in the DOM,
     * so it still ends up at the bottom. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li,
    body.woocommerce-account .cv-sidebar .woocommerce-MyAccount-navigation li {
        order: 0 !important;
    }

    /* Logo header at the top of the sidebar. Centered logo + product name
     * stacked beside it. Sits above the menu separated by a thin divider.
     * Rendered as an <a> linking to /my-account/ when an account URL is
     * known, so include link-only resets (no underline, inherits colour,
     * subtle hover lift). Selectors target both the <div> and <a> forms
     * for safety. */
    body.woocommerce-account .cv-sidebar-logo,
    body.woocommerce-account a.cv-sidebar-logo {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 6px 8px 16px 8px !important;
        margin: 0 4px 12px 4px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
        flex-shrink: 0 !important;
        text-decoration: none !important;
        color: inherit !important;
        cursor: pointer;
        transition: opacity 0.15s ease !important;
        outline: none !important;
        box-shadow: none !important;
    }
    body.woocommerce-account a.cv-sidebar-logo:hover,
    body.woocommerce-account a.cv-sidebar-logo:focus,
    body.woocommerce-account a.cv-sidebar-logo:focus-visible,
    body.woocommerce-account a.cv-sidebar-logo:active {
        opacity: 0.85 !important;
        text-decoration: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    /* The active theme applies `a img { border: ... }` to images inside
     * anchors, which now wraps a black box around the brand mark when
     * the logo header itself became an <a>. Reset img-in-anchor borders
     * + outlines + box-shadows so the logo sits clean. */
    body.woocommerce-account .cv-sidebar-logo img.cv-sidebar-logo__img,
    body.woocommerce-account a.cv-sidebar-logo img,
    body.woocommerce-account a.cv-sidebar-logo img.cv-sidebar-logo__img {
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .cv-sidebar-logo__img {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        display: block !important;
    }
    .cv-sidebar-logo__text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
    }
    .cv-sidebar-logo__brand {
        display: block !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        letter-spacing: 0.3px !important;
    }
    .cv-sidebar-logo__tm {
        font-size: 8px !important;
        margin-left: 2px !important;
        vertical-align: super !important;
        color: rgba(255, 255, 255, 0.55) !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    /* Icon + label rhythm inside each link. The link is already display:flex
     * from the earlier rules; this sizes the SVG and keeps the label fluid. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li > a {
        gap: 12px !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation .cv-nav-icon {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        color: rgba(255, 255, 255, 0.78) !important;
        stroke: currentColor !important;
        fill: none !important;
        display: block !important;
        transition: color 0.12s ease !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li > a:hover .cv-nav-icon,
    body.woocommerce-account .woocommerce-MyAccount-navigation li > a:focus .cv-nav-icon,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a .cv-nav-icon,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active > a .cv-nav-icon {
        color: #ffffff !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation .cv-nav-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Log out — distinct button, pushed to the bottom of the sidebar. The
     * margin-top:auto needs the ancestor <ul> as a flex column (set above).
     * Visual divider above; bordered button styling; brand-red hover state. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: auto !important;
        margin-bottom: 2px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        /* Suppress the section-group divider chrome if the reorder applied
         * cv-nav-group--first to logout in any edge case — the bottom-pinned
         * button owns its own separator. */
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout::before {
        content: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a {
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: var(--cv-radius-sm) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 11px 14px !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:focus {
        background: var(--cv-brand-accent) !important;
        border-color: var(--cv-brand-accent) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a .cv-nav-icon {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover .cv-nav-icon,
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:focus .cv-nav-icon {
        color: #ffffff !important;
    }
}

/* Mobile: sidebar shell collapses to a simple container so the existing
 * horizontal-scroll strip behaviour (defined further up) continues to apply.
 * The logo header sits above the strip; logout returns to the inline pill
 * row rather than a bottom-pinned button. */
@media (max-width: 900px) {
    body.woocommerce-account .cv-sidebar {
        display: block !important;
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        background: var(--cv-brand) !important;
        border-radius: var(--cv-radius) !important;
        padding: 10px 12px !important;
        margin-bottom: 14px !important;
    }
    body.woocommerce-account .cv-sidebar > nav.woocommerce-MyAccount-navigation,
    body.woocommerce-account .cv-sidebar > .woocommerce-MyAccount-navigation {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    body.woocommerce-account .cv-sidebar-logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 4px 4px 10px 4px !important;
        margin: 0 0 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    .cv-sidebar-logo__img {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
    }
    .cv-sidebar-logo__text {
        display: flex;
        flex-direction: row;
        gap: 4px;
        line-height: 1.2;
    }
    .cv-sidebar-logo__brand {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 13px !important;
    }
    .cv-sidebar-logo__tm {
        font-size: 8px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        vertical-align: super !important;
    }
    /* Icons stay visible but smaller in the mobile pill row. */
    body.woocommerce-account .woocommerce-MyAccount-navigation .cv-nav-icon {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        stroke: currentColor !important;
        fill: none !important;
    }
    /* Reset the bottom-pinned logout styling on mobile — it goes back to
     * being a regular pill in the horizontal scroll strip. */
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a {
        background: rgba(255, 255, 255, 0.10) !important;
        border: 0 !important;
        border-radius: 999px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 8px 14px !important;
    }
}

/* ---------------------------------------------------------------------------
 * DASHBOARD QUICK-JUMP ANCHOR STRIP (Block 2 M1 — reduced long-scroll)
 *
 * Companion to the lifecycle stage strip. Lets users jump to dashboard
 * sections (KPIs, Time Zone Accuracy, Booked vs Delivered, etc.) without
 * scrolling the full page. Injected by cv_dashboard_quick_jump_strip_html().
 * ------------------------------------------------------------------------- */

.cv-quick-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--cv-radius);
    padding: 10px 14px;
    margin: 0 auto 16px auto;
}
.cv-quick-jump__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 8px;
}
.cv-quick-jump a {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
    line-height: 1;
    min-height: 32px;
}
.cv-quick-jump a:hover,
.cv-quick-jump a:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.18);
}
/* Active chip — the section the user most recently jumped to. */
.cv-quick-jump a.is-active {
    background: var(--cv-amber) !important;
    color: #1a1a1a !important;
    border-color: var(--cv-amber) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}
@media (max-width: 600px) {
    .cv-quick-jump { overflow-x: auto; flex-wrap: nowrap; }
    .cv-quick-jump a { white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
 * QUICK JUMP TARGET HIGHLIGHT
 *
 * When a quick-jump chip is clicked, the target heading or section gets the
 * .cv-jump-flash class for ~2 seconds. CSS plays a brief pulse with a brand
 * amber glow + a left ribbon so it's unmistakable what the user is now
 * viewing.
 * ------------------------------------------------------------------------- */

@keyframes cv-jump-flash {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0),  inset 4px 0 0 0 rgba(245, 158, 11, 0); background-color: transparent; }
    8%   { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.35), inset 4px 0 0 0 rgba(245, 158, 11, 1); background-color: rgba(245, 158, 11, 0.16); }
    35%  { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.20), inset 4px 0 0 0 rgba(245, 158, 11, 1); background-color: rgba(245, 158, 11, 0.10); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0),    inset 4px 0 0 0 rgba(245, 158, 11, 0); background-color: transparent; }
}

.cv-jump-flash {
    border-radius: 8px;
    animation: cv-jump-flash 2.2s ease-in-out both;
    /* The animation needs `box-shadow` & `background-color` as animated
     * properties; the rule above handles both, plus a left-edge amber bar
     * via the inset box-shadow. The text colour is left to the element
     * itself so dark chart titles stay readable while flashing. */
    position: relative;
    z-index: 1;
}
/* When the target is a heading (h2/h3/h4), give it a touch more breathing
 * room so the flash isn't cropped. */
h2.cv-jump-flash,
h3.cv-jump-flash,
h4.cv-jump-flash {
    padding: 6px 12px;
    margin-left: -12px;
    margin-right: -12px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .cv-jump-flash {
        animation: none;
        background-color: rgba(245, 158, 11, 0.12);
        box-shadow: inset 4px 0 0 0 var(--cv-amber);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------
 * MOBILE-RESPONSIVE OVERRIDES (Block 2 M1)
 * Ensures dashboard/lifecycle views remain usable on phones and tablets.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .cv-stage-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-kpi-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cv-stage-strip { grid-template-columns: 1fr; }
    .cv-kpi-grid    { grid-template-columns: 1fr; }
    .cv-kpi__value  { font-size: 22px; }
    .cv-btn         { padding: 10px 14px; font-size: 12px; min-height: 44px; }
}

/* Existing dashboard 3-column shortcode — let it stack on mobile rather
 * than overflow horizontally. Selectors target the existing markup so we
 * don't have to touch the legacy structure. */
@media (max-width: 900px) {
    .ads-dashboard-3col { grid-template-columns: 1fr !important; display: grid !important; gap: 18px; }
    .ads-dashboard-3col .col { width: auto !important; }
}

/* Ads Booked / shop_table_responsive — make tap-friendly on phones. */
@media (max-width: 600px) {
    body.woocommerce-account .shop_table_responsive td { padding: 10px 12px; font-size: 13px; min-height: 40px; }
    body.woocommerce-account .shop_table_responsive td.button-cell .button,
    body.woocommerce-account .shop_table_responsive td .button { min-height: 40px; padding: 8px 14px; }
}

/* Accessibility — ensure focus ring is visible across brand surfaces. */
.cv-btn:focus-visible,
.cv-pill:focus-visible,
.woocommerce-MyAccount-navigation li a:focus-visible {
    outline: 2px solid var(--cv-amber);
    outline-offset: 2px;
}

/* Reduced motion — disable subtle hover lift transforms. */
@media (prefers-reduced-motion: reduce) {
    .cv-kpi, .cs-pdc__kpi { transition: none !important; }
    .cv-kpi:hover, .cs-pdc__kpi:hover { transform: none !important; }
}

/* ---------------------------------------------------------------------------
 * THEME COMPATIBILITY OVERRIDES (Block 2 — post-review polish)
 *
 * The active site theme paints a dark page background, defaults text to a
 * dark colour, and adds underline-style borders between WC menu items.
 * These rules normalise the operational areas so the Connection
 * Verification™ brand reads cleanly regardless of theme assumptions.
 * ------------------------------------------------------------------------- */

/* --- Account content panel: ensure readable text and inputs --- */
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content * {
    text-shadow: none;
}
body.woocommerce-account .woocommerce-MyAccount-content h1,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content h4,
body.woocommerce-account .woocommerce-MyAccount-content h5,
body.woocommerce-account .woocommerce-MyAccount-content h6 {
    color: var(--cv-ink) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content p,
body.woocommerce-account .woocommerce-MyAccount-content label,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row label {
    color: var(--cv-ink) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content small,
body.woocommerce-account .woocommerce-MyAccount-content .description {
    color: var(--cv-ink-faint) !important;
}

/* --- Form fields readable across all WC My Account screens --- */
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="url"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="date"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="time"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="search"],
body.woocommerce-account .woocommerce-MyAccount-content textarea,
body.woocommerce-account .woocommerce-MyAccount-content select {
    background-color: #ffffff !important;
    color: var(--cv-ink) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    box-shadow: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-content input::placeholder,
body.woocommerce-account .woocommerce-MyAccount-content textarea::placeholder {
    color: var(--cv-ink-faint) !important;
    opacity: 1 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus {
    border-color: var(--cv-brand-light) !important;
    box-shadow: 0 0 0 3px rgba(11, 61, 92, 0.15) !important;
    outline: none !important;
}

/* --- Generic links inside the content panel readable on white --- */
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.cv-btn):not(.cs-brief__btn):not(.cs-pdc__pill):not(.cv-pill) {
    color: var(--cv-brand-light) !important;
    text-decoration: underline;
    text-decoration-color: rgba(21, 90, 133, 0.35);
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.cv-btn):not(.cs-brief__btn):not(.cs-pdc__pill):not(.cv-pill):hover {
    color: var(--cv-brand) !important;
    text-decoration-color: var(--cv-brand);
}

/* --- Operational buttons rendered as <a> (e.g. "Download CSV") keep their
 *     own button text colour. The theme's .colors-dark .entry-content a rule
 *     would otherwise repaint them faded grey, since the generic-link rule
 *     above deliberately excludes .cv-btn. Colour-filled variants stay white. */
body.woocommerce-account .woocommerce-MyAccount-content a.cv-btn {
    color: var(--cv-ink) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content a.cv-btn--primary,
body.woocommerce-account .woocommerce-MyAccount-content a.cv-btn--green,
body.woocommerce-account .woocommerce-MyAccount-content a.cv-btn--red {
    color: #fff !important;
}

/* Highlight "Add New ..." links so they aren't lost in white-on-white.
 *
 * Excludes .cv-dashboard-empty__link-card so the New Campaign quick-link
 * tile on /my-account/ keeps its uniform white-card / brand-icon styling
 * — without the :not() the href*="add-new-" match would repaint that one
 * card as a navy pill (navy bg + white text + invisible navy icon). */
body.woocommerce-account .woocommerce-MyAccount-content a[href*="add_new_"]:not(.cv-dashboard-empty__link-card),
body.woocommerce-account .woocommerce-MyAccount-content a[href*="add-new-"]:not(.cv-dashboard-empty__link-card),
body.woocommerce-account .woocommerce-MyAccount-content a[href*="?add="]:not(.cv-dashboard-empty__link-card),
body.woocommerce-account .woocommerce-MyAccount-content a.add-new,
body.woocommerce-account .woocommerce-MyAccount-content .cs-add-new-link {
    display: inline-block;
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    padding: 7px 14px !important;
    border-radius: var(--cv-radius-sm);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    border: 1px solid var(--cv-brand) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content a[href*="delete_"]:not(.button):not(.btn-danger),
body.woocommerce-account .woocommerce-MyAccount-content a.delete:not(.button) {
    color: var(--cv-red-text) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-color: rgba(185, 28, 28, 0.4);
}
body.woocommerce-account .woocommerce-MyAccount-content a[href*="delete_"]:not(.button):not(.btn-danger):hover,
body.woocommerce-account .woocommerce-MyAccount-content a.delete:not(.button):hover {
    text-decoration-color: var(--cv-red-text) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content a[href*="duplicate_"]:not(.button),
body.woocommerce-account .woocommerce-MyAccount-content a.duplicate:not(.button) {
    color: var(--cv-brand-light) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-color: rgba(21, 90, 133, 0.4);
}

/* --- WC buttons styled to the brand on white content area --- */
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"].button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border: 1px solid var(--cv-brand) !important;
    border-radius: var(--cv-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    padding: 8px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
    background: var(--cv-brand-light) !important;
    border-color: var(--cv-brand-light) !important;
}

/* ---------------------------------------------------------------------------
 * ADD PAYMENT METHOD — gateway selector (Block 2 — post-review polish)
 *
 * The native WooCommerce add-payment-method form (/my-account/add-payment-method/)
 * renders bare radios inside a <ul class="payment_methods"> that the theme
 * decorates with list bullets and no spacing. These rules drop the bullets,
 * turn each gateway into a selectable card (the checked one is highlighted via
 * :has(), already relied on elsewhere in this file), tidy the radio + logo +
 * description row, and focus the form into a single column. Scoped to
 * #add_payment_method so the saved-methods listing and checkout are untouched.
 * The brand banner + heading + intro above the form come from
 * cs_add_payment_method_brand_header() in inc/functions.php.
 * ------------------------------------------------------------------------- */

/* Focused single column — the white content card is full-width. */
body.woocommerce-account .woocommerce-MyAccount-content #add_payment_method {
    max-width: 560px;
}

/* Intro line under the brand banner. */
body.woocommerce-account .woocommerce-MyAccount-content .cv-payment-intro {
    color: var(--cv-ink-faint) !important;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 18px 0;
    max-width: 560px;
}

/* Gateway list — strip theme bullets / indents, lay out as a card stack. */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods,
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods.methods {
    list-style: none !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 12px;
}

/* Each gateway = a selectable card. */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods > li::marker {
    content: "" !important;
}

/* Highlight the chosen gateway (modern browsers; harmless where unsupported). */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods > li:has(input[type="radio"]:checked) {
    border-color: var(--cv-brand-light);
    box-shadow: 0 0 0 3px rgba(11, 61, 92, 0.10);
}

/* Radio control. */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods > li > input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    accent-color: var(--cv-brand);
    vertical-align: middle;
    cursor: pointer;
}

/* Gateway title row + logo (e.g. "PayPal" + mark). */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods > li > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 15px;
    font-weight: 600 !important;
    color: var(--cv-ink) !important;
    cursor: pointer;
}
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods > li label img {
    max-height: 22px;
    width: auto;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Gateway description / fields ("Pay via PayPal."). */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods .payment_box {
    margin: 12px 0 0 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--cv-ink-faint) !important;
    font-size: 13px;
}
/* WC paints a CSS triangle on .payment_box — wrong inside a bordered card. */
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods .payment_box::before {
    display: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-content ul.payment_methods .payment_box p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cv-ink-faint) !important;
}

/* Submit / PayPal smart-button row sits flush under the cards. */
body.woocommerce-account .woocommerce-MyAccount-content #add_payment_method .form-row {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Subscription plan cards (functions.php / plan selector) --- */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div,
body.woocommerce-account .woocommerce-MyAccount-content .plan-card,
body.woocommerce-account .woocommerce-MyAccount-content .subscription-plan {
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius) !important;
    padding: 16px 18px !important;
    box-shadow: var(--cv-shadow);
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-heading,
body.woocommerce-account .woocommerce-MyAccount-content .plan-card h2,
body.woocommerce-account .woocommerce-MyAccount-content .plan-card h3 {
    color: var(--cv-ink) !important;
    font-weight: 700 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-list,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container ul,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container li {
    color: var(--cv-ink) !important;
    background: transparent !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-description {
    color: var(--cv-ink-muted) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-btn-add,
body.woocommerce-account .woocommerce-MyAccount-content .plan-card .button {
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border-color: var(--cv-brand) !important;
}

/* --- Plan summary card (rendered inside view-campaigns) --- */
body.woocommerce-account .woocommerce-MyAccount-content .plan-summary,
body.woocommerce-account .woocommerce-MyAccount-content .enterprise-plan-card {
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border-radius: var(--cv-radius);
    padding: 18px 22px !important;
    box-shadow: var(--cv-shadow);
}
body.woocommerce-account .woocommerce-MyAccount-content .plan-summary *,
body.woocommerce-account .woocommerce-MyAccount-content .enterprise-plan-card * {
    color: #ffffff !important;
}

/* --- "LOG IN" / "Edit" link group above content (theme-injected) ---
 *     The screenshots show "LOG IN" / "Edit" hovering in dark/low-contrast
 *     text above the white card. Force visible. */
body.woocommerce-account .woocommerce-MyAccount-content > h1,
body.woocommerce-account .woocommerce-MyAccount-content > .edit-link,
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    color: var(--cv-ink) !important;
}

/* --- Notices & messages over the content panel --- */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    background: var(--cv-blue-soft) !important;
    border: 1px solid var(--cv-blue-border) !important;
    color: var(--cv-blue-text) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    background: var(--cv-red-soft) !important;
    border: 1px solid var(--cv-red-border) !important;
    color: var(--cv-red-text) !important;
}

/* ---------------------------------------------------------------------------
 * DASHBOARD SHORTCODE — readable summary boxes & chart panels
 * The dashboard renders on /dashboard with a global dark page background.
 * Force the operational cards to read cleanly on dark.
 * ------------------------------------------------------------------------- */

.ads-dashboard-3col .summary-box {
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius-sm) !important;
    padding: 14px 16px !important;
    box-shadow: var(--cv-shadow);
}
.ads-dashboard-3col .summary-box strong {
    color: var(--cv-brand) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    display: block;
    margin-top: 4px;
    line-height: 1.1;
}
.ads-dashboard-3col .summary-box .summary-subtitle,
.ads-dashboard-3col .summary-subtitle {
    color: var(--cv-ink-faint) !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    line-height: 1.4;
}
.ads-dashboard-3col h2,
.ads-dashboard-3col h3,
.ads-dashboard-3col .dashboard_title {
    color: #ffffff !important;
}
.ads-dashboard-3col .col-1,
.ads-dashboard-3col .col-3 {
    color: #ffffff;
}
.ads-dashboard-3col .donut-chart,
.ads-dashboard-3col .donut-wrapper {
    color: #ffffff !important;
}
.ads-dashboard-3col .donut-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
/* Donut canvases are painted solid white, so the centre percent must be
 * DARK to be readable. */
.ads-dashboard-3col .center-percent {
    color: var(--cv-ink) !important;
    font-weight: 700;
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

/* Dashboard charts no longer force a solid white background. With no data
 * (no campaign selected) the canvas was rendering as a blank white square,
 * making the whole dashboard look broken. Now the canvas is transparent —
 * Chart.js draws its coloured segments over the dark dashboard surface,
 * and empty charts simply blend in. */
.ads-dashboard-3col canvas {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
/* Chart canvases — solid white only when a campaign is selected (so the
 * dark-text axis labels and coloured bars remain readable). When no
 * campaign is loaded, the dashboard is shifted to a low-contrast state
 * behind the empty-state banner so the user isn't staring at solid white
 * placeholder rectangles. */
.ads-dashboard-3col #adsPieChart,
.ads-dashboard-3col #placementBarChart,
.ads-dashboard-3col #placementDistributionChart,
.ads-dashboard-3col #dailyPerformanceChart,
.ads-dashboard-3col #performanceChart {
    background: #ffffff !important;
    border-radius: var(--cv-radius-sm) !important;
    padding: 8px !important;
}
.ads-dashboard-3col .donut-wrapper canvas {
    background: #ffffff !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

/* When no campaign is selected, hide the dashboard skeleton entirely —
 * the empty-state card above is the only thing the user needs to see. */
.ads-dashboard-3col.is-empty {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * DASHBOARD EMPTY STATE (no campaign selected)
 * A welcoming, professional landing experience with a campaign picker and
 * operational quick-link cards (My Account, My Campaigns, New Campaign,
 * Notifications, Instructions).
 * ------------------------------------------------------------------------- */
.cv-dashboard-empty {
    position: relative;
    background: linear-gradient(135deg, var(--cv-brand) 0%, var(--cv-brand-light) 60%, var(--cv-accent) 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 0;
    margin: 0 auto 18px auto;
    max-width: 1440px !important;
    box-shadow: 0 4px 20px rgba(11, 61, 92, 0.25);
    /* NOTE: must stay `visible` so the campaign picker dropdown (.cv-picker__panel,
       position:absolute) can extend below the card edge. `overflow:hidden` here was
       clipping the dropdown to ~2 campaigns. Corner clipping of the decorative
       ::before is handled on the pseudo-element itself via border-radius below. */
    overflow: visible;
}
.cv-dashboard-empty::before {
    /* Subtle decorative grid pattern for premium feel. */
    content: "";
    position: absolute; inset: 0;
    border-radius: 14px; /* match the card so the pattern stays inside the rounded corners */
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.04) 0, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.04) 0, transparent 40%);
    pointer-events: none;
}
.cv-dashboard-empty__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 32px 32px 32px;
}
.cv-dashboard-empty__icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.cv-dashboard-empty__title {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.cv-dashboard-empty__sub {
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 14px !important;
    margin: 0;
    line-height: 1.55;
    max-width: 580px;
}
.cv-dashboard-empty__hint {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12px !important;
    margin: 10px 0 0 0 !important;
    font-style: italic;
}
.cv-dashboard-empty__form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
/* Native fallback select (only used inside <noscript>) — keep lightweight. */
.cv-dashboard-empty__select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    color: var(--cv-ink);
    border: 1px solid #ffffff;
    border-radius: var(--cv-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    min-width: 280px;
    min-height: 46px;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * CUSTOM CAMPAIGN PICKER (.cv-picker)
 *
 * A polished, brand-aligned dropdown that REPLACES the native <select> so we
 * can fully style the open panel (native option lists are rendered by the OS
 * and ignore most CSS). Behaviour:
 *   - Click trigger → open the panel
 *   - Each option is an <a> linking to the dashboard with ?campaign_id=…
 *   - Click outside or press Escape → close
 *   - Arrow keys + Enter to navigate via keyboard
 * Falls back to the <noscript> native select when JS is disabled.
 * ------------------------------------------------------------------------- */

.cv-picker {
    position: relative;
    display: inline-block;
    min-width: 320px;
    max-width: 100%;
    text-align: left;
}
.cv-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    font-family: var(--cv-font);
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    text-align: left;
    text-shadow: none;
}
.cv-picker__trigger:hover,
.cv-picker__trigger:focus-visible {
    outline: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
}
.cv-picker__label {
    flex: 1 1 auto;
    color: var(--cv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cv-picker__chevron {
    flex-shrink: 0;
    color: var(--cv-brand);
    transition: transform 0.18s ease;
}
.cv-picker[data-cv-open="true"] .cv-picker__chevron {
    transform: rotate(180deg);
}
.cv-picker__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    color: var(--cv-ink);
    border: 1px solid var(--cv-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    padding: 6px;
    z-index: 50;
    /* Static fallback cap; the picker JS tightens this on open to the exact space
       below the trigger so a long campaign list never runs past the viewport
       bottom. Either way the list scrolls internally once it exceeds the cap. */
    max-height: min(420px, calc(100vh - 160px));
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.cv-picker[data-cv-open="true"] .cv-picker__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.cv-picker__option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 12px !important;
    border-radius: 8px;
    color: var(--cv-ink) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
    box-shadow: none !important;
}
.cv-picker__option + .cv-picker__option {
    margin-top: 2px;
}
.cv-picker__option:hover,
.cv-picker__option:focus-visible,
.cv-picker__option.is-active {
    background: var(--cv-blue-soft) !important;
    color: var(--cv-brand) !important;
    outline: none;
}
.cv-picker__option-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cv-blue-soft);
    color: var(--cv-brand);
    border-radius: 6px;
}
.cv-picker__option:hover .cv-picker__option-icon,
.cv-picker__option:focus-visible .cv-picker__option-icon,
.cv-picker__option.is-active .cv-picker__option-icon {
    background: var(--cv-brand);
    color: #ffffff;
}
.cv-picker__option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-picker__option-arrow {
    flex-shrink: 0;
    color: var(--cv-ink-faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease;
}
.cv-picker__option:hover .cv-picker__option-arrow,
.cv-picker__option:focus-visible .cv-picker__option-arrow,
.cv-picker__option.is-active .cv-picker__option-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--cv-brand);
}
/* Custom scroll inside the panel */
.cv-picker__panel::-webkit-scrollbar { width: 6px; }
.cv-picker__panel::-webkit-scrollbar-thumb { background: var(--cv-line); border-radius: 3px; }
.cv-picker__panel::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 600px) {
    .cv-picker { min-width: 0; width: 100%; }
}
.cv-dashboard-empty__btn {
    background: #ffffff;
    color: var(--cv-brand);
    border: 1px solid #ffffff;
    border-radius: var(--cv-radius-sm);
    padding: 12px 18px;
    font-weight: 700;
    font-size: 13px;
    min-height: 46px;
    cursor: pointer;
}
.cv-dashboard-empty__link,
.cv-dashboard-empty__cta {
    display: inline-block;
    background: #ffffff !important;
    color: var(--cv-brand) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    padding: 12px 22px;
    border-radius: var(--cv-radius-sm);
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cv-dashboard-empty__cta:hover,
.cv-dashboard-empty__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}
.cv-dashboard-empty__no-campaigns {
    margin-top: 18px;
}

/* Operational quick-link card grid */
.cv-dashboard-empty__quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 28px 0 18px 0;
    width: 100%;
    max-width: 920px;
}
.cv-dashboard-empty__link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 16px 14px;
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: center;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cv-dashboard-empty__link-card:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    color: #ffffff !important;
}
.cv-dashboard-empty__link-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 4px;
    color: #ffffff !important;
}
.cv-dashboard-empty__link-label {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: 0.2px;
}
.cv-dashboard-empty__link-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.68) !important;
    line-height: 1.3;
}
.cv-dashboard-empty__foot {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px !important;
    font-style: italic;
    margin: 8px 0 0 0 !important;
    line-height: 1.5;
    max-width: 640px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 600px) {
    .cv-dashboard-empty__inner { padding: 32px 20px 24px 20px; }
    .cv-dashboard-empty__title { font-size: 20px !important; }
    .cv-dashboard-empty__select { min-width: 0; width: 100%; }
    .cv-dashboard-empty__quick-links { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ===========================================================================
 * DASHBOARD WIDTH CONSISTENCY (Block 2 — post-PDF refinement)
 *
 * The dashboard container .ads-dashboard-3col is capped at max-width:1440px
 * with margin: 0 auto. The new sections (brand banner, lifecycle stage strip,
 * quick jump, empty state) were rendering full-bleed. Constrain them all to
 * the same canonical width + horizontal padding so the page reads as one
 * consistent column instead of full-width-on-top, narrow-below.
 *
 * The selectors deliberately scope to the /dashboard page (.is-page-dashboard
 * body class + the existence of .ads-dashboard-3col sibling), so the banner
 * keeps its full-width behaviour on the WC My Account screens where it
 * already lives inside a narrow content card.
 * =========================================================================== */

body.page .cv-brand-banner,
body.page-template .cv-brand-banner,
.is-page-dashboard .cv-brand-banner,
.ads-dashboard-3col ~ .cv-brand-banner,
.cv-brand-banner.is-dashboard,
.cv-brand-banner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
body.page .cv-stage-strip,
.cv-stage-strip {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
body.page .cv-quick-jump,
.cv-quick-jump {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
body.page .cv-dashboard-empty,
.cv-dashboard-empty {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the brand banner / stage strip / quick jump have the SAME horizontal
 * padding as the dashboard container (.ads-dashboard-3col uses padding:30px,
 * so we leave that container alone but match the sections' inner padding to
 * its visible inner edge with a sensible default). On narrow viewports the
 * sections inherit their existing responsive padding. */

/* Inside the WC My Account content card the banner already lives in a tight
 * white panel, so explicitly DISABLE the 1440px cap there to avoid an
 * unnecessary inner gutter. */
body.woocommerce-account .woocommerce-MyAccount-content .cv-brand-banner,
body.woocommerce-account .woocommerce-MyAccount-content .cv-stage-strip,
body.woocommerce-account .woocommerce-MyAccount-content .cv-quick-jump,
body.woocommerce-account .woocommerce-MyAccount-content .cv-dashboard-empty {
    max-width: none;
}

/* ---------------------------------------------------------------------------
 * CHART EMPTY STATES (Block 2 — post-PDF refinement)
 * Shown when a chart has no data so the user sees a clear message instead of
 * a blank white card. Currently used by the Share of Delivered Ads pie chart
 * which renders zeros until Post-Times evidence is uploaded.
 * ------------------------------------------------------------------------- */

.cv-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    background: #ffffff;
    border: 1px dashed var(--cv-line);
    border-radius: var(--cv-radius-sm);
    color: var(--cv-ink);
    padding: 36px 20px;
    margin: 6px 0 0 0;
    min-height: 200px;
}
.cv-chart-empty__icon {
    font-size: 28px;
    line-height: 1;
    opacity: 0.7;
}
.cv-chart-empty__title {
    color: var(--cv-ink);
    font-weight: 700;
    font-size: 14px;
}
.cv-chart-empty__sub {
    color: var(--cv-ink-faint);
    font-size: 12px;
    line-height: 1.5;
    max-width: 360px;
}

/* "Go to My Account" CTA in the brand banner already has a strong colour,
 * but ensure it's separated from the banner content visually. */
.ads-dashboard-3col .filter-row select,
.ads-dashboard-3col .filter-row input[type="text"] {
    background: #2f2f2f !important;
    color: #ffffff !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 20px !important;
}

/* ---------------------------------------------------------------------------
 * ADS-BOOKED / TIME ZONE / RATE-ROLE GROUP CARDS
 * The card listings show very faint "Add New ..." text in the screenshots.
 * Strengthen the top action area.
 * ------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
    color: var(--cv-ink) !important;
    background: var(--cv-surface-soft) !important;
    font-weight: 700 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    color: var(--cv-ink) !important;
    background: #ffffff !important;
    border-color: var(--cv-line-soft) !important;
}

/* Address card */
body.woocommerce-account .woocommerce-MyAccount-content address {
    color: var(--cv-ink) !important;
    background: var(--cv-surface-soft) !important;
    padding: 12px 14px;
    border-radius: var(--cv-radius-sm);
    border: 1px solid var(--cv-line);
    font-style: normal;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * BRAND BANNER REINFORCEMENT
 * Make sure the banner reads on dark themes — !important to beat overrides.
 * ------------------------------------------------------------------------- */

.cv-brand-banner {
    background: linear-gradient(135deg, var(--cv-brand) 0%, var(--cv-brand-light) 100%) !important;
    color: #ffffff !important;
}
.cv-brand-banner .cv-brand-banner__mark,
.cv-brand-banner .cv-brand-banner__tag,
.cv-brand-banner span {
    color: #ffffff !important;
}

/* ===========================================================================
 * PROFESSIONAL POLISH PASS (Block 2 — post-PDF review)
 *
 * Targeted fixes for issues surfaced in the live-site PDF walkthrough:
 *   1. Makegoods table — date wrapping, status column clipping
 *   2. Subscription plan cards — professional redesign
 *   3. Account "Password change" fieldset — dark-on-dark labels
 *   4. Payment methods — button spacing
 *   5. Orders table — View button padding
 *   6. View Campaigns enterprise plan card — readability
 *   7. Rate Role / Ads Booked — Delete Group buttons should be red
 *   8. Ads Booked bottom table — horizontal scroll handling
 *   9. Pre-delivery table — classification column overflow
 *  10. Dashboard donut/pie chart contrast
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. MAKEGOODS — table cell spacing + non-wrapping date/time
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content .cv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
body.woocommerce-account .woocommerce-MyAccount-content .cv-table {
    min-width: 760px;        /* Allow horizontal scroll on narrow content cards */
    table-layout: auto;
}
body.woocommerce-account .woocommerce-MyAccount-content .cv-table thead th,
body.woocommerce-account .woocommerce-MyAccount-content .cv-table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    white-space: nowrap;
}
body.woocommerce-account .woocommerce-MyAccount-content .cv-table tbody td:last-child {
    white-space: normal;     /* Reason column wraps */
    min-width: 160px;
    max-width: 320px;
}
/* Status pill column — keep visible even when scrolling */
body.woocommerce-account .woocommerce-MyAccount-content .cv-table .cv-pill {
    display: inline-flex;
    min-width: max-content;
}

/* ---------------------------------------------------------------------------
 * 2. SUBSCRIPTION PLAN CARDS — professional redesign
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 18px 0;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div {
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius) !important;
    padding: 24px 22px !important;
    box-shadow: var(--cv-shadow);
    display: flex !important;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div:hover {
    box-shadow: var(--cv-shadow-lift);
    transform: translateY(-2px);
}
/* Plan title (STARTER PLAN / PROFESSIONAL PLAN / ENTERPRISE PLAN) */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div > p:first-of-type,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-heading,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div > strong:first-child,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div h2,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div h3,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div h4 {
    color: var(--cv-brand) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
}
/* Plan price line */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-price,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div .price,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div > p:nth-of-type(2) {
    color: var(--cv-ink) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 6px 0 10px 0 !important;
    letter-spacing: -0.02em !important;
}
/* Plan feature list — checkmark bullets */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container ul,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-list {
    list-style: none !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--cv-ink) !important;
    flex: 1 1 auto;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container ul li,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-list li {
    position: relative;
    padding: 4px 0 4px 22px !important;
    font-size: 13px !important;
    color: var(--cv-ink) !important;
    background: transparent !important;
    line-height: 1.45 !important;
    border: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container ul li::before,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8L7 12L13 4' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
}
/* Strong wording within feature list (e.g. "AUD and exclude applicable taxes.") */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container ul li strong,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-list li strong {
    color: var(--cv-ink) !important;
    font-weight: 700 !important;
}
/* Plan CTA buttons */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-btn-add,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container a.button,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .button {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border: 1px solid var(--cv-brand) !important;
    border-radius: var(--cv-radius-sm) !important;
    padding: 11px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    min-height: 42px !important;
    margin-top: 12px !important;
    cursor: pointer;
    transition: background 0.15s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-btn-add:hover,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container a.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .button:hover {
    background: var(--cv-brand-light) !important;
    border-color: var(--cv-brand-light) !important;
}
/* Current plan — visually distinct green */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .current,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container button.current,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .button.current,
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-btn-add.current {
    background: var(--cv-green) !important;
    border-color: var(--cv-green) !important;
    color: #ffffff !important;
    pointer-events: none;
}
/* Highlight active plan card with a brand-coloured ribbon */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div:has(.current),
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container > div:has(.zee-btn-add.current) {
    border-color: var(--cv-green) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18), var(--cv-shadow);
}
/* Monthly / Yearly toggle styling */
body.woocommerce-account .woocommerce-MyAccount-content .monthly-yearly-toggle,
body.woocommerce-account .woocommerce-MyAccount-content .plan-period-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cv-surface-soft);
    border: 1px solid var(--cv-line);
    border-radius: 999px;
    padding: 4px 6px;
    margin: 0 0 14px 0;
}

/* ---------------------------------------------------------------------------
 * 3. ACCOUNT "PASSWORD CHANGE" FIELDSET — labels & fields readable
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
    background: var(--cv-surface-soft) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius) !important;
    padding: 16px 18px !important;
    margin: 16px 0 !important;
    color: var(--cv-ink) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    color: var(--cv-ink) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 0 6px !important;
    background: transparent !important;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset label,
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend + p + label,
body.woocommerce-account .woocommerce-MyAccount-content fieldset .woocommerce-form-row label {
    color: var(--cv-ink) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    display: block;
    margin-bottom: 4px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content fieldset input[type="text"] {
    background-color: #ffffff !important;
    color: var(--cv-ink) !important;
}

/* ---------------------------------------------------------------------------
 * 4. PAYMENT METHODS — action button spacing
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods thead th,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods tbody td,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table thead th,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-top: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods tbody td,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody td {
    border-bottom: 1px solid var(--cv-line-soft) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table td.payment-method-actions,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods .button,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table .button {
    white-space: nowrap;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button + .button,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table .button + .button {
    margin-left: 8px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button.delete,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table .button.delete,
body.woocommerce-account .woocommerce-MyAccount-content a.delete {
    background: var(--cv-red) !important;
    border-color: var(--cv-red) !important;
    color: #ffffff !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button.delete:hover,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table .button.delete:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button.default,
body.woocommerce-account .woocommerce-MyAccount-content table.account-payment-methods-table .button.default {
    background: var(--cv-brand) !important;
    border-color: var(--cv-brand) !important;
    color: #ffffff !important;
}
/* Add a small pill for "Add payment method" button distinction */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods + p,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods + .form-wrapper {
    margin-top: 16px !important;
}

/* ---------------------------------------------------------------------------
 * 5. ORDERS TABLE — View button padding, row spacing
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders thead th,
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders tbody td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--cv-line-soft) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td:last-child .button {
    margin: 2px 4px 2px 0 !important;
    display: inline-block;
}
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_orders .order-actions .button + .button {
    margin-left: 6px !important;
}

/* ---------------------------------------------------------------------------
 * 6. VIEW CAMPAIGNS — plan summary card readability + actions column
 * ------------------------------------------------------------------------- */
/* The Enterprise/Professional plan summary card at the top of /view-campaigns
 * is rendered by cs_render_campaign_quota_box() with inline background:#111
 * and no text colour, which leaves it invisible on dark themes. Force the
 * brand gradient + readable text — !important wins against the inline style. */
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box,
body.woocommerce-account .woocommerce-MyAccount-content .plan-summary,
body.woocommerce-account .woocommerce-MyAccount-content .enterprise-plan-card,
body.woocommerce-account .woocommerce-MyAccount-content .plan-card-dark {
    background: linear-gradient(135deg, var(--cv-brand) 0%, var(--cv-brand-light) 100%) !important;
    color: #ffffff !important;
    border: 1px solid var(--cv-brand) !important;
    border-radius: var(--cv-radius) !important;
    padding: 20px 24px !important;
    box-shadow: var(--cv-shadow);
    margin: 0 0 18px 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box *,
body.woocommerce-account .woocommerce-MyAccount-content .plan-summary *,
body.woocommerce-account .woocommerce-MyAccount-content .enterprise-plan-card *,
body.woocommerce-account .woocommerce-MyAccount-content .plan-card-dark * {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box h3 {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-table {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--cv-radius-sm) !important;
    overflow: hidden;
    margin-top: 10px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-table th,
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-table td {
    padding: 8px 14px !important;
    background: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    font-size: 13px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-table tr:last-child th,
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-table tr:last-child td {
    border-bottom: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box .button {
    background: #ffffff !important;
    color: var(--cv-brand) !important;
    border-color: #ffffff !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-campaign-usage-box a:not(.button) {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}

/* My Campaigns table — let it scroll horizontally if the actions overflow */
body.woocommerce-account .woocommerce-MyAccount-content .my-campaigns-table,
body.woocommerce-account .woocommerce-MyAccount-content table.campaigns-list,
body.woocommerce-account .woocommerce-MyAccount-content table#campaigns-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .my-campaigns-table-wrap,
body.woocommerce-account .woocommerce-MyAccount-content .campaigns-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--cv-radius);
    border: 1px solid var(--cv-line);
}
/* Campaign actions cell — stacked buttons with breathing room */
body.woocommerce-account .woocommerce-MyAccount-content td.campaign-actions,
body.woocommerce-account .woocommerce-MyAccount-content .campaign-row-actions {
    white-space: nowrap;
    padding: 8px 12px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content td.campaign-actions .button,
body.woocommerce-account .woocommerce-MyAccount-content td.campaign-actions a,
body.woocommerce-account .woocommerce-MyAccount-content .campaign-row-actions .button,
body.woocommerce-account .woocommerce-MyAccount-content .campaign-row-actions a {
    display: inline-block;
    margin: 2px 4px 2px 0 !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* ---------------------------------------------------------------------------
 * 7. RATE ROLE / ADS BOOKED — "Delete Group" must be RED
 *    Scope is .button.btn-danger / a.btn-danger ONLY — never the inline
 *    text links that share the same href patterns. The inline links are
 *    handled separately in the Round 3 corrections below.
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content a.btn-danger,
body.woocommerce-account .woocommerce-MyAccount-content .button.btn-danger {
    background: var(--cv-red) !important;
    border-color: var(--cv-red) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border-radius: var(--cv-radius-sm) !important;
    font-weight: 600 !important;
    display: inline-block !important;
}
body.woocommerce-account .woocommerce-MyAccount-content a.btn-danger:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * 8. ADS BOOKED — bottom Ads table horizontal scroll
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    display: table;
}
body.woocommerce-account .woocommerce-MyAccount-content .ads-table-wrap,
body.woocommerce-account .woocommerce-MyAccount-content .ads-booked-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td {
    padding: 10px 10px !important;
    vertical-align: middle !important;
    font-size: 12px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive th {
    text-align: left !important;
}

/* ---------------------------------------------------------------------------
 * 9. PRE-DELIVERY VIEW table — classification + inventory columns visible
 *    The cv-pdc table now has 9 columns. Compact the cell padding and make
 *    sure the table wrapper scrolls horizontally instead of clipping.
 * ------------------------------------------------------------------------- */
.cs-pdc__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cs-pdc__table {
    min-width: 1100px;        /* Force horizontal scroll on narrow content panel */
}
.cs-pdc__table thead th,
.cs-pdc__table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}
.cs-pdc__table tbody td:last-child {
    white-space: normal;
    max-width: 280px;
}

/* ---------------------------------------------------------------------------
 * 10. DASHBOARD — donut/pie text contrast + column 1 readability
 * ------------------------------------------------------------------------- */
.ads-dashboard-3col .col-1 h3,
.ads-dashboard-3col .col-3 h3,
.ads-dashboard-3col .col-1 p,
.ads-dashboard-3col .col-3 p {
    color: #ffffff !important;
}
.ads-dashboard-3col .col-1 .donut-chart > div:not(.donut-wrapper) {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-align: center;
    margin-top: 4px;
}
/* Make the campaign select / dates input clearer on dark column */
.ads-dashboard-3col .filter-row .select-wrap select,
.ads-dashboard-3col .filter-row .select-wrap input[type="text"] {
    color: #ffffff !important;
    background: #2f2f2f !important;
}
.ads-dashboard-3col .flat-btn {
    background: var(--cv-amber) !important;
    color: #1a1a1a !important;
    border: 0 !important;
    font-weight: 700 !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
}
.ads-dashboard-3col .date-box {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
 * 11. UPLOAD HISTORY table & inline tables inside view-campaign — sticky polish
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content .cs-upload-history-table,
body.woocommerce-account .woocommerce-MyAccount-content table.cs-uploads {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
body.woocommerce-account .woocommerce-MyAccount-content .cs-upload-history-table th,
body.woocommerce-account .woocommerce-MyAccount-content .cs-upload-history-table td {
    padding: 9px 12px !important;
    vertical-align: middle !important;
    font-size: 12px !important;
}

/* ---------------------------------------------------------------------------
 * 12. EMPTY STATES — gentler tone across panels
 * ------------------------------------------------------------------------- */
.cs-brief__empty,
.cs-pdc__empty,
.cs-notif__empty,
.cs-hr__empty {
    background: var(--cv-surface-soft) !important;
    border: 1px dashed var(--cv-line) !important;
    color: var(--cv-ink-muted) !important;
}

/* ---------------------------------------------------------------------------
 * 13. SMALL TEXT TWEAKS
 * ------------------------------------------------------------------------- */
/* The header lozenge "LOG IN / Edit" the theme paints above the content card */
body.woocommerce-account > .entry-content > h1.entry-title,
body.woocommerce-account .entry-title,
body.woocommerce-account .page-title {
    color: var(--cv-ink-muted) !important;
}

/* "Back to Groups" / "Edit Group Name" pill consistency */
body.woocommerce-account .woocommerce-MyAccount-content a[href*="?back="],
body.woocommerce-account .woocommerce-MyAccount-content a[href*="?edit_"][href*="_group_name"],
body.woocommerce-account .woocommerce-MyAccount-content .btn-back,
body.woocommerce-account .woocommerce-MyAccount-content .btn-warning {
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border-color: var(--cv-brand) !important;
    padding: 8px 14px !important;
    border-radius: var(--cv-radius-sm) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    margin-right: 6px;
}

/* ---------------------------------------------------------------------------
 * 14. CV-PILL fallback colours used inside the makegoods table
 * ------------------------------------------------------------------------- */
.cv-pill--amber { background: var(--cv-amber-soft) !important; color: var(--cv-amber-text) !important; border-color: var(--cv-amber-border) !important; }
.cv-pill--red   { background: var(--cv-red-soft) !important;   color: var(--cv-red-text) !important;   border-color: var(--cv-red-border) !important; }
.cv-pill--green { background: var(--cv-green-soft) !important; color: var(--cv-green-text) !important; border-color: var(--cv-green-border) !important; }
.cv-pill--blue  { background: var(--cv-blue-soft) !important;  color: var(--cv-blue-text) !important;  border-color: var(--cv-blue-border) !important; }

/* ===========================================================================
 * ROUND 3 — POST-PDF-WALKTHROUGH CORRECTIONS
 *
 * 1. Inline "Delete" links inside list items (ads-booked / timezone-groups /
 *    rate-role-by-day) were being painted as huge red button blocks because
 *    earlier rules href-pattern-matched ALL delete URLs. Scope button styling
 *    to elements with .button / .btn-danger class only — keep inline text
 *    links as small red word links.
 *
 * 2. Subscription plan cards use .woocommerce ul.subscription_products li
 *    structure (not .zee-custom-container). Re-target with correct selectors.
 *
 * 3. My Campaigns table at the bottom of /view-campaigns/ overflows OUTSIDE
 *    the content card. Wrap it in a scroll container and compact the
 *    Actions column buttons into a vertical stack of small pills.
 * =========================================================================== */

/* --- 1. INLINE DELETE / DUPLICATE TEXT LINKS IN LISTS ---------------------
 * Reset the over-aggressive button styling from earlier rules. Only apply
 * button visuals when the link explicitly carries .button or .btn-danger.
 * Inline list items use href patterns like delete_ad_group, delete_rate_group
 * — those are plain text links, not buttons. */
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="delete_ad_group"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="delete_rate_group"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="timezone_delete_group"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="duplicate"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="delete_ad_group"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="delete_rate_group"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="timezone_delete_group"]:not(.button):not(.btn-danger):not(.cs-row-action),
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="delete_timezone"]:not(.button):not(.btn-danger):not(.cs-row-action) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--cv-red-text) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(185, 28, 28, 0.45) !important;
    display: inline !important;
    min-height: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="delete_ad_group"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="delete_rate_group"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="timezone_delete_group"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li > a[href*="duplicate"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="delete_ad_group"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="delete_rate_group"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="timezone_delete_group"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="delete_timezone"]:not(.button):not(.btn-danger):not(.cs-row-action):hover,
body.woocommerce-account .woocommerce-MyAccount-content ul li a[href*="duplicate"]:not(.button):not(.btn-danger):not(.cs-row-action):hover {
    color: #7f1d1d !important;
    text-decoration-color: #7f1d1d !important;
    background: transparent !important;
}
/* Make the group list items themselves readable and spaced */
body.woocommerce-account .woocommerce-MyAccount-content ul li > a:first-child {
    color: var(--cv-brand-light) !important;
    font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-content ul li {
    padding: 6px 0;
}

/* --- 2. SUBSCRIPTION PLAN CARDS — correct selectors -----------------------
 * The plans are rendered as <ul class="products subscription_products"> with
 * <li class="product"> items. Override the inline #e7e7e7 background and
 * style each card professionally. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce.columns-3,
body .woocommerce.columns-3 {
    width: 100% !important;
}
body .woocommerce ul.products.subscription_products,
body .woocommerce.columns-3 .subscription_products {
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    padding: 0 !important;
    margin: 18px 0 0 0 !important;
    width: 100% !important;
}
body .woocommerce ul.subscription_products li.product,
body .woocommerce.columns-3 .subscription_products li.product {
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius) !important;
    padding: 22px 22px !important;
    box-shadow: var(--cv-shadow);
    width: auto !important;     /* override the 29% inline */
    margin: 0 !important;
    flex-direction: column !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    list-style: none !important;
}
/* Visible plan card layout — only applied when NOT hidden by the inline
 * style="display:none". Without these :not() guards, our `display: flex`
 * would override the Monthly/Yearly toggle and show both groups at once. */
body .woocommerce ul.subscription_products li.product:not([style*="display: none"]):not([style*="display:none"]),
body .woocommerce.columns-3 .subscription_products li.product:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
}
/* Preserve the toggle's hide behaviour with extra specificity so our flex
 * rule never accidentally overrides it. */
body .woocommerce ul.subscription_products li.product[style*="display: none"],
body .woocommerce ul.subscription_products li.product[style*="display:none"],
body .woocommerce.columns-3 .subscription_products li.product[style*="display: none"],
body .woocommerce.columns-3 .subscription_products li.product[style*="display:none"] {
    display: none !important;
}
body .woocommerce ul.subscription_products li.product:hover {
    box-shadow: var(--cv-shadow-lift);
    transform: translateY(-2px);
}
/* Plan title — large, brand-coloured, no underline */
body .woocommerce ul.subscription_products li.product > a:first-child {
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--cv-brand) !important;
    border: 0 !important;
    display: block;
}
body .woocommerce ul.subscription_products li.product .woocommerce-loop-product__title {
    color: var(--cv-brand) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    border-bottom: 0 !important;
}
/* Price line — WooCommerce wraps sale prices in <ins> and original in <del>.
 * Reset the theme's default <ins> highlight (dark background / underline),
 * mute the strikethrough old price, and emphasise the new price in brand ink. */
body .woocommerce ul.subscription_products li.product .price {
    color: var(--cv-ink) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    margin: 4px 0 12px 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    background: transparent !important;
}
body .woocommerce ul.subscription_products li.product .price .amount,
body .woocommerce ul.subscription_products li.product .price bdi {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    display: inline-block !important;
}
/* Original (crossed-out) price — muted, lighter weight */
body .woocommerce ul.subscription_products li.product .price del {
    background: transparent !important;
    color: var(--cv-ink-muted) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(0, 0, 0, 0.45) !important;
    opacity: 0.75;
    padding: 0 !important;
    border-radius: 0 !important;
}
body .woocommerce ul.subscription_products li.product .price del .amount,
body .woocommerce ul.subscription_products li.product .price del bdi {
    color: var(--cv-ink-muted) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}
/* Sale (new) price — brand ink, no underline, no dark highlight */
body .woocommerce ul.subscription_products li.product .price ins,
body .woocommerce ul.subscription_products li.product .price ins:not(.sale-flash) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cv-ink) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    text-decoration: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .woocommerce ul.subscription_products li.product .price ins .amount,
body .woocommerce ul.subscription_products li.product .price ins bdi {
    color: var(--cv-ink) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    background: transparent !important;
}
/* Subscription suffix like "/ year" — small, muted, drops to its own line */
body .woocommerce ul.subscription_products li.product .price .subscription-details,
body .woocommerce ul.subscription_products li.product .price .woocommerce-Price-currencySymbol + .subscription-details {
    flex-basis: 100% !important;
    color: var(--cv-ink-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
/* Description (the bulleted features) */
body .woocommerce ul.subscription_products li.product .description {
    color: var(--cv-ink) !important;
    font-size: 13px !important;
    margin: 0 0 14px 0 !important;
    flex: 1 1 auto;
}
body .woocommerce ul.subscription_products li.product .description ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 !important;
}
body .woocommerce ul.subscription_products li.product .description ul li {
    list-style: none !important;
    position: relative;
    padding: 4px 0 4px 22px !important;
    color: var(--cv-ink) !important;
    line-height: 1.5;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}
body .woocommerce ul.subscription_products li.product .description ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8L7 12L13 4' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
}
body .woocommerce ul.subscription_products li.product .description p {
    color: var(--cv-ink-muted) !important;
    font-size: 12px !important;
    margin: 8px 0 !important;
}
/* "Buy Now" button — brand primary */
body .woocommerce ul.subscription_products li.product .button,
body .woocommerce ul.subscription_products li.product a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border: 1px solid var(--cv-brand) !important;
    border-radius: var(--cv-radius-sm) !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    min-height: 44px !important;
    margin-top: auto !important;
    cursor: pointer;
    opacity: 1 !important;
    transition: background 0.15s ease;
}
body .woocommerce ul.subscription_products li.product .button:hover {
    background: var(--cv-brand-light) !important;
    border-color: var(--cv-brand-light) !important;
    color: #ffffff !important;
}
body .woocommerce ul.subscription_products li.product .button.disabled,
body .woocommerce ul.subscription_products li.product .button[disabled] {
    background: var(--cv-line) !important;
    border-color: var(--cv-line) !important;
    color: var(--cv-ink-faint) !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1 !important;
}
/* Current subscription pill — green and clearly active */
body .woocommerce ul.subscription_products li.product .current-subscription {
    display: block !important;
    text-align: center !important;
    background: var(--cv-green) !important;
    color: #ffffff !important;
    border-radius: var(--cv-radius-sm) !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    min-height: 44px !important;
    margin: auto 0 0 0 !important;
    line-height: 20px !important;
}
/* Highlight the current plan card with a green ring */
body .woocommerce ul.subscription_products li.product:has(.current-subscription) {
    border-color: var(--cv-green) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18), var(--cv-shadow);
}
/* The intro paragraph + heading */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce.columns-3 > p:first-child {
    color: var(--cv-ink) !important;
    margin-bottom: 6px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce.columns-3 > h3 {
    color: var(--cv-ink) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 14px 0 12px 0 !important;
}
/* Monthly/Yearly toggle */
body.woocommerce-account .woocommerce-MyAccount-content .subscription-toggle-wrapper {
    background: var(--cv-surface-soft) !important;
    border: 1px solid var(--cv-line) !important;
    border-radius: 999px;
    padding: 6px 14px !important;
    display: inline-flex !important;
    gap: 10px !important;
    align-items: center;
    margin-bottom: 18px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .subscription-toggle-wrapper span {
    color: var(--cv-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* --- 3. MY CAMPAIGNS TABLE — keep it inside the content card --------------
 * .campaign-table-wrap is the PHP-rendered scroll container. The table itself
 * stays as a regular table; the wrapper scrolls horizontally if needed. */
body.woocommerce-account .woocommerce-MyAccount-content .campaign-table-wrap {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cv-line) !important;
    border-radius: var(--cv-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--cv-shadow);
    margin: 14px 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    min-width: 1100px;        /* Force horizontal scroll on narrow card */
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table thead {
    background: var(--cv-surface-soft) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table th {
    background: var(--cv-surface-soft) !important;
    color: var(--cv-ink-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 12px !important;
    white-space: nowrap;
    text-align: left !important;
    border-bottom: 1px solid var(--cv-line) !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td {
    background: #ffffff !important;
    color: var(--cv-ink) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--cv-line-soft) !important;
    white-space: nowrap;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table tr:last-child td {
    border-bottom: 0 !important;
}
/* Campaign Name cell — clickable link to the single-campaign view */
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td .cs-campaign-name-link {
    color: var(--cv-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td .cs-campaign-name-link:hover,
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td .cs-campaign-name-link:focus {
    text-decoration: underline !important;
}
/* "View" button cell (Uploaded File Data column) */
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table .view-rows-btn {
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border-color: var(--cv-brand) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: var(--cv-radius-sm) !important;
    min-height: 32px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-weight: 600;
}
/* Actions column — compact vertical stack */
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td:last-child {
    text-align: left !important;
    min-width: 130px;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td:last-child .button {
    display: inline-block !important;
    margin: 2px 4px 2px 0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: var(--cv-radius-sm) !important;
    min-height: 28px !important;
    line-height: 1.4 !important;
    background: var(--cv-brand) !important;
    border-color: var(--cv-brand) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td:last-child .cs-front-archive,
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td:last-child .button.cs-front-archive {
    background: var(--cv-amber) !important;
    border-color: var(--cv-amber) !important;
    color: #1a1a1a !important;
}
body.woocommerce-account .woocommerce-MyAccount-content table.campaign_table td:last-child br {
    display: none !important;     /* Buttons wrap naturally now */
}

/* --- 4. ZEE-CUSTOM-CONTAINER ("Add" buttons for Time Zone/Rate Role/Ads Booked)
 * Tighten the "Add" pill below each card so it doesn't span the whole row. */
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-btn-add {
    display: inline-block !important;
    width: auto !important;
    text-align: center;
    padding: 7px 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    min-height: 36px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .zee-custom-container .zee-list li::before {
    content: none !important;       /* These already have inline check icons */
}

/* --- 5. ADS-BOOKED top "Delete Group" button stays RED (proper button) --- */
body.woocommerce-account .woocommerce-MyAccount-content a.button.btn-danger,
body.woocommerce-account .woocommerce-MyAccount-content a.wp-element-button.btn-danger {
    background: var(--cv-red) !important;
    border: 1px solid var(--cv-red) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--cv-radius-sm) !important;
    text-decoration: none !important;
    display: inline-block !important;
}
body.woocommerce-account .woocommerce-MyAccount-content a.button.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* --- 6. Show Old Campaigns button polish ---------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content #cs-front-show-old-campaigns,
body.woocommerce-account .woocommerce-MyAccount-content .cs-old-btn {
    background: var(--cv-brand) !important;
    color: #ffffff !important;
    border-color: var(--cv-brand) !important;
    padding: 9px 16px !important;
    border-radius: var(--cv-radius-sm) !important;
    font-weight: 600 !important;
    margin-top: 14px !important;
}

/* --- 7. Modal overlay (Uploaded File Data) — basic safe defaults --------- */
body.woocommerce-account .woocommerce-MyAccount-content .modal-body {
    background: #ffffff;
    color: var(--cv-ink);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
}

/* ===========================================================================
 * ACCOUNT DASHBOARD LANDING PANEL (Block 2 — Milestone 1)
 *
 * Replaces the default WC My Account dashboard ("Hello {name}…") with a
 * branded operational overview. Lives inside the white WC content card,
 * so the panel itself paints a dark gradient backdrop — matching the
 * existing cv-dashboard-empty pattern on /dashboard — so the reused
 * .cv-dashboard-empty__link-card cards keep their white-on-dark styling
 * here without modification.
 * ------------------------------------------------------------------------- */

.cv-acct-dashboard {
    position: relative;
    background: var(--cv-surface-soft);
    color: var(--cv-ink);
    border: 1px solid var(--cv-line);
    border-radius: 14px;
    padding: 26px 28px 22px 28px;
    margin: 0 0 18px 0;
    box-shadow: var(--cv-shadow);
}

/* Welcome header --------------------------------------------------------- */
.cv-acct-welcome {
    margin: 0 0 22px 0;
}
.cv-acct-welcome__title,
body.woocommerce-account .woocommerce-MyAccount-content .cv-acct-dashboard h2.cv-acct-welcome__title,
section.cv-acct-dashboard h2.cv-acct-welcome__title {
    color: var(--cv-ink) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    margin: 0 0 4px 0 !important;
    line-height: 1.2;
}
.cv-acct-welcome__sub,
body.woocommerce-account .woocommerce-MyAccount-content .cv-acct-dashboard p.cv-acct-welcome__sub {
    color: var(--cv-ink-muted) !important;
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.5;
    max-width: 720px;
}

/* Stat grid -------------------------------------------------------------- */
.cv-acct-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 22px 0;
}
.cv-acct-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-left: 3px solid var(--cv-ink-faint);
    border-radius: 10px;
    padding: 14px 16px 12px 16px;
    color: var(--cv-ink) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 96px;
}
.cv-acct-stat-card:hover {
    background: var(--cv-line-soft);
    transform: translateY(-1px);
    color: var(--cv-ink) !important;
    box-shadow: var(--cv-shadow-lift);
}
.cv-acct-stat-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--cv-ink-muted) !important;
}
.cv-acct-stat-card__value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--cv-ink) !important;
    letter-spacing: -0.02em;
    margin: 2px 0 2px 0;
}
.cv-acct-stat-card__cta {
    font-size: 11px;
    color: var(--cv-ink-muted) !important;
    margin-top: auto;
}

/* Traffic-light tone variants — coloured left edge + value tint on the
 * light-context card. */
.cv-acct-stat-card--green  { border-left-color: var(--cv-green); }
.cv-acct-stat-card--green  .cv-acct-stat-card__value { color: var(--cv-green-text) !important; }
.cv-acct-stat-card--amber  { border-left-color: var(--cv-amber); }
.cv-acct-stat-card--amber  .cv-acct-stat-card__value { color: var(--cv-amber-text) !important; }
.cv-acct-stat-card--red    { border-left-color: var(--cv-red); }
.cv-acct-stat-card--red    .cv-acct-stat-card__value { color: var(--cv-red-text) !important; }
.cv-acct-stat-card--blue   { border-left-color: var(--cv-blue); }
.cv-acct-stat-card--blue   .cv-acct-stat-card__value { color: var(--cv-blue-text) !important; }
.cv-acct-stat-card--neutral { border-left-color: var(--cv-line); }

/* Empty state callout (no campaigns yet) --------------------------------- */
.cv-acct-empty-cta {
    background: var(--cv-surface);
    border: 1px dashed var(--cv-line);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 22px 0;
    color: var(--cv-ink);
}
.cv-acct-empty-cta__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--cv-ink);
}
.cv-acct-empty-cta__body {
    margin: 0 0 10px 0 !important;
    color: var(--cv-ink-muted) !important;
    font-size: 13px !important;
    line-height: 1.5;
}
/* Button selectors also re-stated with deeper specificity so OceanWP /
 * theme `a { color: ... }` cascade can't repaint the label invisible. */
.cv-acct-empty-cta__btn,
body.woocommerce-account .woocommerce-MyAccount-content a.cv-acct-empty-cta__btn,
.cv-acct-dashboard a.cv-acct-empty-cta__btn {
    display: inline-block !important;
    background: var(--cv-brand-accent) !important;
    background-color: var(--cv-brand-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(225, 36, 43, 0.30) !important;
}
.cv-acct-empty-cta__btn:hover,
body.woocommerce-account .woocommerce-MyAccount-content a.cv-acct-empty-cta__btn:hover,
.cv-acct-dashboard a.cv-acct-empty-cta__btn:hover {
    background: #f04148 !important;
    background-color: #f04148 !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Section title + quick-links grid -------------------------------------- */
.cv-acct-section-title {
    color: var(--cv-ink-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 10px 0 !important;
}
.cv-acct-quick-links {
    margin: 0 0 18px 0 !important;
    max-width: none !important;
}
/* The link-card classes (.cv-dashboard-empty__link-card) ship with
 * white-on-dark styling for use inside the dark gradient .cv-dashboard-
 * empty panel. The account dashboard now sits on a light surface, so
 * scope-override the colours when those classes appear inside
 * .cv-acct-dashboard. Every interactive state (:hover/:focus/:focus-
 * visible/:active/:visited) is explicitly covered so a card cannot
 * fall back to the dark default after a click. */
.cv-acct-dashboard .cv-dashboard-empty__link-card,
.cv-acct-dashboard .cv-dashboard-empty__link-card:link,
.cv-acct-dashboard .cv-dashboard-empty__link-card:visited,
.cv-acct-quick-links .cv-dashboard-empty__link-card,
.cv-acct-quick-links .cv-dashboard-empty__link-card:link,
.cv-acct-quick-links .cv-dashboard-empty__link-card:visited {
    background: var(--cv-surface) !important;
    border: 1px solid var(--cv-line) !important;
    color: var(--cv-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    outline: none !important;
}
.cv-acct-dashboard .cv-dashboard-empty__link-card:hover,
.cv-acct-dashboard .cv-dashboard-empty__link-card:focus,
.cv-acct-dashboard .cv-dashboard-empty__link-card:focus-visible,
.cv-acct-dashboard .cv-dashboard-empty__link-card:active,
.cv-acct-quick-links .cv-dashboard-empty__link-card:hover,
.cv-acct-quick-links .cv-dashboard-empty__link-card:focus,
.cv-acct-quick-links .cv-dashboard-empty__link-card:focus-visible,
.cv-acct-quick-links .cv-dashboard-empty__link-card:active {
    background: var(--cv-line-soft) !important;
    border-color: var(--cv-ink-faint) !important;
    color: var(--cv-ink) !important;
    box-shadow: var(--cv-shadow-lift) !important;
    outline: none !important;
}
.cv-acct-dashboard .cv-dashboard-empty__link-icon,
.cv-acct-quick-links .cv-dashboard-empty__link-icon {
    color: var(--cv-brand) !important;
}
.cv-acct-dashboard .cv-dashboard-empty__link-label,
.cv-acct-quick-links .cv-dashboard-empty__link-label {
    color: var(--cv-ink) !important;
}
.cv-acct-dashboard .cv-dashboard-empty__link-sub,
.cv-acct-quick-links .cv-dashboard-empty__link-sub {
    color: var(--cv-ink-muted) !important;
}
/* Inline-SVG icons (from cs_shelf_nav_icon_svgs) use stroke=
 * "currentColor". Pin to brand navy and re-state on every link state so
 * the icon can't ever match the card background and disappear. */
.cv-acct-dashboard .cv-dashboard-empty__link-card .cv-dashboard-empty__link-icon,
.cv-acct-dashboard .cv-dashboard-empty__link-card:hover .cv-dashboard-empty__link-icon,
.cv-acct-dashboard .cv-dashboard-empty__link-card:focus .cv-dashboard-empty__link-icon,
.cv-acct-dashboard .cv-dashboard-empty__link-card:focus-visible .cv-dashboard-empty__link-icon,
.cv-acct-dashboard .cv-dashboard-empty__link-card:active .cv-dashboard-empty__link-icon,
.cv-acct-dashboard .cv-dashboard-empty__link-card:visited .cv-dashboard-empty__link-icon,
.cv-acct-quick-links .cv-dashboard-empty__link-icon {
    color: var(--cv-brand) !important;
}
.cv-acct-quick-links .cv-dashboard-empty__link-icon svg,
.cv-acct-dashboard .cv-dashboard-empty__link-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: var(--cv-brand) !important;
    stroke: var(--cv-brand) !important;
    fill: none !important;
    display: inline-block !important;
}

/* Footer note ------------------------------------------------------------ */
.cv-acct-foot {
    color: var(--cv-ink-faint) !important;
    font-size: 11px !important;
    font-style: italic;
    margin: 0 !important;
    line-height: 1.5;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 700px) {
    .cv-acct-dashboard { padding: 22px 18px 18px 18px; }
    .cv-acct-welcome__title { font-size: 19px !important; }
    .cv-acct-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-acct-stat-card__value { font-size: 26px; }
}
@media (max-width: 460px) {
    .cv-acct-stat-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * MY DASHBOARD — DISABLED STATE + TOOLTIP (Block 2 — Milestone 1)
 *
 * campaign.php registers 'dashboard_disabled' (instead of the clickable
 * 'dashboardd') when the user has zero campaigns. The link is greyed out
 * and a polished tooltip appears on hover explaining the gating:
 *
 *   "Add at least one campaign to see stats in your Dashboard"
 *
 * The tooltip lives on the <li>'s ::after pseudo-element. The inner <a>
 * has pointer-events:none so clicks go nowhere, but :hover still fires
 * on the parent <li> — which is what triggers the tooltip fade-in.
 *
 * The li::after kill rule above (which suppresses theme-injected
 * separators) carries a :not() exclusion for this specific item so the
 * tooltip pseudo-element survives.
 * ------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled {
    position: relative;
}

/* Greyed-out link — still visually present in the lifecycle order but
 * clearly un-actionable. Inherits the icon + label layout from the
 * sibling rule on .woocommerce-MyAccount-navigation li a above.
 *
 * NOTE: dim via text/icon color, NOT via `opacity` on the <a>. CSS
 * `opacity` creates a new stacking context that propagates to every
 * descendant — including the ::before tooltip — which would render the
 * white tooltip card at 50% and let the OVERVIEW label bleed through. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a:link,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a:visited {
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
/* Dim the icon to match the dimmed label, scoped to the icon itself so
 * the tooltip pseudo-element stays fully opaque. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a .cv-nav-icon {
    color: rgba(255, 255, 255, 0.40) !important;
}
/* Suppress hover/focus highlight on the dimmed link — a disabled item
 * lighting up like a clickable one would be confusing. The tooltip
 * below replaces the visual feedback. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled:hover > a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled:focus-within > a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a:focus {
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    transform: none !important;
}

/* Make the inner <a> the positioning context. Both the tooltip and the
 * arrow caret are rendered on the <a>'s own ::before / ::after pseudo-
 * elements (rather than the LI's) so they anchor to the LINK itself —
 * not the wider LI, which includes the OVERVIEW section-header label
 * above the link and would otherwise push the tooltip up too high. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a {
    position: relative;
}

/* Tooltip body — on <a>::before so it floats directly above the link.
 * High-contrast white card with a brand-accent red bar on the left so it
 * stands out clearly against the dark navy sidebar background. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a::before {
    content: "Add at least one campaign to see stats in your Dashboard";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(225, 36, 43, 0.45) !important;
    border-left: 5px solid var(--cv-brand-accent) !important;
    color: var(--cv-ink) !important;
    padding: 12px 14px;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    white-space: normal !important;
    border-radius: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 0 5px rgba(225, 36, 43, 0.28) !important;
    display: block !important;
}

/* Arrow caret — on <a>::after. CSS-triangle pointing DOWN, docked at
 * the bottom edge of the tooltip just above the link. Positioned ~24px
 * from the link's left edge so it sits roughly over the menu icon.
 * White to match the new tooltip body. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 24px;
    width: 0 !important;
    height: 0 !important;
    border: 7px solid transparent !important;
    border-top-color: #ffffff !important;
    border-bottom: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    display: block !important;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
}

/* Fade in on LI hover OR focus-within. We listen at the LI level (not
 * the <a>) so the disabled link's pointer-events:none doesn't prevent
 * the trigger — the LI still receives :hover even when its child <a>
 * can't be clicked. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled:hover > a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled:hover > a::after,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled:focus-within > a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled:focus-within > a::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile — keep the tooltip readable on narrow screens. */
@media (max-width: 700px) {
    body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard_disabled > a::before {
        font-size: 12px !important;
        padding: 10px 12px;
    }
}

/* ===========================================================================
 * DASHBOARD: MOBILE / TABLET SIDE GUTTERS
 *
 * On narrow viewports the brand banner, lifecycle stage strip ("six options":
 * SETUP / UPLOADS / VALIDATION / OUTCOMES / REPORTING / ARCHIVE), quick-jump
 * strip, dashboard empty state, and the dark .ads-dashboard-3col panel all
 * stretched edge-to-edge — the title text and Delete/Duplicate-style controls
 * hugged the viewport border. Apply a consistent side gutter so each panel
 * sits inside the page on phones/tablets.
 * =========================================================================== */
@media (max-width: 900px) {
    .cv-brand-banner,
    .cv-stage-strip,
    .cv-quick-jump,
    .cv-dashboard-empty,
    .ads-dashboard-3col {
        margin-left: 14px !important;
        margin-right: 14px !important;
        width: auto !important;
        box-sizing: border-box;
    }
    /* The .ads-dashboard-3col container already carries 30px of internal
     * padding which is too much on narrow viewports — trim it so charts and
     * filter rows have room to breathe inside the side gutters. */
    .ads-dashboard-3col {
        padding: 18px !important;
    }
}

/* ===========================================================================
 * DASHBOARD QUICK-JUMP — MOBILE LAYOUT
 *
 * Replace the previous horizontal scroller (overflow-x: auto + nowrap) with a
 * stacked, wrapping layout: the "Quick jump" label sits on its own row at the
 * top, and the chips fill the available width as comfortable tap targets
 * arranged in two columns (one column on the narrowest phones).
 * =========================================================================== */
@media (max-width: 600px) {
    .cv-quick-jump {
        overflow-x: visible !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .cv-quick-jump__label {
        flex: 1 0 100% !important;
        padding: 0 0 2px 0 !important;
        text-align: left;
    }
    .cv-quick-jump a {
        white-space: normal !important;
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        justify-content: center;
        text-align: center;
        padding: 10px 12px !important;
        min-height: 40px;
        line-height: 1.25;
    }
}
@media (max-width: 380px) {
    /* Very narrow phones — stack chips full width so long labels like
     * "Booked vs Delivered" don't wrap awkwardly inside a half-width chip. */
    .cv-quick-jump a {
        flex: 1 1 100% !important;
    }
}

/* ---------------------------------------------------------------------------
 * CAMPAIGN VIEW — OPERATIONAL SECTION GROUPING (Block 2 M4)
 *
 * Additive only. The single-campaign view stacks several wide operational
 * tables (Monitoring, Rate Calculation, Material Check, First Placement,
 * Uploaded CSV, Campaign Brief, Pre-Delivery, Upload History). Give each of
 * those anchored section headings a consistent Connection Verification(TM)
 * brand treatment (accent rule + spacing) so the long page reads as distinct
 * grouped sections rather than an undifferentiated scroll. No markup changes;
 * keyed to the existing anchor IDs so M1 nav/dashboard are untouched.
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content #monitoring-table,
body.woocommerce-account .woocommerce-MyAccount-content #rate-calculation,
body.woocommerce-account .woocommerce-MyAccount-content #total-cost-current-month,
body.woocommerce-account .woocommerce-MyAccount-content #check-material-by-time,
body.woocommerce-account .woocommerce-MyAccount-content #first-placement,
body.woocommerce-account .woocommerce-MyAccount-content #uploaded-csv,
body.woocommerce-account .woocommerce-MyAccount-content #campaign-brief,
body.woocommerce-account .woocommerce-MyAccount-content #pre-delivery-check,
body.woocommerce-account .woocommerce-MyAccount-content #upload-history {
    margin-top: 30px;
    padding: 12px 0 10px 14px;
    border-left: 4px solid var(--cv-brand);
    border-top: 1px solid var(--cv-line);
    color: var(--cv-ink);
}

/* ---------------------------------------------------------------------------
 * UNIFIED APP SHELL ON /dashboard (Block 2 #2)
 *
 * The standalone /dashboard page is wrapped in WC-account markup (.cv-app >
 * .woocommerce-MyAccount > .cv-sidebar + .woocommerce-MyAccount-content) and
 * carries the woocommerce-account body class, so it re-uses ALL of the sidebar
 * + content layout rules above with no duplication. These few rules only cover
 * the dashboard-only differences.
 * ------------------------------------------------------------------------- */
body.cv-dashboard .cv-app { width: 100%; }
/* The dashboard content fills the row next to the 260px sidebar. It does NOT
 * use the .woocommerce-MyAccount-content class (which would bleed the light
 * account-page text/link/heading colours onto the dark dashboard and hide the
 * section titles), so it needs its own flex rule here. */
/* Keep the sidebar (order:1) on the LEFT and the content on the RIGHT. The
 * dashboard content does NOT carry .woocommerce-MyAccount-content (which would
 * supply order:2), so without an explicit order it would default to 0 and jump
 * in front of the sidebar — putting the menu on the right. */
body.cv-dashboard .cv-app__content { flex: 1 1 auto; min-width: 0; width: auto; order: 2; }
@media (min-width: 901px) {
    /* Anchor the sidebar to the top of the row while the content scrolls
     * (mirrors the account-area behaviour). */
    body.cv-dashboard .cv-app__row { align-items: flex-start; }
}
@media (max-width: 900px) {
    body.cv-dashboard .cv-app__content { flex: none; width: 100%; }
}

/* ---------------------------------------------------------------------------
 * BRANDED FOOTER (Block 2 #5)
 * © {year} Connection Verification™ … PROTECTED BY. Sits on a light surface
 * panel so it reads on both the light account pages and the dark dashboard.
 * ------------------------------------------------------------------------- */
.cv-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    text-align: center;
    margin: 28px 0 10px;
    padding: 16px 18px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius);
    font-size: 11px;
    color: var(--cv-ink-muted);
}
.cv-footer__brand { font-weight: 700; color: var(--cv-brand); letter-spacing: 0.2px; }
.cv-footer__tm { font-size: 8px; vertical-align: super; }
.cv-footer__strap { font-style: italic; }
.cv-footer__protected { font-weight: 600; letter-spacing: 0.4px; color: var(--cv-ink); }
@media (max-width: 600px) {
    .cv-footer { flex-direction: column; gap: 4px; }
}