/* VerSans account experience */
.auth-page{
  min-height:100vh;
  background:#f6f3ef;
  color:var(--ink);
}

.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(480px,1.08fr) minmax(400px,.92fr);
  grid-template-areas:"visual panel";
  direction:ltr;
  background:#f7f4f0;
}

.auth-visual{
  grid-area:visual;
  position:relative;
  overflow:hidden;
  min-height:100vh;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.9),transparent 26%),
    radial-gradient(circle at 82% 14%,rgba(255,255,255,.55),transparent 20%),
    linear-gradient(180deg,#f3ece5 0%,#efe6de 100%);
}

.auth-visual::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0) 24%),
    linear-gradient(180deg,rgba(20,35,51,.03),rgba(20,35,51,0) 40%);
}

.auth-visual__media{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100vh;
  background-image:url('../images/auth-showcase.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  box-shadow:none;
  border:none;
  background-color:#f5eee6;
}

.auth-visual__media img{
  display:none;
}

.auth-visual::after{
  content:'VERSANS';
  position:absolute;
  inset-inline-start:28px;
  bottom:24px;
  z-index:2;
  padding:.55rem .8rem;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(20,35,51,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.19em;
  line-height:1;
}

/* The uploaded product image carries the visual story, so the old helper copy stays hidden. */
.auth-visual__content{display:none}

.auth-panel{
  grid-area:panel;
  min-width:0;
  background:
    radial-gradient(circle at 82% 8%,rgba(226,206,177,.16),transparent 30%),
    #fbfaf8;
  padding:clamp(1.5rem,3vw,3.25rem);
  display:flex;
  align-items:center;
  justify-content:center;
}

html[dir="rtl"] .auth-panel{direction:rtl}
html[dir="ltr"] .auth-panel{direction:ltr}

.auth-card{
  width:min(100%,540px);
  padding:clamp(1.55rem,2.4vw,2.3rem);
  background:rgba(255,255,255,.97);
  border:1px solid #e7e2dc;
  box-shadow:0 22px 70px rgba(20,35,51,.07);
}

.auth-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(2rem,4vh,3rem);
}

.auth-card__brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.auth-card__brand .brand__logo{
  width:158px;
  max-width:38vw;
}

.auth-card__top>div{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.auth-back{
  font-size:.82rem;
  color:#66727d;
  text-decoration:none;
  padding:.45rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.auth-back:hover{color:var(--ink);border-color:currentColor}

.auth-lang{
  min-height:38px;
  padding:.35rem .72rem;
  border:1px solid #d9d6d1;
  background:#fff;
  color:#3d4953;
  font-size:.76rem;
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
.auth-lang:hover{border-color:#9da7af;background:#faf9f7}

.auth-card__eyebrow{
  margin:0 0 .55rem;
  color:#806b4d;
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.16em;
}

.auth-card h2{
  margin:0;
  font-size:clamp(2.35rem,4vw,3.7rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.025em;
}

.auth-card__lead{
  color:var(--muted);
  margin:.8rem 0 0;
  line-height:1.8;
  font-size:.94rem;
}

.auth-form{
  display:grid;
  gap:1rem;
  margin-top:1.8rem;
}

.auth-field{display:grid;gap:.42rem}
.auth-field label{font-size:.82rem;font-weight:600;color:#35424c}

.auth-input{
  width:100%;
  height:52px;
  border:1px solid #d3d8dc;
  background:#fff;
  color:var(--ink);
  padding:0 .95rem;
  border-radius:0;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}

.auth-input:hover{border-color:#b8c0c6}
.auth-input:focus{
  border-color:#60778a;
  box-shadow:0 0 0 3px rgba(96,119,138,.11);
  background:#fff;
}
.auth-input[aria-invalid=true]{border-color:var(--err)}

.auth-password-wrap{position:relative}
.auth-password-wrap .auth-input{padding-inline-end:4.8rem}
.auth-password-toggle{
  position:absolute;
  inset-inline-end:.38rem;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#65717b;
  padding:.45rem .55rem;
  font-size:.76rem;
  cursor:pointer;
}

.auth-password-hint{
  margin:0;
  font-size:.72rem;
  color:#7b858d;
  line-height:1.55;
}

.auth-submit{
  margin-top:.35rem;
  width:100%;
  min-height:54px;
  letter-spacing:.01em;
}
.auth-submit.is-loading{pointer-events:none;opacity:.72}

.auth-message{
  min-height:22px;
  font-size:.82rem;
  line-height:1.55;
  margin-top:.15rem;
}
.auth-message.is-error{color:var(--err)}
.auth-message.is-ok{color:var(--ok)}

.auth-switch{
  margin:1.35rem 0 0;
  color:var(--muted);
  font-size:.85rem;
}
.auth-switch a{color:var(--ink);font-weight:600;text-underline-offset:3px}

.account-loading{padding:1.7rem 0;color:var(--muted)}
.account-card{
  border-top:1px solid var(--line);
  margin-top:1.8rem;
  padding-top:1.2rem;
  display:grid;
  gap:0;
}
.account-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.account-row span{color:var(--muted);font-size:.82rem}
.account-row strong{font-weight:500;text-align:end;word-break:break-word}
.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
.account-actions .btn{min-height:52px}

@media(max-width:1200px){
  .auth-shell{grid-template-columns:minmax(420px,1fr) minmax(380px,.92fr)}
  .auth-card{width:min(100%,520px)}
}

@media(max-width:980px){
  .auth-shell{grid-template-columns:minmax(360px,.96fr) minmax(380px,1.04fr)}
  .auth-panel{padding:1.5rem}
  .auth-card{padding:1.55rem}
  .auth-card__brand .brand__logo{width:138px}
}

/* Keep the image and the form side-by-side at laptop widths like 882px. */
@media(max-width:760px){
  .auth-shell{
    grid-template-columns:1fr;
    grid-template-areas:"visual" "panel";
    min-height:100vh;
  }
  .auth-visual{
    min-height:320px;
    padding:0;
  }
  .auth-visual__media{
    width:100%;
    min-height:320px;
    margin-inline:auto;
    background-position:center center;
  }
  .auth-visual::after{inset-inline-start:16px;bottom:12px}
  .auth-panel{padding:1.15rem var(--gut) 3rem;align-items:flex-start}
  .auth-card{width:min(100%,560px);padding:1.45rem;margin-top:-1rem;position:relative;z-index:3}
  .auth-card__top{margin-bottom:2rem}
  .auth-card h2{font-size:clamp(2.2rem,9vw,3rem)}
}

@media(max-width:520px){
  .auth-panel{padding-inline:14px}
  .auth-card{padding:1.2rem}
  .auth-card__top{align-items:flex-start;margin-bottom:1.7rem}
  .auth-card__brand .brand__logo{width:128px;max-width:42vw}
  .auth-card__top>div{gap:.35rem}
  .auth-lang{min-height:34px;padding:.3rem .55rem}
  .auth-back{font-size:.76rem}
  .account-actions{grid-template-columns:1fr}
}