/* Style pour cacher la popup avant l'initialisation de Vue */
.vue-not-loaded [v-if] {
   display: none !important;
}

/* Fallback pour le dégradé si Tailwind n'est pas encore chargé */
.bg-modal-gradient {
   background: linear-gradient(90deg, #5de0e6, #004aad);
}

/* Fallback pour la couleur du corps de la modal si Tailwind n'est pas encore chargé */
.bg-modal-body {
   background-color: #b87549;
}

/* Animation améliorée pour les popups */
@keyframes popup-zoom-in {
   0% {
      transform: scale(0.75) translateY(-20px);
      opacity: 0;
   }
   100% {
      transform: scale(1) translateY(0);
      opacity: 1;
   }
}

@keyframes popup-zoom-out {
   0% {
      transform: scale(1) translateY(0);
      opacity: 1;
   }
   100% {
      transform: scale(0.75) translateY(-20px);
      opacity: 0;
   }
}

.popup-entering {
   animation: popup-zoom-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.popup-leaving {
   animation: popup-zoom-out 0.3s ease-in forwards;
}

#popup-app > div > div {
   transform: scale(0.01) translateY(-20px);
   opacity: 0;
   transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
   opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Force l'application de l'animation pour la première ouverture */
#popup-app > div.opacity-0 > div {
   transform: scale(0.01) translateY(-20px);
   opacity: 0;
}

#popup-app > div.opacity-100 > div {
   transform: scale(1) translateY(0);
   opacity: 1;
}

/* Amélioration de la visibilité de l'animation */
#popup-app > div > div {
   will-change: transform, opacity;
   backface-visibility: hidden;
   perspective: 1000px;
}

/* Styles pour les champs de formulaire pour assurer un arrondi visible */
#popup-app input[type="text"],
#popup-app input[type="email"],
#popup-app input[type="password"],
#popup-app input[type="tel"],
#popup-app select,
#popup-app textarea {
   border-radius: 0.25rem !important; /* Force le même arrondi que la classe rounded */
   -webkit-appearance: none; /* Supprime les styles natifs des navigateurs */
   appearance: none;
   border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordure légère pour mieux voir l'arrondi */
}

/* Position de la popup en tenant compte du header de 70px */
#popup-app .fixed.inset-0 {
   height: 100vh;
   /* padding-top: 70px; */
   justify-content: center;
   align-items: center;
   padding-top: 0; /* Supprimer le padding-top existant */
}

/* Ajout de padding pour les tablettes */
@media (min-width: 768px) and (max-width: 1023px) {
   #popup-app .fixed.inset-0 {
      padding-left: 50px;
      padding-right: 50px;
   }
}

#popup-app button {
   width: 217px !important;
   height: 42px !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
}

/* Style pour les boutons désactivés */
#popup-app button:disabled {
   opacity: 0.7;
   cursor: not-allowed;
}

/* Correction pour la hauteur maximale de la popup - Supprimer la limite de hauteur */
.max-w-md {
   max-width: 28rem !important;
}

/* S'assurer que les boutons sociaux sont bien centrés */
.grid.grid-cols-3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: center;
   justify-content: center;
}

/* Assurer que les icônes sont bien centrées dans les boutons */
.flex.items-center.justify-center {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

/* Ajuster la hauteur des boutons sociaux */
.h-\[35px\] {
   height: 35px !important;
   line-height: 35px !important;
}

/* Pour les très petits écrans */
@media (max-width: 400px) {
   .max-w-md {
      max-width: 95vw !important;
   }
}

/* Ajustements d'espacement pour mobile */
@media (max-width: 768px) {
   .gap-3 {
      gap: 0.5rem !important;
   }

   .py-2 {
      padding-top: 0.375rem !important;
      padding-bottom: 0.375rem !important;
   }
}

/* Styles pour Stripe */
#simple-card-element {
   background-color: white;
   border: 1px solid #ced4da;
   padding: 10px;
   border-radius: 4px;
   min-height: 40px;
}

/* Assurer que l'iframe Stripe est visible et interactif */
#simple-card-element iframe {
   opacity: 1 !important;
   z-index: 10 !important;
}

/* Style de focus pour le formulaire Stripe */
#simple-card-element.StripeElement--focus {
   border-color: #80bdff;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Style d'erreur pour le formulaire Stripe */
#simple-card-element.StripeElement--invalid {
   border-color: #dc3545;
}

/* Style pour le sous-menu utilisateur */
.user-dropdown {
   position: relative;
   display: inline-block;
}

.user-dropdown-content {
   display: none;
   position: absolute;
   top: 100%;
   left: -25%;
   background-color: #fff;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 100;
   border-radius: 4px;
   padding: 5px 0;
}

/* Sur desktop, on adapte les couleurs et l'espacement des boutons nav-button dans le dropdown */
.user-dropdown-content .nav-button {
   width: 100%;
   text-align: left;
   color: #333;
}

/* Affichage du sous-menu au hover sur desktop */
@media (min-width: 769px) {
   .user-dropdown:hover .user-dropdown-content {
      display: block;
   }
}

/* Gestion du sous-menu pour mobile - toujours visible */
@media (max-width: 768px) {
   .user-dropdown {
      display: block;
      width: 100%;
   }

   .user-dropdown-content {
      display: block; /* Toujours visible sur mobile */
      position: static;
      width: 100%;
      box-shadow: none;
      background-color: transparent;
      border-radius: 0;
      padding: 0;
   }

   /* Restaurer les couleurs originales des nav-button pour la version mobile */
   .user-dropdown-content .nav-button {
      color: white;
      text-align: center;
      /* Les autres styles seront hérités de la classe nav-button */
   }

   .user-dropdown > a:first-of-type {
      display: none;
   }
}

/* Assure que le sous-menu n'affecte pas l'alignement des autres éléments */
.user-dropdown .nav-button {
   display: inline-block;
}