/* Style général du formulaire */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

.form-container {
    max-width: 1000px;
    min-width: 768px;
    margin: 30px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

h2 {
    margin-bottom: 30px !important;
    text-align: center;
}

.form-container p {
    margin-bottom: 1rem;
  }

.div-checkbox-group{
    display: flex;              /* Utilisation de Flexbox pour le centrage */
    flex-direction: column;     /* Les éléments s'empilent verticalement */
      /* Centre les éléments horizontalement */
    padding: 20px;              /* Padding interne pour aérer le conteneur */
    gap: 15px;                  /* Espacement entre chaque checkbox-group */
    max-width: 400px;           /* Largeur maximale pour limiter l'étalement */
    margin-bottom: 30px;

}
/* Espacement entre les champs */
.input-group {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-direction: column;
}

/* Style des labels */
.input-group label {
    font-size: 14px;
    color: #555;
    margin-bottom: -10px;
}

/* Style des champs de formulaire */
.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="date"],
.input-group input[type="number"],
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 15px;
    font-size: 15px;
    color: #333;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Focus sur les champs */
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: #B5451C;
    background-color: #e6f0ff;
    outline: none;
}

/* Style pour les boutons */
button[type="submit"] {
    padding: 12px 24px;
    background: linear-gradient(120deg, #69bcd7, #0079b2);
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 30px;

}

/* Hover effect for submit button */
button[type="submit"]:hover {
    transform: scale(1.05);
}

/* Section pour les cases à cocher */
.checkbox-group label {
    font-size: 0.9em;
    color: #666;
    cursor: pointer;
    display: inline-block;
    margin-top: 8px;
}

/* Custom styling pour les cases à cocher */
.checkbox-group input[type="checkbox"] {
    margin-right: 8px;
}

/* Formulaire pré-rempli ou standard */
#patient_form, #standard_form {
    margin-bottom: 30px;
}

/* Style pour la section des animaux */
#animal_fields {
    display: none;
    margin-top: 20px;
}

/* Styles pour les sections d'animaux */
#animal_fields .input-group {
    margin-bottom: 15px;
}

#animal_fields label {
    font-weight: bold;
}

#animal_fields input[type="text"],
#animal_fields input[type="number"],
#animal_fields select {
    margin-top: 5px;
}

             /* Largeur selon le contenu */

             /* Style pour les champs readonly empilés */
.input-readOnly {
    display: flex;
    flex-direction: column;    /* Les éléments s'empilent verticalement */
    gap: 10px;                 /* Espacement entre les champs */
    margin-bottom: 30px; 
           /* Espacement sous le bloc */
}

.input-readOnly input[readonly] {
    border: none;              /* Pas de bordure */
    background: transparent;   /* Pas de fond */
    padding: 0 5px;            /* Petit padding horizontal */
    color:#0079b2 ;               /* Couleur du texte */
    font-family: inherit;      /* Police cohérente */
    cursor: default;           /* Curseur normal */
    width: auto;               /* Largeur selon le contenu */
    display: block;            /* Comportement en bloc pour empilement */
}

/* Style pour le groupe Date de naissance et Âge */
.inline-group {
    display: flex;             /* Alignement horizontal pour date et âge */
    flex-direction: row;       /* Sur la même ligne */
    gap: 15px;                 /* Espacement entre date et âge */
    flex-wrap: nowrap;         /* Pas de retour à la ligne */
    margin-bottom: 15px;       /* Espacement sous le bloc */
}

.input-wrapper {
    display: flex;
    flex-direction: column;    /* Label au-dessus de l'input */
    gap: 5px;                  /* Espacement entre label et input */
}

.input-wrapper label {
    font-size: 14px;           /* Taille du texte du label */
    color: #555;               /* Couleur du label */
}

.input-wrapper input {
    padding: 5px;              /* Padding pour les champs éditables */
    border: 1px solid #ccc;    /* Bordure légère pour les éditables */
    border-radius: 8px;        /* Coins arrondis */
    width: 150px;    
    color:  #333;     
    background-color:white ;       /* Largeur fixe, ajuste si besoin */
}


.input-wrapper input:focus {
    border: 1px solid #B5451C;  
}


.input-wrapper input[readonly] {
    border: none;              /* Pas de bordure pour readonly */
    background: transparent;   /* Pas de fond */
    padding: 0 5px;            /* Padding minimal */
    color: #333;               /* Couleur du texte */
    width: auto;               /* Largeur selon contenu */
}


.info-message {
    color: #721c24;  /* Couleur du texte rouge foncé */
    font-style: italic;
    padding: 10px 15px;  /* Espacement interne */
    border-radius: 5px;  /* Coins arrondis */
    margin:2%;
    padding: 20px; 
    text-align: center;

}

/* Ajustement du formulaire pour la version mobile */
@media (max-width: 768px) {



.inline-group { display: block;}
   
.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 5px;
  }

    .form-container {
        padding: 10px;
        margin: 10px;
        min-width: 250px;
        border: 0px;
    }

    .input-group input,
    .input-group select,
    .input-group textarea {
        font-size: 14px;
        padding: 12px;
    }

    button[type="submit"] {
        font-size: 14px;
        padding:6px;
    }
}

/* Style pour les champs de notification ou alertes */
.toast-box {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0079b2;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.toast-box.error {
    background-color: #f44336;
}

.toast-box.success {
    background-color: #4caf50;
}

/* Position de l'alert box */
.alert-box {
    background-color: #f44336;
    color: white;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 8px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    text-align: center;
    font-weight: 600;
}

/* Additional styling for the form submit button in mobile view */
@media screen and (max-width: 576px) {
    button[type="submit"] {
        width: 100%;
    }
}



/* Titre principal */
.form-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

/* Titres des sections */
.section-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Sections d'adresse et animaux */
.section-address, .section-animals {
    margin-top: 20px;
}

/* Groupe de cases à cocher */
.checkbox-section {
    margin-top: 20px;
}

/* Bouton de suppression d'animal */
.btn-remove-animal {
    color: #f44336;
}

/* Bouton d'ajout d'animal */
.btn-add-animal {
    color: #0079b2;
    font-size: 20px;
}

/* Bouton de soumission */
.btn-submit {
    margin-top: 30px;
}