/**
 * ResolveVia — main.css
 *
 * Core plugin stylesheet. Loaded on all public ResolveVia pages.
 * Enqueued by class-resolvevia-public.php as 'resolvevia-main'.
 * niche-themes.css depends on this (loads after).
 *
 * Contains:
 *   - Cards
 *   - Tables
 *   - Notices / Alerts (buyer-facing)
 *   - Spending cap bar base styles
 *   - Live call widget base styles
 *   - Breadcrumbs
 *   - Stat cards
 *   - Tier badges
 *   - Empty state
 *   - Notification bell
 *   - Nav (base)
 *   - Onboarding wizard progress
 *
 * @package ResolveVia
 *
 * Schema: v2.37.39 / Migration 110 / 101 active tables
 */

/* ============================================================
   DESIGN TOKENS (DRIFT-717 → DRIFT-755 Phase 0)
   The canonical structural :root tokens (radius / spacing /
   transition) that lived here are now defined ONCE in the
   canonical token layer, assets/css/tokens.css (loaded FIRST on
   every surface — class ResolveVia_Design_Tokens is the PHP
   source of truth). They are intentionally NOT redefined here;
   the values are identical, so every consumer in this file
   resolves to the same computed value as before.
   Color still comes from the niche-themes.css accent family +
   the dark/forced surface tokens, and the --rv-shadow-lg dark
   token below stays local to main.css.
   ============================================================ */

/* --rv-primary alias (DRIFT-717 functional fix) ───────────────
   buyer-dashboard.css (x13) and referral-center.css (x12) reference
   --rv-primary / --rv-primary-dark, which were never defined — so the
   buyer dashboard accent silently fell back to default blue and never
   themed per niche. This aliases them to the real accent tokens.

   Per-niche palette is now emitted as inline :root vars from rv_themes
   (resolvevia_build_theme_css(), DRIFT-738) — no body class. The alias is
   kept on `body` (which inherits --rv-accent from the emitted :root), so
   var(--rv-accent) resolves to the per-niche value in light, OS-dark, and
   forced (html.rv-dark/.rv-light) modes automatically.

   The streamline thread removes this alias after renaming all call
   sites to --rv-accent (see CSS_STREAMLINE_BACKLOG.md, item S1). */
body {
    --rv-primary:      var(--rv-accent, #2563eb);
    --rv-primary-dark: var(--rv-accent-dark, #1d4ed8);
}

/* Large elevation token — undefined in light (usage carries a light
   fallback: var(--rv-shadow-lg, 0 20px 60px rgba(0,0,0,.18))); defined
   heavier in dark to match the canonical dark shadow weight. Mirrors
   how --rv-shadow is handled in niche-themes.css. */
@media (prefers-color-scheme: dark) {
    :root { --rv-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.6); }
}
html.rv-dark { --rv-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.6); }

/* ============================================================
   CARDS
   ============================================================ */

.rv-card {
    background: var(--rv-white);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-mlg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

.rv-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rv-gray-200);
    background: var(--rv-gray-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rv-space-3);
}

.rv-card__title {
    font-size: 15px;
    font-weight: var(--rv-weight-bold);
    margin: 0;
    color: var(--rv-gray-900);
}

.rv-card__body {
    padding: 20px;
}

.rv-card__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--rv-gray-200);
    background: var(--rv-gray-50);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================================
   TABLES
   ============================================================ */

.rv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--rv-radius-md);
    border: 1px solid var(--rv-gray-200);
}

.rv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rv-font-size-base);
    min-width: 400px;
}

.rv-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: var(--rv-font-size-xs);
    font-weight: var(--rv-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rv-gray-500);
    background: var(--rv-gray-50);
    border-bottom: 1px solid var(--rv-gray-200);
    white-space: nowrap;
}

.rv-table td {
    padding: var(--rv-space-3) var(--rv-space-4);
    border-bottom: 1px solid var(--rv-gray-100);
    color: var(--rv-gray-700);
    vertical-align: middle;
}

.rv-table tr:last-child td {
    border-bottom: none;
}

.rv-table tr:hover td {
    background: var(--rv-gray-50);
}

/* ============================================================
   NOTICES (buyer-facing)
   ============================================================ */

