body {
    background-color: #f4f4f9;
    font-family: 'Poppins', sans-serif;

}
.profile-container {
    display: flex;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.profile-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce */
}

.profile-info h2 {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
}
.profile-info p {
    margin: 2px 0;
    color: #666;
}
.delivery-card {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.order-number {
    font-size: 18px;
    font-weight: bold;
}
.info-icon {
    font-size: 20px;
    cursor: pointer;
    color: #007bff;
}
.hidden-details {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.new-dot {
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
}
.badge {
    padding: 5px 10px;
    border-radius: 5px;
}

.product-info img {
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.badge-finalized { background-color: green; color: white; }
.badge-pending { background-color: orange; color: white; }
.badge-other { background-color: gray; color: white; }

/* INSCRIPTION */
        /* Conteneur du formulaire */
        .register-container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        /* Titre */
        .register-container h2 {
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            color: #333;
        }

        /* Champs de formulaire */
        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }

        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            border-color: #007bff;
            outline: none;
        }

        /* Bouton d'inscription */
        button[type="submit"] {
            width: 100%;
            padding: 0.75rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* Messages de succès ou d'erreur */
        .message {
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        .message.success {
            color: #28a745;
        }

        .message.error {
            color: #dc3545;
        }

        /* Lien pour se connecter (optionnel) */
        .login-link {
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: #555;
        }

        .login-link a {
            color: #007bff;
            text-decoration: none;
        }

        .login-link a:hover {
            text-decoration: underline;
        }




                /* Conteneur du formulaire */
        .login-container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        /* Titre */
        .login-container h2 {
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            color: #333;
        }

        /* Champs de formulaire */
        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }

        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            border-color: #007bff;
            outline: none;
        }

        /* Bouton de connexion */
        button[type="submit"] {
            width: 100%;
            padding: 0.75rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* Messages d'erreur */
        .error-message {
            color: #dc3545;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        /* Lien pour s'inscrire (optionnel) */
        .register-link {
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: #555;
        }

        .register-link a {
            color: #007bff;
            text-decoration: none;
        }

        .register-link a:hover {
            text-decoration: underline;
        }


/* CONNEXION  */

        /* Conteneur du formulaire */
        .login-container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        /* Titre */
        .login-container h2 {
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            color: #333;
        }

        /* Champs de formulaire */
        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }

        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            border-color: #007bff;
            outline: none;
        }

        /* Bouton de connexion */
        button[type="submit"] {
            width: 100%;
            padding: 0.75rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* Messages d'erreur */
        .error-message {
            color: #dc3545;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        /* Lien pour s'inscrire (optionnel) */
        .register-link {
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: #555;
        }

        .register-link a {
            color: #007bff;
            text-decoration: none;
        }

        .register-link a:hover {
            text-decoration: underline;
        }

        .success-message {
            background-color: #d4edda; /* Fond vert clair */
            color: #155724; /* Texte vert foncé */
            padding: 15px 20px; /* Espacement intérieur */
            border: 1px solid #c3e6cb; /* Bordure verte */
            border-radius: 5px; /* Coins arrondis */
            text-align: center; /* Centrer le texte */
            margin: 20px auto; /* Centrer horizontalement */
            max-width: 400px; /* Largeur maximale */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre portée */
            animation: fadeIn 0.5s ease-in-out; /* Animation d'apparition */
        }
        
        /* Animation pour faire apparaître le message */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }