/* ================= Register Modal — Aurora Glass (FINAL) =================== */
/* Replace your assets/css/register-modal.css with this file                  */
/* ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  --ink:#EAFBF2;
  --muted:#B6D5CE;

  --field:#0E1E1A;
  --field-border:#134E4A;

  --focus:#22C55E;
  --ring:rgba(34,197,94,.25);

  --radius:22px;
  --shadow:0 30px 60px rgba(0,0,0,.40), 0 10px 30px rgba(0,0,0,.25);

  /* aurora background (card) */
  --rg-aurora-bg:
    radial-gradient(1200px 700px at 20% -15%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(1200px 900px at 120% 140%, rgba(14,165,233,.14), transparent 65%),
    linear-gradient(180deg, #061A17 0%, #08231E 40%, #0B2C25 70%, #05141B 100%);

  /* buyer-style button colors */
  --btn-idle:#0b0b0b;  /* black */
  --btn-emerald-1:#1FE4A8;
  --btn-emerald-2:#16C98D;
  --btn-emerald-3:#0EA774;
}

/* ---------- Overlay ---------- */
.rg-overlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:transparent; z-index:9999; opacity:0; transition:opacity .26s ease;
}
.rg-overlay.open{ display:grid; opacity:1; }

/* Optional aurora tint on overlay */
.rg-overlay.tint-aurora{
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(45,212,191,.18), transparent 60%),
    radial-gradient(1100px 800px at 120% 140%, rgba(14,165,233,.16), transparent 65%),
    rgba(2,6,23,.55);
  backdrop-filter: blur(1.5px);
}

/* ---------- Card ---------- */
.rg-modal{
  position:relative; isolation:isolate;
  width:min(760px, 92vw);
  max-height:calc(100vh - 64px);
  border-radius:var(--radius);
  overflow:auto;
  transform:translateY(10px); opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s;
  box-shadow:var(--shadow);
  background:var(--rg-aurora-bg) !important;
  color:var(--ink);
}
.rg-overlay.open .rg-modal{ transform:none; opacity:1; }

/* Edge-only animated border (teal/cyan) */
.rg-modal::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius); padding:2px;
  background:linear-gradient(90deg,#99F6E4,#34D399,#22D3EE,#34D399,#99F6E4);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none; z-index:1;
}
.rg-modal::after{
  --edge:3px;
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent) top left/200% var(--edge) no-repeat,
    linear-gradient(180deg,transparent,rgba(255,255,255,.85),transparent) top right/var(--edge) 200% no-repeat,
    linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent) bottom left/200% var(--edge) no-repeat,
    linear-gradient(180deg,transparent,rgba(255,255,255,.85),transparent) top left/var(--edge) 200% no-repeat;
  animation: rgEdgeSweep 4.5s linear infinite;
}
@keyframes rgEdgeSweep{
  0%  { background-position:0% 0%,100% 0%,0% 100%,0% 0%; }
  25% { background-position:100% 0%,100% 100%,0% 100%,0% 0%; }
  50% { background-position:100% 0%,100% 100%,100% 100%,0% 0%; }
  75% { background-position:0% 0%,100% 100%,100% 100%,0% 100%; }
  100%{ background-position:0% 0%,100% 0%,0% 100%,0% 0%; }
}
@media (prefers-reduced-motion:reduce){
  .rg-modal::after{ animation:none !important; }
}

/* ---------- Close (X) ---------- */
.rg-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.08); color:#EAF0FF;
  border:1px solid rgba(148,163,184,.25);
  cursor:pointer; transition:transform .12s, background .2s, box-shadow .2s;
  z-index:3;
}
.rg-close:hover{ transform:translateY(-1px); background:rgba(255,255,255,.14); }
.rg-close svg{ pointer-events:none; }

/* ---------- Header ---------- */
.rg-head{
  position:sticky; top:0; z-index:1;
  padding:20px 22px 10px;
  border-bottom:1px solid rgba(148,163,184,.18);
  text-align:center; background:var(--rg-aurora-bg)!important;
}
.rg-title{
  font:800 clamp(22px,2.4vw,30px)/1.2 "Sora", ui-sans-serif;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  background:none !important; text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* ---------- Content ---------- */
.rg-content{ padding:18px 22px 26px; background:var(--rg-aurora-bg)!important; }
.rg-left{ max-width:620px; margin:0 auto; }

/* ---------- OAuth ---------- */
.oauth-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.btn{
  appearance:none; border:1px solid rgba(255,255,255,.14);
  background:rgba(3,17,16,.55); color:#E7FFFB;
  padding:12px 16px; border-radius:14px; cursor:pointer; font:700 14px/1 "Inter", ui-sans-serif;
  transition:transform .12s, box-shadow .18s, background .18s, border-color .18s;
}
.btn-oauth{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff !important; color:#0A1B17 !important; border-color:rgba(255,255,255,.18);
}
.btn-oauth:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.28); }

