/* ==========================================================================
   Anbo UI — matches the client mockups: deep-green brand, white rounded cards,
   big pill buttons, 4 coloured service cards, green top bar, bottom navigation.
   Loaded AFTER app.css so it can restyle everything without touching layouts.
   ========================================================================== */
:root{--bg:#F1F7F3;--line:#E1ECE5;--r:16px;--g900:#0B3D24;--g800:#0F5A32;--g700:#15803D;--g100:#E7F5EC}
body{background:var(--bg);font-family:'Hind Siliguri','Inter',system-ui,sans-serif}
h1,h2,h3{letter-spacing:-.01em}

/* ---------- controls ---------- */
.btn{border-radius:14px;padding:12px 22px;box-shadow:0 2px 0 rgba(0,0,0,.06);background:linear-gradient(180deg,#1a9146,var(--primary));border-color:var(--primary)}
.btn.sm{border-radius:11px;padding:7px 14px}.btn.lg{border-radius:16px;padding:15px 28px;font-size:16.5px}
.btn.ghost{background:#fff;color:var(--primary);border-color:#cfe5d7;box-shadow:none}
.btn.dark{background:var(--g900);border-color:var(--g900)}.btn.ok{background:linear-gradient(180deg,#22a552,#16883f);border-color:#16883f}
input,select,textarea{border-radius:13px;border:1.5px solid #d5e3da;background:#fbfdfc;padding:12px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12);outline:0;background:#fff}
input.ic{padding-left:44px;background-repeat:no-repeat;background-position:14px center;background-size:20px}
input.ic-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
input.ic-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.card{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 6px 18px rgba(11,61,36,.06)}
.badge{border-radius:99px}

/* ---------- brand / logo ---------- */
.brand{gap:0}.anbo-logo{display:block}
.side .brand{padding:0 12px}

/* ---------- splash (public home) ---------- */
.hero.splash{background:linear-gradient(170deg,#0F6B3A 0%,#0B4A2A 55%,#082F1B 100%);padding:52px 0 150px;color:#fff;position:relative}
.hero.splash:before{display:none}
.hero.splash:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 130' preserveAspectRatio='none'%3E%3Cg fill='%2315803D'%3E%3Crect x='10' y='60' width='40' height='70'/%3E%3Crect x='60' y='30' width='36' height='100'/%3E%3Crect x='106' y='75' width='50' height='55'/%3E%3Crect x='166' y='20' width='34' height='110'/%3E%3Crect x='210' y='55' width='46' height='75'/%3E%3Crect x='266' y='40' width='38' height='90'/%3E%3Crect x='314' y='80' width='52' height='50'/%3E%3Crect x='376' y='25' width='36' height='105'/%3E%3Crect x='422' y='65' width='44' height='65'/%3E%3Crect x='476' y='45' width='40' height='85'/%3E%3Crect x='526' y='15' width='34' height='115'/%3E%3Crect x='570' y='70' width='50' height='60'/%3E%3Crect x='630' y='35' width='38' height='95'/%3E%3Crect x='678' y='60' width='46' height='70'/%3E%3Crect x='734' y='28' width='56' height='102'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hero.splash .wrap{z-index:1}
.splash-logo{margin-bottom:6px}.splash-tag{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:#a7e3bd;margin:0 0 22px}
.hero.splash h1{color:#fff;font-size:clamp(26px,4.4vw,42px)}.splash-sub{color:#d3efdd;font-size:17px}
.splash-btn{background:#fff!important;color:var(--g900)!important;border-color:#fff!important;min-width:220px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.splash-login{color:#d3efdd;align-self:center;font-size:14.5px}.splash-login b{color:#fff;text-decoration:underline}
.svc-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.svc-mini span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:99px;font-size:13px}
.hero.splash .trackbox{background:#fff;color:var(--text);border-radius:20px;box-shadow:0 20px 44px rgba(0,0,0,.28)}
.hero.splash .trackbox h3{color:var(--g900)}
.site-h{background:#fff;border-bottom:1px solid var(--line)}

/* ---------- auth ---------- */
body.authp{background:linear-gradient(180deg,#fff,#F1F7F3)}
.split .art{background:linear-gradient(160deg,#0F6B3A,#082F1B)}
.authbox .card{border-radius:24px;padding:28px;box-shadow:0 18px 40px rgba(11,61,36,.12)}
.authbox h2{text-align:center;font-size:26px;margin:4px 0}.authbox>.card>p.muted:first-of-type{text-align:center}
.mob-logo{display:flex;justify-content:center;margin-bottom:10px}
@media(min-width:900px){.mob-logo{display:none}}

/* ---------- panel chrome ---------- */
.side{background:var(--g900);border-right:0;color:#cfe8d9}
.side .brand{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.side nav a{color:#cfe8d9;border-radius:12px}.side nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.side nav a.on{background:var(--primary);color:#fff}.side nav a.on:before{display:none}
.side .sec{color:#7fb79a}
.top{background:#fff;box-shadow:0 2px 12px rgba(11,61,36,.06)}
.top h1{color:var(--g900)}

/* mobile = real app feel: green header, white text, content overlaps header */
@media(max-width:820px){
  body.panel .top{background:linear-gradient(135deg,#15803D,#0B4A2A);color:#fff;border:0;height:58px;padding:0 14px;box-shadow:none}
  body.panel .top h1{color:#fff;font-size:18px}.top .burger{color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:10px}
  body.panel .top .lang,body.panel .top .bell{color:#fff}.top .me .av{background:#fff;color:var(--g900)}.top .btn.ghost{background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
  body.panel .content{padding-top:16px}
  .bnav{border-radius:22px 22px 0 0;box-shadow:0 -8px 24px rgba(11,61,36,.14)}
  .bnav a.on{color:var(--primary)}.bnav a.on svg{transform:translateY(-2px)}
}

/* ---------- customer home ---------- */
.hello{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:0 6px 18px rgba(11,61,36,.06)}
.hello h2{color:var(--g900);margin:0}.cid{background:var(--g100)}
.svc4{gap:14px}.svc{border-radius:22px;min-height:158px;padding:18px;position:relative;overflow:hidden}
.svc:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.10)}
.svc i{background:#fff;color:var(--g900);border-radius:16px;width:56px;height:56px;box-shadow:0 6px 14px rgba(0,0,0,.14)}
.svc i .ic{width:28px;height:28px}
.s-send{background:linear-gradient(135deg,#2C9BEF,#0B63B8)}.s-recv{background:linear-gradient(135deg,#F9B23C,#E58A0A)}.s-buy{background:linear-gradient(135deg,#22A552,#0F6B37)}.s-od{background:linear-gradient(135deg,#1E9E55,#0B3D24)}.s-purple{background:linear-gradient(135deg,#7C4DDB,#4C2A9E)}
.qlinks a{border-radius:16px;box-shadow:0 4px 12px rgba(11,61,36,.05)}
.qlinks a .ic{background:var(--g100);padding:9px;border-radius:12px;width:40px;height:40px;box-sizing:border-box}

/* ---------- shopper home ---------- */
.vbadge{display:inline-block;background:var(--g100);color:var(--g700);font-weight:700;font-size:12px;padding:3px 10px;border-radius:99px}
.hero-stats{display:flex;gap:10px}.hero-stats>div{background:linear-gradient(135deg,#15803D,#0B4A2A);color:#fff;border-radius:16px;padding:10px 16px;text-align:center;min-width:104px}.hero-stats small{display:block;opacity:.85;font-size:11.5px}.hero-stats b{font-size:22px}
.hello .hero-stats{margin-left:auto}
.onoff{border-radius:18px}
.svc4.rt{margin:14px 0}

/* ---------- wallet ---------- */
.walletcard{background:linear-gradient(135deg,#15803D,#0B3D24);color:#fff;border-radius:22px;padding:22px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 30px rgba(11,61,36,.25)}
.walletcard small{opacity:.85}.walletcard b{font-size:40px;line-height:1.1}.walletcard .btn{background:#fff;color:var(--g900);border-color:#fff;align-self:flex-start;margin-top:10px}

/* ---------- order pieces ---------- */
.stat i{background:var(--g100);color:var(--primary);border-radius:14px}
.tl12 li.done i{background:linear-gradient(135deg,#22a552,#15803D)}
.anbo-steps span.on{background:linear-gradient(135deg,#22a552,#15803D)}
.stepbar{background:#dcebe1}
.trust div{border-radius:14px}
.conf{border-radius:20px;border:2px solid var(--primary);box-shadow:0 10px 26px rgba(21,128,61,.14)}
.stepnav .btn{border-radius:16px;padding:14px 26px;font-size:16px}
#nextBtn{flex:1}

/* ---------- tables / admin ---------- */
.card.stat{border-radius:18px}
table th{background:#f3faf5;color:var(--g900)}