/* .form-control:disabled {background-color: white;} */

.block-form-event {
    /* Structure globale */
    display: flex;
    flex-direction: column;
    width: 100%;

    & .block-title {
        text-align: center;
    }

    & .block-title, .blockDate {

        /* margin-bottom: 10px;  */

        & input {
            text-align: center;
        }
    }

    & .blockDate {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        margin-top: 40px;
        
        & .formDate {
            flex: 1 1 calc(50% - 10px); /* 50% moins la moitié du gap */
            min-width: 200px;
            margin-top: 0;
            display: flex;
            flex-direction: column;
        }
        
        & input, & button {
            margin-bottom: 10px;
        }
        
        @media (max-width: 767px) {
            flex-direction: column;
            
            & .formDate {
                flex: 1 1 100%;
                width: 100%;
                padding: 0;
                margin-bottom: 15px;
            }
        }
    }

    & .loader {
        opacity: 0.9;
        width: 100%;
        height: 400px;
        display: none;
    }

    & .blocImageGenerateur .custom-file,
    & .block-title input,
    & .blockDate input,
    & .blocFormulaireDetail .select2-container,
    & .blocFormulaireDetail .form-control,
    & .custom-checkbox .custom-control-label::before,
    & .block-border,
    & .block-address,
    & .block-more
    {
        border: 1px solid lightgrey;
    }

    /* & .blocImageGenerateur {

        & .custom-file {
            height: 50px;
            overflow: hidden;
            margin-bottom: 20px;
        }
    } */

    /* & .blocAnnonceImage {display: grid;} */
    /* & .blocAnnonceImage img {
        max-width:100%;
        max-height: 415px;
        margin: 0 auto;
    } */
    
    & .form-control {
        z-index: 2;
        position: relative;
    }

    & .form-control, & .custom-file-label {
        background-color: white;
        /* padding: 0.9rem 1.2rem; */
        line-height: 3;
    }


    & .blocDetail, & .formDate {margin-top: 20px;}

    & .collection .form-group {
        border: 5px solid white;
        border-top-width: 0 ;
        border-bottom-width: 0 ;
        margin-bottom: 0;
    }

    & .collection .form-group:first-child {
        border-top-width: 5px;
    }

    & .collection .form-group .collection-row {
        margin: 0;
        padding: 5px 0 15px;
    }
    & .collection .form-group:first-child .collection-row {
        padding: 15px 0;
    }

    & .collection .form-group .collection-row .row {
        margin: 0;
    }

    /**/
    & .collection .custom-file {height:50px;}
    & .collection .images-preview {display: flex; margin:0 auto; max-height:200px}

    & .blocDetail {

        & select {
            line-height: 3em;
        }

        & .collection {
            border: 3px solid white;
            border-radius: 5px;
            box-shadow: 0 0 0 1px lightgrey;
            margin-top: 20px;

            & .collection-add {
                border: none;
                border-radius: 0;
            }

            & .btn-check + .btn {
                background-color: white;
                color: black;
                border-color: lightgrey;
            }
            .btn-check:checked + .btn {
                background-color: orange;
                color: white;
                border-color: orange;
            }
            
        }
        
        & .radio-categories {
            margin: 10px 0;
            
            & .radio-wrapper {
                background-color: white;
                display: inline-flex;
                align-items: center;
                margin: 3px 0px;
            
                & .form-check {
                    padding-left: 0;
                    margin-bottom: 0;

                    & input[type="checkbox"] {
                        display: none;
            
                        & + label {
                            display: inline-block;
                            cursor: pointer;
                            padding: 2px 5px;
                            border: 1px solid lightgrey;
                            border-radius: 5px;
                            white-space: nowrap;
                            font-size: .8em;
                        }
            
                        &:checked + label {
                            color: white;
                            background: linear-gradient(45deg, #ff9800, #ff5722);
                            border: none;
                            transition: all 0.3s ease;
                            padding: 5px;
                        }
                    }
                }
            }
        }
    }


    & .block-place {

        .ts-control {
            line-height: 3em;
        }

        .item {
            line-height: 1.6em;
            padding: 12px 0;
            box-shadow: none;
        }
    }

    & .block-price {
        display: inline-flex;
        margin: 0 auto 1em;
        padding: 0 30px;
    }

    
    
    /* 
    .funkyradio .form-check {
        padding: 0;
    }

    .funkyradio label {
        width: 100%;
        border-radius: 0px;
        border: 2px solid #D1D3D4;
        padding: 5px;
    }
    .funkyradio input:empty {
        display: none;
    }
    .funkyradio input:empty ~ label {
        display: inline-flex;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .funkyradio input:empty ~ label:before {
        padding: 25px 10px 0;
        margin: -5px 10px -5px -5px;
        top: 0;
        bottom: 0;
        left: 0;
        font-family:'fontawesome';
        content:'\f05e';
        background: #D1D3D4;
        color: #fff;
        border-radius: 0px;
    }
    .funkyradio input:hover:not(:checked) ~ label:before {
        font-family:'fontawesome';
        content:'\f05d';
        color: #C2C2C2;
    }
    .funkyradio input:hover:not(:checked) ~ label {
        color: #888;
    }
    .funkyradio input:checked ~ label:before {
        content:'\f05d';
        font-family:'fontawesome';
        color: #333;
        background-color: #ccc;
    }
    .funkyradio input:checked ~ label {
        color: #777;
    }
    .funkyradio input:focus ~ label:before {
        box-shadow: 0 0 0 3px #999;
    }
    .funkyradio input:checked ~ label:before, 
    .funkyradio input:checked ~ label {
        color: #fff;
        background-color: orange;
        border: 1px solid transparent;
    }
    .block-reductions {

        .form-check {
            display: inline-block;
            padding: 0;
            margin: 7px 7px 0 0;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            text-transform: lowercase;

            &:hover {
                color:#333;
            }
        
            input[type="checkbox"] {
                display: none;
            }
            input[type="checkbox"] + label {
                cursor: pointer;
                background-color:white;
                padding: 2px 4px;
                border: 1px solid transparent;
                border-radius: 4px;
            }
            input[type="checkbox"]:checked + label {
                background-color: #e4e4e4;
                border: 1px solid #aaa;
                color:#444;
            }

            input[type="checkbox"]:checked + label:hover {
                border: 1px solid #555;
                color:#111;
            }
        }
    }
    */

    & .trix-button-row .trix-button-group, & .trix-editor {
        background: white;
    }

    /* trix-editor .h1, trix-editor h1 {
        font-size: 1.5rem;
    } */

    /* Styles pour les boutons de la barre d'outils */

    & .trix-toolbar .trix-button {
        width: 2.5em;
        height: 2.5em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    & .trix-toolbar .trix-button::before {
        display: inline-block;
        position: relative;
        width: 1.5em;
        height: 1.5em;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    & .trix-toolbar .trix-button-group {
        overflow: hidden;
    }

    & .block-submit {
        margin-top: 50px;
        /* padding: 30px 20px;
        margin-top: 10px;
        width: 100%;
        max-width: 100%; */
    }

    & .block-submit button {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1.25rem;
    }
}

.trix-content {
    background: white;
}

@media (min-width: 767px) {
    .block-form-event .form-top-container {
        flex-wrap: nowrap;
    }
    
    /* .block-form-event .block-title {
        width: auto;
        margin-left: 12px;
    } */
    
    /* .block-form-event .blockDate {
        width: auto;
    } */

    .block-form-event {
        & .blockForm .form-title {
            /* text-align:center; */
            margin-top:10px;
        }

        /* & .blocImageGenerateur {
            display:inline-block; 
            width:33%; 
            float:right;
            padding: 20px 20px 10px 0
        } */

        & .form-primary {
            text-align: center;
            font-size: large;
        }
        & .blockDate input.multidate {font-size: small;}
        /*
        .ui-state-active, .ui-widget-content .ui-state-active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-state-hover, .ui-widget-content .ui-state-hover {
            border: initial;
            background: initial;
            font-weight: initial;
            color: initial;
        }
        */

        /* & .formDate {
            width: 49%; 
            padding: 0 8px; 
            display: inline-grid;
        } */

        & .block-cat .form-control option {
            padding:15px;
        }

        & .block-cat .form-control option {
            height: 4.5rem;
            font-size: large;
        }

        & .block-cat .select2-selection {
            padding-top: .5rem;
            padding-bottom: .5rem;
        }
        
        & .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            margin-top: 6px; margin-bottom: 6px;
        }

        & .custom-file-label::after {
            margin: 10px;
            height: 25px;
            padding: 0.2rem 1rem;
        }

        & textarea.custom-textarea {
            height: 200px;  /* Hauteur spécifique pour ce champ */
        }

        & .blocFormulaireDetail {
            /* margin:20px 0 0px 0px; */ 
        
            & .blocDetail {
                display: inline-block;
                vertical-align: top; 
                width: 30%; 
                margin: 20px 1% 10px;
            }
        }

        & .block-more {margin-left: 10px; margin-right: 10px;}

        /* & .blocDescription {width:100%; display: inline-block; padding: 0 20px 10px;}
        & .blocDescription .form-title {padding-left: 15px;} */
    }
}

.reduction-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.reduction-btn {
    font-size: 0.75rem;
    padding: 0.25rem;
    margin: 0;
    white-space: nowrap;
}

/* Assure que les boutons de réduction ressortent bien */
/* .btn-check:checked + .reduction-btn {
    background-color: #0d6efd;
    color: white;
    font-weight: 500;
} */

.hidden-trix-input {
    display: none;
}

.arkounay-ux-collection .collection-add,
.collection-add-wrapper .collection-add {
    background-color: white !important;
    padding: 10px !important;
    display: block !important;
    width: 100%;
    text-transform: uppercase;
}


.collection-add-wrapper .collection-add {
    color: black !important;
    border-color: none !important;
}

.collection-add-wrapper .collection-add:hover {
    color: black !important;
}

.form-container .block-form-event .blockForm .card {
    background-color: none !important;
    border: none !important;
}


.form-autocomplete {
    & .no-more-results, 
    & .loading-more-results {
        font-size: 0.7em;
        font-weight: bold;
        margin-top: 10px;
        color: #999;
    }
  
    & .clear-button {
        padding: 5px 0 5px 5px;
    }
  
    /* & .ts-control {
      & input {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        
        &::placeholder {
          color: #212528;
        }
      }
    } */
}

/* Style du placeholder pour le select */
.text-placeholder {
    color: #999 !important; /* Gris clair pour le placeholder */
}

/* Nouvelle organisation Flexbox pour le formulaire */
.block-form-event {
    /* Structure globale */
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px 20px 0 20px;
}

/* Conteneur Flexbox pour les premiers blocs */
.block-form-event .form-top-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
    align-items: stretch; /* Force l'alignement en hauteur */
}

/* Colonne de gauche (titre et date) */
.block-form-event .form-left-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 280px; /* Largeur minimum pour assurer la lisibilité */
}

