/* ============================================================
   The four log in screens - auth/layouts/auth_v2.blade.php and the pages that
   extend it, when CommonHelper::AUTH_V2 is on.

   Everything is scoped to .auth-v2, except the short block that stands the
   site header and footer down, which needs body.auth-v2-page. The old pages
   and their rules are untouched.

   The picture is an inset card and not half the window, so the screen reads
   as one page and not as two side by side. 35 / 65, because the form is the
   point of it.
   ============================================================ */
body.auth-v2-page .navbar-main,
body.auth-v2-page .footer-v2,
body.auth-v2-page .footer-main,
body.auth-v2-page .copyright-wrapper,
body.auth-v2-page .copyright_info_wrapper,
body.auth-v2-page .ourpremium-section{display:none !important}

/* toastr draws its notices at 80% opacity. These land on top of Back to home,
   so its words read through the message; solid here, and lifted off the page. */
body.auth-v2-page #toast-container > div{opacity:1;box-shadow:0 6px 18px rgba(16,24,40,.18)}

.auth-v2{
  --brand:#ffcc2a;
  --brand-dark:#e6b415;
  --ink:#1a1a1a;
  --ink-2:#3f4550;
  --muted:#6b7280;
  --faint:#9aa1ad;
  --line:#e6e8ec;
  --red:#b42318;
  --blue:#1c4f9c;
  --green:#12805c;
  --green-bg:#e6f6ef;

  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
.auth-v2 *{box-sizing:border-box}
/* the line drawings from auth/_partials/auth_icons_v2: they take the colour of
   whatever they sit in, so only the size is set at each place */
.auth-v2 svg{display:block;fill:none;stroke:currentColor}

.auth-v2 .a2{
  display:grid;
  grid-template-columns:35fr 65fr;
  gap:16px;
  /* the left margin matches the space right of Back to home: 16 here plus the
     40 the form side keeps, so the picture and the button are inset alike */
  min-height:100vh;
  padding:16px 16px 16px 56px;
  background:#fff;
}

/* ------------------------------------------------------------
   The picture card
   ------------------------------------------------------------ */
.auth-v2 .a2-side{position:relative;overflow:hidden;border-radius:26px;background:#111317}
.auth-v2 .a2-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
/* the gradient over it: light at the head, deep at the foot */
.auth-v2 .a2-shade{
  position:absolute;inset:0;
  background:linear-gradient(196deg,
    rgba(12,14,18,.06) 0%,
    rgba(12,14,18,.30) 48%,
    rgba(10,11,14,.80) 100%);
}
/* one lamp of brand light low on the left, so the foot is warm and not flat black */
.auth-v2 .a2-glow{
  position:absolute;left:-45%;bottom:-46%;width:160%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(255,204,42,.30) 0%, rgba(255,204,42,.10) 34%, rgba(255,204,42,0) 58%);
}
/* the mark sits on the picture, where the header's would be */
.auth-v2 .a2-logo{position:absolute;z-index:1;left:30px;top:28px;opacity:.94;transition:opacity .18s}
.auth-v2 .a2-logo:hover{opacity:1}
.auth-v2 .a2-logo img{width:140px}
.auth-v2 .a2-say{position:absolute;z-index:1;left:30px;right:30px;bottom:30px;max-width:400px;color:#fff}
.auth-v2 .a2-say h2{margin:0;font-size:24px;line-height:1.32;font-weight:700;color:#fff}
.auth-v2 .a2-say h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--brand);margin:14px 0}
.auth-v2 .a2-say p{margin:0;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.76)}

/* ------------------------------------------------------------
   The form side: the way back at the head, the form in the middle of
   whatever is left, the two documents at the foot
   ------------------------------------------------------------ */
.auth-v2 .a2-main{display:flex;flex-direction:column;gap:24px;padding:26px 40px 24px}
.auth-v2 .a2-top{display:flex;align-items:center;justify-content:flex-end}
.auth-v2 .a2-back{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:border-color .18s,color .18s,box-shadow .18s;
}
.auth-v2 .a2-back svg{width:15px;height:15px}
.auth-v2 .a2-back:hover{border-color:var(--ink);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12);text-decoration:none}

