/**
 * Page Inscription - Styles spécifiques
 * 
 * Styles uniquement pour la page d'inscription
 * Structure: 2 steps (step-0, step-1) avec navigation
 * Design identique à connexion/forgot-password
 * 
 * @package SecudealV2
 * @since 2.0.0
 */

/* ========== LAYOUT (hérité de style.css body.secudeal-v2-auth) ========== */

/* ========== CARD INSCRIPTION ========== */

#inscription {
  /* Styles de base définis dans style.css pour #connexion */
  /* On ajoute uniquement les spécificités inscription */
  max-width: 100%;
  overflow: hidden; /* Empêcher le débordement des animations slide */
  position: relative;
}

/* Logo */
#inscription img {
  max-width: 100%;
  height: auto !important;
}

/* ========== STEPS NAVIGATION ========== */

/* Conteneur des steps - Position relative pour les animations absolues */
#formInscription {
  position: relative;
  min-height: 500px; /* Hauteur minimale pour éviter les sauts */
}

.step {
  transition: transform 0.3s ease-out;
  width: 100%;
}

.step.d-none {
  display: none !important;
}

/* Pendant les animations, les steps doivent être en position absolue pour se superposer */
.step-exiting-forward,
.step-entering-forward,
.step-exiting-backward,
.step-entering-backward {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Animation d'entrée depuis la droite (Step 0 → Step 1) */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animation de sortie vers la gauche (Step 0 → Step 1) */
@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* Animation d'entrée depuis la gauche (Step 1 → Step 0) */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animation de sortie vers la droite (Step 1 → Step 0) */
@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Application des animations selon la direction */
.step-exiting-forward {
  animation: slideOutToLeft 0.3s ease-in forwards;
}

.step-entering-forward {
  animation: slideInFromRight 0.3s ease-out forwards;
}

.step-exiting-backward {
  animation: slideOutToRight 0.3s ease-in forwards;
}

.step-entering-backward {
  animation: slideInFromLeft 0.3s ease-out forwards;
}

/* Smooth transitions pour tous les champs de formulaire */
.form-control,
.form-select,
.form-floating,
.btn {
  transition: all 0.2s ease-in-out;
}

/* Animation pour l'apparition des champs conditionnels */
.form-group-fade-in {
  animation: slideInUp 0.3s ease-in-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== PARRAINAGE SWITCH ========== */

.form-check-input {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--secudeal-bleu-clair);
  border-color: var(--secudeal-bleu-clair);
}

/* ========== SLOGAN COUNTER ========== */

#sloganCount {
  transition: color 0.3s ease;
}

/* ========== MANUAL ADDRESS TOGGLE ========== */

#btnToggleAddress {
  font-style: italic;
  color: var(--secudeal-bleu-clair);
}

#btnToggleAddress:hover {
  color: var(--secudeal-bleu-moyen);
  text-decoration: underline !important;
}

#manualAddressFields {
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }

  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* ========== FORM-FLOATING AVEC INTL TEL INPUT ========== */

/* Conteneur téléphone + bouton Vérifier sur la même ligne */
.phone-verify-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.phone-input-wrapper {
  flex: 1;
}

/* Bouton Vérifier aligné avec le champ (80px de hauteur) */
.btn-verify-phone {
  height: 80px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Le wrapper intlTelInput casse le form-floating, on doit le gérer */
.form-floating:has(.iti) {
  position: relative;
}

/* Label pour le téléphone avec intlTelInput */
.form-floating:has(#phone)>label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 27px 16px 31px 60px;
  /* Centré verticalement : (80px - 18px) / 2 = 31px */
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  color: var(--bs-body-color);
  font-size: 18px;
  z-index: 3;
}

/* Label réduit quand le champ a une valeur ou est focus */
.form-floating:has(#phone:focus)>label,
.form-floating:has(#phone.has-value)>label {
  opacity: 1;
  transform: scale(0.75) translateY(-0.75rem) translateX(0.15rem);
  font-size: 14px;
  padding-left: 75px !important;
}

/* Dans input-group, on supprime le placeholder (déjà fait en HTML avec placeholder=" ") */
/* Le label flottant Bootstrap va se comporter normalement */

/* ========== INPUT-GROUP AVEC BOUTON VÉRIFIER ========== */

/* Boutons de vérification dans input-group (téléphone, email) */
#btnVerifyPhone,
#btnVerifyEmail {
  height: 80px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 0 8px 8px 0 !important;
  /* Coins arrondis à droite uniquement */
  white-space: nowrap;
  flex-shrink: 0;
}

/* Input dans input-group : coins arrondis à gauche uniquement */
.input-group>.form-floating>.form-control,
.input-group>.form-floating>.iti {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ========== VERIFICATION CONTAINERS ========== */

#codePhoneContainer,
#emailContainer,
#codeEmailContainer,
#passwordContainer,
#recaptchaContainer {
  animation: slideIn 0.3s ease-in-out;
}

/* ========== INTL TEL INPUT (80px HEIGHT) ========== */

/* Wrapper intlTelInput */
.iti {
  width: 100%;
  display: block;
}

/* Input téléphone = 80px (standard Secudeal) */
.iti input.form-control {
  height: 80px !important;
  font-size: 18px !important;
  padding-left: 60px !important;
  /* Espace pour le drapeau */
  border: 1px solid #e0e0e0 !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background-color: #ffffff !important;
}

.form-floating .iti .form-control-plaintext:focus,
.form-floating .iti .form-control-plaintext:not(:placeholder-shown),
.form-floating .iti .form-control:focus,
.form-floating .iti .form-control:not(:placeholder-shown),
.form-floating .iti .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}

/* Conteneur drapeau aligné avec input 80px */
.iti__flag-container {
  height: 80px !important;
  z-index: 2;
}

.iti__selected-country-primary {
  padding: 0 18px !important;
}


.iti__selected-flag {
  height: 80px !important;
  padding: 0 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
}

/* Flèche dropdown */
.iti__arrow {
  margin-left: 6px !important;
}

/* Hover état */
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Dropdown pays */
.iti__country-list {
  width: 100%;
  max-width: 400px;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.iti__country {
  padding: 10px 12px !important;
  font-size: 16px !important;
}

.iti__country:hover {
  background-color: var(--secudeal-bleu-clair) !important;
  color: white !important;
}

.iti__country.iti__highlight {
  background-color: var(--secudeal-bleu-moyen) !important;
  color: white !important;
}

/* Mobile backdrop for country selector */
#itiBackdrop {
  z-index: 1040;
}

.iti--container {
  z-index: 1050;
}

/* ========== RECAPTCHA RESPONSIVE ========== */

#recaptchaContainer .g-recaptcha {
  display: inline-block;
}

@media (max-width: 575px) {
  #recaptchaContainer .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

/* ========== SELECTS DE PAYS (Bootstrap-select) ========== */

/* Retirer les borders du bouton créé par Bootstrap-select */
.bootstrap-select .dropdown-toggle {
  border: none !important;
  box-shadow: none !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Style du dropdown menu */
.bootstrap-select .dropdown-menu {
  border: 1px solid #dee2e6;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
  #inscription {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 575px) {
  #inscription h1 {
    font-size: 24px !important;
  }

  #inscription h3 {
    font-size: 18px !important;
  }

  /* Téléphone + bouton en colonne sur mobile */
  .phone-verify-container {
    flex-direction: column;
    gap: 12px;
  }

  .btn-verify-phone {
    width: 100%;
  }
}