/* =========================================================================
   Re Essential Capitals — unified design system (RED / premium revision)
   Loaded AFTER legacy stylesheets on every page so it governs the final look.

   Palette note: the dashboard SIDEBAR (.nav-dashboard / .main-nav-list /
   .offcanvas) intentionally keeps its original dark-navy + gold look — that
   block is left untouched by request. Everything else on the site (public
   pages, auth pages, dashboard content/cards) uses the new deep-red +
   black/charcoal premium palette defined below.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  /* ---- new brand palette: deep luxury red + black/charcoal ---- */
  --re-black-950:#0d0405;
  --re-black-900:#1a0508;
  --re-black-800:#24080b;
  --re-black-700:#340d12;
  --re-black-600:#41121a;
  --re-red-800:#6e0f1c;
  --re-red-700:#8f1524;
  --re-red-600:#b71c2b;
  --re-red-500:#e6394a;
  --re-red-400:#ef5a68;
  --re-red-300:#f5919b;
  --re-cream:#f5e9ea;

  --re-bg:#faf6f6;
  --re-surface:#ffffff;
  --re-surface-alt:#fbf3f3;
  --re-border:#f0dfe0;
  --re-text:#1a1210;
  --re-text-muted:#7a5a5d;
  --re-text-soft:#b08d90;

  --re-success:#12b76a;
  --re-success-bg:#e7f9f1;
  --re-danger:#8f1524;
  --re-danger-bg:#fbe8ea;
  --re-warning:#f79009;
  --re-warning-bg:#fef3e2;
  --re-info:#2e90fa;
  --re-info-bg:#eaf4ff;

  --re-radius-sm:8px;
  --re-radius-md:14px;
  --re-radius-lg:22px;
  --re-shadow-sm:0 1px 2px rgba(13,4,5,.06);
  --re-shadow-md:0 10px 30px rgba(13,4,5,.12);
  --re-shadow-lg:0 28px 70px rgba(13,4,5,.35);
  --re-font-body:'Plus Jakarta Sans','Segoe UI',sans-serif;
  --re-font-display:'Sora','Plus Jakarta Sans',sans-serif;

  /* ---- preserved dashboard-sidebar palette (do not repurpose) ---- */
  --re-navy-950:#060c17;
  --re-navy-900:#0a1526;
  --re-gold-400:#e8c468;
  --re-gold-500:#d4af37;
}

/* ---------- base ---------- */
body{ font-family:var(--re-font-body) !important; color:var(--re-text); background:var(--re-bg); }
h1,h2,h3,h4,h5,h6{ font-family:var(--re-font-display); font-weight:700; letter-spacing:-.01em; }
a{ transition:color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
::selection{ background:var(--re-red-500); color:#fff; }

/* ---------- buttons ---------- */
.btn-but,
.btn-brand{
  background:linear-gradient(135deg,var(--re-red-600),var(--re-red-700)) !important;
  color:#ffffff !important;
  border:none !important;
  font-weight:700;
  padding:.7rem 1.6rem;
  box-shadow:0 10px 24px rgba(183,28,43,.28);
}
.btn-but:hover,
.btn-brand:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--re-red-500),var(--re-red-600)) !important;
  box-shadow:0 14px 30px rgba(183,28,43,.38);
  color:#fff !important;
}
.btn-brand-outline{
  background:transparent !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
  font-weight:600;
  padding:.65rem 1.5rem;
  border-radius:999px;
}
.btn-brand-outline:hover{ background:rgba(255,255,255,.12) !important; border-color:#fff !important; }
.btn-brand-navy{
  background:var(--re-black-900) !important;
  color:#fff !important;
  border:none !important;
  font-weight:700;
  border-radius:999px;
  padding:.65rem 1.5rem;
}
.btn-brand-navy:hover{ background:var(--re-black-800) !important; transform:translateY(-2px); }

.banks button, .re-plan-card button{
  background:var(--re-black-900);
  color:#fff;
  border:none;
  padding:.65rem 1.5rem;
  border-radius:999px;
  font-weight:700;
  margin-top:.75rem;
}
.banks button:hover{ background:linear-gradient(135deg,var(--re-red-600),var(--re-red-700)); }

/* =========================================================================
   PUBLIC SITE — nav / footer / sections
   ========================================================================= */
nav.navbar{
  background:linear-gradient(180deg,var(--re-black-950),var(--re-black-900)) !important;
  height:auto !important;
  padding:.6rem 1.5rem !important;
  box-shadow:0 2px 24px rgba(0,0,0,.45);
  border-bottom:1px solid rgba(230,57,74,.18);
}
nav.navbar .navbar-brand img{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
nav.navbar .nav-link{ color:rgba(255,255,255,.85) !important; font-weight:600; padding:.6rem 1rem !important; }
nav.navbar .nav-link:hover, nav.navbar .nav-link:focus{ color:var(--re-red-400) !important; }
nav.navbar .dropdown-menu{
  background:var(--re-black-900); border:1px solid rgba(230,57,74,.2);
  border-radius:var(--re-radius-md); box-shadow:var(--re-shadow-lg);
}
nav.navbar .dropdown-item{ color:rgba(255,255,255,.85); border-radius:8px; }
nav.navbar .dropdown-item:hover{ background:rgba(183,28,43,.22); color:var(--re-red-400); }
nav.navbar .navbar-toggler{ background:var(--re-red-600) !important; border-radius:8px; }
#google_translate_element{ filter:invert(1) grayscale(1) contrast(1.4); opacity:.85; }

.footer{
  background:var(--re-black-950) !important;
  color:rgba(255,255,255,.7);
  padding:3rem 2rem 1.5rem;
}
.footer p{ color:rgba(255,255,255,.65); }
.footer a{ color:var(--re-red-400); }
.re-footer-heading{ color:var(--re-red-400); letter-spacing:.08em; font-size:.8rem; }
.re-footer-social{ display:flex; gap:.6rem; margin-top:1rem; }
.re-footer-social a{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.75) !important; font-size:.95rem;
}
.re-footer-social a:hover{ background:var(--re-red-600); border-color:var(--re-red-600); color:#fff !important; }

/* ---------- mega-menu (desktop) ---------- */
.re-mega-nav{ gap:.25rem; }
.re-mega-menu{
  min-width:340px; background:var(--re-black-900); border:1px solid rgba(230,57,74,.2);
  border-radius:var(--re-radius-md); box-shadow:var(--re-shadow-lg); padding:.75rem;
}
.re-mega-item{
  display:flex; align-items:center; gap:.85rem; padding:.7rem .75rem; border-radius:var(--re-radius-sm);
  text-decoration:none; color:rgba(255,255,255,.85);
}
.re-mega-item:hover{ background:rgba(183,28,43,.18); }
.re-mega-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--re-red-600),var(--re-red-800)); color:#fff; font-size:1.15rem;
}
.re-mega-item strong{ display:block; font-size:.92rem; color:#fff; }
.re-mega-item small{ display:block; font-size:.76rem; color:rgba(255,255,255,.55); margin-top:.1rem; }

/* ---------- mobile off-canvas nav ---------- */
.re-mobile-nav{ background:var(--re-black-950); color:#fff; width:300px; }
.re-mobile-nav .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.08); }
.re-mobile-nav .btn-close{ filter:invert(1); }
.re-mobile-nav-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--re-red-400);
  font-weight:800; margin:1.25rem 0 .5rem;
}
.re-mobile-nav-link{
  display:flex; align-items:center; gap:.6rem; padding:.65rem .5rem; border-radius:var(--re-radius-sm);
  color:rgba(255,255,255,.85); text-decoration:none; font-weight:600; font-size:.92rem;
}
.re-mobile-nav-link:hover{ background:rgba(183,28,43,.18); color:var(--re-red-400); }

