* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    html {
      background-color: #f9f9f9;
    }

   body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background-color: #F9CB35;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.main-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 40px;
}

    /* 🎯 Main container with banner background */
    .login-banner {
      position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
     margin: 0 auto;
     margin-bottom: 20px;
     
    }
    .login-img{
    position:absolute;
    top:0;
    left:-1px;        /* extend slightly to left */
    width:calc(100% + 2px); /* extend both sides */
    height:100%;
    object-fit:cover;
}
    html, body {
    overflow-x: hidden;
    margin:0;
}

    /* 📦 Login content box - scales with banner */
    #login-container{
  position:absolute;
  top:46%;
  left:50%;
  transform:translate(-50%, -50%);
  width:75%;
  max-width:420px;
  text-align:center;
}
.footer-links a {
  color: #474df5;
  
}

.footer-links a:visited {
  color: #474df5;
}

.footer-links a:hover {
  color: #43a047; /* optional hover effect */
}
.seo-footer {
  width: 100%;                /* ✅ full width */
  background: #f9f9f9;
  font-size: 14px;
  color: #555;
  text-align: center;
  padding: 15px 20px;
  line-height: 1.6;
  border-top: 1px solid #ddd; /* ✅ only top border */
  margin-top: auto;
}

    /* 🔠 Responsive heading */
    #login-container h2 {
      font-size: clamp(1rem, 2.5vw, 1.4rem);
      line-height: 1.3;
      margin-bottom: clamp(15px, 3vh, 20px);
      font-weight: 600;
      color: #000;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      width: 100%;
      text-align: center;
    }

    /* 🔘 Inputs and buttons */
    .mobile-input{
  width:75%;
  height:38px;
  border-radius:25px;
  border:1px solid #ccc;
  background:#f0f0f0;
  font-size:clamp(0.9rem,1vw,1rem);
  text-align:center;
  margin:0 auto 10px auto;
  padding:0 15px;
}

    .login-button{
  width:50%;
  height:36px;
  background:#43a047;
  color:white;
  border:none;
  border-radius:25px;
  font-size:clamp(0.85rem,1vw,0.95rem);
  font-weight:bold;
  cursor:pointer;
  margin:0 auto 6px auto;
}

    .login-button:hover {
      background: #388e3c;
    }

    /* OTP Inputs */
    .otp-inputs{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:4px auto 12px auto;
  width:80%;
}