.auth-v2 .a2-form-in{width:100%;max-width:420px;margin:auto}
.auth-v2 .a2-hd{margin-bottom:26px}
.auth-v2 .a2-hd h1{margin:0;font-size:30px;line-height:1.25;font-weight:800;color:var(--ink)}
.auth-v2 .a2-hd h1::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--brand);margin:14px 0}
.auth-v2 .a2-hd p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted)}
/* the masked address on the code screen, long enough to need the break */
.auth-v2 .a2-hd p b{color:var(--ink);font-weight:600;word-break:break-all}

/* the mark above the title on the code, forgot and reset screens */
.auth-v2 .a2-badge{
  display:grid;place-items:center;width:52px;height:52px;margin:0 0 16px;
  border-radius:14px;background:#fff7dd;color:#8a6b00;
}
.auth-v2 .a2-badge svg{width:24px;height:24px}
.auth-v2 .a2-badge.is-ok{background:var(--green-bg);color:var(--green)}

/* Email / Phone Number. These two carry the old page's button ids, so its own
   script still swaps the forms; this is only how they look. */
.auth-v2 .auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:22px;background:#f4f5f7;border-radius:10px}
.auth-v2 .auth-tab{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.auth-v2 .auth-tab svg{width:15px;height:15px}
.auth-v2 .auth-tab:hover{color:var(--ink)}
.auth-v2 .auth-tab.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}

/* Spacing by margin and not by flex gap: the old script hides and shows these
   forms with jQuery, which writes display:block back onto them. */