/* =========================================================================
   NEW PREMIUM HERO (homepage) — full-bleed CSS crossfade, no JS carousel
   ========================================================================= */
.re-hero{
  position:relative;
  height:94vh;
  min-height:640px;
  max-height:920px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:var(--re-black-950);
}
.re-hero-bg{ position:absolute; inset:0; }
.re-hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  animation:re-hero-fade 25s infinite;
}
.re-hero-slide:nth-child(1){ animation-delay:0s; }
.re-hero-slide:nth-child(2){ animation-delay:5s; }
.re-hero-slide:nth-child(3){ animation-delay:10s; }
.re-hero-slide:nth-child(4){ animation-delay:15s; }
.re-hero-slide:nth-child(5){ animation-delay:20s; }
@keyframes re-hero-fade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  20%{ opacity:1; }
  26%{ opacity:0; }
  100%{ opacity:0; }
}
.re-hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 15% 15%, rgba(183,28,43,.38), transparent 60%),
    radial-gradient(900px 600px at 90% 100%, rgba(183,28,43,.22), transparent 55%),
    linear-gradient(180deg, rgba(13,4,5,.72) 0%, rgba(13,4,5,.6) 40%, rgba(13,4,5,.92) 100%);
}
.re-hero-content{
  position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center;
  padding:0 1.5rem; color:#fff;
}
.re-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1.1rem; border:1px solid rgba(230,57,74,.55); border-radius:999px;
  color:var(--re-red-400); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:1.5rem; font-weight:700; background:rgba(183,28,43,.08);
}
.re-hero-content h1{
  font-size:3.4rem; line-height:1.08; margin-bottom:1.1rem; color:#fff; font-weight:800;
}
.re-hero-content h1 span{ color:var(--re-red-500); }
.re-hero-content p{ font-size:1.15rem; color:rgba(255,255,255,.8); margin-bottom:2.25rem; }
.re-hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.re-hero-stats{
  display:flex; gap:2.75rem; justify-content:center; flex-wrap:wrap;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.14);
}
.re-hero-stats strong{ display:block; font-size:1.7rem; color:#fff; font-family:var(--re-font-display); }
.re-hero-stats span{ font-size:.75rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.08em; }
.re-hero-scroll{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.55); font-size:1.4rem; animation:re-hero-bounce 2s infinite;
}
@keyframes re-hero-bounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

@media (max-width:767px){
  .re-hero{ height:auto; min-height:0; padding:6.5rem 0 3.5rem; }
  .re-hero-content h1{ font-size:2.1rem; }
  .re-hero-content p{ font-size:1rem; }
  .re-hero-stats{ gap:1.5rem; }
}

/* =========================================================================
   PUBLIC SITE — content sections
   ========================================================================= */
