/* ==========================================================================
   LuminaPay UI — shared design system for CUSTOMER pages only.
   Everything is scoped under body.lu so admin pages are never affected.
   Brand: gold #FFD31A (matches the logo), deep navy #0B1220.
   ========================================================================== */
:root{
  --lu-gold:#FFD31A; --lu-gold-hi:#FFE066; --lu-gold-lo:#D9A31A;
  --lu-on-gold:#0B1220;
  --lu-bg:#0B1220; --lu-bg-2:#0F1829;
  --lu-surface:#131D31; --lu-surface-2:#182540; --lu-line:rgba(255,255,255,.08); --lu-line-2:rgba(255,255,255,.14);
  --lu-text:#F5F7FB; --lu-text-2:#C4CDDD; --lu-muted:#8D9AB3;
  --lu-ok:#22C55E; --lu-warn:#F59E0B; --lu-err:#F43F5E; --lu-info:#60A5FA;
  --lu-r-sm:12px; --lu-r:18px; --lu-r-lg:26px;
  --lu-font:'Cairo','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lu-ease:cubic-bezier(.2,.7,.2,1);
  --lu-safe-b:env(safe-area-inset-bottom,0px); --lu-safe-t:env(safe-area-inset-top,0px);
  --lu-shell:520px;
}