.auth-v2 .auth-form > * + *{margin-top:16px}
.auth-v2 .auth-field > label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.auth-v2 .auth-input{position:relative;display:flex;align-items:center}
.auth-v2 .auth-input .auth-icon{position:absolute;left:14px;width:17px;height:17px;color:var(--faint);pointer-events:none}
.auth-v2 .auth-input input.form-control{
  width:100%;height:50px;padding:0 14px 0 40px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-family:inherit;font-size:14px;color:var(--ink);box-shadow:none;transition:border-color .12s,box-shadow .12s;
}
.auth-v2 .auth-input input.form-control::placeholder{color:var(--faint)}
.auth-v2 .auth-input input.form-control:focus{outline:none;border-color:var(--brand-dark);box-shadow:0 0 0 3px #ffe89a}
.auth-v2 .auth-input input#password{padding-right:46px}

/* The eye keeps its two classes, so custom.js still shows and hides the
   password. Its own picture is turned off and the drawing inside follows the
   class instead: closed eye means the password is hidden. */
.auth-v2 .auth-input .toggle-password{
  position:absolute;right:6px;top:50%;float:none;margin:0;transform:translateY(-50%);
  display:grid;place-items:center;cursor:pointer;
  width:34px;height:34px;padding:0;border-radius:7px;
  background-color:transparent;background-image:none !important;color:var(--faint);
}
.auth-v2 .auth-input .toggle-password:hover{background-color:#f4f5f7;color:var(--ink-2)}
.auth-v2 .auth-input .toggle-password svg{width:19px;height:19px}
.auth-v2 .auth-input .toggle-password .eye-open,
.auth-v2 .auth-input .toggle-password.open-eye .eye-shut{display:none}
.auth-v2 .auth-input .toggle-password.open-eye .eye-open{display:block}

/* jquery.validate marks the field as well as writing the message */
.auth-v2 .auth-input input.form-control.error{border-color:var(--red)}
.auth-v2 .auth-input input.form-control.error:focus{border-color:var(--red);box-shadow:0 0 0 3px #fdeceb}

/* jquery.validate writes into these, and so does the ajax error handler */
.auth-v2 .auth-field > label.error{display:block;margin:6px 0 0;font-size:12px;font-weight:500;color:var(--red)}
.auth-v2 .auth-field > label.error:empty{display:none}

.auth-v2 .auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.auth-v2 .auth-check{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink-2);cursor:pointer}
.auth-v2 .auth-check input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.auth-v2 .auth-link{color:var(--blue);font-size:13px;font-weight:600;text-decoration:none}
.auth-v2 .auth-link:hover{color:var(--blue);text-decoration:underline}
.auth-v2 .auth-note{margin:0;font-size:12.5px;color:var(--muted)}

.auth-v2 .a2-submit{display:block;width:100%;height:50px;border-radius:10px;font-size:14px;font-weight:600}
/* flat, the way the design has it: the site's blue-btn carries a 4px offset
   shadow and turns black on hover, which is too loud beside these fields */
.auth-v2 .a2-submit.blue-btn{
  background:var(--brand);border:1px solid var(--brand-dark);color:var(--ink) !important;
  box-shadow:none;line-height:1;
}
.auth-v2 .a2-submit.blue-btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--ink) !important;box-shadow:none}
.auth-v2 .a2-submit.blue-btn:focus{box-shadow:0 0 0 3px #ffe89a}
/* a link made to look like the submit button, on the reset done panel */
.auth-v2 a.a2-submit{display:flex;align-items:center;justify-content:center}
/* the quiet twin of it: Use another email */
.auth-v2 .a2-ghost{border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:none}
.auth-v2 .a2-ghost:hover{background:#f4f5f7;color:var(--ink)}
.auth-v2 .a2-alt{margin:24px 0 0;font-size:13px;color:var(--muted)}

/* the code: four boxes, one digit each. They write into the hidden #phone_otp. */
.auth-v2 .otp-boxes{display:flex;gap:12px}
.auth-v2 .otp-boxes input{
  width:58px;height:62px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-family:inherit;font-size:24px;font-weight:700;text-align:center;color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
.auth-v2 .otp-boxes input:focus{outline:none;border-color:var(--brand-dark);box-shadow:0 0 0 3px #ffe89a}
.auth-v2 .otp-boxes.is-bad input{border-color:var(--red)}
/* the form's own > * + * rule would lose to this one, so it sets the gap itself */
.auth-v2 .auth-resend{margin:16px 0 0;font-size:13px;color:var(--muted)}
.auth-v2 .auth-resend .auth-link{padding:0;border:0;background:none;cursor:pointer}

/* the way back to log in, under the form */
.auth-v2 .auth-back{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none}
.auth-v2 .auth-back:hover{color:var(--ink);text-decoration:none}
.auth-v2 .auth-back svg{width:15px;height:15px}

.auth-v2 .a2-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 20px;font-size:12.5px;color:var(--faint)}
.auth-v2 .a2-foot button{padding:0;border:0;background:none;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer}
.auth-v2 .a2-foot button:hover{color:var(--ink);text-decoration:underline}

/* ------------------------------------------------------------
   Narrow screens: the picture becomes a band above the form
   ------------------------------------------------------------ */
@media (max-width:991px){
  .auth-v2 .a2{grid-template-columns:1fr;min-height:0;padding:14px}
  .auth-v2 .a2-side{min-height:230px;border-radius:20px}
  .auth-v2 .a2-logo{left:22px;top:20px}
  .auth-v2 .a2-logo img{width:118px}
  .auth-v2 .a2-say{left:22px;right:22px;bottom:22px}
  .auth-v2 .a2-say h2{font-size:21px}
  .auth-v2 .a2-say h2::after{margin:12px 0}
  .auth-v2 .a2-say p{font-size:13px;line-height:1.7}
  .auth-v2 .a2-shade{background:linear-gradient(180deg,rgba(12,14,18,.20) 0%,rgba(10,11,14,.74) 100%)}
  .auth-v2 .a2-glow{left:-30%;bottom:-120%;width:170%}
  .auth-v2 .a2-main{gap:20px;padding:6px 10px 10px}
  .auth-v2 .a2-form-in{margin:14px auto}
}
@media (max-width:575px){
  .auth-v2 .a2-hd h1{font-size:24px}
  .auth-v2 .auth-row{gap:10px}
  .auth-v2 .otp-boxes{gap:10px}
  .auth-v2 .otp-boxes input{width:52px;height:56px;font-size:22px}
}