/* ============================================================
   Shopia — Auth pages (login / register)
   A centered card floating over a real photograph. English.
   ============================================================ */
:root{
  --au-indigo:#4f46e5; --au-blue:#2563eb; --au-sky:#0ea5e9;
  --au-ink:#0f172a; --au-body:#475569; --au-muted:#94a3b8;
  --au-line:#e2e8f0; --au-soft:#eef2ff;
  --au-grad:linear-gradient(135deg,#4f46e5,#2563eb 55%,#0ea5e9);
}
*{box-sizing:border-box}
body.auth-body{
  margin:0; min-height:100vh; font-family:Inter,system-ui,sans-serif;
  color:var(--au-ink);
  display:grid; place-items:center; padding:24px;
  position:relative; overflow-x:hidden;
}
/* Full-screen photo backdrop with a deep indigo wash so text pops */
.auth-bg{position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center}
.auth-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(30,27,75,.92), rgba(37,99,235,.82) 55%, rgba(14,165,233,.78));}
.auth-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.auth-orbs span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation:auFloat 14s ease-in-out infinite}
.auth-orbs .o1{width:340px;height:340px;background:#818cf8;top:-80px;left:-60px}
.auth-orbs .o2{width:300px;height:300px;background:#22d3ee;bottom:-70px;right:-40px;animation-delay:-5s}
.auth-orbs .o3{width:220px;height:220px;background:#c084fc;top:40%;right:20%;animation-delay:-9s}
@keyframes auFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-30px)}66%{transform:translate(-20px,20px)}}

/* The card */
.auth-card{
  width:100%; max-width:440px; background:#fff; border-radius:24px;
  padding:40px 38px; box-shadow:0 40px 90px -30px rgba(15,23,42,.6);
  animation:auRise .6s cubic-bezier(.16,.8,.3,1) both;
  position:relative; z-index:1;
}
.auth-card.wide{max-width:520px}
@keyframes auRise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

.auth-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px}
.auth-brand .mark{width:52px;height:52px;border-radius:15px;background:var(--au-grad);
  display:grid;place-items:center;color:#fff;font-size:24px;
  box-shadow:0 12px 28px -8px rgba(79,70,229,.6); animation:auPop .7s .1s both}
.auth-brand b{font-family:Poppins,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.5px}
@keyframes auPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.auth-h{font-family:Poppins,sans-serif;font-size:25px;font-weight:700;text-align:center;margin:18px 0 4px;color:var(--au-ink)}
.auth-sub{text-align:center;color:var(--au-body);font-size:15px;margin:0 0 26px}

.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:13px;font-weight:600;color:var(--au-ink);margin-bottom:7px}
.auth-input{position:relative}
.auth-input input, .auth-input select{
  width:100%;padding:14px 16px 14px 44px;border:1.6px solid var(--au-line);border-radius:13px;
  font-size:15px;font-family:inherit;color:var(--au-ink);transition:.18s;background:#fff}
.auth-input input:focus, .auth-input select:focus{outline:none;border-color:var(--au-blue);box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.auth-input > i.lead{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--au-muted);font-size:15px;pointer-events:none}
.auth-input .peek{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--au-muted);cursor:pointer;padding:8px}
.auth-input.no-ico input{padding-left:16px}

.auth-btn{width:100%;padding:15px;border:0;border-radius:13px;background:var(--au-grad);
  color:#fff;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;
  box-shadow:0 14px 30px -10px rgba(37,99,235,.6);transition:.2s;position:relative;overflow:hidden}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(37,99,235,.7)}
.auth-btn:active{transform:translateY(0)}
.auth-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:auShine 3.5s ease-in-out infinite}
@keyframes auShine{0%,60%{left:-60%}100%{left:130%}}

.auth-links{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:14px}
.auth-links a{color:var(--au-blue);font-weight:600;text-decoration:none}
.auth-links a:hover{text-decoration:underline}
.auth-back{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-size:14px;
  font-weight:500;margin-bottom:18px;opacity:.9;transition:.18s;position:relative;z-index:1}
.auth-back:hover{opacity:1;transform:translateX(-3px)}

.auth-demo{margin-top:22px;padding:15px 16px;background:var(--au-soft);border-radius:13px;font-size:12.5px;color:#4338ca;line-height:1.7}
.auth-demo b{display:block;margin-bottom:4px;font-size:13px}
.auth-demo code{background:rgba(79,70,229,.1);padding:1px 6px;border-radius:5px;font-size:12px}

.auth-err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:12px;
  padding:12px 15px;font-size:14px;margin-bottom:18px;display:flex;align-items:center;gap:10px}

/* trust badges under card */
.auth-trust{display:flex;gap:18px;justify-content:center;margin-top:22px;color:rgba(255,255,255,.9);
  font-size:12.5px;position:relative;z-index:1;flex-wrap:wrap}
.auth-trust span{display:inline-flex;align-items:center;gap:6px}

