:root{
  --gd-red:#b22024;
  --gd-red-dark:#7d0d10;
  --gd-gold:#caa465;
  --badge-size:140px; /* desktop default */
}

/* ===== Base layout ===== */
body{
  min-height:100dvh; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  padding:1rem;
  background-color:#faf6ef;               /* fallback */
  background-image:url('images/bg.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:min(900px, 100vw) auto; /* responsive size */
}


@media (max-width: 768px) {
  body {
    background-position: top center !important;  /* fixes downward shift */
    background-size: 100% auto !important;       /* ensures full width */
    background-attachment: scroll !important;    /* prevents mobile bug */
  }
}

@media (max-width: 576px) {
  .brand-badge {
    width: 150px;                 /* slightly smaller on small screens */
    height: 150px;
    margin-top: -40px !important; /* reduce upward overlap */
  }
}

.login-card{
  width:100%;
  max-width:520px;
  border:0;
  border-radius:1.25rem;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  /* tip: add padding in markup or utility classes; kept lean here */
}

.brand-badge{
  width:var(--badge-size);
  height:var(--badge-size);
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));
  margin-top:calc(var(--badge-size) / -2); /* overlap the card top */
}

/* Optional Bootstrap-style button (kept active, safe to use) */
.btn-gd{
  --bs-btn-bg: var(--gd-red);
  --bs-btn-hover-bg:#a31b1f;
  --bs-btn-active-bg: var(--gd-red-dark);
  --bs-btn-color:#fff;
  --bs-btn-border-color:transparent;
  --bs-btn-hover-border-color:transparent;
  --bs-btn-focus-shadow-rgb:178,32,36;
  border-radius:.85rem;
  /*padding-block:.1rem;*/
  font-weight:400;
}



/* 👇 These two lines text ko white rakhenge hover & active pe */
.btn-gd:hover,
.btn-gd:active {
  color: #fff !important;
}



/* ===== Form fields & helpers ===== */
.form-control{ 
  border-radius:.75rem; 
  padding-left:3rem; 
}
.input-icon{ 
  position:absolute; 
  left:.9rem; 
  top:50%; 
  transform:translateY(-50%); 
  color:#6c757d; 
}
.muted{ color:#7b7b7b; }

.helper{ font-size:.95rem; color:#7b7b7b; }
.helper .link-disabled{ pointer-events:none; opacity:.6; text-decoration:none; }

/* Little “chip” labels */
.field{ position:relative; }
.chip-label{
  position:absolute; top:-12px; left:14px; z-index:1;
  background:#fff; padding:.2rem .65rem;
  border:1.5px solid var(--gd-gold); border-radius:999px;
  font-size:.8rem; font-weight:600; color:#444;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
.border-gold{ border-color:var(--gd-gold) !important; }

/* ===== Custom file row ===== */
.file-row{ display:flex; gap:.75rem; align-items:center; }
.fake-input{
  flex:1; background:#fff; border:1px solid #e9e9e9; border-radius:.75rem;
  padding:.85rem 1rem; color:#6c757d; min-height:56px; display:flex; align-items:center;
}
#file-name.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Camera area ===== */
.camera-wrap{
  background:#eef2f7; border:2px dashed #d7d7d7; border-radius:.9rem;
  min-height:170px; display:flex; align-items:center; justify-content:center;
  position:relative; padding:1rem;
}
.camera-actions{ 
  position:absolute; bottom:.75rem; left:50%; 
  transform:translateX(-50%); display:flex; gap:.5rem; 
}
.camera-actions .btn{ border-radius:.65rem; padding:.45rem .85rem; }
video, canvas, img.captured-preview{ max-width:100%; border-radius:.6rem; }
.cam-placeholder{ text-align:center; color:#444; }
.cam-placeholder i{ font-size:2rem; display:block; margin-bottom:.35rem; }

/* ===== OTP ONLY OVERRIDES ===== */
.otp-group{
  display:flex;
  gap:.9rem;
  justify-content:center;
  margin:1rem 0 1.5rem;
}
.otp-group .form-control{
  width:72px; 
  height:72px;
  flex:0 0 auto;
  padding:0;                 /* cancel left-padding from .form-control */
  text-align:center;
  font-size:1.75rem;
  font-weight:600;
  border:1.5px solid #999;
  border-radius:.9rem;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.otp-group .form-control:focus{
  border-color:var(--gd-red);
  box-shadow:0 0 0 .2rem rgba(178,32,36,.15);
}
.otp-group .form-control:disabled{ background:#f8f9fa; }

/* remove number spinners just in case */
.otp-group .form-control::-webkit-outer-spin-button,
.otp-group .form-control::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.otp-group .form-control[type="number"]{ -moz-appearance:textfield; }

/* ===== Mobile tweaks ===== */
@media (max-width:576px){
  :root{ --badge-size:190px; }                 /* unified mobile badge size */
  .login-card{ padding:2rem !important; }
  .muted, .helper{ font-size:.95rem; }
  .otp-group{ gap:.6rem; }
  .otp-group .form-control{ 
    width:50px; 
    height:50px; 
    font-size:1.5rem; 
  }
}