/* =========================================
   BLOXIO AUTH — FINAL STABLE CSS
========================================= */

/* RESET */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:#05080d;
  color:#e6f1ff;
}

/* ================= AUTH LAYER ================= */

.bx-auth-pro{
  position:fixed;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:20000; /* 🔥 أهم إصلاح */

  background:
    radial-gradient(circle at 20% 10%, rgba(34,197,94,.12), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(34,197,94,.08), transparent 40%),
    linear-gradient(180deg,#05080d,#0b0f14 40%,#05080d);
}

/* CENTER */
.bx-auth-center{
  width:100%;
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;
}

/* ================= CARD ================= */

.bx-auth-box{
  width:100%;
  max-width:380px;

  padding:26px;
  border-radius:18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(15,26,31,.95);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 30px 80px rgba(0,0,0,.7);

  display:flex;
  flex-direction:column;
  gap:14px;
}

/* TITLE */
.bx-auth-box h2{
  font-size:22px;
  font-weight:900;
  margin:0 0 6px;
}

/* ================= INPUT ================= */

.bx-auth-box input{
  width:100%;
  height:52px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);

  background:#0d1725;
  color:white;

  padding:0 14px;
  font-size:14px;

  transition:.25s;
}

.bx-auth-box input:focus{
  outline:none;
  border-color:#22c55e;

  box-shadow:
    0 0 0 2px rgba(34,197,94,.15),
    0 0 20px rgba(34,197,94,.2);
}

/* ================= REFERRAL ================= */

#regRef{
  border:1px dashed rgba(34,197,94,.4);
  background:#0c1522;
}

/* ================= BUTTON ================= */

.bx-btn-main{
  width:100%;
  height:52px;

  border:none;
  border-radius:14px;

  font-weight:900;
  font-size:15px;

  background:linear-gradient(180deg,#4ade80,#22c55e);
  color:#08130b;

  cursor:pointer;
  transition:.25s;

  box-shadow:0 10px 25px rgba(34,197,94,.3);
}

.bx-btn-main:hover{
  transform:translateY(-1px);
}

.bx-btn-main:active{
  transform:scale(.97);
}

/* ================= SWITCH ================= */

.bx-auth-switch{
  text-align:center;
  font-size:13px;
  color:#8ea0b5;
}

.bx-auth-switch button{
  background:none;
  border:none;
  color:#22c55e;
  font-weight:700;
  cursor:pointer;
}

/* ================= HIDDEN ================= */

.hidden{
  display:none !important;
}

/* ================= LOADER FIX ================= */

.bx-loader{
  z-index:10000;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  .bx-auth-box{
    padding:22px;
  }

                              }