.statistics-container{ padding-top:4.5rem !important; padding-bottom:2.5rem; }
.statistics-container h2{ color:var(--re-black-950); font-size:2.1rem; }
.statistics-container h6{ color:var(--re-red-600); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; font-weight:800; margin-bottom:1rem; }
.statistics-container > .row > h3, .statistics-container > h3, .banks > h3{
  text-align:center; width:100%; color:var(--re-black-950); font-size:2.1rem; margin-bottom:.5rem;
}

.re-section-eyebrow{
  display:block; text-align:center; color:var(--re-red-600); text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; font-weight:800; margin-bottom:.5rem;
}

.banking-statistics section,
.re-feature-card{
  background:var(--re-surface);
  border:1px solid var(--re-border);
  border-radius:var(--re-radius-lg);
  padding:2.25rem 1.75rem;
  margin:.75rem;
  box-shadow:var(--re-shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.banking-statistics section::before{
  content:""; position:absolute; top:0; left:2rem; right:2rem; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--re-red-500),var(--re-red-700)); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.banking-statistics section:hover{ transform:translateY(-8px); box-shadow:var(--re-shadow-md); border-color:var(--re-red-300); }
.banking-statistics section:hover::before{ transform:scaleX(1); }
.banking-statistics section img{ width:60px; height:60px; object-fit:contain; margin-bottom:1.1rem; }
.banking-statistics section h5{ color:var(--re-black-950); font-size:1.2rem; }
.banking-statistics section p{ color:var(--re-text-muted); font-size:.95rem; }

.contents-img{ display:flex; align-items:center; justify-content:center; }
.contents-img img{ border-radius:var(--re-radius-lg); box-shadow:var(--re-shadow-md); }
.contents-img iframe{ border-radius:var(--re-radius-lg); box-shadow:var(--re-shadow-md); min-height:280px; }

.banks{ background:var(--re-surface-alt) !important; padding:4.5rem 1rem; }
.banks section{
  background:var(--re-surface);
  border:1.5px solid var(--re-border);
  border-radius:var(--re-radius-lg);
  padding:2.25rem 1.75rem;
  box-shadow:var(--re-shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.banks section:hover{ transform:translateY(-8px); box-shadow:var(--re-shadow-lg); border-color:var(--re-red-500); }
.banks section img{ width:52px; height:52px; object-fit:contain; }
.banks section h3{ color:var(--re-black-950); font-size:1.3rem; margin:.85rem 0; }
.banks section p{ color:var(--re-text-muted); font-size:.92rem; margin:.4rem 0; }
.banks section i{ color:var(--re-red-600); }
.banks section:nth-child(2){ border-color:var(--re-red-600); box-shadow:0 18px 45px rgba(183,28,43,.18); }
.banks section:nth-child(2)::after{
  content:"Most Popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--re-red-600),var(--re-red-700)); color:#fff; font-size:.68rem;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .9rem; border-radius:999px;
  box-shadow:0 6px 16px rgba(183,28,43,.4);
}

.accordion-button{ font-weight:700; color:var(--re-black-950); }
.accordion-button:not(.collapsed){ background:var(--re-black-950); color:var(--re-red-400); }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(183,28,43,.2); }
.accordion-item{ border-radius:var(--re-radius-md) !important; overflow:hidden; margin-bottom:.75rem; border:1px solid var(--re-border) !important; }

.testimony{ background:linear-gradient(180deg,var(--re-black-950),var(--re-black-900)); }
.testimony article{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(230,57,74,.28);
  border-radius:var(--re-radius-lg);
  padding:2rem 1.5rem;
  text-align:center;
  height:100%;
}
.testimony article img{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:.75rem; border:2px solid var(--re-red-500); }
.testimony article h5{ color:#fff; }
.testimony article p{ color:rgba(255,255,255,.75); }
.testimony article p[style]{ color:var(--re-red-400) !important; }

.leadership-stat section{
  background:var(--re-surface); border:1px solid var(--re-border); border-radius:var(--re-radius-lg);
  padding:1.85rem; box-shadow:var(--re-shadow-sm); text-align:center;
}
.leadership-stat section img{ width:120px; height:120px; object-fit:cover; border-radius:50%; margin-bottom:1rem; border:3px solid var(--re-red-500); }

/* ---------- CTA banner (reused across subpages) ---------- */
.re-cta-banner{
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(230,57,74,.35), transparent 60%),
    linear-gradient(135deg,var(--re-black-950),var(--re-black-900));
  border-radius:var(--re-radius-lg);
  margin:3rem auto; max-width:1200px; padding:3.5rem 2rem;
}
.re-cta-banner h2{ color:#fff; font-size:2rem; margin-bottom:.75rem; }
.re-cta-banner p{ color:rgba(255,255,255,.75); font-size:1.05rem; margin-bottom:1.75rem; }

/* ---------- process step numbers on light bg ---------- */
.banks section i.bi-1-circle, .banks section i.bi-2-circle, .banks section i.bi-3-circle, .banks section i.bi-4-circle{ color:var(--re-red-600); }

/* ---------- subpage hero banners (.afternavigation + .transparent) ---------- */
.afternavigation{ position:relative; overflow:hidden; height:400px; }
.afternavigation > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.55) saturate(1.05);
}
.afternavigation::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 15% 10%, rgba(183,28,43,.4), transparent 60%),
    linear-gradient(180deg, rgba(13,4,5,.55), rgba(13,4,5,.9));
}
.afternavigation .transparent{
  position:relative !important; inset:auto !important; background:transparent !important;
  height:100%; padding:0 1.5rem !important; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:2; max-width:760px; margin:0 auto;
}
.afternavigation .transparent .transparent{ position:static !important; background:transparent !important; padding:0 !important; height:auto; }
.transparent h1{ font-size:2.5rem !important; margin-bottom:.75rem !important; }
.transparent p{ font-size:1.05rem !important; opacity:.85; }

