/* --- 1. BODY & HTML OVERRIDES --- */
body.ac-login-page,
body.ac-login-page html {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important; /* Fixed: Changed from height to min-height */
  width: 100% !important;
  overflow-y: auto !important;   /* Fixed: Removed conflicting overflow:hidden */
  overflow-x: hidden !important;  /* Prevents accidental horizontal scrolling */
  font-family: sans-serif;
}

body.ac-login-page #wpadminbar { 
  display: none !important; 
}

/* --- 2. MAIN CONTAINER --- */
#ac-front-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  min-height: 100vh;           /* Fixed: Changed from height to min-height for mobile */
  width: 100%;
  padding: 40px 20px;          /* Optimized: Extra top/bottom padding for mobile breathing room */
  background: linear-gradient(120deg, #ff4b2b, #22c1c3, #6a11cb, #2575fc);
  background-size: 400% 400%;
  animation: ac-gradientShift 20s ease infinite, ac-fadeIn 1.2s forwards;
  opacity: 0;
  box-sizing: border-box;
}

/* --- 3. ANIMATIONS --- */
@keyframes ac-gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ac-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ac-logoPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes ac-welcomeFadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0.9; transform: translateY(0); }
}
@keyframes ac-btnPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- 4. LOGO & TEXT --- */
.ac-accesslogo { 
  width: 150px; 
  height: auto; 
  margin-bottom: 40px; 
}
.ac-accesslogo img { 
  max-width: 100%; 
  height: auto; 
  transform: scale(0); 
  animation: ac-logoPop 1s forwards; 
}

#ac-welcome-text { 
  opacity: 0; 
  animation: ac-welcomeFadeIn 1.5s forwards; 
}

.ac-reset-desc { 
  font-size: 15px; 
  color: rgba(255, 255, 255, 0.8); 
  text-align: center; 
  margin-bottom: 20px; 
}

/* --- 5. FORMS & INPUTS --- */
.ac-login-input { 
  width: 100%; 
  padding: 12px; 
  margin-bottom: 15px; 
  border-radius: 5px; 
  border: none; 
  font-size: 16px;            /* Mobile Optimized: Prevents iOS auto-zoom */
  box-sizing: border-box; 
}
.ac-login-input:focus { 
  outline: none; 
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); 
  border-radius: 5px; 
}

/* --- 6. BUTTONS & ACTIONS --- */
.ac-btn-submit { 
  width: 100%; 
  padding: 15px; 
  border: none; 
  border-radius: 5px; 
  font-size: 18px; 
  background-color: #28a745; 
  color: white; 
  cursor: pointer; 
  margin-top: 15px; 
  transition: background-color 0.3s, transform 0.2s; 
}
.ac-btn-submit:hover { 
  transform: scale(1.02); 
  background-color: #218838; 
}

#ac-selection-zone { 
  display: flex; 
  gap: 15px; 
}

.ac-btn-choice { 
  display: inline-flex;      /* FIX 1: Forces the <a> link and <button> to calculate space identically */
  align-items: center;       /* FIX 2: Centers the text vertically inside both elements */
  justify-content: center;   /* FIX 3: Centers the text horizontally inside both elements */
  flex-basis: 100%;          /* FIX 4: Explicitly forces the flex matrix to start at the exact same base scale */
  flex: 1;                   /* Spreads both buttons evenly to match width dimensions */
white-space: nowrap;
  
  padding: 15px 30px; 
  border: none; 
  border-radius: 5px; 
  font-size: 18px; 
  font-weight: bold; 
  cursor: pointer; 
  text-decoration: none; 
  color: white; 
  transition: 0.3s; 
  transform: scale(0); 
  animation: ac-btnPop 0.8s forwards; 
}
.ac-btn-member { background-color: #0505AB; animation-delay: 1.0s; }
.ac-btn-guest { background-color: #D9072A; animation-delay: 1.1s; }

.ac-button-row { 
  display: flex; 
  justify-content: space-between; 
  gap: 15px; 
  margin-top: 10px; 
  width: 100%;
}

.ac-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  user-select: none;
  border: none;
}
.ac-btn-primary { background-color: #003366; color: white; }
.ac-btn-primary:hover { background-color: #00509e; }
.ac-btn-secondary { background-color: #f0f0f0; color: #003366; border: 1.8px solid #ccc; }
.ac-btn-secondary:hover { background-color: #d9d9d9; border-color: #00509e; color: #00509e; }

/* --- 7. UTILITIES & MISC --- */
.ac-toggle-link { 
  display: block; 
  text-align: center; 
  margin-top: 15px; 
  font-size: 15px; 
  color: #ffffff;             /* Fixed: Changed from black (#000) to white for readability on dark background */
  text-decoration: none; 
  font-weight: 500; 
  transition: color 0.2s; 
}
.ac-toggle-link:hover { 
  text-decoration: underline; 
  color: #00509e; 
}

.ac-login-message { 
  margin-bottom: 5px; 
  margin-top: 5px; 
  font-weight: 600; 
  font-size: 15px; 
  text-align: center; 
  padding: 0 10px; 
  display: none; 
  transition: opacity 0.5s; 
}
.ac-login-message.error { color: #d9534f; }
.ac-login-message.success { color: #28a745; }

.ac-honeypot { 
  display: none !important; 
  visibility: hidden !important; 
  height: 0 !important; 
  width: 0 !important; 
  overflow: hidden !important; 
}

@media print { 
  #legalModal, #legalContentWrapper, #legalContent { display: none !important; }
}

/* --- 8. MOBILE RESPONSIVE QUERIES --- */
@media (max-width: 480px) {
  #ac-selection-zone { 
    flex-direction: column; 
    width: 100%; 
    max-width: 300px; 
  }
  .ac-btn-choice { 
    width: 100%; 
    padding: 15px; 
    font-size: 18px; 
  }
  .ac-login-container { 
    padding: 20px; 
    width: 95%; 
    box-sizing: border-box;
  }
  .ac-accesslogo { 
    margin-bottom: 25px; 
    width: 120px; 
  }
  .ac-button-row {
    flex-direction: column;   /* Stack secondary rows on tiny screens if needed */
    gap: 10px;
  }
}