/* ============================================================
   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; min-height:100dvh; 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)}}

/* Mobile: the floating orb animation stays off — it's decorative motion
   with no purpose on a small screen a person is trying to type into.
   The backdrop itself is back to position:fixed (matching how it always
   worked): position:absolute here had its own downside — on a short
   viewport, the backdrop only covered the first screen's height instead
   of the whole page, so scrolling past the fold showed plain white
   instead of the photo. Fixed avoids that entirely. */
@media (max-width:768px){
  .auth-orbs span{animation:none}
}

/* 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:0;background:transparent;
  display:grid;place-items:center;color:#fff;font-size:24px;
  box-shadow:none;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:16px;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)}

/* "Mobile number, username or email" is a long placeholder, and 44px of icon
   padding plus a 16px font left it clipped mid-word on a phone — "or ema…",
   which reads like a bug rather than a hint. The placeholder shrinks on
   narrow screens; the VALUE the person types keeps its 16px, because
   anything under 16px makes iOS zoom the page on focus, and a form that
   jumps when you tap it is worse than a small hint.
   text-overflow:ellipsis so if it still cannot fit on a very narrow phone it
   ends with "…" instead of a chopped letter. */
.auth-input input::placeholder{ text-overflow:ellipsis }
@media (max-width:430px){
  .auth-input input{ padding-left:40px }
  .auth-input input::placeholder{ font-size:14px }
  .auth-input > i.lead{ left:13px }
}
@media (max-width:360px){
  .auth-input input::placeholder{ font-size:13px }
}
.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;gap:12px;
  box-shadow:0 14px 30px -12px rgba(79,70,229,.5)}
/* The price block gets the slack; "Change" is two short words and should not
   be pushing the figure into a second line. */
.reg-plan>div:first-child{min-width:0;flex:1 1 auto}
.reg-plan .chg{flex:0 0 auto;white-space:nowrap}
.reg-plan .pn{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* One line, always.
   "TSh 50,000/Month" was wrapping between the currency and the number on a
   phone, so the plan the person is about to pay for read as three broken
   fragments. It shrinks to fit instead of breaking — a price is one thing and
   has to be read as one thing. */
.reg-plan .pp{font-family:Poppins,sans-serif;font-weight:700;line-height:1.15;
  font-size:clamp(17px,5.2vw,24px);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.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}

/* Plan picker on the sign-up form */
.reg-plan .chg{background:none;border:0;color:#fff;font-weight:600;cursor:pointer;font-size:13px;opacity:.9;display:inline-flex;align-items:center;gap:5px}
.reg-plan .chg:hover{opacity:1}
.plan-picker{display:none;background:#fff;border:1px solid var(--au-line);border-radius:14px;padding:6px;margin:-8px 0 18px;box-shadow:0 20px 44px -20px rgba(15,23,42,.3);animation:btDrop .16s ease}
.plan-picker.open{display:block}
.plan-opt{width:100%;display:flex;align-items:center;gap:12px;padding:11px 13px;border:0;border-radius:10px;background:none;cursor:pointer;text-align:left;font-family:inherit;transition:.13s}
.plan-opt:hover{background:var(--au-soft)}
.plan-opt.sel{background:var(--au-soft)}
.po-ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;font-size:15px}
.po-txt{flex:1}
.po-txt b{display:block;font-size:14.5px;color:var(--au-ink)}
.po-txt small{color:var(--au-muted);font-size:12.5px}
.po-tick{color:var(--au-blue);opacity:0;font-size:13px}
.plan-opt.sel .po-tick{opacity:1}

/* Same as landing: the mark contains the app icon artwork itself, so the
   container must not paint its own gradient behind it. */
.auth-brand .mark:has(img){background:none!important;box-shadow:none!important}
.auth-brand .mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}