/* ════════════════════════════════════════════════════════════════════════
   COYNITT PORTAL — GLASS COMPONENT LAYER (canonical)            2026-06-11
   The single source of truth for glassmorphic surfaces. Loaded LAST on
   every page (after app.css / portal-v3.css / auth-v3.css / kyc-v3.css)
   so its rules win.

   Tokens come from app.css :root (navy-tinted light theme):
     --bg-canvas #E9EFF6 · --glass-bg · --glass-bd · --glass-blur
     --sh-card · --sh-hover · --teal #53C6C8 · --navy-deep #0D1A26

   Usage: pages apply these classes in markup. Page-specific CSS keeps
   LAYOUT only (grid/flex/spacing); surfaces (background/border/shadow)
   come from here. No gradients. No emojis. Chevrons, not arrows.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Core frosted card ─────────────────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg, rgba(248, 251, 255, 0.60));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  border: 1px solid var(--glass-bd, rgba(255, 255, 255, 0.62));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38)),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
.glass-card:hover {
  box-shadow: var(--sh-hover, 0 24px 52px -22px rgba(16, 38, 66, 0.48)),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

/* More opaque variant for dense/data-heavy surfaces (tables, forms) */
.glass-strong {
  background: rgba(250, 252, 255, 0.78);
}

/* Subtler variant for secondary surfaces (hints, footers, meta rows) */
.glass-soft {
  background: rgba(244, 249, 254, 0.42);
  box-shadow: var(--sh-sm, 0 6px 18px -10px rgba(16, 38, 66, 0.30));
}

