/* EATM Unified Design System 2026
   Shared across all public pages and dashboard.
   Loaded after each page's original styles so it safely normalizes the experience.
*/
:root{
  --eatm-navy:#062b4a;
  --eatm-navy-2:#0a4268;
  --eatm-deep:#031c34;
  --eatm-cyan:#20b7d9;
  --eatm-cyan-soft:#dff7fc;
  --eatm-gold:#e8ad3f;
  --eatm-gold-soft:#f6d995;
  --eatm-ink:#0b3350;
  --eatm-muted:#60798e;
  --eatm-line:#dbe6ee;
  --eatm-surface:#ffffff;
  --eatm-soft:#f2f7fa;
  --eatm-radius:22px;
  --eatm-radius-sm:15px;
  --eatm-shadow:0 24px 70px -42px rgba(3,28,52,.55);
  --eatm-shadow-strong:0 30px 80px -44px rgba(3,28,52,.75);
  --eatm-ease:cubic-bezier(.2,.75,.2,1);
}

html{scroll-padding-top:100px; background:var(--eatm-soft);}
body.eatm-unified{
  background:
    radial-gradient(circle at 8% 8%,rgba(32,183,217,.08),transparent 24rem),
    linear-gradient(180deg,#fff 0,#f6fafc 48%,#eef5f8 100%);
  color:var(--eatm-ink);
  overflow-x:hidden;
  min-height:100vh;
}
body.eatm-unified::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.28;
  background-image:radial-gradient(rgba(6,43,74,.12) .7px,transparent .7px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 45%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 45%);
}
body.eatm-unified.menu-open{overflow:hidden;}
body.eatm-unified .wrap{width:min(100% - 36px,1200px); max-width:1200px; padding-inline:0;}
body.eatm-unified .section{padding:88px 0; position:relative;}
body.eatm-unified .section-soft{background:rgba(237,243,247,.74); border-block:1px solid rgba(216,226,234,.72);}
body.eatm-unified h1,body.eatm-unified h2,body.eatm-unified h3{letter-spacing:-.025em;}
body.eatm-unified .head-title{font-size:clamp(28px,3vw,42px); line-height:1.25; color:var(--eatm-navy);}
body.eatm-unified .head-desc{font-size:16px; line-height:1.9; color:var(--eatm-muted);}
body.eatm-unified .eyebrow{display:inline-flex; align-items:center; gap:9px; color:var(--eatm-cyan); font-weight:800;}
body.eatm-unified .eyebrow::before{content:""; width:30px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--eatm-gold),var(--eatm-cyan));}