.rv-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--rv-space-3) var(--rv-space-4);
    border-radius: var(--rv-radius-sm);
    margin-bottom: var(--rv-space-4);
    font-size: var(--rv-font-size-base);
    line-height: 1.5;
}

/* DRIFT-756: repointed to the global semantic tokens (dark-aware). Border
   moves to the canonical accent (a slight in-hue darkening, e.g. success
   #22c55e -> #16a34a) and each notice gains a dark-mode variant. Notice NAMES
   map to status TOKENS: --storm is purple-styled -> purple; --invoice is
   orange-styled -> orange; --intro is success-styled -> success.
   DRIFT-757: INFO BORDER now migrated to var(--rv-info) so info reads cyan in
   both modes (separated from brand blue; old literal #3b82f6 removed). The
   warning canonical darkened to #c2620a (DRIFT-757, >=3:1 border contrast on
   every niche tint); the warning notice auto-adopts it via var(--rv-warning). */
.rv-notice--info    { background: var(--rv-info-bg);    border-left: 4px solid var(--rv-info);   color: var(--rv-info-text); }
.rv-notice--warning { background: var(--rv-warning-bg); border-left: 4px solid var(--rv-warning); color: var(--rv-warning-text); }
.rv-notice--error   { background: var(--rv-error-bg);   border-left: 4px solid var(--rv-error);   color: var(--rv-error-text); }
.rv-notice--success { background: var(--rv-success-bg); border-left: 4px solid var(--rv-success); color: var(--rv-success-text); }
.rv-notice--storm   { background: var(--rv-purple-bg);  border-left: 4px solid var(--rv-purple);  color: var(--rv-purple-text); }
.rv-notice--invoice { background: var(--rv-orange-bg);  border-left: 4px solid var(--rv-orange);  color: var(--rv-orange-text); }
.rv-notice--intro   { background: var(--rv-success-bg); border-left: 4px solid var(--rv-success); }

.rv-notice__text   { flex: 1; }
.rv-notice__action { margin-left: var(--rv-space-2); font-weight: var(--rv-weight-semibold); text-decoration: underline; white-space: nowrap; }
.rv-notice__dismiss {
    background: none; border: none; cursor: pointer;
    font-size: var(--rv-font-size-md); line-height: 1; color: inherit;
    padding: 0; margin-left: auto; opacity: 0.7;
    min-height: 44px; min-width: 44px; /* F77 */
    display: flex; align-items: center; justify-content: center;
}
.rv-notice__dismiss:hover { opacity: 1; }

/* ============================================================
   SPENDING CAP BAR (F27)
   ============================================================ */

.rv-cap-bar {
    background: var(--rv-gray-50);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-md);
    padding: 14px 16px;
    margin-bottom: var(--rv-space-4);
}

.rv-cap-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: var(--rv-space-2);
}

.rv-cap-bar__title {
    font-size: var(--rv-font-size-smd);
    font-weight: var(--rv-weight-semibold);
    color: var(--rv-gray-700);
}

.rv-cap-bar__periods {
    display: flex;
    gap: var(--rv-space-4);
    flex-wrap: wrap;
}

.rv-cap-bar__period {
    flex: 1;
    min-width: 120px;
}

.rv-cap-bar__period-label {
    font-size: var(--rv-font-size-xs);
    color: var(--rv-gray-500);
    margin-bottom: var(--rv-space-1);
    display: flex;
    justify-content: space-between;
}

.rv-cap-bar__track {
    height: 6px;
    background: var(--rv-gray-200);
    border-radius: var(--rv-radius-xs);
    overflow: hidden;
}

