/* AFNAAN STORE — authentication stylesheet */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  width:100%;min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-x:none;
  background:#04020f;
  font-family:'Inter',sans-serif;
  color:#fff;
}

/* ── BACKGROUND — deep void with very subtle nebula ── */
#cvBg{position:fixed;inset:0;z-index:0;pointer-events:none}

.nb{position:fixed;border-radius:50%;pointer-events:none;z-index:1}
.nb1{
  width:90vw;height:90vw;max-width:640px;max-height:640px;
  top:-28%;left:-25%;
  background:radial-gradient(circle,rgba(109,40,217,0.09),rgba(76,29,149,0.04) 55%,transparent 75%);
  filter:blur(130px);
  animation:nbDrift1 18s ease-in-out infinite alternate;
}
.nb2{
  width:75vw;height:75vw;max-width:520px;max-height:520px;
  bottom:-20%;right:-20%;
  background:radial-gradient(circle,rgba(56,189,248,0.07),rgba(6,182,212,0.02) 55%,transparent 75%);
  filter:blur(140px);
  animation:nbDrift2 22s ease-in-out infinite alternate;
}
.nb3{
  width:55vw;height:55vw;max-width:380px;max-height:380px;
  top:42%;left:48%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,92,246,0.06),transparent 68%);
  filter:blur(80px);
  animation:nbPulse 7s ease-in-out infinite;
}
@keyframes nbDrift1{from{transform:translate(0,0)}to{transform:translate(4%,7%)}}
@keyframes nbDrift2{from{transform:translate(0,0)}to{transform:translate(-5%,-6%)}}
@keyframes nbPulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* ── FLOATING PARTICLES ── */
#particles{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.pt{
  position:absolute;bottom:-30px;
  font-size:var(--s);opacity:0;
  animation:ptRise var(--dur) var(--delay) ease-in infinite;
  filter:drop-shadow(0 0 5px var(--glow));
}
@keyframes ptRise{
  0%{opacity:0;transform:translateY(0) rotate(0deg) scale(.6)}
  8%{opacity:.55}
  88%{opacity:.3}
  100%{opacity:0;transform:translateY(-115vh) rotate(var(--rot)) scale(1.05)}
}

/* ── PAGE ── */
.page{
  position:relative;z-index:10;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:flex-start;justify-content:center;
  padding:16px;
  box-sizing:border-box;
  width:100%;
  padding-top:max(16px, env(safe-area-inset-top));
}

/* ── LIQUID GLASS CARD ── */
.glass-card{
  width:100%;max-width:400px;
  overflow-y:visible;scrollbar-width:none;
  position:relative;z-index:1;
  border-radius:28px;
  padding:20px 22px 16px;
  box-sizing:border-box;

  /* Frosted glass core */
  background:linear-gradient(
    155deg,
    rgba(255,255,255,0.08) 0%,
    rgba(10,5,28,0.82) 30%,
    rgba(8,3,22,0.88) 70%,
    rgba(255,255,255,0.04) 100%
  );

  /* Asymmetric light refraction — bright top/left, dim bottom/right */
  border-top:   1px solid rgba(255,255,255,0.35);
  border-left:  1px solid rgba(255,255,255,0.28);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.06);

  /* Backdrop filter: real frosted glass */
  backdrop-filter: blur(16px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.1);

  /* Shadows */
  box-shadow:
    0 32px 80px rgba(0,0,0,0.65),
    0 8px 32px rgba(124,58,237,0.18),
    0 2px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 1px 0 0 rgba(255,255,255,0.12);

  animation:cardIn .65s cubic-bezier(.16,1,.3,1) both;
}
.glass-card::-webkit-scrollbar{display:none}

@keyframes cardIn{
  0%{opacity:0;transform:translateY(28px) scale(.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Specular gloss layer — top highlight sweep */
.glass-card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:28px;
  pointer-events:none;
  background:
    linear-gradient(155deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 30%,
      transparent 60%
    );
  z-index:0;
}

/* Top shimmer sweep animation */
.glass-card::after{
  content:'';
  position:absolute;top:0;left:-30%;right:-30%;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.5) 30%,
    rgba(168,85,247,0.6) 50%,
    rgba(56,189,248,0.4) 68%,
    transparent 100%
  );
  border-radius:28px 28px 0 0;
  animation:shimmerLine 6s ease-in-out infinite;
  z-index:1;
}
@keyframes shimmerLine{
  0%,100%{opacity:.5;transform:translateX(-8%)}
  50%{opacity:1;transform:translateX(8%)}
}

/* All inner content above pseudo layers */
.glass-card > *{position:relative;z-index:2}

/* ── LOGO ── */
.logo-area{text-align:center;margin-bottom:12px}

.logo-gem{
  font-size:30px;display:block;margin-bottom:5px;
  animation:gemPulse 3.5s ease-in-out infinite;
}
@keyframes gemPulse{
  0%,100%{
    filter:drop-shadow(0 0 10px rgba(245,158,11,.65)) drop-shadow(0 0 24px rgba(245,158,11,.25));
    transform:scale(1) rotate(0deg);
  }
  50%{
    filter:drop-shadow(0 0 22px rgba(245,158,11,.9)) drop-shadow(0 0 48px rgba(245,158,11,.4));
    transform:scale(1.07) rotate(4deg);
  }
}

