/* ===== Buyer Login (Warm Solar) ===== */

/* Tokens */
:root{
  --card-bg:
    radial-gradient(1100px 520px at 110% -10%, rgba(253,186,116,.18), transparent 60%),
    linear-gradient(180deg, #FFF7ED 0%, #FFE7D6 28%, #FED7AA 55%, #FDBA74 78%, #FB923C 100%);
  --ink:#28130A;
  --field:#fff;
  --field-border:#FCD19A;
  --focus:#F97316;
  --ring:rgba(249,115,22,.22);
  --radius:20px;
  --shadow:0 22px 50px rgba(2,6,12,.20), 0 10px 24px rgba(2,6,12,.12);
  --btn:#111;
  --btn-hover:#ff7a1a;
  --link:#EA580C;
}

/* Overlay */
.bl-overlay{ position:fixed; inset:0; display:none; place-items:center; background:transparent; z-index:9999; opacity:0; transition:opacity .26s ease; }
.bl-overlay.open{ display:grid; opacity:1; }
/* Warm tint (optional) */
.bl-overlay.tint-solar{
  background:
    radial-gradient(1000px 600px at 15% -20%, rgba(251,146,60,.16), transparent 60%),
    radial-gradient(1000px 700px at 110% 120%, rgba(239,68,68,.16), transparent 65%),
    rgba(67,20,7,.28);
}

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

/* Themed bg everywhere */
.bl-modal, .bl-head, .bl-content{ background:var(--card-bg) !important; }

/* Edge-only animated border (subtle) */
.bl-modal::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius); padding:2px;
  background: linear-gradient(90deg,#FFE08A,#FFB703,#FF6A00,#FFB703,#FFE08A);
  -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;
}
.bl-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,.9), transparent) top left / 200% var(--edge) no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) top right / var(--edge) 200% no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) bottom left / 200% var(--edge) no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) top left / var(--edge) 200% no-repeat;
  animation: blEdgeSweep 4.5s linear infinite;
}
@keyframes blEdgeSweep{
  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){ .bl-modal::after{ animation:none !important; } }

