/* ============================================================
   Login / Password pages — background image + split layout
   Desktop : full bg image, form on RIGHT (over red panel)
   Mobile  : different (cropped) image, form FIRST on top,
             image fills the screen behind
   ============================================================ */

body.login-page{
  background-image:
    linear-gradient(0deg, rgba(110,22,20,0.05), rgba(110,22,20,0.05)),
    url('bg_desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

.login-stage{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;          /* form on the right */
  padding: 40px clamp(28px, 7vw, 130px);
  position: relative;
}

/* ---------- Login card ---------- */
.login-box{
  position: relative;
  width: 100%;
  max-width: 410px;
  background: #ffffff;
  border: 1px solid rgba(171,37,34,0.16);
  border-radius: 24px;
  padding: 64px 34px 30px;            /* extra top space for the logo */
  margin-top: 52px;                   /* room for logo overlap */
  box-shadow: 0 34px 80px -22px rgba(110,22,20,0.55),
              inset 0 1px 0 rgba(255,255,255,0.6);
  text-align: center;
}
.login-box::before{
  content:""; position:absolute; top:0; left:26%; right:26%; height:3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  border-radius: 0 0 4px 4px;
}

/* ---------- Logo on top of the card ---------- */
.login-logo{
  position:absolute;
  top: -62px; left:50%; transform:translateX(-50%);
  width: 130px; height: 130px; border-radius: 50%;
  background: var(--grad);
  display:grid; place-items:center;
  box-shadow: 0 16px 30px -10px rgba(171,37,34,0.6),
              inset 0 2px 4px rgba(255,255,255,0.35);
  border: 4px solid #fff;
}
.login-logo i{ font-size: 46px; color:#fff; line-height:1;}
.login-logo .ring{
  position:absolute; inset:8px; border-radius:50%;
  border:2px dashed rgba(255,255,255,0.45);
}

.login-tagline{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--red-dark); font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:6px;
}
.login-tagline::before, .login-tagline::after{
  content:""; width:28px; height:1px; background:var(--red);
}
.login-brand{
  font-family:'Fraunces', serif; font-weight:600;
  color:var(--maroon); font-size: 1.7rem;
  margin: 8px 0 4px; letter-spacing:-.5px;
}
.login-brand .italic{ color:var(--red-dark); font-style:italic; font-weight:500;}
.login-sub{ color:var(--slate); font-size:14px; margin: 6px 0 22px;}
.login-demo{
  margin-top:20px; font-size:12px; color:var(--slate);
  padding:9px 14px; background:var(--red-soft);
  border:1px dashed var(--red); border-radius:10px;
  display:inline-flex; align-items:center; gap:6px;
}
.login-demo strong{ color:var(--red-darker); font-family:'Fraunces',serif;}

.pwd-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; padding:6px 10px; color:#94a3b8; cursor:pointer;
}

/* ============================================================
   MOBILE  (<= 767px) — form first, image fills the screen
   ============================================================ */
@media (max-width: 767.98px){
  body.login-page{
    background-image:
      linear-gradient(0deg, rgba(110,22,20,0.10), rgba(110,22,20,0.04)),
      url('bg_mobile.jpg');     /* different image on mobile */
    background-position: center top;
    background-attachment: scroll;     /* full per screen, scrolls naturally */
  }
  .login-stage{
    align-items: flex-start;           /* form part comes first / on top */
    justify-content: center;
    padding: 26px 16px 60px;
  }
  .login-box{
    max-width: 400px;
    margin-top: 52px;
    /* slight translucency so the product image stays visible behind */
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

@media (max-width: 400px){
  .login-box{ padding: 60px 22px 26px;}
  .login-logo{ width:125px; height:122px; top:-46px;}
  .login-logo i{ font-size:40px;}
  .login-brand{ font-size:1.5rem;}
}