/* Réinitialisation de la flottaison pour l'image dans la nouvelle structure */
.block-form-event .blocImageGenerateur {
    float: none;
    flex: 0 0 auto;
    width: 33%; /* Maintien de la largeur actuelle */
    display: flex;
    flex-direction: column;
    /* padding: 20px 20px 10px 0; */
    height: auto; /* Permet d'adapter la hauteur au contenu */
}

/* Conteneur de l'image pour s'adapter à la hauteur */
.block-form-event .blocImageGenerateur .blocAnnonceImage {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Prend toute la hauteur disponible */
    justify-content: space-between;
}

/* Adaptation des div contenant les images */
.block-form-event .blocImageGenerateur .img-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    flex-grow: 1; /* Permet à l'élément de s'étendre */
}

/* Adaptation des images au conteneur */
.block-form-event .blocImageGenerateur .img-form img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* Optimisation pour l'image par défaut */
.block-form-event .blocImageGenerateur .image-default {
    margin-top: auto;
}

/* Assurer que l'alerte est bien en pleine largeur */
.block-form-event .alert {
    width: 100%;
}

/* Responsive : empilé sur mobile */
@media (max-width: 767px) {
    .block-form-event .form-top-container {
        flex-direction: column;
    }
    
    .block-form-event .blocImageGenerateur {
        width: 100%;
        order: -1;
        padding: 10px;
    }
    
    .block-form-event .form-left-column {
        width: 100%;
    }
    
    .block-form-event .blocImageGenerateur .img-form img {
        max-height: 300px;
    }
}

