/* ============================================================================
   HSMart — Auth pages (login / forgot / reset) — split-screen shell
   Loads AFTER hsmart-brand.css so it can consume brand tokens (--hs-*).
   Gated behind config('hsmart.ux_revamp'); turning the flag off drops this
   file and the pages fall back to the original Tabler card layout.
   ========================================================================== */

/* ---- Page shell ---------------------------------------------------------- */
body.hs-auth-body{ margin:0; overflow-x:hidden; background:var(--hs-surface,#fff); }

.hs-auth{
  display:flex;
  height:100vh;
  height:100dvh;
  overflow:hidden;          /* desktop: viewport-locked split, no page scroll */
  font-family:var(--hs-font-body,'Archivo',system-ui,sans-serif);
  color:var(--hs-text,#16233a);
  background:var(--hs-surface,#fff);
}
.hs-auth *{ box-sizing:border-box; }

/* =========================================================================
   HERO (left brand panel)
   ========================================================================= */
.hs-auth__hero{
  position:relative;
  flex:0 0 46%;
  max-width:46%;
  overflow:hidden;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:52px 50px 42px;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(0,174,239,.30) 0%, rgba(0,174,239,0) 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(255,199,9,.18) 0%, rgba(255,199,9,0) 55%),
    linear-gradient(150deg, #073e86 0%, #084CA1 42%, #042c61 100%);
}
.hs-auth__hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.6; pointer-events:none; z-index:1; }
/* keep the canvas as the absolute background layer; only lift the real content */
.hs-auth__hero > :not(.hs-auth__hero-canvas){ position:relative; z-index:2; }

.hs-auth__lock{ display:flex; align-items:center; gap:13px; color:#fff; text-decoration:none; }
.hs-auth__mark{ width:42px; height:42px; flex:none; }
.hs-auth__wordmark{ font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:700; font-size:19px; line-height:1.05; letter-spacing:-.01em; color:#fff; }
.hs-auth__wordmark small{ display:block; font-family:var(--hs-font-body,'Archivo',sans-serif); font-weight:400; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:5px; }

.hs-auth__mid{ max-width:30rem; }
.hs-auth__kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  padding:7px 14px; border-radius:999px; margin-bottom:26px;
}
.hs-auth__kicker .pip{ width:7px; height:7px; border-radius:50%; background:var(--hs-sky,#00AEEF); box-shadow:0 0 0 4px rgba(0,174,239,.22); }
.hs-auth[data-panel="seller"] .hs-auth__kicker .pip{ background:var(--hs-yellow,#FFC709); box-shadow:0 0 0 4px rgba(255,199,9,.22); }

.hs-auth__title{
  font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:700;
  font-size:40px; line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;
}
.hs-auth__lede{ font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.82); margin:0; max-width:46ch; }

.hs-auth__list{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.hs-auth__list li{ display:flex; align-items:flex-start; gap:14px; }
.hs-auth__ic{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); color:var(--hs-yellow,#FFC709); }
.hs-auth__ic svg{ width:21px; height:21px; }
.hs-auth__list li:nth-child(2) .hs-auth__ic{ color:var(--hs-sky,#00AEEF); }
.hs-auth__list li:nth-child(3) .hs-auth__ic{ color:#ffd34d; }
.hs-auth__list b{ display:block; font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600; font-size:15.5px; color:#fff; line-height:1.3; margin-bottom:2px; }
.hs-auth__list span{ font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.70); }

.hs-auth__hfoot{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12.5px; color:rgba(255,255,255,.62); }
.hs-auth__tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:500; }
.hs-auth__tag svg{ width:16px; height:16px; color:var(--hs-yellow,#FFC709); flex:none; }

/* =========================================================================
   FORM PANEL (right)
   ========================================================================= */
.hs-auth__main{
  flex:1 1 54%;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  padding:40px 52px;
  background:var(--hs-surface,#fff);
  overflow-y:auto;          /* only the form scrolls if it ever exceeds the viewport */
}
/* margin:auto centres the card vertically when there's room, yet lets it scroll
   from the top (instead of clipping) when the form is taller than the viewport */
.hs-auth__card{ width:100%; max-width:400px; margin:auto; text-align:left; }
.hs-auth__card h1, .hs-auth__card p, .hs-auth__h, .hs-auth__p{ text-align:left; }

.hs-auth__brand{ margin-bottom:28px; }
.hs-auth__brand img{ height:60px; width:auto; max-width:100%; display:block; }

.hs-auth__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--hs-navy,#084CA1);
  background:var(--hs-navy-050,#eaf1fa); border:1px solid var(--hs-navy-100,#d6e3f3);
  padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.hs-auth__badge .pip{ width:7px; height:7px; border-radius:50%; background:var(--hs-sky,#00AEEF); }
.hs-auth[data-panel="seller"] .hs-auth__badge .pip{ background:var(--hs-yellow,#FFC709); }

.hs-auth__h{ font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:700; font-size:27px; line-height:1.15; letter-spacing:-.02em; color:var(--hs-navy-900,#042c61); margin:0 0 8px; text-wrap:balance; }
.hs-auth__p{ color:var(--hs-text-muted,#5b6677); font-size:14.5px; line-height:1.5; margin:0 0 26px; }

/* ---- Fields ---- */
.hs-field{ margin-bottom:16px; }
.hs-field__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.hs-label{ font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600; font-size:13px; color:var(--hs-text,#16233a); margin:0; }
.hs-label .req{ color:var(--hs-orange,#F7941D); margin-left:2px; }
.hs-forgot{ font-size:12.5px; font-weight:500; color:var(--hs-sky,#00AEEF); text-decoration:none; white-space:nowrap; }
.hs-forgot:hover{ text-decoration:underline; }

.hs-control{ position:relative; }
.hs-control__lead{ position:absolute; left:14px; top:24px; transform:translateY(-50%); width:18px; height:18px; color:var(--hs-text-faint,#8a94a6); pointer-events:none; transition:color .18s var(--hs-ease,ease); z-index:2; }
.hs-control__lead svg{ width:18px; height:18px; display:block; }

/* Input skin (scoped override of the global .form-control) */
.hs-auth .hs-control .form-control,
.hs-auth input.hs-input{
  height:48px;
  width:100%;
  font-family:var(--hs-font-body,'Archivo',sans-serif); font-size:14.5px; color:var(--hs-text,#16233a);
  background:var(--hs-surface,#fff);
  border:1.5px solid var(--hs-border,#e6ebf2); border-radius:10px;
  padding:0 14px 0 44px;
  transition:border-color .18s var(--hs-ease,ease), box-shadow .18s var(--hs-ease,ease);
}
.hs-auth .hs-control .form-control::placeholder{ color:#aab2c0; }
.hs-auth .hs-control .form-control:hover{ border-color:var(--hs-border-strong,#d6dde7); }
.hs-auth .hs-control .form-control:focus{ border-color:var(--hs-navy,#084CA1); box-shadow:0 0 0 4px rgba(var(--hs-navy-rgb,8,76,161),.14); outline:none; }
.hs-auth .hs-control:focus-within .hs-control__lead{ color:var(--hs-navy,#084CA1); }
.hs-auth .hs-control .form-control[readonly]{ background:var(--hs-surface-2,#f6f8fb); color:var(--hs-text-muted,#5b6677); }
.hs-control.has-toggle .form-control{ padding-right:48px; }

/* password show/hide toggle */
.hs-pw-toggle{ position:absolute; right:6px; top:24px; transform:translateY(-50%); display:grid; place-items:center;
  width:36px; height:36px; border:0; background:transparent; color:var(--hs-text-faint,#8a94a6); cursor:pointer;
  border-radius:8px; transition:color .18s var(--hs-ease,ease), background .18s var(--hs-ease,ease); z-index:2; }
.hs-pw-toggle:hover{ color:var(--hs-navy,#084CA1); background:var(--hs-navy-050,#eaf1fa); }
.hs-pw-toggle svg{ width:19px; height:19px; display:block; }
.hs-pw-toggle .eye-off{ display:none; }
.hs-pw-toggle.is-on .eye-on{ display:none; }
.hs-pw-toggle.is-on .eye-off{ display:block; }

/* invalid state (server @error + JS-inserted feedback) */
.hs-auth .hs-control .form-control.is-invalid{ border-color:#e5484d; background:#fdecee; box-shadow:none; }
.hs-auth .hs-control:has(.form-control.is-invalid) .hs-control__lead{ color:#b21e2b; }
.hs-auth .invalid-feedback{ color:#b21e2b; font-size:12.5px; margin-top:7px; }
.hs-auth .hs-control .invalid-feedback{ display:block; }   /* feedback sits inside control, below input */

/* remember row */
.hs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px; }
.hs-check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13.5px; color:var(--hs-text-muted,#5b6677); margin:0; }
.hs-check input{ position:absolute; opacity:0; width:0; height:0; }
.hs-check .box{ width:19px; height:19px; border:1.5px solid var(--hs-border-strong,#d6dde7); border-radius:6px; display:grid; place-items:center; background:#fff; transition:all .16s var(--hs-ease,ease); color:#fff; flex:none; }
.hs-check .box svg{ width:13px; height:13px; opacity:0; transform:scale(.6); transition:all .16s var(--hs-ease,ease); }
.hs-check input:checked + .box{ background:var(--hs-navy,#084CA1); border-color:var(--hs-navy,#084CA1); }
.hs-check input:checked + .box svg{ opacity:1; transform:scale(1); }
.hs-check input:focus-visible + .box{ outline:2px solid var(--hs-sky,#00AEEF); outline-offset:2px; }

/* primary button */
.hs-auth .hs-btn{
  position:relative; width:100%; appearance:none; border:0; cursor:pointer;
  font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600; font-size:15px; color:#fff;
  background:var(--hs-navy,#084CA1); border-radius:10px; padding:0 18px; height:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 8px 20px rgba(var(--hs-navy-rgb,8,76,161),.24);
  transition:transform .16s var(--hs-ease,ease), background .16s var(--hs-ease,ease), box-shadow .16s var(--hs-ease,ease);
}
.hs-auth .hs-btn:hover{ background:var(--hs-navy-800,#063b80); box-shadow:0 12px 26px rgba(var(--hs-navy-rgb,8,76,161),.32); transform:translateY(-1px); }
.hs-auth .hs-btn:active{ transform:translateY(0); }
.hs-auth .hs-btn:focus-visible{ outline:2px solid var(--hs-sky,#00AEEF); outline-offset:3px; }
.hs-auth .hs-btn svg.arr{ width:18px; height:18px; transition:transform .18s var(--hs-ease,ease); }
.hs-auth .hs-btn:hover svg.arr{ transform:translateX(3px); }
.hs-auth .hs-btn:disabled{ opacity:.85; cursor:default; transform:none; }
/* custom.js prepends a .spinner-border into the button on submit; align it */
.hs-auth .hs-btn .spinner-border{ width:18px; height:18px; border-width:2.5px; }

.hs-secure{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; color:var(--hs-text-faint,#8a94a6); font-size:12px; }
.hs-secure svg{ width:14px; height:14px; color:#28a745; flex:none; }

/* status / error alert (forgot-password success) */
.hs-alert{ display:flex; align-items:flex-start; gap:9px; border-radius:10px; padding:11px 13px; font-size:13.5px; margin-bottom:18px; }
.hs-alert svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.hs-alert--success{ background:#eafaf1; border:1px solid #bfe9cf; color:#1c7a45; }
.hs-alert--danger{ background:#fdecee; border:1px solid #f6c9ce; color:#b21e2b; }

/* demo credentials */
.hs-demo{ margin-top:22px; border:1px solid var(--hs-border,#e6ebf2); border-radius:14px; background:var(--hs-surface-2,#f6f8fb); overflow:hidden; }
.hs-demo__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; }
.hs-demo__head b{ font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600; font-size:13px; color:var(--hs-text,#16233a); display:inline-flex; align-items:center; gap:8px; }
.hs-demo__head b svg{ width:15px; height:15px; color:var(--hs-navy,#084CA1); }
.hs-demo__badge{ font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--hs-navy-700,#0a57b5); background:var(--hs-navy-050,#eaf1fa); border:1px solid var(--hs-navy-100,#d6e3f3); padding:3px 9px; border-radius:999px; }
.hs-demo__body{ padding:0 15px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hs-demo__creds{ font-size:12.5px; color:var(--hs-text-muted,#5b6677); line-height:1.75; }
.hs-demo__creds code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--hs-navy-900,#042c61); background:#fff; border:1px solid var(--hs-border,#e6ebf2); border-radius:6px; padding:1px 7px; }
.hs-auth .hs-demo__copy{ appearance:none; border:1px solid var(--hs-navy,#084CA1); color:var(--hs-navy,#084CA1); background:#fff; font-family:var(--hs-font-heading,'Montserrat',sans-serif); font-weight:600; font-size:12.5px; padding:8px 13px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:all .16s var(--hs-ease,ease); }
.hs-auth .hs-demo__copy:hover{ background:var(--hs-navy,#084CA1); color:#fff; }
.hs-demo__copy svg{ width:14px; height:14px; }

/* card footer */
.hs-auth__foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--hs-border,#e6ebf2); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hs-auth__foot small{ color:var(--hs-text-faint,#8a94a6); font-size:12px; }
.hs-auth__back{ font-size:13.5px; color:var(--hs-text-muted,#5b6677); }
.hs-auth__back a{ color:var(--hs-navy,#084CA1); font-weight:600; text-decoration:none; }
.hs-auth__back a:hover{ text-decoration:underline; }

/* =========================================================================
   Responsive — collapse to stacked (hero band on top)
   ========================================================================= */
@media (max-width:992px){
  .hs-auth{ flex-direction:column; height:auto; min-height:100vh; overflow:visible; }   /* mobile: natural page scroll */
  .hs-auth__hero{ flex:none; max-width:100%; padding:30px 30px 26px; }
  .hs-auth__mid{ max-width:none; margin-top:22px; }
  .hs-auth__title{ font-size:28px; }
  .hs-auth__lede{ max-width:52ch; }
  .hs-auth__list{ display:none; }
  .hs-auth__hfoot{ display:none; }
  .hs-auth__main{ padding:34px 30px 44px; overflow:visible; }
  .hs-auth__brand{ display:none; } /* hero already shows brand on mobile */
  .hs-auth__card{ max-width:440px; }
}
@media (max-width:560px){
  .hs-auth__hero{ padding:24px 22px 20px; }
  .hs-auth__title{ font-size:23px; }
  .hs-auth__wordmark{ font-size:16px; }
  .hs-auth__main{ padding:26px 22px 34px; }
  .hs-auth__h{ font-size:23px; }
  .hs-demo__body{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .hs-auth *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}