/*
 * Form Confirm Submit Modal - CSS
 * Style pour la modale de confirmation de soumission de formulaire
 */

.modal {
    --bulma-modal-card-head-padding: 1.25rem;
    --bulma-modal-card-body-padding: 1.25rem;
}

/* Assure que la modale est correctement positionnée */
.modal.form-confirm-submit-modal {
    z-index: 1000;
}

/* Style pour le contenu de la modale */
.modal-card-body .form-confirm-content {
    min-height: 60px;
}

/* Style pour les boutons dans le footer */
.modal-card-foot .buttons {
    gap: 10px;
}

/* Animation de loading sur le bouton */
.modal-card-foot .button[data-action="submit"].is-loading {
    cursor: wait;
}

/* Styles pour la synthèse des champs du formulaire */
.form-summary-container {
    margin: 1rem 0;
    padding: 0.75rem;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.form-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-summary-item {
    display: flex;
    gap: 0.5rem;
}

.form-summary-label {
    font-weight: 600;
    color: #363636;
    min-width: 150px;
}

.form-summary-value {
    color: #4a4a4a;
    word-break: break-word;
}

/* Responsive : assure que la modale est bien visible sur mobile */
@media screen and (max-width: 768px) {
    .modal-card {
        width: 90vw;
        margin: 0 auto;
    }
    
    .modal-card-foot {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-card-foot .buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .modal-card-foot .button {
        width: 100%;
    }
    
    .form-summary-item {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .form-summary-label {
        min-width: auto;
    }
}