.otp-input-box{
  width:14%;
  height:40px;
  font-size:1.1rem;
  text-align:center;
  border-radius:8px;
  border:1px solid #ccc;
  background:#f0f0f0;
}

    

    .verify-button {
      width: clamp(35%, 40%, 45%);
      height: clamp(30px, 4vh, 35px); /* Reduced height */
      background: #43a047;
      color: white;
      border: none;
      border-radius: 25px;
      font-size: clamp(0.85rem, 2vw, 0.95rem);
      font-weight: bold;
      cursor: pointer;
      margin-top: clamp(5px, 1vh, 10px);
    }

    .verify-button:hover {
      background: #388e3c;
    }

    /* Text elements */
    .register-text {
      font-size: clamp(0.8rem, 1.5vw, 0.85rem);
      color: #333;
      margin-top: clamp(10px, 1.8vh, 16px);
      margin-bottom: clamp(8px, 1.5vh, 12px);
    }

    .register-text span {
      text-decoration: underline;
      color: #007BFF;
      cursor: pointer;
      font-weight: bold;
    }

    .or-text {
      margin: clamp(8px, 1.5vh, 12px) 0;
      font-size: clamp(0.73rem, 1.0vw, 0.7rem);
      font-weight: bold;
      color: #444;
    }

    /* Scan button */
    .scan-btn{
  width:50%;
  height:38px;
  background:#43a047;
  color:white;
  border:none;
  border-radius:25px;
  font-size:clamp(0.8rem,1vw,0.9rem);
  font-weight:bold;
  cursor:pointer;
  margin:8px auto 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

    .scan-btn:hover {
      background: #388e3c;
    }

    .scan-icon {
      width: clamp(18px, 4vw, 24px);
      height: clamp(18px, 4vw, 24px);
      object-fit: contain;
    }

    /* Terms text */
    /* .terms-text {
      position: absolute;
      bottom: 5%;
      left: 7%;
      font-size: clamp(0.65rem, 1.5vw, 0.75rem);
      color: #000;
      text-decoration: underline;
      font-weight: 500;
      cursor: pointer;
      z-index: 10;
    } */
.terms-text {
    position: absolute;
    bottom: 8%;
    left: 7%;
    text-decoration: underline;
    font-weight: 500;
    font-size: clamp(0.6rem, 1.2vw, 0.8rem);
    color: #000;
}
    /* Hidden class */
    .hidden {
      display: none !important;
    }

    /* Popup overlays */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .popup-overlay.show {
      display: flex !important;
    }

    .popup-overlay.hidden {
      display: none !important;
    }

    /* Popup boxes */
    .popup-box {
      background: #fff;
      border-radius: 12px;
      width: 90%;
      max-width: 340px;
      max-height: 85vh;
      padding: 25px 20px;
      text-align: center;
      position: relative;
      box-shadow: 0 6px 25px rgba(0,0,0,0.3);
      animation: popupShow 0.3s ease;
      overflow-y: auto;
      z-index: 1001;
    }

    @keyframes popupShow {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    /* Make the popup box the reference for positioning */
.terms-box{
  position: relative;
}

/* Position the close button */
.terms-box .close-btn{
  position: absolute;
  top: -2px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #444;
  z-index: 10;
}

    .popup-box .close-btn {
      position: absolute;
      top: 8px;
      right: 12px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #444;
      z-index: 10;
    }

    .popup-box h2, .popup-box h3 {
      font-size: 15px;
      color: #2e7d32;
      margin-bottom: 6px;
    }

    .popup-box p {
      font-size: 13px;
      color: #000;
      margin-bottom: 10px;
    }

    /* Terms popup specific */
    .terms-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
    }

    .terms-box {
      background: #fff;
      width: 90%;
      max-width: 450px;
      max-height: 85vh;
      padding: 20px;
      border-radius: 12px;
      overflow-y: auto;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      position: relative;
      text-align: left;
    }

    .terms-box h2 {
      margin-top: 0;
      text-align: center;
      color: #333;
    }

    .terms-box h3 {
      font-size: 14px;
      color: #2e7d32;
      margin-top: 12px;
      margin-bottom: 8px;
    }

    .terms-box p {
      font-size: 13px;
      line-height: 1.5;
      margin: 8px 0;
      color: #000;
    }

    .terms-box ul {
      margin: 8px 0;
      padding-left: 20px;
    }

    .terms-box li {
      font-size: 12px;
      margin: 4px 0;
      color: #000;
    }

    .terms-box a {
      color: #007BFF;
      text-decoration: none;
    }

    .terms-box a:hover {
      text-decoration: underline;
    }

    /* Toast notification */
    #toast {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 100px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      font-weight: 600;
      z-index: 4000;
      opacity: 0;
      transition: opacity 0.18s ease;
      pointer-events: none;
    }

    #toast.show { opacity: 1; }

    /* QR Reader */
    #qr-reader {
      width: 90%;
      margin: 15px auto;
      border: 1px solid #ccc;
      border-radius: 8px;
      z-index: 1;
    }

    #qr-reader-result {
      margin-top: 15px;
      font-weight: bold;
      color: #43a047;
    }

    /* Register form inputs */
    #register-mobile {
      width: 85%;
      padding: 8px;
      border-radius: 20px;
      border: 1px solid #ccc;
      margin-bottom: 12px;
      font-size: 15px;
      text-align: center;
    }

    /* 📱 Small screens */
/* 📱 Small phones */
@media (max-width:480px){

  .login-banner{
    width:min(95vw,72vh);
  }

}

/* 📱 Tablets */
@media (min-width:481px) and (max-width:768px){

  .login-banner{
    width:min(90vw,68vh);
  }

}

/* 💻 Laptops */
@media (min-width:769px) and (max-width:1199px){

  .login-banner{
    width:min(75vw,65vh);
  }

}

/* 🖥 Large screens */
@media (min-width:1200px){

  .login-banner{
    width:min(55vw,65vh);
  }

}
    @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}