@media (max-width:767px){
  .afternavigation{ height:320px; }
  .transparent h1{ font-size:1.9rem !important; }
}

/* =========================================================================
   AUTH PAGES (client + admin)
   ========================================================================= */
.re-auth-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  background:
    radial-gradient(1100px 550px at 10% -10%, rgba(183,28,43,.32), transparent 60%),
    radial-gradient(900px 550px at 110% 110%, rgba(183,28,43,.2), transparent 55%),
    linear-gradient(180deg,var(--re-black-950),var(--re-black-900));
}
.re-auth-card{
  width:100%;
  max-width:440px;
  background:var(--re-surface);
  border-radius:var(--re-radius-lg);
  box-shadow:var(--re-shadow-lg);
  padding:2.5rem 2.25rem;
  position:relative;
  overflow:hidden;
}
.re-auth-card--wide{ max-width:560px; }
.re-auth-logo{ display:flex; justify-content:center; margin-bottom:1.25rem; }
.re-auth-logo img{ width:120px; height:auto; object-fit:contain; }
.re-auth-title{ text-align:center; color:var(--re-black-950); font-size:1.5rem; margin-bottom:.25rem; }
.re-auth-subtitle{ text-align:center; color:var(--re-text-muted); font-size:.9rem; margin-bottom:1.75rem; }
.re-auth-card label{ font-weight:600; font-size:.85rem; color:var(--re-black-900); margin-bottom:.35rem; }
.re-auth-card .form-control,
.re-auth-card .form-select{
  border:1.5px solid var(--re-border);
  border-radius:var(--re-radius-sm);
  padding:.7rem .9rem;
  font-size:.95rem;
  background:var(--re-surface-alt);
}
.re-auth-card .form-control:focus,
.re-auth-card .form-select:focus{
  border-color:var(--re-red-500);
  box-shadow:0 0 0 3px rgba(183,28,43,.16);
  background:#fff;
}
.re-auth-card .btn-but,
.re-auth-card .btn-brand{ width:100%; border-radius:var(--re-radius-sm); padding:.8rem; font-size:1rem; margin-top:.5rem; }
.re-auth-links{ text-align:center; margin-top:1.25rem; font-size:.88rem; color:var(--re-text-muted); }
.re-auth-links a{ color:var(--re-red-600); font-weight:700; text-decoration:none; }
.re-auth-links a:hover{ color:var(--re-red-700); }
.re-auth-back{ position:fixed; top:1.5rem; left:1.5rem; z-index:10; }
.re-auth-back a{ color:rgba(255,255,255,.8); text-decoration:none; font-weight:600; font-size:.9rem; }
.re-auth-back a:hover{ color:var(--re-red-400); }

/* =========================================================================
   DASHBOARD SHELL
   The sidebar/mobile-nav below is left exactly as it was (dark navy + gold)
   per explicit request — do not repurpose these rules to the red palette.
   ========================================================================= */
body:has(.nav-dashboard){ background:var(--re-bg); }
.nav-dashboard{
  background:linear-gradient(180deg,var(--re-navy-950),var(--re-navy-900)) !important;
  min-height:100vh;
  padding:0 !important;
  box-shadow:2px 0 20px rgba(0,0,0,.15);
}
.nav-dashboard aside{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  padding:1.5rem 1.25rem !important;
}
.nav-dashboard aside img{ filter:brightness(0) invert(1); }
.main-nav-list{ padding:1rem .75rem; }
.main-nav-list li{
  background:transparent !important;
  border:none !important;
  color:rgba(255,255,255,.72);
  border-radius:var(--re-radius-sm);
  margin-bottom:.2rem;
  font-weight:600;
  font-size:.92rem;
  transition:background .15s ease, color .15s ease;
}
.main-nav-list a:hover li{ background:rgba(212,175,55,.14); color:var(--re-gold-400); }
.main-nav-list a.active li{ background:rgba(212,175,55,.18); color:var(--re-gold-400); }
.main-nav-list a[href*="logout"] li,
.main-nav-list a[data-bs-target*="staticBackdrop"] li{ color:rgba(255,255,255,.5); margin-top:.75rem; border-top:1px solid rgba(255,255,255,.08) !important; padding-top:1rem !important; border-radius:0 !important; }

.offcanvas{ background:var(--re-navy-950) !important; }
.offcanvas-header{ background:var(--re-navy-950) !important; border-bottom:1px solid rgba(255,255,255,.08); }
.offcanvas-header img{ filter:brightness(0) invert(1); }
.offcanvas .btn-close{ filter:invert(1); }

