/* Login Modal Styles */
.login-modal {
  max-width: 60vmin;
  width: 80%;
}

.login-modal .modal-header {
  text-align: center;
}

.login-modal .modal-header h2 {
  text-align: center;
  margin: 0 auto;
}

.login-message {
  text-align: center;
  margin-bottom: 0;
  font-size: 2.2vmin;
  line-height: 1.4;
  color: transparent;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

.login-message:has(.login-error),
.login-message:has(.login-success) {
  color: initial;
  min-height: auto;
  height: auto;
  margin-bottom: 3vmin;
}

.login-message .login-error,
.login-message .login-success {
  color: initial;
}

.login-input-group {
  margin-bottom: 2.5vmin;
}

.login-input-group label {
  display: block;
  margin-bottom: 1vmin;
  font-weight: bold;
  font-size: 2vmin;
}

.login-input-group input {
  width: 100%;
  padding: 1.5vmin;
  border-radius: 1vmin;
  font-size: 2.2vmin;
  box-sizing: border-box;
  outline: none;
}

.login-input-group input:focus {
  /* Focus styles will be set dynamically */
}

.login-buttons {
  text-align: center;
  margin-top: 3vmin;
}

.login-button {
  border: none;
  padding: 1.8vmin 4vmin;
  border-radius: 1vmin;
  font-size: 2.2vmin;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 15vmin;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-0.2vmin);
}

.login-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.login-error {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  padding: 1.5vmin;
  border-radius: 1vmin;
  margin-bottom: 2vmin;
  border: 0.1vmin solid rgba(220, 53, 69, 0.3);
}

.login-success {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  padding: 1.5vmin;
  border-radius: 1vmin;
  margin-bottom: 2vmin;
  border: 0.1vmin solid rgba(40, 167, 69, 0.3);
}