.heera-popup-overlay {
  display: none; /* initially hidden */
  position: fixed;
  inset: 0;
background: rgba(0, 0, 0, 0.55); 
box-shadow: inset 0 0 1000px rgba(252, 185, 0, 0.04); /* subtle gold warmth */

  backdrop-filter: blur(5px);
  z-index: 9999;

  justify-content: center;
  align-items: center;
}

.heera-popup-overlay.heera-visible {
  display: flex; /* only shown when class is present */
}


/* === Popup Box Centered === */
.heera-popup-box {
  background-color: #171717;
  color: #fff;
  width: 92%;
  max-width: 420px;
  padding: 26px 30px 36px;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7);
  position: relative;
  animation: popupFadeIn 0.4s ease-in-out;
  overflow: hidden;
}

/* === Animations === */
@keyframes popupFadeIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Headings === */
.heera-popup-box h3,
.heera-form h3 {
  font-size: 1.9rem;
  color: #fcb900;
  text-align: center;
  margin-bottom: 0;
  text-shadow: 0 0 6px rgba(252, 185, 0, 0.2);
  font-family: 'Inter', sans-serif;
}

/* === Divider === */
.heera-divider {
  width: 100%;
  height: 1px;
  background: rgba(252, 185, 0, 0.1);
  margin: 14px 0 22px;
}

/* === Input Fields === */
.heera-form input {
  width: 100% !important;
  padding: 12px 16px !important;
  margin-bottom: 18px !important;
  font-size: 1rem !important;
  font-family: 'Inter', sans-serif !important;
  background-color: #0d0d0d !important;
  color: #f4d97e !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}
.heera-form input::placeholder {
  color: rgba(255, 220, 140, 0.35) !important;
  font-weight: 400 !important;
}
.heera-form input:hover {
  border-color: #4e3b20 !important;
  background-color: #121212 !important;
}
.heera-form input:focus {
  outline: none !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
  background-color: #161616 !important;
  color: #ffe799 !important;
}

/* === Submit Buttons === */
.heera-form button[type="submit"],
.heera-action-btn {
  display: block;
  width: 100%;
  background-color: #fcb900 !important;
  color: #000;
  border: none;
  padding: 14px;
  font-weight: 600;
  font-size: 23px;
  font-family: 'Inter', sans-serif !important;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.25s ease;
  letter-spacing: 0;
  margin-bottom: 30px;
}
.heera-action-btn:hover {
  transform: translateY(-2px);
}

/* === Legal Text === */
.heera-legal-text {
  font-size: 0.85rem;
  text-align: center;
  color: #777;
  margin-top: 12px;
}
.heera-legal-text a {
  color: #fcb900;
  text-decoration: none;
}
.heera-legal-text a:hover {
  text-decoration: underline;
}

/* === Close Button === */
.heera-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent !important; /* prevent background on hover */
  color: #ccc;
  font-size: 24px;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  z-index: 10001;
  transition: color 0.3s ease, transform 0.2s ease;
}

.heera-popup-close:hover {
  color: #000 !important;
  background: transparent !important; /* force no bg */
  transform: scale(1.2); /* subtle enlarge */
  box-shadow: none !important; /* prevent glow if any */
}


/* === Forgot Password === */
.heera-forgot-wrap {
  text-align: right;
  margin-top: -10px;
  margin-bottom: 14px;
}
.heera-forgot-wrap a {
  color: #fcb900;
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.heera-forgot-wrap a:hover {
  color: #ffd700;
  text-decoration: underline;
}

/* === Footer Navigation Links === */
.heera-links,
.heera-nav-footer,
.heera-login-btm-fields {
  text-align: center;
  font-size: 0.92rem;
  margin-top: 12px;
}
.heera-links a,
.heera-nav-footer span {
  color: #fcb900;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.heera-links a:hover,
.heera-nav-footer span:hover {
  color: #ffd700;
  text-decoration: underline;
}

/* === Toast Notification === */
.heera-toast {
  position: fixed;
  z-index: 10000;
  min-width: 240px;
  max-width: 380px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.96rem;
  font-weight: 500;
  color: #000;
  background-color: #fcb900;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease;
}
.heera-toast.success {
  background-color: #fcb900;
  color: #000;
}
.heera-toast.error {
  background-color: #ff4d4d;
  color: #fff;
}
/* Hide all forms by default */
.heera-form {
  display: none;
}

/* Only show the one currently active (JS adds this) */
.heera-form.heera-active {
  display: block;
}
.heera-turnstile {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.heera-divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0 10px;
  font-size: 14px;
  color: #888;
}

.heera-divider-text::before,
.heera-divider-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ccc;
  margin: 0 10px;
}
.heera-social-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px; /* spacing between buttons */
}

/* Make sure each button doesn't take full width */
.heera-social-wrap .nsl-container {
  display: inline-flex !important;
}

/* Optional: constrain button size if needed */
.heera-social-wrap .nsl-button {
  padding: 8px 10px;
  border-radius: 8px;
  min-width: auto;
}


/* Toast Positioning */
@media (max-width: 768px) {
  .heera-toast {
    left: 50%;
    transform: translateX(-50%);
    top: 16px;
  }
}
@media (min-width: 769px) {
  .heera-toast {
    top: 24px;
    right: 24px;
  }
}

/* === Responsive === */
@media (max-width: 480px) {
  .heera-popup-box {
    padding: 24px 20px;
  }
  .heera-popup-box h3 {
    font-size: 1.5rem;
  }
  .heera-form button[type="submit"],
  .heera-action-btn {
    font-size: 0.95rem;
    padding: 12px;
  }
  .heera-popup-close {
    top: 8px;
    right: 8px;
  }
}