/* ==========================================================
   MAA PAY — Brand Stylesheet
   Colors sampled from the logo:
   Green #3AA65A | Orange #F7931E | Blue #2CA8E0 | Navy #0B1F3A
========================================================== */
:root{
  --mp-green:#2E9B4F;
  --mp-green-light:#7CC142;
  --mp-orange:#F7931E;
  --mp-orange-dark:#EF6C00;
  --mp-blue:#2CA8E0;
  --mp-blue-dark:#1E7FB8;
  --mp-navy:#0B1F3A;
  --mp-navy-light:#12315C;
  --mp-bg:#F4F7FB;
  --mp-card:#FFFFFF;
  --mp-text:#1B2431;
  --mp-muted:#6B7686;
  --mp-border:#E6EAF0;
  --mp-danger:#E14848;
  --mp-success:#2E9B4F;
  --radius:14px;
  --shadow: 0 4px 20px rgba(11,31,58,0.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--mp-bg);
  color:var(--mp-text);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:10px;font-weight:600;font-size:15px;
  border:none;transition:transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(120deg,var(--mp-green),var(--mp-blue));color:#fff;box-shadow:0 6px 18px rgba(44,168,224,.28);}
.btn-primary:hover{opacity:.92;}
.btn-orange{background:linear-gradient(120deg,var(--mp-orange),var(--mp-orange-dark));color:#fff;box-shadow:0 6px 18px rgba(247,147,30,.3);}
.btn-navy{background:var(--mp-navy);color:#fff;}
.btn-outline{background:transparent;border:2px solid var(--mp-navy);color:var(--mp-navy);}
.btn-outline:hover{background:var(--mp-navy);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-danger{background:var(--mp-danger);color:#fff;}

/* ================= LANDING PAGE ================= */
.public-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;position:sticky;top:0;background:rgba(244,247,251,.9);backdrop-filter:blur(8px);z-index:50;
}
.public-nav .container{display:flex;align-items:center;justify-content:space-between;width:100%;}
.brand-logo{height:160px;}
.public-nav-links{display:flex;align-items:center;gap:30px;}
.public-nav-links a{font-weight:500;color:var(--mp-navy);}
.public-nav-links a:hover{color:var(--mp-blue);}
.nav-cta{display:flex;gap:12px;}

.hero{
  padding:80px 0 60px;
  position:relative;overflow:hidden;
}
.hero .container{display:flex;align-items:center;gap:50px;}
.hero-text{flex:1;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--mp-border);
  padding:7px 16px;border-radius:30px;font-size:13px;font-weight:600;color:var(--mp-green);margin-bottom:20px;
  box-shadow:var(--shadow);
}
.hero-text h1{font-size:46px;line-height:1.15;margin:0 0 18px;font-weight:800;color:var(--mp-navy);}
.hero-text h1 span{background:linear-gradient(120deg,var(--mp-green),var(--mp-blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-text p{font-size:17px;color:var(--mp-muted);max-width:520px;margin-bottom:30px;line-height:1.6;}
.hero-cta{display:flex;gap:14px;margin-bottom:34px;}
.hero-stats{display:flex;gap:36px;}
.hero-stats div strong{display:block;font-size:24px;color:var(--mp-navy);font-weight:800;}
.hero-stats div span{font-size:13px;color:var(--mp-muted);}

.hero-visual{flex:1;display:flex;justify-content:center;position:relative;}
.hero-card{
  background:linear-gradient(145deg,var(--mp-navy),var(--mp-navy-light));
  border-radius:22px;padding:32px;width:340px;color:#fff;
  box-shadow:0 25px 50px rgba(11,31,58,.3);position:relative;
}
.hero-card::before{
  content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,var(--mp-orange) 0%, transparent 70%);opacity:.5;
}
.hero-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.hero-card-top img{height:44px;filter:brightness(0) invert(1);}
.chip{width:42px;height:32px;border-radius:6px;background:linear-gradient(135deg,var(--mp-orange),#ffd27a);}
.hero-card-balance{font-size:12px;color:#a9b6cd;margin-bottom:4px;}
.hero-card-amount{font-size:30px;font-weight:800;letter-spacing:1px;margin-bottom:26px;}
.hero-card-num{letter-spacing:3px;font-size:16px;margin-bottom:18px;color:#dbe4f3;}
.hero-card-bottom{display:flex;justify-content:space-between;font-size:12px;color:#a9b6cd;}

.section{padding:70px 0;}
.section-head{text-align:center;max-width:600px;margin:0 auto 50px;}
.section-head .eyebrow{color:var(--mp-orange);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;}
.section-head h2{font-size:34px;color:var(--mp-navy);margin:10px 0;font-weight:800;}
.section-head p{color:var(--mp-muted);font-size:16px;}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.feature-card{
  background:var(--mp-card);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);
  border:1px solid var(--mp-border);transition:transform .2s;
}
.feature-card:hover{transform:translateY(-6px);}
.feature-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:18px;
}
.feature-icon.g{background:rgba(46,155,79,.12);}
.feature-icon.o{background:rgba(247,147,30,.14);}
.feature-icon.b{background:rgba(44,168,224,.14);}
.feature-card h3{margin:0 0 10px;font-size:18px;color:var(--mp-navy);}
.feature-card p{margin:0;color:var(--mp-muted);font-size:14px;line-height:1.6;}

.how-steps{display:flex;gap:20px;justify-content:space-between;counter-reset:step;}
.how-step{flex:1;text-align:center;position:relative;padding:0 10px;}
.how-step-num{
  width:46px;height:46px;border-radius:50%;background:var(--mp-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px;
}
.how-step h4{margin:0 0 8px;color:var(--mp-navy);}
.how-step p{color:var(--mp-muted);font-size:13px;margin:0;}

.cta-band{
  background:linear-gradient(120deg,var(--mp-navy),var(--mp-navy-light));
  border-radius:24px;padding:60px;display:flex;align-items:center;justify-content:space-between;color:#fff;
  margin:0 24px;
}
.cta-band h2{font-size:28px;margin:0 0 10px;max-width:420px;}
.cta-band p{color:#b7c3d8;margin:0;max-width:420px;}

.site-footer{background:var(--mp-navy);color:#c3cee2;padding:50px 0 20px;margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px;}
.footer-grid h5{color:#fff;margin:0 0 14px;font-size:14px;}
.footer-grid a{display:block;color:#a9b6cd;font-size:13px;margin-bottom:10px;}
.footer-grid a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;text-align:center;font-size:12px;color:#8493ac;}

/* ================= AUTH PAGES ================= */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-navy-light) 45%, var(--mp-blue-dark) 100%);
  padding:30px;position:relative;overflow:hidden;
}
.auth-wrap::before{
  content:'';position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,var(--mp-orange) 0%, transparent 70%);opacity:.25;top:-150px;left:-150px;
}
.auth-card{
  background:#fff;border-radius:20px;padding:44px;width:100%;max-width:420px;box-shadow:0 30px 60px rgba(0,0,0,.3);
  position:relative;z-index:2;
}
.auth-logo{text-align:center;margin-bottom:22px;}
.auth-logo img{height:110px;margin:0 auto;}
.auth-card h2{text-align:center;color:var(--mp-navy);margin:0 0 6px;font-size:22px;}
.auth-card .sub{text-align:center;color:var(--mp-muted);font-size:14px;margin-bottom:26px;}

.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--mp-navy);margin-bottom:7px;}
.form-control{
  width:100%;padding:12px 14px;border:1.5px solid var(--mp-border);border-radius:10px;
  font-size:14px;font-family:inherit;background:#FBFCFE;transition:border-color .15s;
}
.form-control:focus{outline:none;border-color:var(--mp-blue);background:#fff;}
.form-row{display:flex;gap:14px;}
.form-row .form-group{flex:1;}
.input-hint{font-size:12px;color:var(--mp-muted);margin-top:5px;}

.auth-footer-link{text-align:center;margin-top:20px;font-size:14px;color:var(--mp-muted);}
.auth-footer-link a{color:var(--mp-blue);font-weight:600;}

.alert{padding:13px 18px;border-radius:10px;font-size:14px;margin-bottom:18px;font-weight:500;}
.alert-success{background:#E7F6EC;color:#1E7C3B;border:1px solid #BFE8CB;}
.alert-error{background:#FCEAEA;color:#B62B2B;border:1px solid #F3C3C3;}

.divider{display:flex;align-items:center;gap:12px;color:var(--mp-muted);font-size:12px;margin:20px 0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--mp-border);}

/* ================= APP SHELL (dashboard) ================= */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:250px;background:var(--mp-navy);color:#fff;flex-shrink:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar-brand{padding:26px 22px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar-brand img{height:68px;filter:brightness(0) invert(1);}
.sidebar-nav{flex:1;padding:18px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  color:#c3cee2;font-size:14px;font-weight:500;transition:background .15s,color .15s;
}
.sidebar-nav a .ic{font-size:16px;width:20px;text-align:center;}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-nav a.active{background:linear-gradient(120deg,var(--mp-green),var(--mp-blue));color:#fff;}
.sidebar-nav a.logout{margin-top:auto;color:#f3a1a1;}
.sidebar-nav a.admin-link{color:var(--mp-orange);}

.app-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  display:flex;align-items:center;gap:20px;background:#fff;padding:16px 28px;
  border-bottom:1px solid var(--mp-border);position:sticky;top:0;z-index:20;
}
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--mp-navy);}
.topbar-title{font-weight:700;font-size:19px;color:var(--mp-navy);}
.topbar-wallet{
  margin-left:auto;background:linear-gradient(120deg, rgba(46,155,79,.1), rgba(44,168,224,.1));
  padding:9px 18px;border-radius:12px;display:flex;flex-direction:column;line-height:1.3;
}
.wallet-label{font-size:11px;color:var(--mp-muted);}
.wallet-amount{font-weight:800;color:var(--mp-navy);font-size:16px;}
.topbar-user{display:flex;align-items:center;gap:10px;}
.avatar-circle{
  width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--mp-orange),var(--mp-green));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
}
.user-meta{display:flex;flex-direction:column;line-height:1.3;font-size:13px;}
.user-meta span{color:var(--mp-muted);font-size:11px;}

.content{padding:28px;flex:1;}
.app-footer{padding:18px 28px;color:var(--mp-muted);font-size:12px;border-top:1px solid var(--mp-border);}

/* dashboard cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:26px;}
.stat-card{
  background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);border:1px solid var(--mp-border);
}
.stat-card .label{font-size:12px;color:var(--mp-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.stat-card .value{font-size:24px;font-weight:800;color:var(--mp-navy);margin-top:8px;}
.stat-card .value.pos{color:var(--mp-green);}
.stat-card .value.neg{color:var(--mp-danger);}

.balance-hero{
  background:linear-gradient(120deg,var(--mp-navy),var(--mp-navy-light));border-radius:20px;padding:32px;
  color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;position:relative;overflow:hidden;
}
.balance-hero::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,var(--mp-orange),transparent 70%);opacity:.4;}
.balance-hero .bh-label{font-size:13px;color:#a9b6cd;margin-bottom:6px;}
.balance-hero .bh-amount{font-size:36px;font-weight:800;}
.balance-hero .bh-account{font-size:13px;color:#c3cee2;margin-top:8px;letter-spacing:1px;}
.balance-hero .bh-actions{display:flex;gap:10px;z-index:2;}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
.qa-btn{
  background:#fff;border:1px solid var(--mp-border);border-radius:14px;padding:20px;text-align:center;
  box-shadow:var(--shadow);transition:transform .15s;
}
.qa-btn:hover{transform:translateY(-4px);}
.qa-btn .qa-icon{font-size:26px;margin-bottom:8px;}
.qa-btn .qa-label{font-size:13px;font-weight:600;color:var(--mp-navy);}

.card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);border:1px solid var(--mp-border);}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.card-head h3{margin:0;font-size:16px;color:var(--mp-navy);}
.card-head a{font-size:13px;color:var(--mp-blue);font-weight:600;}

table.data-table{width:100%;border-collapse:collapse;font-size:14px;}
table.data-table th{
  text-align:left;padding:12px 14px;background:#F8FAFD;color:var(--mp-muted);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;
}
table.data-table td{padding:14px;border-bottom:1px solid var(--mp-border);}
table.data-table tr:last-child td{border-bottom:none;}
.badge{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.badge-completed{background:#E7F6EC;color:#1E7C3B;}
.badge-pending{background:#FFF3E0;color:#B7791F;}
.badge-failed{background:#FCEAEA;color:#B62B2B;}
.badge-reversed{background:#EDEFF3;color:#555;}
.amount-in{color:var(--mp-green);font-weight:700;}
.amount-out{color:var(--mp-danger);font-weight:700;}

.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;}

.kv-list{display:flex;flex-direction:column;gap:14px;}
.kv-item{display:flex;justify-content:space-between;font-size:14px;padding-bottom:12px;border-bottom:1px dashed var(--mp-border);}
.kv-item span{color:var(--mp-muted);}
.kv-item strong{color:var(--mp-navy);}

.api-box{background:#0B1F3A;color:#c3f0d0;padding:16px 18px;border-radius:10px;font-family:monospace;font-size:13px;overflow-x:auto;margin-bottom:10px;position:relative;}
.copy-btn{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.1);color:#fff;border:none;padding:4px 10px;border-radius:6px;font-size:11px;}

.empty-state{text-align:center;padding:50px 20px;color:var(--mp-muted);}
.empty-state .ic{font-size:40px;margin-bottom:10px;}

.tab-nav{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--mp-border);}
.tab-nav a{padding:12px 18px;font-size:14px;font-weight:600;color:var(--mp-muted);border-bottom:2px solid transparent;}
.tab-nav a.active{color:var(--mp-navy);border-color:var(--mp-blue);}

.pagination{display:flex;gap:6px;justify-content:center;margin-top:20px;}
.pagination a{padding:8px 14px;border-radius:8px;border:1px solid var(--mp-border);font-size:13px;color:var(--mp-navy);}
.pagination a.active{background:var(--mp-navy);color:#fff;border-color:var(--mp-navy);}

/* ================ RESPONSIVE ================ */
@media(max-width:960px){
  .hero .container{flex-direction:column;}
  .hero-text{text-align:center;}
  .hero-cta,.hero-stats{justify-content:center;}
  .hero-text p{margin-left:auto;margin-right:auto;}
  .features-grid{grid-template-columns:1fr;}
  .how-steps{flex-direction:column;}
  .cta-band{flex-direction:column;gap:20px;text-align:center;margin:0 12px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stat-grid,.quick-actions{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-260px;z-index:100;transition:left .2s;}
  .sidebar.open{left:0;}
  .menu-toggle{display:block;}
  .public-nav-links{display:none;}
}
@media(max-width:600px){
  .stat-grid,.quick-actions{grid-template-columns:1fr;}
  .topbar-user .user-meta{display:none;}
  .balance-hero{flex-direction:column;align-items:flex-start;gap:16px;}
}