/* =========================================================
   GV GLOBAL — Admin Login Page (Premium Split-Screen)
   ========================================================= */

.login-body{
  background: var(--light-bg);
  min-height:100vh;
}

.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.15fr 1fr;
}

/* ============ Left Branding Panel ============ */
.login-brand-panel{
  position:relative;
  background: linear-gradient(160deg, #FFFDF8 0%, #FFF8EC 55%, #FDF1DD 100%);
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:60px 70px;
}

.brand-map-pattern{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(198,0,24,0.10) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 68% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 60% at 68% 45%, #000 0%, transparent 75%);
  pointer-events:none;
}

.brand-wave{
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.brand-wave-top{
  top:-140px; left:-160px;
  width:420px; height:420px;
  border-radius:50%;
  background: conic-gradient(from 200deg, var(--red), var(--dark-red) 30%, transparent 55%);
  opacity:.95;
  clip-path: polygon(0 0, 65% 0, 100% 45%, 40% 100%, 0 100%);
}
.brand-wave-bottom{
  bottom:-180px; left:-200px;
  width:620px; height:620px;
  border-radius:50%;
  background: conic-gradient(from 20deg, var(--dark-red), var(--red) 25%, var(--luxury-gold) 45%, transparent 65%);
  opacity:.95;
}

.brand-skyline{
  position:absolute; left:0; right:0; bottom:0; height:70px;
  background: linear-gradient(180deg, transparent, rgba(142,0,19,0.12));
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 26px),
                       repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 40px);
  mask-image: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 26px);
  opacity:.5;
  pointer-events:none;
}

.login-brand-content{
  position:relative; z-index:2;
  max-width:520px;
}

.login-logo{
  width:220px;
  margin-bottom:26px;
  filter: drop-shadow(0 18px 30px rgba(198,0,24,0.15));
}

.login-headline{
  font-size:30px;
  line-height:1.28;
  font-weight:800;
  color:var(--dark-text);
  margin-bottom:16px;
  letter-spacing:-.3px;
}

.login-sub{
  font-size:14.5px;
  color:var(--secondary-text);
  line-height:1.75;
  margin-bottom:34px;
  max-width:460px;
}

.login-feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.login-feature{
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(212,175,55,0.25);
  border-radius:var(--radius-sm);
  padding:16px 10px;
  text-align:center;
  backdrop-filter: blur(6px);
  transition: var(--transition);
}
.login-feature:hover{
  transform:translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold);
}
.login-feature i{
  width:34px; height:34px; margin:0 auto 10px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--luxury-gold), var(--dark-gold));
  color:#402c00;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.login-feature strong{
  display:block;
  font-family:var(--font-heading);
  font-size:12.5px;
  font-weight:700;
  color:var(--dark-text);
  margin-bottom:3px;
}
.login-feature span{
  display:block;
  font-size:10.5px;
  color:var(--secondary-text);
}

/* ============ Right Login Panel ============ */
.login-form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px 40px;
  background: var(--light-bg);
}

.login-card{
  width:100%;
  max-width:420px;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:44px 40px 34px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.09);
  text-align:center;
}

.login-shield{
  position:relative;
  width:84px; height:84px;
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
}
.login-shield > i:first-child{
  position:absolute; inset:0;
  font-size:84px;
  background: linear-gradient(150deg, var(--luxury-gold), var(--red) 55%, var(--dark-red));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: drop-shadow(0 10px 18px rgba(198,0,24,0.35));
}
.login-shield-user{
  position:relative;
  font-size:24px;
  color:var(--white);
  margin-top:6px;
  z-index:1;
}

.login-title{
  font-size:26px;
  font-weight:700;
  color:var(--dark-text);
  margin-bottom:14px;
}
.login-title .text-red{color:var(--red); font-weight:800;}

.login-title-divider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:30px;
}
.login-title-divider span{
  width:50px; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.login-title-divider span:last-child{
  background: linear-gradient(90deg, var(--gold), transparent);
}
.login-title-divider i{
  color:var(--gold);
  font-size:9px;
}

.login-alert{
  display:flex; align-items:center; gap:10px;
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.35);
  color:#b91c1c; border-radius:10px; padding:12px 14px;
  font-size:13px; font-weight:600; margin-bottom:20px; text-align:left;
}
.login-alert i{font-size:14px; flex-shrink:0;}

.login-form{
  text-align:left;
}

.form-group{
  position:relative;
  margin-bottom:18px;
}
.form-icon{
  position:absolute;
  left:16px; top:50%;
  transform:translateY(-50%);
  color:#9a9a9a;
  font-size:15px;
}
.form-group input{
  width:100%;
  padding:15px 44px;
  border:1.5px solid #e6e6e6;
  border-radius:var(--radius-sm);
  font-size:14.5px;
  font-family: var(--font-body);
  color:var(--dark-text);
  background:var(--light-bg);
  transition: var(--transition);
}
.form-group input:focus{
  outline:none;
  border-color: var(--red);
  background:var(--white);
  box-shadow: 0 0 0 4px rgba(198,0,24,0.08);
}
.form-group input::placeholder{color:#a3a3a3;}

.toggle-password{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:#9a9a9a; font-size:15px;
  transition: var(--transition);
}
.toggle-password:hover{color:var(--red);}

.form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  font-size:13px;
}
.remember-me{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  color:var(--secondary-text);
}
.remember-me input{
  width:15px; height:15px;
  accent-color: var(--red);
  cursor:pointer;
}
.forgot-link{
  color:var(--red);
  font-weight:600;
  transition: var(--transition);
}
.forgot-link:hover{color:var(--dark-red); text-decoration:underline;}

.btn-block{
  width:100%;
  justify-content:center;
}

.login-divider{
  display:flex; align-items:center; text-align:center;
  margin:22px 0;
  color:#b0b0b0;
  font-size:12px;
  font-weight:600;
}
.login-divider::before, .login-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:#eaeaea;
}
.login-divider span{padding:0 14px;}

.login-footer{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid #f0f0f0;
}
.login-footer p{
  font-size:12px;
  color:#999;
  margin-bottom:4px;
}
.login-footer i{color:var(--secondary-text); margin-right:4px;}
.login-footer-brand{
  color:var(--red) !important;
  font-weight:700;
  font-size:12.5px !important;
}
.login-switch-link{
  margin-top:10px !important;
}
.login-switch-link a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--dark-gold) !important;
  font-weight:600;
  font-size:12px !important;
  transition: var(--transition);
}
.login-switch-link a:hover{color:var(--red) !important;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .login-page{grid-template-columns:1fr;}
  .login-brand-panel{
    padding:50px 40px;
    min-height:auto;
  }
  .login-form-panel{padding:40px;}
  .login-headline{font-size:26px;}
}

@media (max-width: 640px){
  .login-brand-panel{padding:40px 24px;}
  .login-feature-grid{grid-template-columns:repeat(2, 1fr);}
  .login-logo{width:170px;}
  .login-headline{font-size:22px;}
  .login-card{padding:34px 24px 28px;}
  .brand-wave-top, .brand-wave-bottom{display:none;}
}

@media (max-width: 420px){
  .login-feature-grid{grid-template-columns:repeat(2, 1fr);}
  .form-row{flex-direction:column; align-items:flex-start; gap:10px;}
}