/* ---------- dashboard CONTENT area — this is the part that gets the new red treatment ---------- */
.dashboard-container{ background:var(--re-bg); padding:0 0 3rem; }
.header-content{
  background:var(--re-surface) !important;
  border-bottom:1px solid var(--re-border);
  padding:1rem 1.5rem !important;
  align-items:center;
  box-shadow:var(--re-shadow-sm);
  position:sticky; top:0; z-index:20;
}
.header-content article{ color:var(--re-black-950) !important; font-size:1rem !important; font-weight:600; }
.header-content article .fw-bold{ color:var(--re-red-600); }
.header-content .img-thumbnail{ border-color:var(--re-red-500) !important; }

.re-card, .card{
  border:1px solid var(--re-border) !important;
  border-radius:var(--re-radius-md) !important;
  box-shadow:var(--re-shadow-sm);
}
.re-page-title{ font-size:1.35rem; color:var(--re-black-950); margin:1.5rem 1.5rem .25rem; font-weight:800; }
.re-page-subtitle{ margin:0 1.5rem 1.5rem; color:var(--re-text-muted); font-size:.92rem; }

.re-stat-row{ display:flex; flex-wrap:wrap; gap:1rem; padding:0 1.5rem; margin-bottom:1.5rem; }
.re-stat-card{
  flex:1 1 200px;
  background:var(--re-surface);
  border:1px solid var(--re-border);
  border-radius:var(--re-radius-md);
  padding:1.25rem 1.4rem;
  box-shadow:var(--re-shadow-sm);
  position:relative;
  overflow:hidden;
}
.re-stat-card::after{
  content:""; position:absolute; right:-20px; top:-20px; width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg,var(--re-red-500),var(--re-red-700)); opacity:.14;
}
.re-stat-card .re-stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--re-text-muted); font-weight:700; }
.re-stat-card .re-stat-value{ font-size:1.6rem; font-weight:800; color:var(--re-black-950); margin-top:.35rem; }
.re-stat-card i{ font-size:1.4rem; color:var(--re-red-600); }

/* dashboard stat tiles — admin: .statistics-content (white card, red accent, unchanged) */
.statistics-data, .statistics-data2{ padding:1.5rem 1rem; gap:1rem; }
.statistics-content{
  background:var(--re-surface) !important;
  background-image:none !important;
  border:1px solid var(--re-border);
  border-left:4px solid var(--re-red-600);
  border-radius:var(--re-radius-md);
  padding:1.25rem 1.4rem !important;
  margin:.5rem !important;
  box-shadow:var(--re-shadow-sm);
  color:var(--re-text) !important;
}
.statistics-content h3{
  font-size:.8rem !important; text-transform:uppercase; letter-spacing:.05em;
  color:var(--re-text-muted) !important; font-weight:700; margin-bottom:.5rem;
}
.statistics-content h5{ color:var(--re-black-950) !important; font-weight:800; }
.statistics-content p{ color:var(--re-text-soft) !important; font-size:.78rem; margin-bottom:0; }
.statistics-content i{ color:var(--re-red-600); }