/* ── Interactive tile (country pickers, quick actions, method choices) ─── */
.glass-tile {
  background: var(--glass-bg, rgba(248, 251, 255, 0.60));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  border: 1px solid var(--glass-bd, rgba(255, 255, 255, 0.62));
  border-radius: var(--r-md, 10px);
  box-shadow: var(--sh-sm, 0 6px 18px -10px rgba(16, 38, 66, 0.30));
  transition: transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
}
.glass-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(83, 198, 200, 0.55);
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38));
}
.glass-tile.is-selected,
.glass-tile[aria-selected="true"] {
  border-color: var(--teal, #53C6C8);
  background: rgba(83, 198, 200, 0.10);
}

/* ── Brand-navy hero panel (wallet balance, page heroes) ───────────────── */
/* The one deliberate dark surface in the light theme — a brand moment,     */
/* same as the login page's navy panel. Glassy edge keeps it in family.    */
.glass-hero {
  background: var(--navy-deep, #0D1A26);
  color: #FDF6EC;
  border: 1px solid rgba(83, 198, 200, 0.25);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38));
}
.glass-hero .glass-eyebrow { color: var(--teal, #53C6C8); }

/* Home balance widget sits on the navy glass-hero panel → light text so the
   figure isn't dark-on-dark (the inner balance-* rules default to dark tx1). */
.home-hero-balance.glass-hero .balance-label,
.home-hero-balance.glass-hero .balance-currency,
.home-hero-balance.glass-hero .balance-meta { color: rgba(253, 246, 236, 0.64); }
.home-hero-balance.glass-hero .balance-amount { color: #FDF6EC; }
.home-hero-balance.glass-hero .balance-link { color: var(--teal, #53C6C8); }

/* ── Inputs ────────────────────────────────────────────────────────────── */
.glass-input,
input.glass-input,
select.glass-input,
textarea.glass-input {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 38, 66, 0.14);
  border-radius: var(--r-md, 10px);
  color: var(--tx1, #13243A);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.glass-input:focus {
  outline: none;
  border-color: var(--teal, #53C6C8);
  box-shadow: 0 0 0 3px rgba(83, 198, 200, 0.20);
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.glass-table-wrap {
  background: rgba(250, 252, 255, 0.78);
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  border: 1px solid var(--glass-bd, rgba(255, 255, 255, 0.62));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38));
  overflow: hidden;
}
.glass-table-wrap table thead th {
  background: rgba(233, 239, 246, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.glass-table-wrap table tbody tr { border-top: 1px solid rgba(16, 38, 66, 0.07); }
.glass-table-wrap table tbody tr:hover { background: rgba(83, 198, 200, 0.06); }

/* ── List rows (activity, recipients, round members) ───────────────────── */
.glass-row {
  background: rgba(250, 252, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-md, 10px);
  transition: background 150ms ease, border-color 150ms ease;
}
.glass-row:hover {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(83, 198, 200, 0.40);
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.glass-modal {
  background: rgba(252, 253, 255, 0.88);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--sh-xl, 0 30px 60px -26px rgba(16, 38, 66, 0.50));
}

/* ── Typography helpers ────────────────────────────────────────────────── */
.glass-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx3, #4E6880);
}

/* ── Solid buttons (no gradients — Stanford rule) ──────────────────────── */
.glass-btn-primary {
  background: var(--teal, #53C6C8);
  color: var(--navy-deep, #0D1A26);
  border: none;
  border-radius: var(--r-md, 10px);
  font-weight: 700;
  transition: filter 150ms ease, transform 150ms ease;
}
.glass-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.glass-btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  color: var(--tx1, #13243A);
  border: 1px solid rgba(16, 38, 66, 0.14);
  border-radius: var(--r-md, 10px);
  font-weight: 600;
}
.glass-btn-ghost:hover { border-color: rgba(83, 198, 200, 0.55); }

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL CORRECTIONS — apply on every page that loads this file
   ════════════════════════════════════════════════════════════════════════ */

/* Light-only product: the theme toggle is retired everywhere.
   (Previously hidden via portal-v3.css — which 13+ pages never load.) */
.theme-row { display: none !important; }

/* Legacy flat-white card era: pull the v2 .card/.stat-card onto glass on
   pages that load only app.css (app.css's own skin block also covers this;
   kept here so the canonical layer is self-sufficient). */
.card, .stat-card {
  background: var(--glass-bg, rgba(248, 251, 255, 0.60));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  border: 1px solid var(--glass-bd, rgba(255, 255, 255, 0.62));
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38)),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

/* ════════════════════════════════════════════════════════════════════════
   LEGACY + JS-RENDERED SURFACE COVERAGE
   portal-v3.css flat-fills many bespoke card classes with var(--bg-card),
   and several are injected by inline <script> (round cards, harambee
   campaign cards) so markup-level glass classes can't reach them. glass.css
   loads LAST, so frosting these selectors directly here guarantees uniform
   surfaces whether an element is static or JS-rendered. Single source of truth.
   ════════════════════════════════════════════════════════════════════════ */

/* Card surfaces → frosted glass.
   .home-hero / .rounds-hero / .h-hero carried a warm #FFF8EE cream wash
   (var(--hero-bg)) that clashed with the cool navy-tinted theme — frosting
   them here makes the hero a glass panel (holding the navy balance card),
   uniform with every other surface. */
.card-v2, .card-v3, .rcard,
.activity-card, .tip-card, .discover-card,
.quote-card, .review-block, .fee-breakdown, .amount-conv,
.round-card, .campaign-card,
.member-card, .contribution-card, .contributor-row,
.rinfo, .home-hero, .h-hero, .rounds-hero,
.amount-hero-block, .panel, .surface, .faq {
  background: var(--glass-bg, rgba(248, 251, 255, 0.60));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  border: 1px solid var(--glass-bd, rgba(255, 255, 255, 0.62));
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38)),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
.card-v2:hover, .card-v3:hover, .round-card:hover,
.campaign-card:hover, .tip-card:hover, .discover-card:hover {
  box-shadow: var(--sh-hover, 0 24px 52px -22px rgba(16, 38, 66, 0.48)),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

/* Interactive choice tiles → frosted glass + hover lift */
.country-tile, .recipient-tile, .recipient-card,
.new-round-card, .new-campaign-card, .funding-method, .method-card {
  background: var(--glass-bg, rgba(248, 251, 255, 0.60));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(165%));
  border: 1px solid var(--glass-bd, rgba(255, 255, 255, 0.62));
  box-shadow: var(--sh-sm, 0 6px 18px -10px rgba(16, 38, 66, 0.30));
  transition: transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.country-tile:hover, .recipient-tile:hover, .recipient-card:hover,
.new-round-card:hover, .new-campaign-card:hover,
.funding-method:hover, .method-card:hover {
  transform: translateY(-2px);
  border-color: rgba(83, 198, 200, 0.55);
  box-shadow: var(--sh-card, 0 18px 44px -22px rgba(16, 38, 66, 0.38));
}
.country-tile.is-selected, .recipient-tile.is-selected,
.funding-method.is-selected, .method-card.is-selected {
  border-color: var(--teal, #53C6C8);
  background: rgba(83, 198, 200, 0.10);
}

/* Containers that hold tiles/cards must NOT frost — only their children do */
.country-grid, .recipient-list, .discover-grid, .rounds-grid,
.campaign-grid, .member-grid { background: transparent; }

/* Accent surfaces that intentionally stay (teal totals, status, progress) are
   left to their own rules — not overridden here. */