/* ============================================================
   Spinzo24 - Shared styles: hide scrollbar + nav + GLOBAL LOADER
   FULLY RESPONSIVE for all screen sizes
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Prevent horizontal scroll on small screens */
html, body { max-width:100%; overflow-x:hidden; }

/* Hide scrollbar but keep scroll functionality */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar,
*::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* Images responsive by default */
img { max-width:100%; height:auto; }

/* Shared bottom nav — responsive (3 items: Home / Withdraw / Profile) */
.nav{
  position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e5e5ec;
  max-width:560px;margin:0 auto;height:68px;display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 -10px 28px rgba(0,0,0,.18);z-index:50;
}
.nav a{
  text-decoration:none;color:#6f7079;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font:500 12px Inter,Arial,sans-serif;
}
.nav a.active{color:#01004D;font-weight:800}
.nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Responsive nav on small screens */
@media(max-width:380px){
  .nav{height:62px}
  .nav a{font-size:10.5px;gap:3px}
  .nav svg{width:19px;height:19px}
}
@media(max-width:320px){
  .nav a{font-size:10px}
  .nav svg{width:18px;height:18px}
}

/* Touch-friendly */
button, a { touch-action: manipulation; }
input, button, textarea, select { font-family: inherit; }

/* ============================================================
   GLOBAL PAGE LOADER (full-screen, shown until requireAuth resolves)
   ============================================================ */
#__pageLoader{
  position:fixed;inset:0;background:linear-gradient(180deg,#01004D 0%,#020038 48%,#000022 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:99999;transition:opacity .4s ease, visibility .4s;
}
#__pageLoader.hide{opacity:0;visibility:hidden;pointer-events:none}
#__pageLoader .logo-anim{
  width:120px;height:120px;margin-bottom:24px;
  animation:logoPulse 1.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(255,210,74,.35));
}
@keyframes logoPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.08);opacity:.85}
}
#__pageLoader .ring{
  width:64px;height:64px;border-radius:50%;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:#ffd24a;border-right-color:#ff9f1a;
  animation:ringSpin 1s linear infinite;margin-bottom:18px;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
#__pageLoader .txt{
  color:#fff;font:800 14px Inter,Arial;letter-spacing:.5px;
  text-align:center;opacity:.92;
}
#__pageLoader .txt b{color:#ffd24a;font-weight:900}
#__pageLoader .dots::after{
  content:'';display:inline-block;animation:dotAnim 1.4s steps(4,end) infinite;
}
@keyframes dotAnim{
  0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}
}

/* ============================================================
   INLINE BUTTON LOADER (for login/signup buttons etc.)
   ============================================================ */
.btn-loader{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:ringSpin .8s linear infinite;vertical-align:middle;margin-right:8px;
}
.btn-loader.dark{border-color:rgba(1,0,77,.25);border-top-color:#01004D}
button.is-loading{opacity:.85;cursor:wait !important;pointer-events:none}
button.is-loading > *:not(.btn-loader){opacity:.7}

/* ============================================================
   SECTION SKELETON LOADER (for cards/lists)
   ============================================================ */
.sk{background:linear-gradient(90deg,#e9ebf3 25%,#f5f6fb 50%,#e9ebf3 75%);
  background-size:200% 100%;animation:skShimmer 1.4s ease infinite;border-radius:8px}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}