/* CSS Fix for Login Dropdown Visibility */
/* This ensures the login dropdown is properly visible when toggled */

/* Force login dropdown visibility when display is block */
.login-dropdown[style*="display: block"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10000 !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  min-width: 300px !important;
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  padding: 1rem !important;
  margin-top: 0.5rem !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Force login dropdown to be hidden when display is none */
.login-dropdown[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure login button is clickable */
.login-btn {
  position: relative !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure header nav doesn't interfere with dropdown */
.header-nav {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Ensure site header doesn't clip the dropdown */
.site-header {
  overflow: visible !important;
}

/* Force tab content visibility when active */
.login-dropdown .auth-tab-content.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure form elements are visible */
.login-dropdown .form-group {
  display: block !important;
  visibility: visible !important;
}

.login-dropdown .form-actions {
  display: flex !important;
  visibility: visible !important;
}

/* Emergency override for any conflicting styles */
#loginDropdown {
  /* These styles will be applied via JavaScript when needed */
  transition: none !important;
}

/* Ensure dropdown is above all other elements */
.login-dropdown {
  z-index: 10000 !important;
  position: absolute !important;
}

/* Mobile responsive fixes */
@media screen and (max-width: 768px) {
  .login-dropdown[style*="display: block"] {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    min-width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }
}