@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');


/* Centrer le formulaire dans la page */
.container.formulaire-recherche {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styles pour la barre de recherche */
.form-control {
    width: 250px; /* Largeur fixe de 250px pour la barre de recherche */
}

/* Aligner le bouton avec la barre de recherche */
.form-group {
    display: flex;
    align-items: center;
}


/* Appliquer flexbox sur le conteneur du formulaire pour aligner les enfants horizontalement */
.form-inline {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Suppression des marges supplémentaires qui pourraient affecter l'alignement */
.form-group {
    margin-bottom: 0; /* Élimine la marge en bas du form-group */
}

/* Ajuster le style du bouton pour qu'il soit au même niveau que la barre de recherche */
.btn-lg {
    height: auto; /* Hauteur ajustée pour correspondre à la hauteur de l'input avec padding et bordures */
    line-height: 1.5; /* Assure que le texte à l'intérieur du bouton est centré verticalement */
    border-radius: 10px !important;
    margin-left: 5px;
}


/* Style pour la popup de non autorisation de code postal */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    text-align: center;
	z-index:9999;
}

.popup-container p {
    margin-bottom: 20px;
    font-family: Jost !important;
    font-size: 16px;
    color: black;
    line-height: 1.2em;
}

.btn-venir-chercher {
display: inline-block;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 99px;
    transition: background-color 0.3s ease;
    font-family: 'Jost';
    font-size: 14px;
}

.btn-venir-chercher:hover {
    background-color: #27ae60;
	color:white;
}

@media (max-width: 600px) {
    .popup-container {
        width: 90%;
        padding: 10px;
    }
}




.btn-rechercher:hover {
    background-color: #27ae60;
	color:white;
}

@media (max-width: 768px) {
    .recherche-code-postal-container {
        flex-direction: column;
        max-width: 100%;
    }

    .input-code-postal {
        width: 300px; /* Ajustez selon la largeur désirée sur mobile */
        margin-bottom: 0px;
    }

    .btn-rechercher {
        width: 40px;
        height: 40px !important;
        border-radius: 50px;
    }

    .icon-placeholder {
        left: 50%; /* Centrer l'icône dans le champ de saisie sur mobile */
        transform: translate(-50%, -50%);
    }
}

.switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh; /* Ajustez la hauteur selon les besoins */
}

.switch-container2 {
	height:100px;


}

.emporterbg {
    background: white;
    height: auto;
    width: 300px;
    border-radius: 5px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 9999;
}

.emporterbg p {
margin-bottom:5px;
}

.horairea {
    margin-bottom: 10px;
    font-family: 'Jost';
    font-size: 12px;
    color: black;
}

.boutiquea {
    font-size: 16px;
    font-weight: 500;
    color: black;
}

.adressea {
    font-size: 14px;
    font-family: 'Jost';
    color: black;
}

.custom-switch {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 34px;
    background-color: #1b1a16a6;
    border-radius: 17px;
    overflow: hidden;
    font-family: 'Jost', sans-serif;
    user-select: none;
}

.switch-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.switch-label {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;

}

.switch-text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 50%;
    height: 100%;
    line-height: 34px;
    transition: color 0.3s;
    z-index: 2;
    text-align: center;
    color: white; /* Initial color for both, will be overridden based on checkbox state */
	font-family: system-ui;
    font-weight: 500;
    font-size: 12px;
}

.switch-text-left {
    left: 0;
}

.switch-text-right {
    right: 0;
}

.switch-button {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 0px); /* Ajustez ici si nécessaire */
    height: calc(100% - 4px);
    background-color: #fff;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
    z-index: 1; /* Ensure the switch button is above the text layers */
}




/* When the checkbox is not checked, "En livraison" is the selected state */
.switch-checkbox:not(:checked) + .switch-label .switch-text-left {
    color: black; /* Makes "En livraison" text black indicating it's selected */
}

/* When the checkbox is checked, "À emporter" is the selected state */
.switch-checkbox:checked + .switch-label .switch-text-right {
    color: black; /* Makes "À emporter" text black indicating it's selected */
}

/* Inverts the color for the unselected side */
.switch-checkbox:checked + .switch-label .switch-text-left,
.switch-checkbox:not(:checked) + .switch-label .switch-text-right {
    color: white; /* Makes unselected text white */
}

.switch-button {
    /* Existing styles */
}

.switch-checkbox:checked + .switch-label .switch-button {
    transform: translateX(calc(100% - 4px)); /* Ajusté pour tenir compte du padding/bordure */
}