/* ---------- Grid + Labels ---------- */
.rg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#rgOverlay .label{
  font:700 13px/1.25 "Inter", ui-sans-serif;
  color:#ffffff !important; margin:10px 2px 6px;
}
#rgOverlay .tiny{ color:#CBE7E0; font:600 12px/1.4 "Inter", ui-sans-serif; }

/* ---------- Fields ---------- */
.field{
  position:relative; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(10,40,36,.65), rgba(7,28,25,.65));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:10px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.28);
}
.field input{
  width:100%; background:transparent; border:0; outline:0;
  color:#FFFFFF; caret-color:#99F6E4; font:700 15px/1.2 "Inter", ui-sans-serif;
}
.field input::placeholder{ color:#A7CFC9; }
.field:has(input:focus){
  border-color:#22D3EE;
  box-shadow:0 0 0 3px rgba(34,211,238,.25), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Phone + Email row */
.tel-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------- intl-tel-input tweaks ---------- */
.iti{ width:100%; }
.iti--separate-dial-code .iti__selected-flag{ width:28px; padding:0 6px; background:rgba(255,255,255,.06); border-radius:8px; }
.iti--separate-dial-code .iti__flag-container{ width:56px; }
.iti__selected-dial-code{ margin-left:4px; font-weight:700; color:#EAFBF2; }
.iti__country-list{ background:#0D201C; color:#EAFBF2; border:1px solid rgba(255,255,255,.12); }
.iti--container{ z-index:10050 !important; }
.rg-modal.dropdown-open{ overflow:hidden !important; }

/* ---------- Password toggle ---------- */
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; color:#BFE9E2;
  border-radius:8px; cursor:pointer;
}
.pw-toggle:hover{ background:rgba(255,255,255,.06); }
.pw-toggle .icon-eye{ display:none; }
.pw-toggle .icon-eye-off{ display:block; }
.pw-toggle.is-visible .icon-eye{ display:block; }
.pw-toggle.is-visible .icon-eye-off{ display:none; }

/* ---------- Actions row ---------- */
.rg-actions{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-top:16px;
}
.rg-actions .right{
  margin-left:0; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:10px;
}
.rg-sub-bottom{
  grid-column:1 / -1; text-align:right; margin-top:6px;
  display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:12px; color:#EAFBF2;
}

/* ---------- Buttons (buyer-style, smooth hover) ---------- */
/* We use a gradient layer that fades in, for a buttery-smooth transition */
#rgOverlay .btn-cta{
  position:relative; isolation:isolate; overflow:hidden;
  appearance:none; -webkit-appearance:none;
  background:var(--btn-idle);                 /* idle black */
  color:#ffffff; border:1px solid #000;
  padding:12px 22px; border-radius:14px; font:800 15px/1 "Inter", ui-sans-serif;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.06), 0 8px 18px rgba(2,6,12,.35);
  transition:transform .12s ease, box-shadow .22s ease;
  z-index:0;
}
#rgOverlay .btn-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(180deg,var(--btn-emerald-1) 0%,var(--btn-emerald-2) 50%,var(--btn-emerald-3) 100%);
  opacity:0; transition:opacity .25s ease;            /* <-- smooth fade */
}
#rgOverlay .btn-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,185,129,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
#rgOverlay .btn-cta:hover::before{ opacity:1; }

/* small Seller Login pill variant */
#rgOverlay .btn-cta.sm{
  padding:8px 12px; font-size:14px; border-radius:999px;
}

/* Keep OAuth buttons white even on hover */
#rgOverlay .oauth-wrap .btn-oauth{
  background:#ffffff !important; color:#0A1B17 !important; border-color:rgba(255,255,255,.18) !important;
}
#rgOverlay .oauth-wrap .btn-oauth:hover{
  background:#ffffff !important; color:#0A1B17 !important; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* ---------- Messages ---------- */
.err{ color:#FECACA; font-weight:800; display:none; margin-top:8px; }
.ok { color:#BBF7D0; font-weight:800; display:none; margin-top:8px; }

/* ---------- Responsive ---------- */
@media (max-width:700px){
  .rg-grid, .tel-wrap, .oauth-wrap{ grid-template-columns:1fr; }
  .rg-modal{ width:min(560px,94vw); }
  .rg-actions{ grid-template-columns:1fr; }
  .rg-actions .right{ align-items:flex-start; }
  .rg-sub-bottom{ justify-content:flex-start; }
}

/* ---------- Typography scope ---------- */
.rg-modal,
.rg-modal input,
.rg-modal button,
.rg-modal .label,
.rg-modal .tiny,
.rg-title{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.rg-title{ font-family:"Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* ==== FIX: edge ring poore box par dikhe (header sides bhi) ==== */

/* ring ko content se upar paint karo */
#rgOverlay .rg-modal::before,
#rgOverlay .rg-modal::after{
  z-index: 10 !important;      /* higher than header/content */
  pointer-events: none !important;
}

/* header ko lower z-index pe rakho */
#rgOverlay .rg-head{
  position: relative;
  z-index: 1 !important;
}

/* ring ki glow crop na ho isliye overflow visible */
#rgOverlay .rg-modal{
  overflow: visible !important;
}