/**
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 */
/* =====================================================================
   Sign-in and registration screens.

   Five panels share this file and none of them looks like another. That is
   deliberate: staff, dealers, customers and support all end up with more
   than one of these open, and a screen that looks identical to the one
   next to it is a screen people sign into with the wrong password.

   Each variant sets its own three colours on the .auth element and the
   rest of the file reads them. Nothing here depends on the panel theme,
   so a centre that recolours its admin does not accidentally make its
   dealer login look like its staff login.
   ===================================================================== */

.auth{
  --a-deep:#0b1220;      /* the art panel */
  --a-mid:#0f766e;       /* its gradient partner */
  --a-glow:#f59e0b;      /* the accent shape and the focus ring */
  --a-btn:#0f766e;

  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--bg);
  font-size:15px;
}

/* ------------------------------------------------------ the variants */
/* Clinical, calm — the panel the centre lives in all day. */
.auth.v-staff  { --a-deep:#06231f; --a-mid:#0f766e; --a-glow:#f0b429; --a-btn:#0f766e }
/* Warmer and more commercial: the trade counter, not the clinic. */
.auth.v-dealer { --a-deep:#2a1608; --a-mid:#b45309; --a-glow:#fbbf24; --a-btn:#b45309 }
/* The front door — anyone with an account. Uses the site's own brand. */
.auth.v-public { --a-deep:#0b1220; --a-mid:var(--brand); --a-glow:var(--accent); --a-btn:var(--brand) }
/* The control room. Deliberately the coldest of the five. */
.auth.v-lic-admin { --a-deep:#0a0f2c; --a-mid:#3730a3; --a-glow:#22d3ee; --a-btn:#4338ca }
/* Where customers come to buy and manage — lighter, friendlier. */
.auth.v-lic-user  { --a-deep:#2a0f3d; --a-mid:#7c3aed; --a-glow:#f472b6; --a-btn:#7c3aed }

/* ----------------------------------------------------- the art panel */
.auth-art{
  position:relative;overflow:hidden;color:#fff;
  padding:3.2rem 3.4rem;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(155deg,var(--a-deep) 0%,var(--a-mid) 78%);
}
/* Two soft shapes rather than a photograph: nothing to load, nothing to
   go stale, and it cannot look wrong on a centre that has not uploaded
   anything yet. */
.auth-art::before,.auth-art::after{content:'';position:absolute;border-radius:50%}
.auth-art::before{
  width:min(46vw,520px);aspect-ratio:1;background:var(--a-glow);
  right:-14%;top:-18%;opacity:.16;filter:blur(2px);
}
.auth-art::after{
  width:min(34vw,380px);aspect-ratio:1;background:#fff;
  left:-14%;bottom:-16%;opacity:.06;
}
.auth-art > *{position:relative;z-index:1}

.auth-art .brand{border:0;padding:0;margin-bottom:2.2rem;color:#fff}
.auth-art .brand-mark{background:rgba(255,255,255,.16)}
.auth-badge{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  padding:.28rem .8rem;border-radius:999px;margin-bottom:1rem;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.auth-art h2{
  font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.22;margin:0 0 .7rem;
  letter-spacing:-.02em;max-width:19ch;
}
.auth-art > p{color:rgba(255,255,255,.82);font-size:1rem;margin:0;max-width:46ch;line-height:1.65}

.auth-points{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.85rem}
.auth-points li{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;color:rgba(255,255,255,.9)}
.auth-points .tick{
  width:22px;height:22px;border-radius:50%;flex:0 0 22px;
  background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:.7rem;
  color:var(--a-glow);
}
.auth-art-foot{
  margin-top:2.4rem;font-size:.78rem;color:rgba(255,255,255,.55);
  display:flex;gap:.9rem;flex-wrap:wrap;
}
.auth-art-foot a{color:rgba(255,255,255,.72)}
.auth-art-foot a:hover{color:#fff}

/* ---------------------------------------------------------- the form */
.auth-form{
  display:flex;align-items:center;justify-content:center;
  padding:2.6rem 1.6rem;background:var(--surface);
}
.auth-box{width:100%;max-width:400px}
.auth-mini{display:none;margin-bottom:1.6rem}
.auth-box h1{font-size:1.6rem;margin:0 0 .3rem;letter-spacing:-.02em}
.auth-box .lead{color:var(--muted);margin:0 0 1.6rem;font-size:.92rem}
.auth-box .field{margin-bottom:1rem}
.auth-box label{font-size:.84rem;font-weight:600;color:var(--text-2);display:block;margin-bottom:.35rem}
.auth-box input[type=text],.auth-box input[type=email],
.auth-box input[type=password],.auth-box input[type=tel],.auth-box select{
  width:100%;padding:.72rem .85rem;border:1px solid var(--line);border-radius:11px;
  font:inherit;font-size:.95rem;background:var(--surface);color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.auth-box input:focus,.auth-box select:focus{
  outline:0;border-color:var(--a-btn);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-btn) 22%,transparent);
}
.auth-box .btn-primary{
  background:var(--a-btn);border-color:var(--a-btn);
  padding:.78rem 1rem;font-size:.98rem;border-radius:11px;
  box-shadow:0 4px 14px color-mix(in srgb,var(--a-btn) 32%,transparent);
}
.auth-alt{
  margin-top:1.3rem;text-align:center;font-size:.88rem;color:var(--muted);
  padding-top:1.1rem;border-top:1px solid var(--line);
}
.auth-alt + .auth-alt{margin-top:.5rem;padding-top:0;border-top:0}
.auth-alt a{color:var(--a-btn);font-weight:600}
.auth-foot{margin-top:1.8rem;text-align:center;font-size:.76rem;color:var(--muted);line-height:1.7}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:2.8rem}
.pw-toggle{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;font-size:1rem;color:var(--muted);padding:.35rem;
  line-height:1;
}
.pw-toggle:hover{color:var(--a-btn)}

/* --------------------------------------------------------- responsive */
@media (max-width:900px){
  /* auto/1fr, not two equal rows: the art strip should be as tall as its
     own content and the form should get everything that is left. */
  .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  /* The art panel becomes a short header rather than disappearing: it is
     what tells you which door you are at, which is the whole point on a
     phone where you cannot see the two side by side. */
  .auth-art{
    padding:1.6rem 1.4rem;min-height:auto;
    display:flex;flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap;
  }
  .auth-art h2,.auth-art > p,.auth-points,.auth-art-foot{display:none}
  .auth-art .brand{margin:0}
  .auth-badge{margin:0 0 0 auto;align-self:center}
  .auth-form{padding:2rem 1.2rem;align-items:flex-start}
  .auth-box{max-width:440px}
}
@media (max-width:420px){
  .auth-art{padding:1.2rem 1rem}
  .auth-form{padding:1.6rem 1rem}
  .auth-box h1{font-size:1.35rem}
  .auth-badge{font-size:.66rem;padding:.22rem .6rem}
}

/* A browser without color-mix still needs a visible focus ring. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .auth-box input:focus,.auth-box select:focus{box-shadow:0 0 0 3px rgba(15,118,110,.2)}
  .auth-box .btn-primary{box-shadow:0 4px 14px rgba(15,118,110,.3)}
}

/* =====================================================================
   Registration.

   A dealership application asks a dozen questions; squeezing that into the
   narrow sign-in column would make it feel longer than it is. So these get
   a banner in the same colours — you can still see which door you are at —
   and a wide card underneath.
   ===================================================================== */
.reg{--a-deep:#0b1220;--a-mid:#0f766e;--a-glow:#f59e0b;--a-btn:#0f766e;
     min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column}
.reg.v-dealer   { --a-deep:#2a1608; --a-mid:#b45309; --a-glow:#fbbf24; --a-btn:#b45309 }
.reg.v-lic-user { --a-deep:#2a0f3d; --a-mid:#7c3aed; --a-glow:#f472b6; --a-btn:#7c3aed }

/* The band's bottom padding has to clear the card that is pulled up into it.
   It was 3.4rem against a -2.4rem pull, leaving 1rem between the step pills
   and the top of the form — which read as the header being stuck to the
   section under it, and on a page with no steps the card landed on the lead
   paragraph. The pull is what makes the card overlap deliberately, so the
   padding is sized as "the pull, plus room to breathe". */
.reg-band{
  --reg-pull:2.4rem;
  position:relative;overflow:hidden;color:#fff;
  padding:1.5rem 1.4rem calc(var(--reg-pull) + 3.2rem);
  background:linear-gradient(140deg,var(--a-deep) 0%,var(--a-mid) 82%);
}
.reg-band::before{
  content:'';position:absolute;width:min(50vw,540px);aspect-ratio:1;border-radius:50%;
  background:var(--a-glow);right:-12%;top:-52%;opacity:.15;
}
.reg-band-in{max-width:820px;margin:0 auto;position:relative;z-index:1}
.reg-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.reg-top .brand{border:0;padding:0;color:#fff}
.reg-top .brand-mark{background:rgba(255,255,255,.16)}
.reg-top .spacer{flex:1}
.reg-band h1{font-size:clamp(1.4rem,3.4vw,2rem);margin:0 0 .4rem;letter-spacing:-.02em}
.reg-band p{margin:0;color:rgba(255,255,255,.84);max-width:56ch;font-size:.98rem;line-height:1.6}

.reg-wrap{max-width:820px;margin:-2.4rem auto 2.5rem;padding:0 1.1rem;width:100%;flex:1}
/* The steps are the last thing in the band, so they carry the gap rather than
   the band's padding doing it twice over. */
.reg-band .reg-steps{margin-bottom:.2rem}
.reg-wrap .card{box-shadow:var(--shadow-lg)}
.reg-wrap .btn-primary{background:var(--a-btn);border-color:var(--a-btn)}
.reg-wrap input:focus,.reg-wrap textarea:focus,.reg-wrap select:focus{
  outline:0;border-color:var(--a-btn);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a-btn) 20%,transparent);
}
.reg-steps{
  display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;
  font-size:.82rem;color:rgba(255,255,255,.78);
}
.reg-steps span{
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,.12);border-radius:999px;padding:.24rem .7rem;
}
@media (max-width:600px){
  .reg-band{--reg-pull:2rem;padding:1.2rem 1rem calc(var(--reg-pull) + 2.6rem)}
  .reg-wrap{margin-top:-2rem;padding:0 .8rem}
  .reg-steps{display:none}
}

/* A long form reads better in named groups than as one wall of fields. */
.form-legend{
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-btn);margin:1.6rem 0 .8rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--line);
}
.form-legend:first-child{margin-top:0}