.rv-cap-bar__fill {
    height: 100%;
    background: var(--rv-accent, #2563eb);
    border-radius: var(--rv-radius-xs);
    transition: width 0.4s ease;
}

.rv-cap-bar__fill--warning { background: #f59e0b; }
.rv-cap-bar__fill--danger  { background: #ef4444; }

/* ============================================================
   LIVE CALL WIDGET (F26)
   ============================================================ */

.rv-live-call-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--rv-white);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: var(--rv-space-4);
    min-width: 260px;
    max-width: 320px;
    display: none; /* JS shows/hides */
}

.rv-live-call-widget--active {
    display: block;
}

.rv-live-call-widget--ringing {
    border-color: var(--rv-accent, #2563eb);
    animation: rv-ring-pulse 1.5s infinite;
}

@keyframes rv-ring-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    50%       { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}

.rv-live-call-widget__header {
    display: flex;
    align-items: center;
    gap: var(--rv-space-2);
    margin-bottom: 10px;
}

.rv-live-call-widget__status {
    font-size: var(--rv-font-size-sm);
    font-weight: var(--rv-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rv-gray-500);
}

.rv-live-call-widget__timer {
    font-size: var(--rv-font-size-xl);
    font-weight: var(--rv-weight-bold);
    color: var(--rv-gray-900);
    font-variant-numeric: tabular-nums;
}

.rv-live-call-widget__actions {
    display: flex;
    gap: var(--rv-space-2);
    margin-top: var(--rv-space-3);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.rv-breadcrumbs {
    margin-bottom: var(--rv-space-4);
}

.rv-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rv-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--rv-font-size-smd);
    color: var(--rv-gray-500);
}

.rv-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--rv-space-1);
}

.rv-breadcrumbs__item + .rv-breadcrumbs__item::before {
    content: '›';
    color: var(--rv-gray-400);
    margin-right: var(--rv-space-1);
}

.rv-breadcrumbs__link {
    color: var(--rv-accent, #2563eb);
    text-decoration: none;
}

.rv-breadcrumbs__link:hover {
    text-decoration: underline;
}

.rv-breadcrumbs__current {
    color: var(--rv-gray-500);
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.rv-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--rv-space-4);
    margin-bottom: var(--rv-space-5);
}

.rv-stat-card {
    background: var(--rv-white);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-md);
    padding: var(--rv-space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--rv-space-3);
}

.rv-stat-card__icon {
    font-size: var(--rv-font-size-3xl);
    line-height: 1;
    flex-shrink: 0;
}

.rv-stat-card__body {
    min-width: 0;
}

.rv-stat-card__label {
    font-size: var(--rv-font-size-sm);
    font-weight: var(--rv-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rv-gray-500);
    margin: 0 0 var(--rv-space-1);
}

.rv-stat-card__value {
    font-size: var(--rv-font-size-3xl);
    font-weight: var(--rv-weight-extrabold);
    color: var(--rv-gray-900);
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rv-stat-card__delta {
    font-size: var(--rv-font-size-sm);
    font-weight: var(--rv-weight-semibold);
    margin: var(--rv-space-1) 0 0;
}

.rv-stat-card__delta--positive { color: #16a34a; }
.rv-stat-card__delta--negative { color: #dc2626; }
.rv-stat-card__delta--neutral  { color: var(--rv-gray-500); }

/* ============================================================
   TIER BADGES
   ============================================================ */

.rv-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--rv-radius-pill);
    font-size: var(--rv-font-size-xs);
    font-weight: var(--rv-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.rv-tier-badge--residential { background: #dbeafe; color: #1d4ed8; }
.rv-tier-badge--commercial  { background: #fef3c7; color: #92400e; }
.rv-tier-badge--complex     { background: #fce7f3; color: #9d174d; }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.rv-empty-state {
    text-align: center;
    padding: var(--rv-space-7) var(--rv-space-5);
    color: var(--rv-gray-500);
}

.rv-empty-state__icon {
    font-size: 48px;
    margin-bottom: var(--rv-space-4);
    line-height: 1;
}

.rv-empty-state__message {
    font-size: 15px;
    color: var(--rv-gray-500);
    margin: 0;
}

/* ============================================================
   NOTIFICATION BELL
   ============================================================ */

.rv-notification-bell {
    position: relative;
}

.rv-notification-bell__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--rv-space-2);
    border-radius: var(--rv-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    position: relative;
    color: var(--rv-gray-500);
    transition: background 0.15s;
}

.rv-notification-bell__btn:hover {
    background: var(--rv-gray-100);
    color: var(--rv-gray-900);
}

.rv-notification-bell__icon {
    font-size: var(--rv-font-size-xl);
    line-height: 1;
}

.rv-notification-bell__count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: var(--rv-white);
    font-size: 10px;
    font-weight: var(--rv-weight-bold);
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: var(--rv-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--rv-space-1);
}

.rv-notification-bell__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--rv-white);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-mlg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
}

.rv-notification-bell__dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rv-space-3) var(--rv-space-4);
    border-bottom: 1px solid var(--rv-gray-200);
}