/* Styles spécifiques pour les images de prévisualisation */
/* .block-form-event .blocImageGenerateur .img-preview {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
} */

/* Assurer que la div d'image occupe tout l'espace */
/* .block-form-event .blocImageGenerateur .img-form > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */



.block-preview {
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    min-height: 150px;
    
    & img {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 90%;
        max-height: 90%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* Modernisation du blocFormulaireDetail avec Flexbox */
.block-form-event .blocFormulaireDetail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 30px 0;
    gap: 20px; /* Espace entre les colonnes */
}

.block-form-event .blocFormulaireDetail .blocDetail {
    flex: 1 1 calc(33.33% - 14px); /* Exactement 1/3 moins l'espace des gaps */
    min-width: 250px; /* Largeur minimale pour la lisibilité */
    margin: 0; /* Suppression des marges car nous utilisons gap */
}

/* Ajustement pour mobile */
@media (max-width: 767px) {
    .block-form-event .blocFormulaireDetail {
        flex-direction: column;
    }
    
    .block-form-event .blocFormulaireDetail .blocDetail {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }
}

.blocDetail .collection-element {
    background: #f7f7f7;
}

.arkounay-ux-collection .delete-reduction {
    margin-top: 30px;
    margin-right: 60px;
}

.block-complement .collection {
    margin-top:30px;
}


.block-complement .arkounay-ux-collection .btn-collection-container {
    right: -20px;
    top: -15px;
    padding: 0;
}

.btn-remove-yt {
    position: absolute;
    right: -7px;
    top: -15px;
}

.input-group .btn-primary {
    z-index: 10 !important;
}


.youtube-results {
    max-height: 300px;
    overflow-y: auto;
}

.video-result {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.video-result:hover {
    background-color: #f5f5f5;
}

.video-result h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
}

.video-result p {
    margin: 0;
    font-size: 12px;
    color: #666;
}