.logo-image{width:86px;height:86px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 12px;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 34px rgba(124,58,237,.65),0 12px 32px rgba(0,0,0,.45)}
.logo-name{
  font-family:'Orbitron',monospace;font-weight:900;font-size:20px;
  letter-spacing:4px;
  background:linear-gradient(120deg,
    #ffffff 0%,
    #e9d5ff 25%,
    #c084fc 50%,
    #67e8f9 78%,
    #ffffff 100%
  );
  background-size:240% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:logoSheen 7s linear infinite;
  text-shadow:none;
}
@keyframes logoSheen{0%{background-position:0% 50%}100%{background-position:240% 50%}}

.logo-sub{
  font-family:'Rajdhani',sans-serif;font-size:10.5px;letter-spacing:4px;
  color:rgba(210,220,240,0.55);text-transform:uppercase;margin-top:3px;
}

.logo-rule{
  width:60px;height:1.5px;margin:8px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.7),rgba(56,189,248,.5),transparent);
  animation:ruleGlow 3.5s ease-in-out infinite;
}
@keyframes ruleGlow{0%,100%{opacity:.45}50%{opacity:.95;box-shadow:0 0 10px rgba(168,85,247,.5)}}

/* ── TABS ── */
.tab-wrap{
  display:flex;position:relative;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;padding:4px;gap:4px;
  margin-bottom:10px;
}
.tab-pill{
  position:absolute;top:4px;left:4px;bottom:4px;
  width:calc(50% - 6px);border-radius:11px;
  background:linear-gradient(135deg,#4c1d95,#7c3aed 55%,#6d28d9);
  box-shadow:
    0 4px 18px rgba(124,58,237,.42),
    0 0 0 1px rgba(168,85,247,.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
  z-index:0;
}
.tab-pill.right{transform:translateX(calc(100% + 4px))}
.tab{
  position:relative;z-index:1;flex:1;
  padding:9px;text-align:center;border-radius:11px;
  cursor:pointer;font-size:12.5px;font-weight:700;
  font-family:'Rajdhani',sans-serif;letter-spacing:.6px;
  color:rgba(255,255,255,.35);transition:color .28s;
  text-transform:uppercase;
}
.tab.active{color:#fff;text-shadow:0 0 16px rgba(200,150,255,.55)}

/* ── MESSAGES ── */
.msg{
  border-radius:12px;padding:8px 14px;font-size:12.5px;
  margin-bottom:8px;display:none;line-height:1.4;
  align-items:center;gap:10px;
  animation:msgIn .35s cubic-bezier(.34,1.56,.64,1);
}
.msg.show{display:flex}
@keyframes msgIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.msg i{font-size:14px;flex-shrink:0}
.msg-err{
  background:rgba(239,68,68,0.10);
  border:1px solid rgba(239,68,68,0.25);
  color:#fca5a5;
}
.msg-ok{
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.25);
  color:#86efac;
}

@keyframes shakeX{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}
.shake{animation:shakeX .4s ease}

/* ── FORM FIELDS ── */
.fgroup{margin-bottom:9px}
.flabel{
  font-size:10.5px;font-weight:600;letter-spacing:.9px;
  text-transform:uppercase;color:rgba(195,205,225,0.7);
  margin-bottom:4px;display:block;transition:color .22s;
}
.fwrap{position:relative}
.finput{
  width:100%;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:13px;
  padding:11px 42px 11px 15px;
  color:#ffffff;font-size:14px;outline:none;
  transition:all .25s;font-family:'Inter',sans-serif;
  /* subtle inner shadow for depth */
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.25);
}
.finput:focus{
  border-color:rgba(168,85,247,0.8);
  background:rgba(124,58,237,0.10);
  box-shadow:
    0 0 0 3px rgba(124,58,237,0.20),
    inset 0 1px 3px rgba(0,0,0,0.2);
}
.fgroup:has(.finput:focus) .flabel{color:rgba(233,213,255,.95)}
.finput::placeholder{color:rgba(255,255,255,.25)}
.ficon{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:rgba(148,163,184,.35);font-size:13px;cursor:pointer;
  transition:color .2s,transform .2s;
}
.ficon:hover{color:rgba(168,85,247,.8);transform:translateY(-50%) scale(1.15)}
.finput:focus~.ficon{color:rgba(168,85,247,.65)}

/* ── PASSWORD STRENGTH ── */
.pw-strength{height:2.5px;border-radius:3px;background:rgba(255,255,255,.07);margin-top:5px;overflow:hidden;display:none}
.pw-strength.show{display:block}
.pw-strength-bar{height:100%;width:0%;border-radius:3px;transition:width .3s,background .3s}
.pw-strength-label{font-size:10px;margin-top:3px;letter-spacing:.5px;display:none;color:rgba(255,255,255,.5)}
.pw-strength-label.show{display:block}

/* ── COUNTRY SELECTOR ── */
.phone-row{display:flex;gap:8px}
.country-sel{
  flex-shrink:0;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:13px;padding:10px 10px;
  cursor:pointer;display:flex;align-items:center;gap:5px;min-width:88px;
  transition:all .22s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);
}
.country-sel:hover,.country-sel.open{
  border-color:rgba(168,85,247,.65);
  background:rgba(124,58,237,0.10);
}
.country-dd{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:999;
  background:rgba(8,4,20,0.96);
  border:1px solid rgba(255,255,255,0.12);
  border-top:1px solid rgba(255,255,255,0.22);
  border-radius:16px;width:265px;max-height:255px;overflow:hidden;
  box-shadow:0 20px 56px rgba(0,0,0,.88),0 0 0 1px rgba(124,58,237,.1);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.country-dd.open{display:block}
.country-search{padding:9px}
.country-search input{
  width:100%;background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;padding:8px 12px;color:#fff;font-size:13px;outline:none;
}
.country-list{overflow-y:auto;max-height:200px;padding:0 5px 7px}
.c-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .14s}
.c-item:hover{background:rgba(124,58,237,.16)}
.c-name{font-size:12.5px;color:#e2e8f0;flex:1}
.c-code{font-size:11.5px;color:rgba(103,232,249,.9);font-weight:700}

/* ── LOGIN BUTTON ── */
.btn-main{
  width:100%;
  background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 45%,#7c3aed 100%);
  color:#fff;border:none;border-radius:14px;
  padding:12px;font-size:13.5px;font-weight:800;
  cursor:pointer;transition:all .28s;
  font-family:'Orbitron',monospace;letter-spacing:2.5px;
  margin-top:7px;
  box-shadow:
    0 4px 24px rgba(109,40,217,.42),
    0 0 0 1px rgba(168,85,247,.20),
    inset 0 1px 0 rgba(255,255,255,0.18);
  position:relative;overflow:hidden;
}
/* Glass sheen overlay */
.btn-main::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.13) 50%,
    transparent 70%
  );
  background-size:260% 100%;background-position:210% 0;
  transition:background-position .55s ease;
}
.btn-main:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 36px rgba(109,40,217,.56),
    0 0 0 1px rgba(168,85,247,.32),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-main:hover::before{background-position:-50% 0}