/* Header */
body.eatm-unified .site-header-wrap{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(219,230,238,.82);
  box-shadow:0 16px 44px -38px rgba(3,28,52,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
}
body.eatm-unified .topbar{background:linear-gradient(100deg,var(--eatm-deep),var(--eatm-navy) 60%,#0a4268);}
body.eatm-unified .topbar::after{height:1px; background:linear-gradient(90deg,transparent,var(--eatm-gold),var(--eatm-cyan),transparent); opacity:1;}
body.eatm-unified .topbar .wrap{min-height:36px; padding:6px 0;}
body.eatm-unified header{background:transparent;}
body.eatm-unified .nav{min-height:78px; padding:10px 0;}
body.eatm-unified .logo img{height:54px!important; max-width:min(280px,48vw); object-fit:contain;}
body.eatm-unified .nav-links{gap:5px; font-size:13px;}
body.eatm-unified .nav-links a{padding:9px 11px; border-radius:11px; transition:background .25s var(--eatm-ease),color .25s ease,transform .25s var(--eatm-ease);}
body.eatm-unified .nav-links a:hover{background:var(--eatm-cyan-soft); color:var(--eatm-navy); transform:translateY(-1px);}
body.eatm-unified .nav-links a.active{background:linear-gradient(135deg,var(--eatm-navy),var(--eatm-navy-2)); color:#fff; box-shadow:0 12px 24px -16px rgba(3,28,52,.8);}
body.eatm-unified .burger{width:48px; height:48px; border-radius:15px; align-items:center; justify-content:center; gap:6px; margin:0; background:var(--eatm-soft); border:1px solid var(--eatm-line);}
body.eatm-unified .burger span{width:23px; height:2px; border-radius:3px; transition:transform .25s ease,opacity .2s ease;}
body.eatm-unified .mobile-menu{box-shadow:-30px 0 80px -45px rgba(3,28,52,.9);}
body.eatm-unified .mobile-menu a{padding:12px 14px; border-radius:12px; font-weight:700;}
body.eatm-unified .mobile-menu a.active{background:var(--eatm-cyan-soft); color:var(--eatm-navy);}
body.eatm-unified .mobile-menu a.mobile-login-link{display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:16px; border-top:1px solid rgba(6,43,74,.1); color:var(--eatm-navy-2); font-size:13px;}
.eatm-menu-overlay{position:fixed; inset:0; z-index:998; background:rgba(3,28,52,.48); opacity:0; visibility:hidden; transition:.25s ease; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.eatm-menu-overlay.show{opacity:1; visibility:visible;}

/* Page hero */
body.eatm-unified .page-hero{
  isolation:isolate; padding:74px 0 82px;
  background:
    radial-gradient(circle at 82% 25%,rgba(32,183,217,.28),transparent 34%),
    radial-gradient(circle at 15% 90%,rgba(232,173,63,.16),transparent 30%),
    linear-gradient(135deg,var(--eatm-deep),var(--eatm-navy) 55%,#0b4c72);
  border-radius:0 0 42px 42px;
  overflow:hidden;
}
body.eatm-unified .page-hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 80%); mask-image:linear-gradient(90deg,#000,transparent 80%);}
body.eatm-unified .page-hero::after{content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(255,255,255,.16); border-radius:50%; left:-90px; top:-110px; box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 84px rgba(255,255,255,.025);}
body.eatm-unified .page-hero h1{font-size:clamp(32px,5vw,56px); line-height:1.18; max-width:850px; text-wrap:balance;}
body.eatm-unified .page-hero p{font-size:16px; line-height:1.9; max-width:720px; color:#c6d9e6;}
body.eatm-unified .breadcrumb{display:inline-flex; flex-wrap:wrap; gap:7px; align-items:center; padding:7px 13px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.07); color:#c6d9e6;}

/* Cards and panels */
body.eatm-unified .panel,
body.eatm-unified .program-card,
body.eatm-unified .article-card,
body.eatm-unified .testi-card,
body.eatm-unified .related-card,
body.eatm-unified .why-card,
body.eatm-unified .avail-card,
body.eatm-unified .stat-card,
body.eatm-unified .search-box,
body.eatm-unified .cert-showcase{
  border:1px solid rgba(219,230,238,.94);
  border-radius:var(--eatm-radius);
  background:rgba(255,255,255,.94);
  box-shadow:var(--eatm-shadow);
  overflow:hidden;
}
body.eatm-unified .panel{margin-bottom:22px;}
body.eatm-unified .panel-head{background:linear-gradient(180deg,#fff,#f9fcfd); border-bottom:1px solid var(--eatm-line); padding:20px 24px;}
body.eatm-unified .panel-head h3{font-size:18px; color:var(--eatm-navy);}
body.eatm-unified .program-card,
body.eatm-unified .article-card,
body.eatm-unified .testi-card,
body.eatm-unified .related-card,
body.eatm-unified .why-card,
body.eatm-unified .avail-card{transition:transform .38s var(--eatm-ease),box-shadow .38s var(--eatm-ease),border-color .3s ease;}
@media (hover:hover){
  body.eatm-unified .program-card:hover,
  body.eatm-unified .article-card:hover,
  body.eatm-unified .testi-card:hover,
  body.eatm-unified .related-card:hover,
  body.eatm-unified .why-card:hover,
  body.eatm-unified .avail-card:hover{transform:translateY(-8px); box-shadow:var(--eatm-shadow-strong); border-color:rgba(32,183,217,.45);}
}
body.eatm-unified .program-top{border-radius:0;}
body.eatm-unified .tag,body.eatm-unified .badge{border:1px solid rgba(32,183,217,.16); background:var(--eatm-cyan-soft); color:var(--eatm-navy);}
body.eatm-unified .pd-info-icon,body.eatm-unified .why-icon{background:linear-gradient(135deg,var(--eatm-cyan-soft),#fff); border:1px solid rgba(32,183,217,.22);}
body.eatm-unified .pd-audience-box{background:linear-gradient(135deg,#eef9fc,#f8fcfd); border:1px solid rgba(32,183,217,.18);}

/* Buttons */
body.eatm-unified .btn{min-height:46px; padding:12px 24px; border-radius:14px; justify-content:center; position:relative; overflow:hidden; transition:transform .25s var(--eatm-ease),box-shadow .25s ease,filter .25s ease;}
body.eatm-unified .btn::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.22) 48%,transparent 72%); transform:translateX(-130%); transition:transform .6s var(--eatm-ease);}
@media (hover:hover){body.eatm-unified .btn:hover::after{transform:translateX(130%);} body.eatm-unified .btn:hover{transform:translateY(-2px);}}
body.eatm-unified .btn:active{transform:scale(.97);}
body.eatm-unified .btn-orange{background:linear-gradient(135deg,var(--eatm-gold),#f4c760); color:var(--eatm-deep); box-shadow:0 16px 34px -20px rgba(232,173,63,.95);}
body.eatm-unified .btn-navy{background:linear-gradient(135deg,var(--eatm-navy),var(--eatm-navy-2)); box-shadow:0 16px 34px -22px rgba(3,28,52,.95);}
body.eatm-unified .btn-outline{border:1px solid rgba(6,43,74,.25); background:#fff;}
body.eatm-unified .cta-link{display:inline-flex; align-items:center; gap:7px; color:var(--eatm-navy)!important;}

/* Forms */
body.eatm-unified .field input,
body.eatm-unified .field select,
body.eatm-unified .field textarea,
body.eatm-unified .search-box input{
  min-height:50px; border:1px solid var(--eatm-line); border-radius:14px; background:#fbfdfe; padding:12px 15px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
body.eatm-unified .field input:focus,
body.eatm-unified .field select:focus,
body.eatm-unified .field textarea:focus,
body.eatm-unified .search-box input:focus{outline:none; border-color:var(--eatm-cyan); background:#fff; box-shadow:0 0 0 4px rgba(32,183,217,.12);}
body.eatm-unified .search-box{padding:18px;}

/* Footer */
body.eatm-unified footer{position:relative; padding:72px 0 26px; background:linear-gradient(145deg,#021727,var(--eatm-deep) 48%,#073656); overflow:hidden;}
body.eatm-unified footer::before{content:""; position:absolute; inset:0; opacity:.16; background-image:radial-gradient(rgba(255,255,255,.28) .8px,transparent .8px); background-size:23px 23px; -webkit-mask-image:linear-gradient(to top,#000,transparent 76%); mask-image:linear-gradient(to top,#000,transparent 76%);}
body.eatm-unified footer>.wrap{position:relative; z-index:1;}
body.eatm-unified .footer-col h4{position:relative; padding-bottom:10px;}
body.eatm-unified .footer-col h4::after{content:""; position:absolute; right:0; bottom:0; width:32px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--eatm-gold),var(--eatm-cyan));}
body.eatm-unified .footer-social a{transition:transform .2s ease,background .2s ease;}
body.eatm-unified .footer-social a:hover{transform:translateY(-3px);}

/* Unified mobile bottom nav — one exact component across every public page */
body.eatm-unified .mobile-bottom-nav{
  display:none!important;
  position:fixed!important;
  right:0!important;
  left:0!important;
  bottom:0!important;
  z-index:1200!important;
  width:100%!important;
  min-height:76px!important;
  margin:0!important;
  padding:8px 7px calc(8px + env(safe-area-inset-bottom))!important;
  background:rgba(3,28,52,.97)!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.11)!important;
  border-radius:0!important;
  box-shadow:0 -20px 50px -34px rgba(0,0,0,.95)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
body.eatm-unified .mobile-bottom-nav>.wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:end!important;
  gap:2px!important;
}
body.eatm-unified .mobile-bottom-nav a{
  position:relative!important;
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  padding:6px 2px 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  color:#a9becd!important;
  background:transparent!important;
  border:0!important;
  border-radius:13px!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.15!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:color .2s ease,background .2s ease,transform .2s ease!important;
}
body.eatm-unified .mobile-bottom-nav a>svg{
  width:21px!important;
  height:21px!important;
  flex:0 0 auto!important;
}
body.eatm-unified .mobile-bottom-nav a:active{transform:scale(.94)!important;}
body.eatm-unified .mobile-bottom-nav a.active{
  color:var(--eatm-gold-soft)!important;
  background:rgba(255,255,255,.055)!important;
}
body.eatm-unified .mobile-bottom-nav a.elevated{
  margin-top:-28px!important;
  color:var(--eatm-gold-soft)!important;
  background:transparent!important;
}
body.eatm-unified .mobile-bottom-nav a.elevated .icon-circle{
  width:55px!important;
  height:55px!important;
  margin:0 auto 1px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,var(--eatm-gold),#f5cc70)!important;
  border:4px solid var(--eatm-deep)!important;
  box-shadow:0 16px 30px -12px rgba(232,173,63,.72)!important;
  color:var(--eatm-deep)!important;
}
body.eatm-unified .mobile-bottom-nav a.elevated .icon-circle svg{
  width:22px!important;
  height:22px!important;
  stroke:currentColor!important;
}
body.eatm-unified .mobile-bottom-nav a.elevated.active .icon-circle{
  box-shadow:0 0 0 5px rgba(232,173,63,.12),0 16px 30px -12px rgba(232,173,63,.8)!important;
}

/* Unified reveal motion */
.eatm-reveal{opacity:0; transform:translateY(24px) scale(.985); transition:opacity .68s var(--eatm-ease),transform .68s var(--eatm-ease);}
.eatm-reveal.in-view{opacity:1; transform:none;}
.eatm-reveal[data-delay="1"]{transition-delay:.07s}.eatm-reveal[data-delay="2"]{transition-delay:.14s}.eatm-reveal[data-delay="3"]{transition-delay:.21s}

/* Dashboard receives the same visual language, without public navigation */
body[data-eatm-page="dashboard"]{background:linear-gradient(135deg,#edf4f8,#f9fcfd);}
body[data-eatm-page="dashboard"] .sidebar{background:linear-gradient(180deg,var(--eatm-deep),#073656); box-shadow:20px 0 55px -45px rgba(3,28,52,.9);}
body[data-eatm-page="dashboard"] .sidebar-logo{min-height:78px;}
body[data-eatm-page="dashboard"] .side-link{margin:3px 10px; border-radius:12px; transition:.2s ease;}
body[data-eatm-page="dashboard"] .side-link.active{border:0; background:linear-gradient(135deg,rgba(32,183,217,.24),rgba(255,255,255,.08)); box-shadow:inset 3px 0 0 var(--eatm-cyan);}
body[data-eatm-page="dashboard"] .main{padding:36px;}
body[data-eatm-page="dashboard"] .stat-box,
body[data-eatm-page="dashboard"] .panel,
body[data-eatm-page="dashboard"] .avail-card,
body[data-eatm-page="dashboard"] .auth-card{border-radius:20px; border:1px solid var(--eatm-line); box-shadow:var(--eatm-shadow);}
body[data-eatm-page="dashboard"] .auth-card{padding:40px 34px;}
body[data-eatm-page="dashboard"] .center-screen{background:radial-gradient(circle at 20% 20%,rgba(32,183,217,.22),transparent 28%),linear-gradient(145deg,var(--eatm-deep),#0a4268);}

@media (max-width:1100px){
  body.eatm-unified .topbar-tagline,body.eatm-unified .topbar-social{display:none!important;}
  body.eatm-unified .mobile-menu{
    display:flex!important; position:fixed; top:0; right:0; bottom:0; z-index:999; width:min(86vw,360px);
    padding:95px 20px 30px; border:0; background:rgba(255,255,255,.98); flex-direction:column; gap:7px;
    transform:translateX(108%); visibility:hidden; transition:transform .34s var(--eatm-ease),visibility .34s ease; overflow-y:auto;
  }
  body.eatm-unified .mobile-menu.open{transform:translateX(0); visibility:visible;}
  body.eatm-unified .nav-links{display:none!important;}
  body.eatm-unified .burger{display:flex!important; position:relative; z-index:1001;}
}

@media (max-width:768px){
  body.eatm-unified .topbar{display:none!important;}
  body.eatm-unified .site-header-wrap{top:0;}
  body.eatm-unified .nav{min-height:72px; padding:8px 0;}
  body.eatm-unified .logo img{height:47px!important; max-width:235px;}
  body.eatm-unified .wrap{width:min(100% - 28px,1200px);}
  body.eatm-unified .section{padding:58px 0;}
  body.eatm-unified .section-head{margin-bottom:28px;}
  body.eatm-unified .head-title{font-size:29px;}
  body.eatm-unified .head-desc{font-size:14px;}
  body.eatm-unified .page-hero{padding:48px 0 54px; border-radius:0 0 28px 28px;}
  body.eatm-unified .page-hero h1{font-size:32px;}
  body.eatm-unified .page-hero p{font-size:14px; line-height:1.8;}
  body.eatm-unified .breadcrumb{font-size:11.5px; max-width:100%;}
  body.eatm-unified .panel,body.eatm-unified .program-card,body.eatm-unified .article-card,body.eatm-unified .testi-card,body.eatm-unified .related-card,body.eatm-unified .why-card,body.eatm-unified .avail-card,body.eatm-unified .stat-card,body.eatm-unified .search-box,body.eatm-unified .cert-showcase{border-radius:18px;}
  body.eatm-unified .panel-head{padding:17px 18px;}
  body.eatm-unified .panel-head h3{font-size:16px;}
  body.eatm-unified .btn{min-height:45px; border-radius:13px; padding:11px 17px;}
  body.eatm-unified footer{padding:54px 0 110px;}
  body.eatm-unified{padding-bottom:96px!important;}
  body.eatm-unified .whatsapp-float{display:none!important;}
  body.eatm-unified .mobile-bottom-nav{display:block!important;}
  body[data-eatm-page="dashboard"]{padding-bottom:0!important;}
  body[data-eatm-page="dashboard"] .mobile-bottom-nav{display:none!important;}
  body[data-eatm-page="dashboard"] .main{padding:22px 14px;}
  body[data-eatm-page="dashboard"] .sidebar{border-radius:0 0 22px 22px; overflow:hidden;}
}

@media (max-width:560px){
  body.eatm-unified .logo img{height:44px!important; max-width:210px;}
  body.eatm-unified .burger{width:45px; height:45px;}
  body.eatm-unified .page-hero h1{font-size:28px;}
  body.eatm-unified .footer-grid{grid-template-columns:1fr!important;}
  body.eatm-unified .pd-related-grid,
  body.eatm-unified .programs-grid,
  body.eatm-unified .articles-grid,
  body.eatm-unified .testi-grid,
  body.eatm-unified .why-grid{grid-template-columns:1fr!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;}
  .eatm-reveal{opacity:1!important; transform:none!important;}
}


/* Registration flow */
body.eatm-unified .registration-hero,
body.eatm-unified .success-hero{
  background:
    radial-gradient(circle at 15% 20%,rgba(32,183,217,.23),transparent 30%),
    linear-gradient(145deg,#031C34,#07466d);
}
.registration-kicker{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:6px 12px;
  border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  color:#9ce9f6;font-size:11.5px;font-weight:800;
}
.registration-shell{display:grid;grid-template-columns:.88fr 1.12fr;gap:34px;align-items:start;max-width:1080px!important}
.registration-benefits{padding:28px 10px 20px}
.registration-benefits h2{font:800 clamp(26px,3vw,39px)/1.45 var(--font-head);color:var(--navy);margin:8px 0 13px}
.registration-benefits>p{color:var(--text-muted);font-size:14.5px;max-width:500px}
.registration-steps{display:grid;gap:12px;margin-top:26px}
.registration-steps>div{display:flex;gap:13px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 16px 35px -30px rgba(3,28,52,.55)}
.registration-steps>div>b{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue-mid));color:#fff;font:800 11px var(--font-head);flex:0 0 auto}
.registration-steps span{display:block}.registration-steps strong{display:block;color:var(--navy);font-size:14px;margin-bottom:2px}.registration-steps small{color:var(--text-muted);font-size:12.5px}
.registration-card{border-radius:24px!important;overflow:hidden}
.registration-card .panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(180deg,#fff,#f8fbfc)}
.registration-form-label{display:block;color:var(--cyan);font-size:11px;font-weight:800;margin-bottom:2px}
.autosave-badge{padding:6px 10px;border-radius:999px;background:#eef9f4;color:#1f8a61;font-size:10.5px;font-weight:800;white-space:nowrap}
.registration-form{padding:24px;display:grid;gap:14px}
.registration-form .field{margin:0}
.registration-form .field label{font-weight:800;font-size:12.5px}
.registration-form .field input,.registration-form .field select{min-height:49px;border-radius:13px;background:#fbfdfe;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.registration-form .field input:focus,.registration-form .field select:focus{background:#fff;box-shadow:0 0 0 4px rgba(32,183,217,.09)}
.registration-form .field-error{display:none;color:#c34141;font-size:11px;margin-top:5px}
.registration-form .field.has-error .field-error{display:block}
.registration-form .field.has-error input,.registration-form .field.has-error select{border-color:#e56d6d;background:#fffafa}
.registration-status{padding:12px 14px;border-radius:13px;font-size:12.5px;line-height:1.7;background:#f3f8fa;border:1px solid var(--border);color:var(--text-muted)}
.registration-status.is-loading{border-color:#b8dce8;color:#25617d;background:#f2fbfe}
.registration-status.is-success{border-color:#9edabf;color:#1e7b56;background:#f1fbf6}
.registration-status.is-error{border-color:#efb0b0;color:#aa3939;background:#fff5f5}
.registration-submit{margin-top:2px}
.registration-wa-fallback{display:block;text-align:center;color:#168f4d;font-size:12.5px;font-weight:800;padding:5px}
.registration-wa-fallback.is-prominent{background:#ecfff3;border:1px solid #b7e8c9;border-radius:12px;padding:11px}
.registration-privacy{font-size:10.5px;color:#8094a2;text-align:center;margin:0}

/* Success page */
.success-section{min-height:58vh}
.success-shell{max-width:820px!important}
.success-card{background:#fff;border:1px solid var(--border);border-radius:28px;padding:42px;box-shadow:0 35px 80px -50px rgba(3,28,52,.6);text-align:center}
.success-icon{width:84px;height:84px;border-radius:28px;margin:-82px auto 18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#24b56f,#1a8c58);box-shadow:0 18px 35px -18px rgba(31,157,98,.7);border:7px solid #fff}
.success-label{display:inline-flex;padding:6px 11px;border-radius:999px;background:#edf9f3;color:#21835c;font-size:11px;font-weight:800}
.success-card h2{font:800 31px var(--font-head);margin:12px 0 8px;color:var(--navy)}
.success-card>p{color:var(--text-muted);font-size:14px;max-width:560px;margin:0 auto}
.success-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.success-summary>div{padding:14px 12px;border-radius:15px;background:var(--bg-soft);border:1px solid var(--border);min-width:0}
.success-summary span{display:block;font-size:10.5px;color:var(--text-muted)}
.success-summary b{display:block;font-size:13px;color:var(--navy);margin-top:4px;overflow-wrap:anywhere}
.temporary-password{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;margin:0 0 20px;border:1px dashed #d4aa4d;background:#fff9ea;border-radius:16px;text-align:right}
.temporary-password span{display:block;font-size:11px;color:#8c6b25}.temporary-password b{font:800 22px monospace;letter-spacing:.12em;color:var(--navy)}
.temporary-password button{border:0;background:var(--navy);color:#fff;border-radius:10px;padding:8px 12px;font-family:inherit;font-weight:800}
.success-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.success-text-link{width:100%;font-size:12.5px;color:var(--text-muted);font-weight:700;margin-top:5px}
.success-mail-note{font-size:11px!important;margin-top:18px!important;color:#8195a3!important}

@media(max-width:820px){
  .registration-shell{grid-template-columns:1fr;gap:18px}
  .registration-benefits{padding:0}.registration-benefits h2{font-size:27px}.registration-benefits>p{font-size:13.5px}
  .registration-steps{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
  .registration-steps>div{padding:11px;display:block}.registration-steps>div>b{margin-bottom:8px}.registration-steps small{display:none}
}
@media(max-width:620px){
  .registration-section{padding-top:32px!important}
  .registration-steps{grid-template-columns:1fr}.registration-steps>div{display:flex}.registration-steps small{display:block}
  .registration-form{padding:18px}.registration-card .panel-head{padding:17px 18px}
  .success-section{padding-top:54px!important}.success-card{padding:34px 18px 26px;border-radius:22px}
  .success-icon{width:72px;height:72px;border-radius:24px;margin-top:-72px}
  .success-card h2{font-size:25px}.success-summary{grid-template-columns:1fr}.temporary-password{align-items:flex-start}
  .success-actions .btn{width:100%}
}

/* ============================================================
   EATM 2026 - Unified mobile footer and bottom navigation patch
   Applies globally to every public page that loads this file.
   ============================================================ */
@media (max-width:768px){
  /* Keep the middle registration icon and hide its text label. */
  body.eatm-unified .mobile-bottom-nav a.elevated > span:not(.icon-circle){
    display:none!important;
  }

  body.eatm-unified .mobile-bottom-nav a.elevated{
    min-height:54px!important;
    padding-bottom:2px!important;
    gap:0!important;
  }

  body.eatm-unified .mobile-bottom-nav a.elevated .icon-circle{
    margin-bottom:0!important;
  }

  /* Compact, card-based footer on phones. */
  body.eatm-unified footer{
    padding:38px 0 112px!important;
  }

  body.eatm-unified footer > .wrap{
    width:min(100% - 24px,1200px)!important;
  }

  body.eatm-unified .footer-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding-bottom:16px!important;
    border-bottom:0!important;
  }

  body.eatm-unified .footer-grid > div{
    min-width:0!important;
    padding:17px 15px!important;
    border:1px solid rgba(255,255,255,.1)!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.055)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  body.eatm-unified .footer-grid > div:first-child,
  body.eatm-unified .footer-grid > div:last-child{
    grid-column:1/-1!important;
  }

  body.eatm-unified .footer-grid > div:first-child{
    text-align:center!important;
    padding:21px 17px!important;
  }

  body.eatm-unified .footer-logo{
    justify-content:center!important;
    margin-bottom:10px!important;
  }

  body.eatm-unified .footer-logo img{
    max-width:min(250px,78vw)!important;
    height:auto!important;
    max-height:52px!important;
    object-fit:contain!important;
  }

  body.eatm-unified .footer-grid > div:first-child > p{
    max-width:430px!important;
    margin:0 auto!important;
    font-size:13px!important;
    line-height:1.85!important;
    color:#a9becd!important;
  }

  body.eatm-unified .footer-col h4{
    margin-bottom:13px!important;
    padding-bottom:9px!important;
    font-size:15px!important;
  }

  body.eatm-unified .footer-col h4::after{
    width:27px!important;
  }

  body.eatm-unified .footer-col ul{
    margin:0!important;
    padding:0!important;
  }

  body.eatm-unified .footer-col li{
    margin-bottom:7px!important;
    font-size:12.5px!important;
    line-height:1.55!important;
  }

  body.eatm-unified .footer-col li:last-child{
    margin-bottom:0!important;
  }

  body.eatm-unified .footer-col a{
    display:inline-flex!important;
    align-items:center!important;
    min-height:28px!important;
  }

  body.eatm-unified .footer-grid > div:last-child{
    text-align:center!important;
  }

  body.eatm-unified .footer-grid > div:last-child h4::after{
    right:50%!important;
    transform:translateX(50%)!important;
  }

  body.eatm-unified .footer-grid > div:last-child .contact-phone-link,
  body.eatm-unified .footer-grid > div:last-child .contact-email-link{
    display:flex!important;
    justify-content:center!important;
    text-align:center!important;
    direction:ltr!important;
    overflow-wrap:anywhere!important;
  }

  body.eatm-unified .footer-social{
    justify-content:center!important;
    gap:9px!important;
    margin-top:8px!important;
  }

  body.eatm-unified .footer-social a{
    width:36px!important;
    height:36px!important;
    min-height:36px!important;
    border:1px solid rgba(255,255,255,.11)!important;
    background:rgba(255,255,255,.075)!important;
  }

  body.eatm-unified .footer-payment-row{
    justify-content:center!important;
    gap:8px!important;
    margin-top:12px!important;
    padding:14px 12px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.04)!important;
  }

  body.eatm-unified .footer-payment-label{
    width:100%!important;
    text-align:center!important;
    margin-bottom:2px!important;
    font-size:11.5px!important;
  }

  body.eatm-unified .footer-bottom{
    justify-content:center!important;
    gap:4px!important;
    padding-top:15px!important;
    text-align:center!important;
    font-size:11px!important;
    line-height:1.7!important;
  }

  body.eatm-unified .footer-bottom span{
    width:100%!important;
  }
}

@media (max-width:390px){
  body.eatm-unified .footer-grid{
    gap:9px!important;
  }

  body.eatm-unified .footer-grid > div{
    padding:14px 11px!important;
    border-radius:15px!important;
  }

  body.eatm-unified .footer-col h4{
    font-size:14px!important;
  }

  body.eatm-unified .footer-col li{
    font-size:11.5px!important;
  }
}

/* ============================================================
   Sitewide fix: force correct left-to-right rendering for phone
   numbers and any other Latin-digit content, regardless of
   whether a page remembered to add dir="ltr" manually. Without
   this, numbers/mixed content can visually reverse inside RTL
   Arabic pages (bidi algorithm issue).
   ============================================================ */
.contact-phone-text, .contact-phone-link,
[dir="ltr"], .ltr-text, .whatsapp-number, .cert-number-text {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ============================================================
   عرض المحتوى في لوحات التحكم — نظام موحّد

   المشكلة اللي بتتصلّح: بعض الفورمات كان عليها max-width مكتوب inline
   (500px و700px) والحاوية بادئة من اليمين، فعلى شاشة عريضة كان بيفضل نص
   الشاشة فاضي على الشمال والصفحة تبان مكسورة — بينما الجداول والكروت في نفس
   اللوحة بتاخد العرض كامل. النتيجة: كل صفحة بشكل مختلف.

   النظام: كلاس واحد للفورمات بعرض مريح **متوسّط** فالفراغ يتوزّع على
   الجهتين بالتساوي ويبان مقصود. الجداول والقوائم تفضل بالعرض الكامل لأنها
   محتاجاه فعلًا.
   ============================================================ */
.panel-narrow{
  max-width: 920px;
  margin-inline: auto;
}

/* مقاسات المودالات اتوحّدت على ثلاث درجات — 460 / 620 / 820 — بتعديل القيم
   في مكانها بدل كلاسات جديدة. السبب: الحاويات دي عليها width:100% أصلًا
   فبتنزل لعرض الشاشة على الموبايل من غير أي media query، ونقلها لكلاسات كان
   هيتطلّب تعديل بنية كل وسم بدون فايدة مقابلة. */

/* الفورم جوه لوحة التحكم: عمودين على الشاشات الواسعة، عمود على الضيقة.
   كان مكتوب inline بـ grid-template-columns:1fr 1fr في كل فورم على حدة،
   فما كانش بينزل لعمود واحد على الموبايل. */
.dash-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-form-grid > .full{ grid-column: 1 / -1; }

/* 900px مش 760: ده نفس الـ breakpoint اللي dashboard.html بتنزّل عنده
   .form-grid لعمود واحد. لو استخدمت رقم مختلف، الفورمات بين 760 و900 كانت
   هتبقى بسلوكين مختلفين في نفس اللوحة — عكس التناسق المطلوب بالظبط. */
@media (max-width: 900px){
  .panel-narrow{ max-width: 100%; }
  .dash-form-grid{ grid-template-columns: 1fr; gap: 13px; }
}

/* ============================================================
   لوحات المسوّق / قائد الفريق / خدمة العملاء على الموبايل

   اللوحات دي بتتبني بـ innerHTML من eatm-affiliate.js، فكل شبكاتها كانت
   مكتوبة inline — و inline style مفيش @media يقدر يوصلها، عشان كده كانت
   ثابتة الأعمدة على أي مقاس. الحل هنا هو نفس أسلوب لوحة الإدارة:
   كلاسات مسمّاة + breakpoints، مش !important فوق الـ inline.

   الملف ده متحمّل بعد الـ <style> بتاع dashboard.html (سطر 805 مقابل 13)،
   فالقواعد اللي هنا بتكسب أي تعادل في الـ specificity.
   ============================================================ */

/* ── 1. خلايا الجداول بدون data-label ─────────────────────────
   dashboard.html بتحوّل كل <td> على الموبايل لكارت من عمودين:
     .table-scroll td{ grid-template-columns: minmax(94px,34%) 1fr; }
     .table-scroll td::before{ content: attr(data-label); }
   لكن eatm-affiliate.js بيطلع 161 <td> من غير ولا data-label واحدة، فكان
   عمود العنوان بياخد 94px فاضية من أصل ~145px متاحة، وتفضل ~51px للقيمة —
   ودي بالظبط اللي كانت بتخلي "وجنات صالح محمد باعشن" تتكسر كلمة كل سطر.
   القاعدة دي بتلغي العمود الفاضي لما تكون data-label مش موجودة أصلاً. */
@media (max-width: 620px){
  .table-scroll td:not([data-label]){ grid-template-columns: 1fr; }
  .table-scroll td:not([data-label])::before{ content: none; display: none; }
}

/* ── 2. شبكات متجاوبة بدل الـ inline ──────────────────────────
   minmax(0,1fr) مش 1fr: العنصر الجريد الافتراضي min-width:auto، يعني
   بيرفض ينكمش تحت عرض محتواه فبيخرج بره الحاوية — ده مصدر الخروج عن
   حدود الشاشة في صف العمولات. */
.rg{ display: grid; }
.rg-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rg-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rg-32{ grid-template-columns: 3fr 2fr; }
.rg-21{ grid-template-columns: 2fr 1fr; }
/* min(340px,100%) مش 340px: على شاشة 375 الحاوية أضيق من 340 فكان التراك
   نفسه أعرض من أبوه ويخرج بره. */
.rg-cards{ grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

@media (max-width: 900px){
  .rg-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-2, .rg-32, .rg-21{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .rg-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 3. صفوف المؤشرات ─────────────────────────────────────────
   .stat-grid عندها media queries سليمة في dashboard.html أصلاً، بس الـ
   inline كان بيلغيها. الموديفايرز دي بتحدد عدد أعمدة الديسكتوب بس
   (specificity 0,2,0 عشان تكسب .stat-grid المجردة)، وبتسيب الموبايل
   على عمودين — نفس سلوك .kpi-grid في لوحة الإدارة. */
.stat-grid.sg-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.sg-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid.sg-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px){
  .stat-grid.sg-5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .stat-grid.sg-3, .stat-grid.sg-4, .stat-grid.sg-5{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 4. حماية عامة من الخروج عن الشاشة ────────────────────────
   الأسماء العربية الطويلة والإيميلات/الروابط اللي مفيهاش مسافات. */
@media (max-width: 900px){
  .dash .panel, .dash .panel > *{ min-width: 0; }
  .dash td, .dash th{ overflow-wrap: anywhere; }
}

/* عناصر الفورم بعرضها الطبيعي: <select> من غير أي تحديد عرض بياخد عرض
   أطول option جواه — في تبويب الخصومات ده طلع 380px جوه حاوية 314px
   فخرج بره الشاشة. */
@media (max-width: 900px){
  .dash select, .dash input, .dash textarea{ max-width: 100%; }
}

/* ── 5. القائمة الجانبية على الموبايل ─────────────────────────
   dashboard.html بتخفي .side-links-wrap جوه @media(max-width:900px)،
   بس بعدها بشوية فيه ‎.side-links-wrap{display:flex}‎ من غير media query،
   والاتنين نفس الـ specificity فالأخير بيكسب — يعني القائمة كانت مفتوحة
   على طول على الموبايل وواخدة نص الشاشة.

   ده كان بيضرب لوحتين: لوحات المسوّق/القائد/خدمة العملاء (ماكانش فيها
   زرار toggle أصلاً)، ولوحة المتدرب (زرارها موجود من زمان بس كان
   مش نافع — الضغط عليه ما بيغيّرش حاجة لأن display:flex غالبة).

   .dash:not(.admin-dash) — specificity (0,3,0) عشان تكسب القاعدة دي،
   وبتستثني لوحة الإدارة اللي ليها آلية off-canvas مختلفة تمامًا
   (.mobile-menu-trigger + body.admin-menu-open) وشغالة صح. */
@media (max-width: 900px){
  .dash:not(.admin-dash) .side-links-wrap{ display: none; }
  .dash:not(.admin-dash) .side-links-wrap.open{ display: flex; }
  .dash:not(.admin-dash) .side-links-mobile-toggle{ display: flex; }
}
.aff-dash .aff-menu-icon{
  font-size: 17px;
  line-height: 1;
  width: 26px;
  text-align: center;
  flex: 0 0 26px;
}

/* ── استمارة العميل: عناوين الأقسام ───────────────────────────
   الاستمارة بقت ١٤ حقل، ولو نزلت كتلة واحدة بتبقى مرهقة وسهل يتنسى فيها
   حقل. العناوين دي بتقسّمها لخمس مجموعات واضحة (أساسية / تواصل / برنامج
   ودفع / مرفقات / ملاحظات). */
.form-section-title{
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}
.form-section-title:first-child{ margin-top: 0; }

/* خانات رفع الملفات: المتصفح بيطلّعها بشكل بدائي مختلف عن باقي الحقول،
   فبنلبسها نفس إطار الحقول العادية. */
.file-input{
  width: 100%;
  border: 1.5px dashed var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-family: inherit;
  background: #FBFDFE;
  cursor: pointer;
}
.file-input:hover{ border-color: var(--cyan); }
.file-input:focus{ outline: none; border-color: var(--cyan); border-style: solid; }

/* ── 6. محتوى لقارئ الشاشة فقط ────────────────────────────────
   منطقة الإعلانات (#sr-live) لازم تكون موجودة في الصفحة فعلاً عشان القارئ
   يراقبها، فمينفعش نخفيها بـ display:none أو visibility:hidden — دول
   بيشيلوها من شجرة إمكانية الوصول كمان. الطريقة دي بتخفيها بصريًا وبس.
   نفس التعريف الموجود في programs.html — اتنقل هنا عشان يبقى متاح لكل
   الصفحات اللي بتحمّل الملف ده بدل ما يتكرر في كل واحدة. */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   أداء التمرير على الموبايل
   الهيدر sticky وعليه backdrop-filter، يعني المتصفح بيعيد حساب بلور
   المحتوى المارق تحته في كل فريم تمرير — أتقل سبب للاج على الموبايل.
   وخلفيته أصلاً 90% معتمة فالبلور مالوش أثر بصري يُذكر؛ بنرفعها لـ 97%
   ونشيل البلور على الشاشات الصغيرة.
   التعديل هنا مش في الـ <style> بتاع كل صفحة، لأن الملف ده بيتحمّل بعده
   والسيليكتور body.eatm-unified .site-header-wrap أخصّ — وكمان كده
   بيتصلح في الـ 16 صفحة مرة واحدة بدل تكراره في كل واحدة.
   ============================================================ */
@media (max-width:720px){
  body.eatm-unified .site-header-wrap{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(255,255,255,.97);
  }
}