.rv-notification-bell__dropdown-title {
    font-size: var(--rv-font-size-smd);
    font-weight: var(--rv-weight-bold);
    color: var(--rv-gray-900);
}

.rv-notification-bell__mark-all {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--rv-font-size-sm);
    color: var(--rv-accent, #2563eb);
    padding: var(--rv-space-1) var(--rv-space-2);
}

.rv-notification-bell__list-wrap {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   ONBOARDING WIZARD PROGRESS (F88)
   ============================================================ */

.rv-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rv-space-2);
    margin-bottom: var(--rv-space-6);
}

.rv-wizard-progress__label {
    font-size: var(--rv-font-size-base);
    color: var(--rv-gray-500);
    font-weight: var(--rv-weight-medium);
}

.rv-wizard-progress__dots {
    display: flex;
    gap: 6px;
}

.rv-wizard-progress__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--rv-radius-circle);
    background: var(--rv-gray-300);
    transition: background 0.2s;
}

.rv-wizard-progress__dot--active {
    background: var(--rv-accent, #2563eb);
}

.rv-wizard-progress__dot--complete {
    background: #16a34a;
}

/* ============================================================
   PP GATE WALLS (F88 Rule 136 — feature-specific, never generic)
   ============================================================ */

.rv-pp-gate {
    text-align: center;
    padding: 40px 24px;
    background: var(--rv-gray-50);
    border-radius: var(--rv-radius-mlg);
    border: 1px dashed var(--rv-gray-300);
}

.rv-pp-gate__icon {
    font-size: 36px;
    margin-bottom: var(--rv-space-3);
}

.rv-pp-gate__title {
    font-size: var(--rv-font-size-md);
    font-weight: var(--rv-weight-bold);
    color: var(--rv-gray-900);
    margin-bottom: var(--rv-space-2);
}

.rv-pp-gate__desc {
    font-size: var(--rv-font-size-base);
    color: var(--rv-gray-500);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.rv-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--rv-space-6);
    color: var(--rv-gray-500);
    font-size: var(--rv-font-size-base);
}

/* ============================================================
   FORM ROWS (used across buyer views)
   ============================================================ */

.rv-form-row {
    margin-bottom: var(--rv-space-4);
}

.rv-form-label {
    display: block;
    font-size: var(--rv-font-size-smd);
    font-weight: var(--rv-weight-semibold);
    color: var(--rv-gray-700);
    margin-bottom: 6px;
}

.rv-form-input,
.rv-form-select,
.rv-form-textarea {
    width: 100%;
    padding: var(--rv-space-2) var(--rv-space-3);
    border: 1px solid var(--rv-gray-300);
    border-radius: var(--rv-radius-sm);
    font-size: var(--rv-font-size-base);
    color: var(--rv-gray-900);
    background: var(--rv-white);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rv-form-input:focus,
.rv-form-select:focus,
.rv-form-textarea:focus {
    outline: none;
    border-color: var(--rv-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.rv-form-textarea { resize: vertical; }
.rv-form-actions  { display: flex; gap: 10px; align-items: center; margin-top: 20px; }

.rv-hint {
    font-size: var(--rv-font-size-sm);
    color: var(--rv-gray-400);
    margin-top: var(--rv-space-1);
    line-height: 1.5;
}

.rv-required { color: #ef4444; margin-left: 2px; }

/* ============================================================
   PAGINATION
   ============================================================ */

.rv-pagination,
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rv-space-2);
    margin-top: var(--rv-space-5);
    flex-wrap: wrap;
}

.page-numbers,
.nav-previous a,
.nav-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--rv-radius-sm);
    font-size: var(--rv-font-size-smd);
    font-weight: var(--rv-weight-medium);
    color: var(--rv-gray-700);
    background: var(--rv-gray-100);
    border: 1px solid var(--rv-gray-200);
    text-decoration: none;
    transition: background 0.15s;
}

.page-numbers:hover,
.nav-previous a:hover,
.nav-next a:hover {
    background: var(--rv-gray-200);
    text-decoration: none;
}