/* Close */
.bl-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--field-border);
  background:#fff3eb; color:#4a1a0a; cursor:pointer;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease; z-index:2;
}
.bl-close:hover{ transform:translateY(-1px); background:#ffe8d7; box-shadow:0 6px 16px rgba(2,6,12,.12); }

/* Header */
.bl-head{ position:sticky; top:0; z-index:1; padding:20px 22px 10px; border-bottom:1px solid #f8d7b3; text-align:center; }
.bl-title{ color:#0b0b0b; font:900 clamp(20px, 2.2vw, 28px)/1.2 ui-sans-serif,system-ui,Segoe UI,Roboto; letter-spacing:.4px; }

/* Content */
.bl-content{ padding:18px 22px 22px; }
.bl-left{ margin:0 auto; }

/* Centered form @ 50% width (desktop) */
#blForm{ width:50%; max-width:520px; min-width:360px; margin:0 auto; }
.bl-grid{ display:grid; grid-template-columns:1fr; gap:12px; }

/* Fields */
.label{ font:700 12px/1.4 ui-sans-serif,system-ui; color:#3b2b22; margin:10px 2px 6px; }
.field{ position:relative; display:flex; align-items:center; background:var(--field); border:1px solid var(--field-border); border-radius:12px; padding:10px 12px; }
.field input{ width:100%; background:transparent; border:0; outline:0; color:var(--ink); font:700 15px/1.2 ui-sans-serif,system-ui; }
.field input::placeholder{ color:#8a99ab; }
.field:has(input:focus){ border-color:var(--focus); box-shadow:0 0 0 3px var(--ring); }

/* Actions */
.bl-actions{ display:flex; justify-content:center; margin-top:14px; }
.btn{ appearance:none; border:1px solid #000; background:#fff; color:#0b1220; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:800; transition:transform .12s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary{ background:var(--btn); color:#fff; border:1px solid #000; }
.btn-primary:hover{ background:var(--btn-hover); box-shadow:0 6px 14px rgba(255,122,26,.35); transform: translateY(-1px); }

/* Messages */
.err{ color:#dc2626; font-weight:800; display:none; margin-top:10px; text-align:center; }
.ok{ color:#16a34a; font-weight:800; display:none; margin-top:10px; text-align:center; }

/* Responsive */
@media (max-width:1024px){ #blForm{ width:70%; } }
@media (max-width:700px){  #blForm{ width:100%; min-width:auto; } }

/* Scroll behavior */
@media (prefers-reduced-motion:reduce){ .bl-modal, .bl-overlay{ transition:none; } }

/* ===== Compact width for Buyer Login ===== */
/* overall card narrower */
.bl-modal{
  width: min(520px, 92vw) !important;   /* पहले 760px था */
}

/* inner form just fills nicely */
#blForm{
  width: 88% !important;                /* पहले 50% था */
  max-width: 440px !important;
  min-width: 0 !important;
  margin: 0 auto;
}

/* a little tighter padding so content compact लगे */
.bl-content{ padding:16px 18px 20px !important; }

/* button spacing */
.bl-actions{ margin-top: 12px !important; }

/* mobile: almost full width */
@media (max-width: 480px){
  .bl-modal{ width: min(96vw, 420px) !important; }
  #blForm{ width: 94% !important; max-width: none !important; }
}
/* ===================== BUYER LOGIN — AURORA THEME ===================== */
/* Card tokens (replace warm orange with deep blue + emerald glow) */
.bl-modal{
  /* aurora-like background */
  --card-bg:
    radial-gradient(900px 520px at 56% 58%, rgba(16,185,129,.22), rgba(16,185,129,0) 60%),
    radial-gradient(950px 600px at 75% 35%, rgba(34,211,238,.18), rgba(34,211,238,0) 66%),
    linear-gradient(180deg, #071A24 0%, #05151F 40%, #030D16 100%);

  /* dark-surface fields */
  --field:#0C1B23;
  --field-border:#123142;

  /* text & accents */
  --ink:#E6F6F1;
  --focus:#10b981;                 /* emerald */
  --ring:rgba(16,185,129,.28);
  --link:#22d3ee;                  /* cyan */
  --btn:#111111;                   /* black button */
  --btn-hover:#10b981;             /* hover: emerald */
}

/* make header/content always use themed background */
.bl-modal, .bl-head, .bl-content{ background:var(--card-bg) !important; }

/* inputs on dark */
.bl-field{ background:var(--field) !important; border-color:var(--field-border) !important; }
.bl-field input{ color:var(--ink) !important; }
.bl-field input::placeholder{ color:#8FB1B9 !important; }
.bl-field:has(input:focus){ border-color:var(--focus) !important; box-shadow:0 0 0 3px var(--ring) !important; }

/* title (keep solid black? if चाहो हेडिंग dark-ink में) */
.bl-title{ color:#F1FAF7 !important; text-shadow:0 1px 0 rgba(0,0,0,.25); }

/* login button: black -> emerald on hover */
.bl-actions .btn-primary{
  background:var(--btn) !important; color:#fff !important; border:1px solid #000 !important;
  transition:background .22s ease, transform .12s ease, box-shadow .22s ease;
}
.bl-actions .btn-primary:hover{
  background:var(--btn-hover) !important;
  box-shadow:0 8px 18px rgba(16,185,129,.35);
  transform:translateY(-1px);
}

/* edge-only animated border: teal/cyan */
.bl-modal::before{
  content:""; position:absolute; inset:0; border-radius:20px; 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;
}
.bl-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: blEdgeSweep 4.5s linear infinite;
}
@keyframes blEdgeSweep{
  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){ .bl-modal::after{ animation:none !important; } }

/* optional: tweak overlay tint for aurora vibe (add class 'tint-aurora' on #blOverlay) */
.bl-overlay.tint-aurora{
  background:
    radial-gradient(900px 600px at 12% -20%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 700px at 110% 120%, rgba(16,185,129,.18), transparent 65%),
    rgba(1,9,15,.55);
}

/* ================== BUYER LOGIN — Aurora 3D Rim ================== */
/* ensure these are stacking contexts for pseudo-elements */
.bl-modal, .bl-head, .bl-content{ position: relative; }

/* remove old edge sweep (if present) */
.bl-modal::after{ display:none !important; }

/* lifted card (multi-layer shadows + inner bevel) */
.bl-modal{
  border: 0;
  box-shadow:
    0 28px 60px rgba(2,10,16,.65),     /* deep drop */
    0 12px 28px rgba(2,10,16,.45),     /* soft drop */
    inset 0 1px 0 rgba(255,255,255,.05),/* subtle top inner highlight */
    inset 0 -1px 0 rgba(0,0,0,.35);    /* subtle bottom inner shade */
}

/* thin aurora-colored rim (same family as background) */
.bl-modal::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 20px;
  padding: 1.5px; /* rim thickness */
  background: linear-gradient(
    180deg,
    rgba(163,230,216,.65),
    rgba(45,212,191,.28) 35%,
    rgba(56,189,248,.22) 70%,
    rgba(2,6,23,0) 100%
  );
  /* show only the border edge */
  -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;
  /* faint inner crispness */
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events:none;
  z-index: 2;
}

/* glossy top highlight strip (specular) */
.bl-head::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:18px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
  z-index: 2;
}

/* gentle inner aurora glow so surface looks cushioned */
.bl-content::before{
  content:"";
  position:absolute; inset:16px;
  border-radius: 16px;
  background: radial-gradient(600px 280px at 60% 0%, rgba(34,211,238,.10), transparent 65%);
  pointer-events:none;
  z-index: 0;
}

/* ===== Buyer Login — typography + white text (scoped) ===== */

/* fonts */
.bl-modal, .bl-modal input, .bl-modal button, .bl-modal .label, .bl-title{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.bl-title{
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:.3px;
}

/* default text to white */
.bl-modal{ color:#f8fafc; }
.bl-modal .label,
.bl-modal .tiny,
.bl-modal .hint,
.bl-modal .bl-title{ color:#f8fafc; }

/* helper text slightly softer */
.bl-modal .tiny,
.bl-modal .hint{ color:#cbd5e1; }

/* inputs: dark glass bg + white text + soft placeholder */
.bl-modal .field{
  background: rgba(3,20,22,.55);
  border: 1px solid rgba(203,213,225,.25);
}
.bl-modal .field input{
  color:#ffffff;
  caret-color:#99f6e4;
}
.bl-modal .field input::placeholder{
  color:#d1d5db;
  opacity:1;
}
.bl-modal .field:has(input:focus){
  border-color:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.28);
}

/* buttons text already white; keep it crisp */
.bl-modal .btn-primary{ color:#fff; }

/* close + eye icons also white-ish */
.bl-close{
  background: rgba(255,255,255,.08);
  color:#eef2ff;
  border:1px solid rgba(148,163,184,.25);
}
.bl-close:hover{ background: rgba(255,255,255,.14); }

.bl-modal .pw-toggle{ color:#e2e8f0; }
.bl-modal .pw-toggle:hover{ background: rgba(255,255,255,.08); border-radius:8px; }

/* links inside buyer modal */
.bl-modal a{ color:#e2e8f0; text-decoration: underline; }
.bl-modal a:hover{ text-decoration: none; }

/* =======================
   BUYER MODAL — Neon Aurora Border (same as Seller)
   Paste at the end of buyer-login.css
   ======================= */

/* Token shades (same family as seller) */
.bl-modal, #buyerModal, .buyer-modal {
  --edge-1:#34d399;   /* mint */
  --edge-2:#22c55e;   /* emerald */
  --edge-3:#059669;   /* teal-emerald */
  --edge-glow:rgba(34,197,94,.55);
  --radius:20px;
  position: relative;
  isolation: isolate;

  /* a bit more 3D pop */
  box-shadow:
    0 22px 50px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.35);
  border-radius: var(--radius);
}

/* 1) Luminous ring (same technique as seller) */
.bl-modal::before,
#buyerModal::before,
.buyer-modal::before{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius);
  padding:2px; /* ring thickness */
  background: linear-gradient(140deg,
              var(--edge-1),
              var(--edge-2) 40%,
              var(--edge-3) 75%,
              var(--edge-2));
  /* show only the edge */
  -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;
}

/* 2) Soft outer glow so border “floats” */
.bl-modal::after,
#buyerModal::after,
.buyer-modal::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:calc(var(--radius) + 10px);
  background:
    radial-gradient(120% 70% at 50% 0%,
      var(--edge-glow), transparent 60%);
  filter: blur(16px);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}

/* (optional) tiny breathing pulse like seller */
@keyframes blGlowPulse{
  0%,100%{ filter: blur(16px); opacity:.85; }
  50%    { filter: blur(20px); opacity:1; }
}
.bl-modal::after,
#buyerModal::after,
.buyer-modal::after{
  animation: blGlowPulse 3.2s ease-in-out infinite;
}

/* Make close button sit above the glow/ring */
.bl-close, .sl-close, .rg-close { z-index:3; }

/* ===== FIX: Buyer modal neon ring + remove stray line ===== */

/* 1) Make sure ring can sit above content and isn't clipped */
.buyer-modal, #buyerModal, .bl-modal{
  position: relative;
  overflow: visible !important;     /* ring not clipped */
  border-radius: 20px;
  isolation: isolate;
}

/* Put the ring above header; glow just below the ring */
.buyer-modal::before,
#buyerModal::before,
.bl-modal::before{ z-index: 3 !important; }   /* ring */
.buyer-modal::after,
#buyerModal::after,
.bl-modal::after{  z-index: 2 !important; }   /* glow */
.bl-close, .rg-close, .sl-close{ z-index: 4 !important; }  /* X stays on top */

/* 2) Kill the old orange separator/border under the title */
.bl-head, #buyerModal .bl-head, .buyer-modal .bl-head,
.rg-head, .sl-head{
  border: none !important;
  box-shadow: none !important;
}
.bl-head::before,
.bl-head::after{
  content: none !important;
}

/* 3) In case any <hr> or divider slipped in */
#buyerModal hr, .buyer-modal hr, .bl-divider{ display:none !important; }