/* ==========================================================================
   Ayurlogy Portal — split-screen auth pages
   Left: full-bleed, slowly-animated brand photo with a glass quote card.
   Right: an elevated form card with icon-affixed inputs.
   Reuses the --p-* tokens defined in pro.css.
   ========================================================================== */

.auth-page{
  background:linear-gradient(180deg, var(--p-cream) 0%, var(--p-paper) 40%);
}

.auth-split{
  min-height:calc(100vh - 76px);
  display:grid;
  grid-template-columns:1.05fr 1fr;
}

@media (max-width:991px){
  .auth-split{grid-template-columns:1fr;}
}

/* ---------- Left visual panel ---------- */
.auth-visual{
  position:relative;
  min-height:340px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:var(--p-deep);
}

@media (max-width:991px){
  .auth-visual{min-height:300px;}
}

.auth-visual-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%;
  animation:authKenBurns 22s ease-in-out infinite alternate;
  filter:saturate(1.05);
}

@keyframes authKenBurns{
  from{transform:scale(1) translateY(0);}
  to{transform:scale(1.09) translateY(-1%);}
}

@media (prefers-reduced-motion: reduce){
  .auth-visual-img{animation:none;}
}

.auth-visual-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,40,40,.05) 0%, rgba(0,55,55,.28) 45%, rgba(0,28,28,.9) 100%),
    linear-gradient(100deg, rgba(0,90,90,.28) 0%, rgba(0,0,0,0) 45%);
}

.auth-visual-glow{
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,201,201,.35), transparent 70%);
  top:-90px;right:-90px;
  filter:blur(8px);
  pointer-events:none;
}

.auth-visual-content{
  position:relative;
  z-index:1;
  padding:2.6rem 2.6rem 2.6rem;
  color:#eafffe;
  width:100%;
  animation:authFadeUp .7s ease both;
}

.auth-visual-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.02em;
  margin-bottom:1.5rem;
  color:#fff;
}

.auth-visual-brand img{
  width:34px;height:34px;border-radius:9px;object-fit:cover;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}

.auth-visual-content h2{
  font:600 clamp(1.5rem,2.6vw,2.15rem) Georgia,serif;
  max-width:430px;
  line-height:1.24;
  margin-bottom:.7rem;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}

.auth-visual-content h2 em{
  color:var(--p-gold);
  font-style:italic;
}

.auth-visual-content p.auth-visual-lede{
  color:#d3fffb;
  max-width:400px;
  font-size:.94rem;
  margin-bottom:0;
}

.auth-visual-tags{
  display:flex;
  gap:.5rem;
  margin-top:1.3rem;
  flex-wrap:wrap;
}

.auth-visual-tags span{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:.35rem .8rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* Floating glass quote card, top-right of the photo */
.auth-visual-quote{
  position:absolute;
  top:1.8rem;
  right:1.8rem;
  z-index:2;
  max-width:230px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px);
  border-radius:16px;
  padding:.95rem 1.05rem;
  color:#fff;
  animation:authFadeUp .8s .15s ease both;
}

@media (max-width:1200px){ .auth-visual-quote{display:none;} }

.auth-visual-quote i.bi-quote{
  color:var(--p-gold);
  font-size:1.1rem;
}

.auth-visual-quote p{
  font-size:.8rem;
  line-height:1.4;
  margin:.35rem 0 .45rem;
  color:#f2fffd;
}

.auth-visual-quote small{
  color:#bdeeee;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.02em;
}

.auth-visual-stars{
  color:var(--p-gold);
  font-size:.75rem;
  letter-spacing:.1em;
}

@keyframes authFadeUp{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- Right form panel ---------- */
.auth-form-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.6rem 1.5rem;
  background:var(--p-paper);
  overflow:hidden;
}

.auth-form-panel::before,
.auth-form-panel::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, var(--p-sage), transparent 70%);
  opacity:.6;
  pointer-events:none;
  z-index:0;
}

.auth-form-panel::before{width:260px;height:260px;top:-80px;right:-70px;}
.auth-form-panel::after{width:220px;height:220px;bottom:-70px;left:-60px;}

.auth-form-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:430px;
  background:#fff;
  border:1px solid var(--p-line);
  border-radius:22px;
  box-shadow:0 24px 60px rgba(0,58,58,.12);
  padding:clamp(1.7rem, 3vw, 2.6rem);
  animation:authFadeUp .6s ease both;
}

.auth-form-card .pro-eyebrow{margin-bottom:.5rem;}

.auth-form-card h1{
  font:600 1.9rem Georgia,serif;
  color:var(--p-deep);
  margin-bottom:.4rem;
}

.auth-form-card h1 em{
  color:var(--p-accent);
  font-style:italic;
}

.auth-form-card>p.auth-sub{
  color:var(--p-muted);
  font-size:.92rem;
  margin-bottom:1.7rem;
}

/* Icon-affixed inputs */
.field-row .input-icon-wrap{position:relative;}
.field-row .input-icon-wrap i{
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--p-muted);
  font-size:.95rem;
  pointer-events:none;
}
.field-row .input-icon-wrap input{padding-left:2.5rem;}

.auth-form-card .field-row label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.auth-form-card .field-row label a{
  font-size:.75rem;
  font-weight:700;
  color:var(--p-green);
  text-decoration:none;
}

.auth-form-card .field-row label a:hover{text-decoration:underline;}

.auth-form-card .form-control{
  transition:box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

.auth-form-card .form-control:focus{
  border-color:var(--p-green);
  box-shadow:0 0 0 .22rem rgba(0,122,122,.14);
}

.auth-form-card .btn-brand{
  border-radius:12px;
  font-weight:700;
  padding:.72rem 1rem;
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(0,58,58,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}

.auth-form-card .btn-brand:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,58,58,.24);
}

.auth-switch{
  text-align:center;
  font-size:.88rem;
  color:var(--p-muted);
  margin-top:1.6rem;
}

.auth-switch a{
  color:var(--p-green);
  font-weight:800;
  text-decoration:none;
}

.auth-switch a:hover{text-decoration:underline;}

.auth-divider{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:1.8rem 0;
  color:var(--p-muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--p-line);
}

.demo-account-btn{border-radius:12px;transition:transform .12s ease, box-shadow .12s ease;}
.demo-account-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,122,122,.14);}

.auth-reset-link-box{
  border:1px dashed var(--p-green);
  background:var(--p-cream);
  border-radius:14px;
  padding:1rem 1.1rem;
  margin-top:1rem;
  word-break:break-all;
  font-size:.82rem;
}

.pw-toggle-wrap{position:relative;}
.pw-toggle-wrap input{padding-right:2.6rem;}
.pw-toggle-wrap.input-icon-wrap input{padding-left:2.5rem;padding-right:2.6rem;}
.pw-toggle-btn{
  position:absolute;
  right:.55rem;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:none;
  color:var(--p-muted);
  padding:.2rem .4rem;
  line-height:1;
}
.pw-toggle-btn:hover{color:var(--p-green);}