.page-numbers.current {
    background: var(--rv-accent, #2563eb);
    color: var(--rv-white);
    border-color: var(--rv-accent, #2563eb);
}

/* ============================================================
   HEADER CONTROLS — Language Selector + Display Mode Toggle
   ============================================================ */

/* ── Shared header controls wrapper ── */
.rv-header-controls {
    display: flex;
    align-items: center;
    gap: var(--rv-space-2);
    margin-left: auto;
}

/* ── Language Selector ── */
.rv-lang-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rv-lang-selector__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--rv-space-1);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--rv-radius-sm);
    background: transparent;
    color: inherit;
    font-size: var(--rv-font-size-smd);
    font-weight: var(--rv-weight-medium);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.rv-lang-selector__trigger:hover,
.rv-lang-selector__trigger[aria-expanded="true"] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
}

.rv-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--rv-white);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.rv-lang-dropdown[hidden] { display: none; }

.rv-lang-dropdown__item {
    padding: 8px 14px;
    font-size: var(--rv-font-size-smd);
    color: var(--rv-gray-700);
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.rv-lang-dropdown__item:hover {
    background: var(--rv-gray-100);
}

.rv-lang-dropdown__item--active {
    font-weight: var(--rv-weight-semibold);
    color: var(--rv-accent, #2563eb);
}

/* RTL support for dropdown */
[dir="rtl"] .rv-lang-dropdown {
    right: auto;
    left: 0;
}

/* ── Display Mode Toggle ── */
.rv-display-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rv-display-mode-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--rv-radius-sm);
    background: transparent;
    color: inherit;
    font-size: var(--rv-font-size-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}

.rv-display-mode-toggle__btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
}

.rv-display-mode-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: var(--rv-white);
    border: 1px solid var(--rv-gray-200);
    border-radius: var(--rv-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.rv-display-mode-menu[hidden] { display: none; }

.rv-display-mode-menu__item {
    padding: 8px 14px;
    font-size: var(--rv-font-size-smd);
    color: var(--rv-gray-700);
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.rv-display-mode-menu__item:hover {
    background: var(--rv-gray-100);
}

.rv-display-mode-menu__item.active {
    font-weight: var(--rv-weight-semibold);
    color: var(--rv-accent, #2563eb);
}

/* On dark niche headers, ensure dropdown contrast */
.rv-site-header .rv-lang-dropdown,
.rv-site-header .rv-display-mode-menu {
    color: var(--rv-gray-900);
}

/* ============================================================
   Translation Accuracy Disclaimer Banner
   One-time dismissible banner for non-English
   buyers. Renders below .rv-site-header__inner inside <header>.
   Warm neutral tone — informative, not alarming.
   ============================================================ */

.rv-translation-disclaimer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rv-space-3);
    padding: 10px 24px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    font-size: var(--rv-font-size-smd);
    color: #78350f;
    line-height: 1.5;
}

.rv-translation-disclaimer__text {
    margin: 0;
    flex: 1;
}

.rv-translation-disclaimer__link {
    color: #92400e;
    text-decoration: underline;
    margin-left: var(--rv-space-1);
}

.rv-translation-disclaimer__link:hover {
    color: #78350f;
}

.rv-translation-disclaimer__dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #fcd34d;
    border-radius: var(--rv-radius-xs);
    background: transparent;
    color: #92400e;
    font-size: var(--rv-font-size-base);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 1;
}

.rv-translation-disclaimer__dismiss:hover {
    background: #fef3c7;
    border-color: #f59e0b;
}

/* Dark mode — keep warm tone, adapt contrast */
.rv-dark .rv-translation-disclaimer {
    background: #1c1a10;
    border-top-color: #78350f;
    color: #fde68a;
}

.rv-dark .rv-translation-disclaimer__link {
    color: #fcd34d;
}

.rv-dark .rv-translation-disclaimer__link:hover {
    color: #fde68a;
}

.rv-dark .rv-translation-disclaimer__dismiss {
    border-color: #78350f;
    color: #fcd34d;
}

.rv-dark .rv-translation-disclaimer__dismiss:hover {
    background: #292012;
    border-color: #92400e;
}

/* ============================================================================
   DRIFT-717 — BATCH P1-8a: notification-bell dropdown states
   (base rv-notification-bell* already in this file)
   ============================================================================ */
.rv-notification-bell__loading,
.rv-notification-bell__empty {
    padding: var(--rv-space-4, 16px);
    text-align: center;
    font-size: var(--rv-font-size-smd);
    color: var(--rv-text-secondary, #6b7280);
}