/* client (Userdashboard): .statistics-content2 — solid red card per explicit request */
.statistics-content2{
  background:linear-gradient(140deg,var(--re-red-500),var(--re-red-700)) !important;
  background-image:linear-gradient(140deg,var(--re-red-500),var(--re-red-700)) !important;
  border:none !important;
  border-radius:var(--re-radius-md);
  padding:1.25rem 1.4rem !important;
  margin:.5rem !important;
  box-shadow:0 10px 26px rgba(183,28,43,.25);
  color:#fff !important;
}
.statistics-content2 h3{
  font-size:.8rem !important; text-transform:uppercase; letter-spacing:.05em;
  color:rgba(255,255,255,.8) !important; font-weight:700; margin-bottom:.5rem;
}
.statistics-content2 h5{ color:#fff !important; font-weight:800; }
.statistics-content2 p{ color:rgba(255,255,255,.78) !important; font-size:.78rem; margin-bottom:0; }
.statistics-content2 i{ color:#fff; }

/* product / balance cards used across Insurance, Shares, ETFs, Account Manager, Referral (client + admin) */
.insurance-stat section aside{
  background-image:linear-gradient(140deg,var(--re-red-500),var(--re-red-700)) !important;
  border:none !important;
  box-shadow:0 8px 22px rgba(183,28,43,.2);
}

.recent-transaction, .shareMarket, .shareHistory{
  background:var(--re-surface);
  border-radius:var(--re-radius-md);
  padding:1.25rem;
  margin:0 1rem 1.5rem;
  box-shadow:var(--re-shadow-sm);
  border:1px solid var(--re-border);
}
.recent-transaction h4, .shareMarket h4, .shareHistory h4{ color:var(--re-black-950); font-size:1.1rem; }
.sorter{
  border:1.5px solid var(--re-border); border-radius:var(--re-radius-sm);
  padding:.5rem .75rem; margin-bottom:1rem; background:var(--re-surface-alt);
}

/* popups — red per explicit request; buttons inside are left completely untouched */
.modal-content{
  background:linear-gradient(150deg,var(--re-red-700),var(--re-black-900)) !important;
  border-radius:var(--re-radius-md);
  border:none;
  box-shadow:var(--re-shadow-lg);
  color:#fff;
}
.modal-header{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
}
.modal-header h5, .modal-header .modal-title{ color:#fff !important; font-weight:700; }
.modal-body{ color:rgba(255,255,255,.85); }
.modal-body h5{ color:#fff; }
.modal-body p{ color:rgba(255,255,255,.8); }
.modal-body label{ color:rgba(255,255,255,.92) !important; font-weight:600; }
.modal-body .form-control, .modal-body .form-select,
.modal-body select, .modal-body input:not([type=hidden]){
  background:#fff !important; color:var(--re-text) !important; border:1px solid rgba(255,255,255,.5) !important;
}
.modal-body .alert{ color:var(--re-text); }
.modal-footer{ border-top:1px solid rgba(255,255,255,.18); }
.modal .btn-close{ filter:invert(1); }

/* tables */
.table{ background:var(--re-surface); border-radius:var(--re-radius-md); overflow:hidden; }
.table thead th{
  background:var(--re-black-950); color:#fff; border:none; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; padding:.9rem 1rem;
}
.table tbody td{ padding:.85rem 1rem; vertical-align:middle; border-color:var(--re-border); font-size:.9rem; }
.table tbody tr:hover{ background:var(--re-surface-alt); }

/* status badges — matches paystatus/shareStatus/insuranceStatus/account_status strings */
.re-badge, .badge{ border-radius:999px; padding:.35em .85em; font-weight:700; font-size:.72rem; letter-spacing:.02em; }
.re-badge-pending, .badge-pending{ background:var(--re-warning-bg); color:var(--re-warning); }
.re-badge-completed, .badge-completed, .re-badge-active, .badge-active{ background:var(--re-success-bg); color:var(--re-success); }
.re-badge-cancelled, .badge-cancelled, .re-badge-disabled, .badge-disabled{ background:var(--re-danger-bg); color:var(--re-danger); }
.re-badge-unconfirmed, .badge-unconfirmed{ background:var(--re-info-bg); color:var(--re-info); }

/* forms inside dashboard cards */
.dashboard-container .form-control,
.dashboard-container .form-select{
  border:1.5px solid var(--re-border);
  border-radius:var(--re-radius-sm);
  padding:.65rem .85rem;
}
.dashboard-container .form-control:focus,
.dashboard-container .form-select:focus{
  border-color:var(--re-red-500);
  box-shadow:0 0 0 3px rgba(183,28,43,.14);
}

/* client side only: the shared border color above has a faint red/pink tint
   (--re-border is part of the red palette) — swap it for a true neutral
   gray so inputs read as black/white, with a black focus ring instead of red */
body.client-dash .dashboard-container .form-control,
body.client-dash .dashboard-container .form-select,
body.client-dash .form-control,
body.client-dash .form-select{
  border:1.5px solid #c7c7cc !important;
}
body.client-dash .dashboard-container .form-control:focus,
body.client-dash .dashboard-container .form-select:focus,
body.client-dash .form-control:focus,
body.client-dash .form-select:focus{
  border-color:var(--re-black-950) !important;
  box-shadow:0 0 0 3px rgba(13,4,5,.08) !important;
}
.dashboard-container .btn-primary{
  background:linear-gradient(135deg,var(--re-red-600),var(--re-red-700));
  border:none;
}
.dashboard-container .btn-primary:hover{ background:linear-gradient(135deg,var(--re-red-500),var(--re-red-600)); }
.dashboard-container .btn-success{ background:var(--re-success); border:none; }
.dashboard-container .btn-danger{ background:var(--re-danger); border:none; }
.dashboard-container .btn-info{ background:var(--re-info); border:none; }

/* =========================================================================
   USERS (CLIENT) DASHBOARD — monochrome refresh
   Scoped to body.client-dash only, admin dashboard is untouched.
   Cards, tables and popups go black/white/gray; buttons are left alone.
   ========================================================================= */

/* ---- cards: statistics-content2 (My Account) + insurance-stat aside (Insurance/Shares/ETFs/Manager/Referral) ----
   Flat, no accent bars/gradients. The lead tile in each row is inverted solid black
   for hierarchy — the rest stay plain white — instead of a decorative border. */
body.client-dash .statistics-content2,
body.client-dash .insurance-stat section aside,
body.client-dash .insurance-stat aside{
  background:#fff !important;
  background-image:none !important;
  border:1px solid var(--re-border) !important;
  border-radius:16px;
  box-shadow:none !important;
  color:var(--re-text) !important;
  padding:1.6rem 1.7rem !important;
  transition:border-color .15s ease;
}
body.client-dash .statistics-content2:hover,
body.client-dash .insurance-stat section aside:hover,
body.client-dash .insurance-stat aside:hover{ border-color:var(--re-black-950) !important; }

body.client-dash .statistics-content2 h3,
body.client-dash .insurance-stat section aside h3,
body.client-dash .insurance-stat aside h3{
  color:var(--re-text-muted) !important; font-weight:700;
  font-size:.76rem !important; text-transform:uppercase; letter-spacing:.08em;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
body.client-dash .statistics-content2 h5,
body.client-dash .insurance-stat section aside h5,
body.client-dash .insurance-stat aside h5{ color:var(--re-black-950) !important; font-weight:800; letter-spacing:-.01em; }
body.client-dash .statistics-content2 p,
body.client-dash .insurance-stat section aside p,
body.client-dash .insurance-stat aside p{
  color:var(--re-text-soft) !important; font-size:.78rem;
  border-top:1px solid var(--re-border); margin-top:.85rem !important; padding-top:.75rem;
}
/* header icon becomes a small solid badge, not a loose colored glyph */
body.client-dash .statistics-content2 h3 i,
body.client-dash .insurance-stat section aside h3 i,
body.client-dash .insurance-stat aside h3 i{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.85em; height:1.85em; border-radius:50%; flex-shrink:0;
  background:var(--re-black-950) !important; color:#fff !important; font-size:.8em;
}
body.client-dash .statistics-content2 h5 i,
body.client-dash .insurance-stat section aside h5 i,
body.client-dash .insurance-stat aside h5 i{ color:var(--re-black-950) !important; }

/* lead tile per row — solid black, inverted text/badge */
body.client-dash .statistics-content2:first-of-type,
body.client-dash .insurance-stat section aside:first-of-type,
body.client-dash .insurance-stat aside:first-of-type{
  background:var(--re-black-950) !important;
  border-color:var(--re-black-950) !important;
  color:#fff !important;
}
body.client-dash .statistics-content2:first-of-type h3,
body.client-dash .insurance-stat section aside:first-of-type h3,
body.client-dash .insurance-stat aside:first-of-type h3{ color:rgba(255,255,255,.65) !important; }
body.client-dash .statistics-content2:first-of-type h5,
body.client-dash .insurance-stat section aside:first-of-type h5,
body.client-dash .insurance-stat aside:first-of-type h5{ color:#fff !important; }
body.client-dash .statistics-content2:first-of-type h5 i,
body.client-dash .insurance-stat section aside:first-of-type h5 i,
body.client-dash .insurance-stat aside:first-of-type h5 i{ color:#fff !important; }
body.client-dash .statistics-content2:first-of-type p,
body.client-dash .insurance-stat section aside:first-of-type p,
body.client-dash .insurance-stat aside:first-of-type p{ color:rgba(255,255,255,.6) !important; border-top-color:rgba(255,255,255,.18); }
body.client-dash .statistics-content2:first-of-type h3 i,
body.client-dash .insurance-stat section aside:first-of-type h3 i,
body.client-dash .insurance-stat aside:first-of-type h3 i{ background:#fff !important; color:var(--re-black-950) !important; }
/* the full-height chart tile (myaccount TradingView panel) is never a "lead tile" */
body.client-dash .statistics-content2[style*="height:80vh"]{
  background:#fff !important; color:var(--re-text) !important; border-color:var(--re-border) !important;
}

/* ---- tables: force every inline red/green/blue amount + status color to black/gray ---- */
body.client-dash .table [style*="color:red"],
body.client-dash .table [style*="color: #c01313"],
body.client-dash .table [style*="color:#c01313"]{
  color:var(--re-black-950) !important; font-weight:700;
}
body.client-dash .table [style*="color:green"],
body.client-dash .table [style*="color: #097c2a"],
body.client-dash .table [style*="color:#097c2a"]{
  color:var(--re-text-soft) !important; font-weight:600;
}
body.client-dash .table [style*="color:blue"]{ color:var(--re-black-950) !important; }
body.client-dash .table thead th{ background:var(--re-black-950) !important; color:#fff !important; }
body.client-dash .table tbody tr:hover{ background:var(--re-surface-alt) !important; }
body.client-dash p[style*="color:red"], body.client-dash p[style*="color:green"]{ color:var(--re-black-950) !important; }

/* ---- table shell: crisper header/body split, no colored striping ---- */
body.client-dash .table{ border:1px solid var(--re-border); border-collapse:separate; border-spacing:0; }
body.client-dash .table thead th{
  padding:1rem 1.1rem; border-bottom:none;
  font-size:.72rem; letter-spacing:.08em;
}
body.client-dash .table tbody td{ border-color:var(--re-border) !important; font-size:.88rem; }
body.client-dash .table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg:var(--re-surface-alt); color:var(--re-text);
}
body.client-dash .table tbody tr:last-child td{ border-bottom:none; }
body.client-dash .recent-transaction, body.client-dash .shareMarket, body.client-dash .shareHistory{
  border:1px solid var(--re-border); border-radius:16px; box-shadow:none;
}
body.client-dash .sorter{
  border-radius:10px; font-weight:600; font-size:.85rem;
  border-color:var(--re-border) !important;
}
body.client-dash .sorter:focus{ border-color:var(--re-black-950) !important; box-shadow:0 0 0 3px rgba(13,4,5,.08) !important; }

/* ---- DataTables controls (search/length/pagination) — unstyled by default, now match the theme ---- */
body.client-dash .dataTables_wrapper{ padding-top:.25rem; }
body.client-dash .dataTables_filter input,
body.client-dash .dataTables_length select{
  border:1.5px solid var(--re-border) !important; border-radius:10px !important;
  padding:.4rem .7rem !important; margin-left:.5rem !important; font-size:.85rem;
}
body.client-dash .dataTables_filter input:focus,
body.client-dash .dataTables_length select:focus{
  outline:none; border-color:var(--re-black-950) !important; box-shadow:0 0 0 3px rgba(13,4,5,.08);
}
body.client-dash .dataTables_info{ color:var(--re-text-soft) !important; font-size:.82rem; }
body.client-dash .dataTables_paginate .paginate_button{
  border:1px solid var(--re-border) !important; border-radius:8px !important;
  margin:0 .15rem !important; padding:.35rem .75rem !important;
  color:var(--re-black-950) !important; background:#fff !important;
}
body.client-dash .dataTables_paginate .paginate_button.current,
body.client-dash .dataTables_paginate .paginate_button.current:hover{
  background:var(--re-black-950) !important; border-color:var(--re-black-950) !important; color:#fff !important;
}
body.client-dash .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled){
  background:var(--re-surface-alt) !important; border-color:var(--re-black-950) !important;
  color:var(--re-black-950) !important;
}
body.client-dash .dataTables_paginate .paginate_button.disabled{
  color:var(--re-text-soft) !important; opacity:.5;
}

/* ---- profile page: header banner + sectioned cards ---- */
body.client-dash .re-profile-header{
  background:var(--re-black-950); border-radius:18px; padding:1.75rem 2rem;
  display:flex; align-items:center; gap:1.5rem; margin-bottom:1.75rem; flex-wrap:wrap;
}
body.client-dash .re-profile-avatar{
  width:84px; height:84px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:3px solid rgba(255,255,255,.25);
}
body.client-dash .re-profile-avatar img{ width:100%; height:100%; object-fit:cover; }
body.client-dash .re-profile-heading h3{ color:#fff; font-weight:800; margin-bottom:.2rem; font-size:1.3rem; }
body.client-dash .re-profile-heading p{ color:rgba(255,255,255,.6); margin:0; font-size:.88rem; }
body.client-dash .re-profile-meta{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.85);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.3rem .7rem; border-radius:999px;
}
body.client-dash .re-section-card{
  background:#fff; border:none; border-radius:16px;
  overflow:hidden; margin-bottom:1.75rem;
  box-shadow:0 1px 2px rgba(13,4,5,.04), 0 12px 28px rgba(13,4,5,.07);
}
body.client-dash .re-section-card-header{
  background:var(--re-black-950); color:#fff; font-weight:800;
  padding:1rem 1.5rem; font-size:.95rem; display:flex; align-items:center; gap:.5rem;
}
body.client-dash .re-section-card-body{ padding:1.75rem; }
body.client-dash .re-photo-label{ display:block; margin-bottom:.6rem; }
body.client-dash .re-photo-row{ display:flex; align-items:center; gap:1rem; }
body.client-dash .re-photo-row .form-control{ max-width:320px; }
body.client-dash .re-photo-preview{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:1px solid var(--re-border); flex-shrink:0;
}

/* ---- password eye toggle: wraps only the input, so it centers correctly no matter
   how tall the label above it gets (fixes it drifting off when a label wraps to 2 lines).
   Icon is a real circular button — dark, visible, with its own hit area and hover state —
   not a bare faint glyph sitting on top of the field. ---- */
.re-pw-wrap{ position:relative; }
.re-pw-wrap input{ padding-right:2.6rem !important; }
.re-pw-wrap .password-eye-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  cursor:pointer; margin:0; z-index:3;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.95rem; line-height:1;
  color:#55565c; background:transparent;
  transition:background-color .15s ease, color .15s ease;
}
.re-pw-wrap .password-eye-toggle:hover{ background:rgba(13,4,5,.08); color:#000; }
.re-pw-wrap .password-eye-toggle.bi-eye-slash{ color:var(--re-black-950); }

/* ---- popups: solid black header / white body — a real two-tone card, not a gradient ---- */
body.client-dash .modal-content{
  background:#fff !important;
  border:none !important;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  color:var(--re-text) !important;
}
body.client-dash .modal-header{
  background:var(--re-black-950) !important;
  border-bottom:none !important;
  padding:1.35rem 1.6rem;
}
body.client-dash .modal-header h5,
body.client-dash .modal-header .modal-title{
  color:#fff !important; font-weight:800; letter-spacing:-.01em; font-size:1.05rem;
}
body.client-dash .modal-header i{ color:#fff !important; }
body.client-dash .modal .btn-close{ filter:invert(1) grayscale(1) brightness(2) !important; opacity:.85; }
body.client-dash .modal .btn-close:hover{ opacity:1; }
body.client-dash .modal-body{ color:var(--re-text) !important; padding:1.6rem; }
body.client-dash .modal-body h5{ color:var(--re-black-950) !important; }
body.client-dash .modal-body p{ color:var(--re-text-soft) !important; }
body.client-dash .modal-body label{
  color:var(--re-black-950) !important; font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;
}
body.client-dash .modal-body .form-control,
body.client-dash .modal-body .form-select,
body.client-dash .modal-body select,
body.client-dash .modal-body input:not([type=hidden]){
  background:#fff !important; color:var(--re-text) !important;
  border:1.5px solid var(--re-border) !important; border-radius:10px !important;
  padding:.65rem .9rem !important;
}
body.client-dash .modal-body .form-control:focus,
body.client-dash .modal-body .form-select:focus,
body.client-dash .modal-body select:focus,
body.client-dash .modal-body input:focus{
  border-color:var(--re-black-950) !important; box-shadow:0 0 0 3px rgba(13,4,5,.08) !important;
}
body.client-dash .modal-body .alert{ color:var(--re-text) !important; border-radius:10px; }
body.client-dash .modal-footer{ border-top:1px solid var(--re-border) !important; padding:1.1rem 1.6rem; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:767px){
  .re-auth-card{ padding:1.75rem 1.25rem; }
  .re-page-title, .re-page-subtitle, .re-stat-row{ margin-left:1rem; margin-right:1rem; padding-left:0; padding-right:0; }
}