/* ==========================================================================
   PAKPAY — shared UI polish. Loaded site-wide on top of app.css so the
   panels, docs and checkout match the landing page.
   ========================================================================== */

/* ---------- sidebar with icons ---------- */
.nav-ic{width:16px;height:16px;flex-shrink:0;opacity:.72}
.side a.nav.on .nav-ic{opacity:1;color:var(--accent)}
.side a.nav{gap:10px}
.side{background:linear-gradient(180deg,#f8faf8 0%,var(--bg-soft) 100%)}
.side a.nav.on{position:relative}
.side a.nav.on::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0}
@media(max-width:860px){.side a.nav.on::before{display:none}}

/* ---------- richer cards and panels ---------- */
.card{border-radius:14px;box-shadow:0 1px 2px rgba(17,21,15,.05),0 1px 3px rgba(17,21,15,.03)}
.card-head{background:linear-gradient(180deg,#fcfdfc,#fff)}
.stat{border-radius:14px;position:relative;overflow:hidden;transition:.2s ease}
.stat:hover{box-shadow:0 10px 26px -14px rgba(17,21,15,.28);transform:translateY(-2px)}
.stat.accent{background:linear-gradient(155deg,#f0f7f2,#e7f2eb);border-color:#cfe4d7}
.stat.accent::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;
  right:-46px;top:-56px;background:rgba(10,107,61,.07)}

/* ---------- topbar ---------- */
.topbar{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);position:sticky;top:0;z-index:12}
.content{background:
  radial-gradient(900px 380px at 82% -8%,rgba(10,107,61,.045),transparent 62%),
  var(--bg-soft)}

/* ---------- buttons ---------- */
.btn{transition:.16s ease}
.btn-primary{box-shadow:0 3px 10px -4px rgba(10,107,61,.45)}
.btn-primary:hover{box-shadow:0 6px 16px -5px rgba(10,107,61,.55);transform:translateY(-1px)}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* ---------- tables ---------- */
.tbl th{background:linear-gradient(180deg,#fafbfa,var(--bg-soft))}
.tbl tbody tr{transition:background .12s}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px}
.badge-ok::before,.badge-warn::before,.badge-bad::before,.badge-muted::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ---------- page hero, used by docs / apply / auth ---------- */
.pg-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#f7faf8,#fff);padding:58px 0 50px}
.pg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 74% 76% at 30% 20%,#000 20%,transparent 76%);
          mask-image:radial-gradient(ellipse 74% 76% at 30% 20%,#000 20%,transparent 76%)}
.pg-hero .wrap,.pg-hero .wrap-sm{position:relative;z-index:1}
.pg-hero h1{font-size:40px;letter-spacing:-.038em;line-height:1.1}
.pg-hero p.sub{color:var(--ink-2);font-size:17px;margin:14px 0 0;max-width:60ch;line-height:1.6}
@media(max-width:760px){.pg-hero{padding:42px 0 36px}.pg-hero h1{font-size:29px}.pg-hero p.sub{font-size:15.5px}}

.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:13px}
.kicker::before{content:"";width:18px;height:1.5px;background:var(--accent);border-radius:2px}

/* ---------- icon chip ---------- */
.ichip{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);
  border:1px solid #cfe4d7;color:var(--accent-dark);display:grid;place-items:center;flex-shrink:0}
.ichip svg{width:19px;height:19px}
.ichip.sm{width:32px;height:32px;border-radius:9px}
.ichip.sm svg{width:16px;height:16px}
.ichip.neutral{background:#eef2f7;border-color:#d3ddea;color:#31465e}

/* ---------- auth pages ---------- */
.auth{background:
  radial-gradient(720px 360px at 50% -6%,rgba(10,107,61,.09),transparent 64%),
  var(--bg-soft)}
.auth::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 42%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 42%,#000,transparent 74%)}
.auth{position:relative}
.auth-box{position:relative;z-index:1}
.auth-box .card{border-radius:16px;box-shadow:0 22px 54px -26px rgba(17,21,15,.34)}

/* ---------- checkout ---------- */
.checkout{background:
  radial-gradient(760px 340px at 50% -4%,rgba(10,107,61,.09),transparent 62%),
  var(--bg-soft);position:relative}
.checkout::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 40%,#000,transparent 76%);
          mask-image:radial-gradient(ellipse 62% 52% at 50% 40%,#000,transparent 76%)}
.checkout-box{position:relative;z-index:1}
.checkout-box .card{border-radius:16px;box-shadow:0 22px 54px -26px rgba(17,21,15,.34)}
.method{border-radius:11px}

/* ---------- nav ---------- */
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-pub{background:rgba(255,255,255,.82)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
  background:var(--accent);border-radius:2px;transition:right .22s ease}
.nav-links a:hover::after{right:0}

/* ---------- docs ---------- */
.docs-nav a{border-left:2px solid transparent;padding-left:11px;margin-left:-11px;transition:.15s}
.docs-nav a:hover{border-left-color:var(--accent);color:var(--accent)}
.docs-body pre.code{box-shadow:0 14px 34px -20px rgba(17,21,15,.4)}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#fff,var(--bg-soft))}

/* ---------- small utilities ---------- */
.stack{display:flex;flex-direction:column;gap:6px}
.hstack{display:flex;align-items:center;gap:10px}
.grow{flex:1}
.divider{height:1px;background:var(--line);margin:20px 0}
@media(prefers-reduced-motion:reduce){
  .btn,.stat,.card{transition:none!important}
  .btn-primary:hover,.stat:hover{transform:none!important}
}