body.lu{
  background:var(--lu-bg) !important;
  background-image:radial-gradient(70% 40% at 15% -5%,rgba(255,211,26,.13),transparent 70%) !important;
  background-attachment:fixed !important;
  color:var(--lu-text); font-family:var(--lu-font);
  min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
body.lu *,body.lu *::before,body.lu *::after{box-sizing:border-box}
body.lu button,body.lu input,body.lu select,body.lu textarea{font-family:inherit}
body.lu img{max-width:100%}
body.lu.lu-has-nav{padding-bottom:calc(112px + var(--lu-safe-b)) !important}

/* icons */
.lu-ic{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 450}
.lu-ic.fill{font-variation-settings:'FILL' 1,'wght' 450}

/* shell */
.lu-shell{max-width:var(--lu-shell);margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.lu-shell{--lu-shell:560px}}

/* top bar with back button + title */
.lu-top{display:flex;align-items:center;gap:12px;max-width:var(--lu-shell);margin-inline:auto;padding:calc(16px + var(--lu-safe-t)) 20px 12px}
.lu-top h1{font-size:20px;font-weight:800;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--lu-text)}
.lu-iconbtn{width:44px;height:44px;border-radius:14px;border:1px solid var(--lu-line);background:var(--lu-surface);color:var(--lu-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;flex:none;transition:transform .15s var(--lu-ease),background .15s}
.lu-iconbtn:hover{background:var(--lu-surface-2)} .lu-iconbtn:active{transform:scale(.92)}
[dir=rtl] .lu-back .lu-ic{transform:scaleX(-1)}

/* surfaces — use sparingly: one level of surface, divide with lines */
.lu-panel{background:var(--lu-surface);border:1px solid var(--lu-line);border-radius:var(--lu-r)}
.lu-hero{position:relative;overflow:hidden;border-radius:var(--lu-r-lg);padding:24px;border:1px solid var(--lu-line-2);
  background:radial-gradient(120% 120% at 100% 0%,rgba(255,211,26,.20),transparent 55%),linear-gradient(160deg,#16233F,#0F1829)}
.lu-list>*+*{border-top:1px solid var(--lu-line)}
.lu-row{display:flex;align-items:center;gap:14px;padding:14px 16px;color:inherit;text-decoration:none}
.lu-label{font-size:12px;font-weight:700;color:var(--lu-muted);letter-spacing:.02em}
.lu-h2{font-size:17px;font-weight:800;margin:0}
.lu-num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* buttons */
.lu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:16px;border:1px solid transparent;
  font-size:16px;font-weight:800;cursor:pointer;text-decoration:none;position:relative;transition:transform .15s var(--lu-ease),box-shadow .2s,background .2s,opacity .2s}
.lu-btn:active{transform:scale(.97)}
.lu-btn-primary{background:var(--lu-gold);color:var(--lu-on-gold);box-shadow:0 10px 24px -8px rgba(255,211,26,.55)}
.lu-btn-primary:hover{background:var(--lu-gold-hi)}
.lu-btn-ghost{background:var(--lu-surface);color:var(--lu-text);border-color:var(--lu-line-2)}
.lu-btn-danger{background:rgba(244,63,94,.14);color:#FB7185;border-color:rgba(244,63,94,.35)}
.lu-btn-block{width:100%}
.lu-btn[disabled],.lu-btn.is-loading{opacity:.6;cursor:not-allowed;pointer-events:none}
.lu-btn.is-loading::after,.lu-spin{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-inline-end-color:transparent;animation:lu-rot .7s linear infinite;display:inline-block}
.lu-btn.is-loading::after{margin-inline-start:6px}
@keyframes lu-rot{to{transform:rotate(360deg)}}

/* forms */
.lu-field{display:block;margin-bottom:16px}
.lu-field>.lu-label{display:block;margin-bottom:8px}
.lu-input,.lu-select{width:100%;min-height:52px;padding:0 16px;border-radius:14px;background:var(--lu-bg-2);border:1.5px solid var(--lu-line-2);color:var(--lu-text);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.lu-input::placeholder{color:#5F6D88}
.lu-input:focus,.lu-select:focus{border-color:var(--lu-gold);box-shadow:0 0 0 4px rgba(255,211,26,.16)}
.lu-input.is-invalid{border-color:var(--lu-err);box-shadow:0 0 0 4px rgba(244,63,94,.14)}
.lu-err-text{color:#FB7185;font-size:13px;font-weight:600;margin-top:6px}
.lu-hint{color:var(--lu-muted);font-size:12.5px;margin-top:6px}
.lu-req::after{content:" *";color:var(--lu-gold)}

/* generic polish for existing page inputs (kept selector-light, non-destructive) */
body.lu input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
body.lu select:focus,body.lu textarea:focus{outline:none}
body.lu :focus-visible{outline:2px solid var(--lu-gold);outline-offset:2px;border-radius:8px}
body.lu input,body.lu select,body.lu textarea{font-size:16px} /* stops iOS zoom-on-focus */
body.lu a,body.lu button{touch-action:manipulation}

/* chips / status */
.lu-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(255,255,255,.07);color:var(--lu-text-2)}
.lu-chip.ok{background:rgba(34,197,94,.14);color:#4ADE80}.lu-chip.warn{background:rgba(245,158,11,.14);color:#FBBF24}
.lu-chip.err{background:rgba(244,63,94,.14);color:#FB7185}.lu-chip.info{background:rgba(96,165,250,.14);color:#93C5FD}

/* alerts (inline, honest status messages) */
.lu-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--lu-r);font-size:14px;line-height:1.6;border:1px solid var(--lu-line-2);background:var(--lu-surface)}
.lu-alert.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.lu-alert.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.lu-alert.err{border-color:rgba(244,63,94,.35);background:rgba(244,63,94,.08)}

/* empty + skeleton */
.lu-empty{text-align:center;padding:36px 20px;color:var(--lu-text-2)}
.lu-empty .lu-ic{font-size:46px;color:var(--lu-muted);display:block;margin:0 auto 10px}
.lu-skel{border-radius:12px;background:linear-gradient(90deg,var(--lu-surface) 25%,var(--lu-surface-2) 50%,var(--lu-surface) 75%);background-size:200% 100%;animation:lu-sh 1.3s infinite}
@keyframes lu-sh{to{background-position:-200% 0}}

/* toast */
#lu-toasts{position:fixed;inset-inline:0;bottom:calc(104px + var(--lu-safe-b));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9999;pointer-events:none;padding-inline:16px}
.lu-toast{pointer-events:auto;max-width:92vw;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:#1B2A47;color:var(--lu-text);border:1px solid var(--lu-line-2);font-weight:700;font-size:14px;box-shadow:0 14px 34px rgba(0,0,0,.45);animation:lu-in .25s var(--lu-ease)}
.lu-toast.ok .lu-ic{color:var(--lu-ok)}.lu-toast.err .lu-ic{color:var(--lu-err)}
.lu-toast.out{opacity:0;transform:translateY(8px);transition:.25s}
@keyframes lu-in{from{opacity:0;transform:translateY(10px)}}

/* bottom navigation */
.lu-nav{position:fixed;z-index:50;inset-inline:12px;bottom:calc(12px + var(--lu-safe-b));max-width:calc(var(--lu-shell) - 16px);margin-inline:auto;height:68px;border-radius:26px;
  background:rgba(15,24,41,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--lu-line-2);box-shadow:0 18px 40px rgba(0,0,0,.5);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding-inline:6px}
.lu-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--lu-muted);text-decoration:none;font-size:11px;font-weight:800;padding:6px 0;transition:color .15s,transform .15s}
.lu-nav a:active{transform:scale(.92)}
.lu-nav a.on{color:var(--lu-gold)} .lu-nav a.on .lu-ic{font-variation-settings:'FILL' 1,'wght' 500}
.lu-nav .lu-fab{margin-top:-30px}
.lu-nav .lu-fab span.fab{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--lu-on-gold);
  background:radial-gradient(circle at 35% 30%,var(--lu-gold-hi),var(--lu-gold) 70%);box-shadow:0 12px 26px rgba(255,211,26,.45),0 0 0 6px var(--lu-bg)}
.lu-nav .lu-fab span.fab .lu-ic{font-size:30px}

/* motion */
.lu-fade{animation:lu-in .4s var(--lu-ease) both}
@media(prefers-reduced-motion:reduce){body.lu *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* no accidental horizontal scroll from wide children */
body.lu table{max-width:100%}
body.lu pre,body.lu code{overflow-wrap:anywhere}