.btn-main:active{transform:translateY(0) scale(.986)}
.btn-main:disabled{opacity:.48;cursor:not-allowed;transform:none}
.btn-main.success{
  background:linear-gradient(135deg,#14532d,#16a34a,#22c55e);
  box-shadow:0 4px 28px rgba(34,197,94,.42),inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Ripple */
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,0.28);
  transform:scale(0);animation:rippleFx .6s ease-out;pointer-events:none;
}
@keyframes rippleFx{to{transform:scale(2.8);opacity:0}}

/* ── DIVIDER OR ── */
.div-or{
  display:flex;align-items:center;gap:10px;margin:8px 0;
}
.div-or::before,.div-or::after{
  content:'';flex:1;height:1px;
  background:rgba(255,255,255,0.10);
}
.div-or span{font-size:11px;color:rgba(255,255,255,.32);font-weight:500;letter-spacing:.5px}

/* ── GOOGLE BUTTON ── */
.btn-google{
  width:100%;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-top:1px solid rgba(255,255,255,0.28);
  border-radius:14px;padding:12px;
  font-size:13px;font-weight:600;cursor:pointer;color:#f1f5f9;
  transition:all .28s;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Inter',sans-serif;position:relative;overflow:hidden;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn-google::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.07) 50%,
    transparent 70%
  );
  background-size:260% 100%;background-position:210% 0;
  transition:background-position .55s ease;
}
.btn-google:hover{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,.30);
  transform:translateY(-2px);
  box-shadow:
    0 8px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-google:hover::before{background-position:-50% 0}
.btn-google:active{transform:translateY(0)}
.btn-google:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── SPINNER ── */
.spin{
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,.2);border-top-color:#fff;
  border-radius:50%;animation:doSpin .65s linear infinite;
  display:inline-block;margin-right:6px;
  vertical-align:middle;
}
@keyframes doSpin{to{transform:rotate(360deg)}}

/* ── FOOTER ── */
.foot-note{
  text-align:center;margin-top:7px;
  font-size:10px;color:rgba(255,255,255,.28);
  line-height:1.5;letter-spacing:.2px;
}

#g_id_onload{display:none}


/* Show persistent selection without relying on the moving pill/glow. */
.tab.active{background:#34315f;box-shadow:inset 0 -3px 0 #b9adff;text-shadow:none}
.c-item.selected{background:#253b58;box-shadow:inset 0 0 0 1px #67e8f9}
.c-item.selected::after{content:'✓';color:#a5f3fc;font:800 13px/1 system-ui,sans-serif}
.tab:focus-visible,.c-item:focus-visible{outline:2px solid #fff;outline-offset:2px}