/* language pills top-right */
.auth-lang{position:fixed;top:20px;right:22px;display:flex;gap:6px;z-index:3}
.auth-lang a{padding:6px 12px;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;
  text-decoration:none;font-size:12px;font-weight:700;backdrop-filter:blur(6px);transition:.16s}
.auth-lang a.on,.auth-lang a:hover{background:#fff;color:var(--au-indigo)}

@media(max-width:520px){
  .auth-card{padding:32px 24px;border-radius:20px}
  .auth-lang{top:14px;right:14px}
  body.auth-body{padding:16px}
}

/* ---- register extras: plan summary + business-type picker ---- */
.reg-plan{background:var(--au-grad);color:#fff;border-radius:16px;padding:18px 20px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 30px -12px rgba(79,70,229,.5)}
.reg-plan .pn{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.85}
.reg-plan .pp{font-family:Poppins,sans-serif;font-size:24px;font-weight:700;line-height:1.1}
.reg-plan .cyc{font-size:12px;opacity:.85}
.reg-plan .chg{color:#fff;font-size:12.5px;text-decoration:underline;opacity:.9}
.btype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.btype-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 8px;border:1.6px solid var(--au-line);border-radius:13px;cursor:pointer;transition:.16s;background:#fff;text-align:center}
.btype-card input{position:absolute;opacity:0;pointer-events:none}
.btype-card i{font-size:20px;color:var(--au-muted);transition:.16s}
.btype-card span{font-size:12px;color:var(--au-body);font-weight:500}
.btype-card:hover{border-color:var(--au-blue)}
.btype-card.sel{border-color:var(--au-blue);background:var(--au-soft)}
.btype-card.sel i{color:var(--au-blue)}
.pay-wait{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:90}
.pay-wait.show{display:flex}
.pw-card{background:#fff;border-radius:22px;padding:38px 34px;max-width:400px;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.pw-phone{width:74px;height:74px;border-radius:50%;background:#e0f2fe;color:#0ea5e9;display:grid;place-items:center;font-size:32px;margin:0 auto 18px;animation:auPulse 1.6s infinite}
@keyframes auPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pw-card h3{font-size:21px;margin:0 0 10px}
.pw-card p{color:var(--au-body);font-size:15px;margin:0}
.pw-amt{font-family:Poppins,sans-serif;font-size:26px;font-weight:700;color:var(--au-blue);margin:14px 0}
.spinner{width:30px;height:30px;border:3px solid #e0e7ff;border-top-color:var(--au-blue);border-radius:50%;animation:auSpin 1s linear infinite;margin:18px auto 0}
@keyframes auSpin{to{transform:rotate(360deg)}}

/* Demo account rows — tappable, each fills the form */
.auth-demo b{margin-bottom:10px}
.demo-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:#fff;
  margin-bottom:7px;cursor:pointer;transition:.15s;border:1px solid transparent}
.demo-row:hover{border-color:var(--au-blue);transform:translateX(2px)}
.demo-ico{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.demo-role{font-weight:700;font-size:12.5px;color:var(--au-ink);flex:0 0 62px}
.demo-mail{flex:1;background:transparent!important;padding:0!important;font-size:11.5px;color:var(--au-body)}
.demo-go{color:var(--au-muted);font-size:12px}
.demo-row:hover .demo-go{color:var(--au-blue)}
.demo-pw{margin-top:8px;font-size:12px;color:#4338ca;text-align:center}

/* Business-type dropdown (icons, keeps the form short) */
.btype-dd{position:relative}
.btype-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border:1.6px solid var(--au-line);border-radius:13px;background:#fff;cursor:pointer;font-size:15px;font-family:inherit;color:var(--au-ink);transition:.16s}
.btype-trigger:hover{border-color:var(--au-blue)}
.btype-dd.open .btype-trigger{border-color:var(--au-blue);box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.btype-cur{display:flex;align-items:center;gap:11px}
.btype-cur > i{color:var(--au-blue);width:18px;text-align:center}
.btype-caret{color:var(--au-muted);font-size:12px;transition:.2s}
.btype-dd.open .btype-caret{transform:rotate(180deg)}
.btype-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--au-line);
  border-radius:14px;box-shadow:0 24px 50px -18px rgba(15,23,42,.35);padding:6px;z-index:20;
  max-height:290px;overflow-y:auto;display:none;animation:btDrop .16s ease}
.btype-dd.open .btype-menu{display:block}
@keyframes btDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.btype-opt{width:100%;display:flex;align-items:center;gap:12px;padding:11px 13px;border:0;border-radius:10px;
  background:none;cursor:pointer;font-size:14.5px;font-family:inherit;color:var(--au-ink);text-align:left;transition:.13s}
.btype-opt:hover{background:var(--au-soft)}
.btype-opt > i:first-child{color:var(--au-blue);width:18px;text-align:center}
.btype-opt span{flex:1}
.btype-tick{color:var(--au-blue);font-size:12px;opacity:0}
.btype-opt.sel{background:var(--au-soft);font-weight:600}
.btype-opt.sel .btype-tick{opacity:1}