/**

 * Login Form - Styles Modernes avec Toggle

 * Design moderne pour le formulaire de connexion/inscription

 */



.modern-login-card {

  background: #fff;

  border-radius: 16px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  max-width: 1200px;

  margin: 60px auto;

}



/* ========================================

   SECTION VISUELLE (Colonne gauche)

======================================== */



.login-visual-section {

  position: relative;

  min-height: 600px;

  overflow: hidden;

}



.login-visual-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  transition: opacity 0.3s ease;

}



.login-mode-active {

  background-image: linear-gradient(135deg, rgba(0, 43, 170, 0.9), rgba(13, 110, 253, 0.9)), url('https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=1200');

}



.register-mode-active {

  background-image: linear-gradient(135deg, rgba(255, 208, 0, 0.85), rgba(255, 193, 7, 0.85)), url('https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?w=1200');

}



.login-visual-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 60px 40px;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);

}



.login-visual-content {

  color: #fff;

}



.visual-title {

  font-family: var(--heading-font);

  font-size: 42px;

  font-weight: 700;

  margin: 0;

  color: #fff;

  line-height: 1.2;

}



.visual-description {

  font-family: var(--body-font);

  font-size: 16px;

  line-height: 1.6;

  margin: 16px 0 0 0;

  color: rgba(255, 255, 255, 0.95);

}



/* ========================================

   SECTION FORMULAIRE (Colonne droite)

======================================== */



.login-form-section {

  background: #fff;

  min-height: 600px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 60px 50px;

}



.login-form-container {

  width: 100%;

  max-width: 420px;

}



/* Titres des formulaires */

.form-title {

  font-family: var(--heading-font);

  font-size: 28px;

  font-weight: 700;

  margin: 0 0 8px 0;

  color: var(--bs-dark, #212529);

}



.form-subtitle {

  font-family: var(--body-font);

  font-size: 15px;

  color: #6c757d;

  margin: 0 0 32px 0;

}



/* Formulaires */

.login-form-content {

  animation: fadeIn 0.3s ease;

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.form-group {

  margin-bottom: 20px;

}



.form-group label {

  display: flex;

  align-items: center;

  margin-bottom: 8px;

  font-weight: 600;

  color: var(--bs-dark, #212529);

  font-family: var(--body-font);

  font-size: 14px;

}



.form-group label .required {

  color: #dc3545;

}



.form-group .form-control {

  width: 100%;

  padding: 14px 16px;

  border: 1px solid #dee2e6;

  border-radius: 8px;

  font-size: 15px;

  font-family: var(--body-font);

  transition: all 0.2s ease;

}



.form-group .form-control:focus {

  outline: none;

  border-color: var(--bs-primary, #0d6efd);

  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);

}



.form-group .form-control::placeholder {

  color: #adb5bd;

}



/* Form group inline (checkbox + lien) */

.form-group-inline {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 24px;

}



.checkbox-label {

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 400;

  font-size: 14px;

  color: #6c757d;

  cursor: pointer;

}



.checkbox-label input[type="checkbox"] {

  width: 18px;

  height: 18px;

  cursor: pointer;

}



.forgot-password-link {

  color: var(--bs-primary, #0d6efd);

  text-decoration: none;

  font-size: 14px;

  font-family: var(--body-font);

  transition: color 0.2s ease;

}



.forgot-password-link:hover {

  color: var(--bs-primary, #0d6efd);

  text-decoration: underline;

}



.woocommerce-privacy-policy-text p {

  color: var(--bs-gray-medium);

  font-family: var(--body-font);

  font-size: var(--text-sm);

  font-weight: 400;

  line-height: normal;

}



.woocommerce-privacy-policy-text a {

    color: var(--bs-primary);

    text-decoration: none;

}



/* Footer avec lien inscription */

.login-form-footer {

  margin-top: 24px;

  text-align: center;

  padding-top: 24px;

  border-top: 1px solid #e9ecef;

}



.login-form-footer p {

  margin: 0;

  font-family: var(--body-font);

  font-size: 14px;

  color: #6c757d;

}



.login-form-footer a {

  color: var(--bs-primary);

  text-decoration: none;

  font-weight: 600;

  transition: color 0.2s ease;

}



.login-form-footer a:hover {

  color: var(--bs-primary);

  text-decoration: underline;

}



/* Boutons */

.btn-block {

  width: 100%;

  padding: 14px 24px;

  font-size: 15px;

  font-weight: 600;

  font-family: var(--body-font);

  text-align: center;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

}



.btn-primary {

  background: var(--bs-primary);

  color: #fff;

}



.btn-primary:hover {

  background: var(--bs-primary);

  opacity: 0.9;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 43, 170, 0.2);

}



.btn-secondary {

  background: var(--bs-secondary);

  color: var(--bs-gray-dark);

}



.btn-secondary:hover {

  background: var(--bs-secondary);

  color: var(--bs-gray-dark);

  opacity: 0.9;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(255, 208, 0, 0.3);

}



/* Info text */

.form-info {

  font-family: var(--body-font);

  font-size: 14px;

  color: #6c757d;

  margin-bottom: 20px;

  line-height: 1.5;

}



/* Messages d'erreur/succès */

.woocommerce-notices-wrapper {

  margin-bottom: 24px;

}



/* ========================================

   RESPONSIVE

======================================== */



@media (max-width: 991px) {

  .modern-login-card {

    margin: 20px;

  }



  .login-visual-section {

    min-height: 300px;

  }



  .login-form-section {

    min-height: auto;

    padding: 40px 30px;

  }



  .visual-title {

    font-size: 32px;

  }



  .visual-description {

    font-size: 14px;

  }



  .form-title {

    font-size: 24px;

  }

}



@media (max-width: 575px) {

  .modern-login-card {

    margin: 10px;

    border-radius: 12px;

  }



  .login-visual-section {

    min-height: 250px;

  }



  .login-form-section {

    padding: 30px 20px;

  }



  .visual-title {

    font-size: 24px;

  }



  .visual-description {

    font-size: 13px;

  }



  .form-title {

    font-size: 22px;

  }



  .form-subtitle {

    font-size: 14px;

    margin-bottom: 24px;

  }



  .form-group-inline {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

  }

}



/* ========================================

   MESSAGES D'ERREUR

======================================== */



.invalid-feedback {

  display: block;

  width: 100%;

  margin-top: 8px;

  font-size: 14px;

  color: #dc3545;

  font-weight: 500;

  animation: fadeIn 0.2s ease-out;

}



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.form-control.is-invalid {

  border-color: #dc3545;

}



.form-control.is-invalid:focus {

  border-color: #dc3545;

  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);

}