/* =====================================================================
   VPAY BUSINESS — PAYTM-STYLE DESIGN SYSTEM (v2, 2026)
   Loaded by user_nav.php on every user + admin page (and directly by
   login/register). Selectors are prefixed with "html body" so they win
   over each page's own inline <style> without touching page layout.
   Only visual properties are overridden (colour, radius, shadow, type).
   ===================================================================== */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url("assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  --vp-cyan:#00BAF2;--vp-cyan-dark:#0095C8;--vp-cyan-soft:#E0F7FD;--vp-tile:#EBF8FD;
  --vp-blue:#075BD7;--vp-blue-soft:#EFF6FF;--vp-navy:#061B49;--vp-ink:#031131;--vp-deep:#002E6E;
  --vp-bg:#F5F7FA;--vp-card:#FFFFFF;--vp-text:#061B49;--vp-muted:#5A6E85;--vp-muted2:#8292A6;
  --vp-line:#E2E8F0;--vp-line-soft:#EBF0F7;
  --vp-success:#00A65A;--vp-success-bg:#E8F8F0;--vp-success-ink:#0D6832;
  --vp-pending-bg:#FEF3C7;--vp-pending-ink:#92400E;
  --vp-failed:#E53935;--vp-failed-bg:#FEE2E2;--vp-failed-ink:#991B1B;
  --vp-r-card:16px;--vp-r-tile:14px;--vp-r-btn:10px;--vp-r-input:10px;
  --vp-shadow:0 2px 8px -1px rgba(6,27,73,.06),0 1px 3px 0 rgba(6,27,73,.04);
  --vp-shadow-hover:0 10px 24px -6px rgba(6,27,73,.14);
  --vp-shadow-wallet:0 8px 24px -4px rgba(7,91,215,.25);
  --vp-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --vp-font-head:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --vp-grad-hero:linear-gradient(120deg,#061B49 0%,#08286A 45%,#075BD7 100%);
  --vp-grad-cta:linear-gradient(90deg,#00BAF2,#0A8FE0);
  /* legacy tokens kept for older pages */
  --vpay-blue:#075BD7;--vpay-blue2:#00BAF2;--vpay-navy:#061B49;--vpay-bg:#F5F7FA;--vpay-text:#061B49;--vpay-muted:#5A6E85;--vpay-line:#E2E8F0;--vpay-card:#fff;--vpay-radius:16px;--vpay-shadow:var(--vp-shadow)
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html body{background:var(--vp-bg);color:var(--vp-text);font-family:var(--vp-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html body a,html body button,html body input,html body select,html body textarea{font-family:inherit}
html body h1,html body h2,html body h3{font-family:var(--vp-font-head);letter-spacing:-.02em}
html body ::selection{background:#bdeefc;color:var(--vp-ink)}
html body :focus-visible{outline:2px solid var(--vp-cyan);outline-offset:2px}

/* ---------- Page hero banners (every page uses .hero / .welcome) ---------- */
html body .hero,html body .vpay-hero,html body .welcome{background:var(--vp-grad-hero);color:#fff;border:0;border-radius:20px;box-shadow:var(--vp-shadow-wallet);position:relative;overflow:hidden}
html body .hero::before,html body .vpay-hero::before,html body .welcome::before{content:"";position:absolute;right:-80px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(0,186,242,.38),rgba(0,186,242,0) 70%);pointer-events:none}
html body .hero>*,html body .welcome>*{position:relative}
html body .hero h1,html body .hero h2,html body .welcome h1{color:#fff}
html body .hero p,html body .welcome p{color:#CFE2FE}
html body .eyebrow,html body .vpay-eyebrow,html body .pill{letter-spacing:.08em}

/* ---------- Cards / panels ---------- */
html body .card,html body .panel,html body .vpay-card,html body .stat,html body .history-card,html body .mini-card,html body .location-card{background:var(--vp-card);border:1px solid var(--vp-line-soft);border-radius:var(--vp-r-card);box-shadow:var(--vp-shadow)}
html body .card{transition:transform .18s ease,box-shadow .18s ease}
html body a.card:hover,html body .card:hover{box-shadow:var(--vp-shadow-hover)}
html body .hero .card,html body .hero .stat{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);box-shadow:none}

/* ---------- Buttons ---------- */
html body .primary,html body .vpay-btn,html body .btn:not(.light):not(.gold):not(.secondary),html body button[type=submit]:not(.vgn-link):not(.vp-plain),html body a.open,html body .quick-cta{background:var(--vp-grad-cta);color:#fff;border:0;border-radius:var(--vp-r-btn);font-weight:800;box-shadow:0 4px 12px -2px rgba(0,186,242,.35);transition:transform .12s ease,box-shadow .18s ease,filter .18s ease}
html body .primary:hover,html body .vpay-btn:hover,html body .btn:hover,html body button[type=submit]:hover,html body a.open:hover{filter:brightness(1.05);box-shadow:0 8px 18px -4px rgba(0,186,242,.45)}
html body .primary:active,html body .vpay-btn:active,html body .btn:active,html body button[type=submit]:active,html body a.open:active{transform:scale(.97)}
html body .primary:disabled,html body button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.2)}
html body .secondary,html body .vpay-btn.secondary,html body .btn.light{background:var(--vp-cyan-soft);color:var(--vp-deep);border:1px solid #BDEBFA;border-radius:var(--vp-r-btn);box-shadow:none}

/* ---------- Forms ---------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),html body select,html body textarea,html body .field,html body .search{border:1.5px solid var(--vp-line);border-radius:var(--vp-r-input);background:#fff;color:var(--vp-text);transition:border-color .15s ease,box-shadow .15s ease}
html body input:not([type=checkbox]):not([type=radio]):focus,html body select:focus,html body textarea:focus,html body .field:focus,html body .search:focus{border-color:var(--vp-cyan);box-shadow:0 0 0 4px rgba(0,186,242,.14);outline:0}
html body input::placeholder,html body textarea::placeholder{color:#9AA8BA}
html body label{color:#33475f}

/* ---------- Quick amount chips (recharge / wallet) ---------- */
html body .amount,html body .quick button,html body .chip{border-radius:999px;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
html body .amounts .amount,html body .quick button{background:#fff;border:1.5px solid var(--vp-line);color:var(--vp-text);font-weight:800}
html body .amounts .amount:hover,html body .quick button:hover{border-color:var(--vp-cyan);color:var(--vp-cyan-dark);background:var(--vp-tile)}
html body .amounts .amount:active,html body .quick button:active{transform:scale(.95)}

/* ---------- Tabs / category tiles ---------- */
html body .tab.active,html body .cat.active,html body .service-filter button.active{background:var(--vp-tile);border-color:var(--vp-cyan);color:var(--vp-deep)}
html body .cat .icon,html body .quick-icon,html body .service .icon,html body .history-icon{background:var(--vp-tile);border-radius:var(--vp-r-tile)}

/* ---------- Tables ---------- */
html body table{border-collapse:collapse}
html body th{background:#F8FAFD;color:var(--vp-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--vp-line)}
html body td{border-bottom:1px solid #F0F3F8;color:#1E3354}
html body tbody tr,html body table tr{transition:background-color .12s ease}
html body tbody tr:hover td{background:#FAFCFF}

/* ---------- Status pills ---------- */
html body .status,html body .badge,html body .history-status{border-radius:999px;font-weight:800}
html body .status.success,html body .badge.success,html body .ok,html body .success:not(.result){background:var(--vp-success-bg);color:var(--vp-success-ink)}
html body .status.failed,html body .badge.failed,html body .err,html body .error:not(input){background:var(--vp-failed-bg);color:var(--vp-failed-ink)}
html body .status.pending,html body .badge.pending{background:var(--vp-pending-bg);color:var(--vp-pending-ink)}

/* ---------- Old page-level headers that duplicate the global nav ---------- */
html body .vpay-global-nav ~ header.top,html body .vpay-global-nav ~ .topbar,html body .vpay-global-nav ~ .wrap > .top:first-child,html body .vpay-global-nav ~ .wrap > .brand-head{display:none}
html body .welcome{padding:24px 28px}
html body .vpay-global-nav ~ .layout .main{background:transparent}

/* ---------- Generic helpers used by redesigned pages ---------- */
.vp-container{max-width:1200px;margin:0 auto;padding:18px 16px 40px}
.vp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:26px 0 12px}
.vp-section-head h2{margin:0;font-size:19px;font-family:var(--vp-font-head);color:var(--vp-text)}
.vp-section-head p{margin:3px 0 0;font-size:12.5px;color:var(--vp-muted)}
.vp-section-head a{color:var(--vp-blue);font-weight:800;font-size:12.5px;text-decoration:none;white-space:nowrap}
.vp-section-head a:hover{text-decoration:underline}
.vp-card{background:#fff;border:1px solid var(--vp-line-soft);border-radius:var(--vp-r-card);box-shadow:var(--vp-shadow)}
.vp-grid-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@media(min-width:760px){.vp-grid-icons{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}}
@media(min-width:1100px){.vp-grid-icons.wide{grid-template-columns:repeat(8,minmax(0,1fr))}}
.vp-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;border-radius:var(--vp-r-tile);text-decoration:none;color:var(--vp-text);text-align:center;min-height:96px;transition:background-color .15s ease,transform .1s ease}
.vp-tile:hover{background:#F4FBFE}
.vp-tile:active{transform:scale(.95)}
.vp-tile .ic{width:52px;height:52px;border-radius:16px;background:var(--vp-tile);display:grid;place-items:center;font-size:25px;position:relative;transition:transform .18s ease}
.vp-tile:hover .ic{transform:translateY(-2px)}
.vp-tile .ic img{width:30px;height:30px;object-fit:contain}
.vp-tile b{font-size:12px;font-weight:700;line-height:1.25;color:#1E3354}
.vp-tile .tag{position:absolute;top:-6px;right:-10px;background:#FF4D4F;color:#fff;font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:999px;letter-spacing:.03em}
.vp-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800}
.vp-pill.success{background:var(--vp-success-bg);color:var(--vp-success-ink)}
.vp-pill.pending{background:var(--vp-pending-bg);color:var(--vp-pending-ink)}
.vp-pill.failed{background:var(--vp-failed-bg);color:var(--vp-failed-ink)}
.vp-empty{padding:28px 16px;text-align:center;color:var(--vp-muted);font-size:13px}
.vp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:var(--vp-r-btn);padding:11px 16px;background:var(--vp-grad-cta);color:#fff;font-weight:800;font-size:13px;text-decoration:none;cursor:pointer;box-shadow:0 4px 12px -2px rgba(0,186,242,.35);transition:transform .12s ease,filter .15s ease}
.vp-btn:hover{filter:brightness(1.05)}.vp-btn:active{transform:scale(.97)}
.vp-btn.white{background:#fff;color:var(--vp-deep);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.vp-btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.vp-btn.soft{background:var(--vp-cyan-soft);color:var(--vp-deep);box-shadow:none}

@media(max-width:600px){html body .hero h1,html body .welcome h1{font-size:clamp(22px,6.6vw,30px);line-height:1.15}html body .hero{border-radius:18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}