/**
 * Theme Name:     Astra Child
 * Author:         Brainstorm Force
 * Template:       astra
 * Text Domain:	   astra-child
 * Description:    The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
 */
/**
 * Theme Name:     Astra Child
 * Author:         Brainstorm Force
 * Template:       astra
 * Text Domain:    astra-child
 * Description:    Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
 */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

.container h3{
    font-size: 19px ;
    text-align: center;
    clear: both !important;
    display: block !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    position: relative;
}

.brand-block {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-weight: 600;
    /* Ajout des nouvelles propriétés */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px; /* Hauteur minimale fixe */
}

.brand-block img {
    max-width: 100%;
    width: 80px;
    height: 80px; /* Hauteur fixe */
    margin-bottom: 10px;
    border-radius: 4px;
    object-fit: contain; /* Garde les proportions de l'image */
}

.brand-block p {
    margin: 0; /* Retire les marges par défaut */
    text-align: center;
    width: 100%; /* Force la largeur complète */
    line-height: 1.2; /* Ajuste l'espacement des lignes */
}

.brand-block:hover {
    border:2px solid;
    border-color: #61b15a;
    color:#61b15a;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.brand-block.active {
    /*background-color: #e0e0e0;*/
    border:2px solid;
    border-color: #61b15a;
    color:#61b15a;
    font-weight: 600;
}

.brand-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.brand-image.loaded {
    opacity: 1;
}

.models-wrapper {
    grid-column: 1 / -1;
    width: 100%;
    margin: 20px 0;
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

.custom-fields-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    padding: 10px;
}

.custom-fields-container .bookly-form-group {
    flex: 1;
    min-width: 48%;
}

.bookly-form-group[data-type="location"] select {
    transition: background-color 0.3s ease-in-out;
}

.btn-login {
    display: inline-block;
    padding: 8px 15px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-left: 10px;
    text-align: center !important;
}

 .btn-logout {
    background-color: #A7001E !important;
    display: block;
    padding: 8px 15px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.btn-login{
    background-color: #61b15a;
}

.btn-login:hover, .btn-logout:hover {
    background-color: #000 !important;
    color:#fff;
}


.btn-login:hover a, .btn-logout:hover a,  .btn-calendrier:hover a{
    color:#fff !important;
}

 .btn-calendrier {
    background-color: #59AE65 !important;
    display: block;
    padding: 8px 15px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}


/* Style du tableau Bookly */
.bookly-appointments-table {
    background-color: #77b530 !important; /* Fond vert */
    color: #ffffff !important; /* Texte blanc */
}

/* Style des en-têtes (TH) */
.bookly-appointments-table th {
    background-color: #77b530 !important; /* Fond vert */
    color: #ffffff !important; /* Texte blanc */
    padding: 10px;
    font-weight: bold;
}

/* Style du corps du tableau (TD) */
.bookly-appointments-table td {
    background-color: #ffffff !important; /* Fond blanc */
    color: #000000 !important; /* Texte noir */
}

/* Style des cellules du corps du tableau */
.bookly-appointments-table tbody td {
    padding: 10px;
    border: 1px solid #ddd; /* Bordures légères */
    text-align: center !important;
}

.bookly-form .bookly-form-group label{
    color: black !important;
}

.bookly-form .bookly-label-error {
    color:#A7001E !important; 
}

.bookly-form .bookly-bold{
    color:#1ca540 !important;
}

.logo-paypal{
    width: 140px !important;
}

.stripe-logo{
    width: 250px !important;
}

#post-1964{
    overflow-x: hidden !important;
    width: 100vw !important;
}

.page-id-1964 .elementor-section {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .custom-fields-container {
        flex-direction: column;
    }
    
    .custom-fields-container .bookly-form-group {
        width: 100%;
    }
}


@media (max-width: 768px) {
    .custom-fields-container {
        flex-direction: column;
    }
    
    .custom-fields-container .bookly-form-group {
        width: 100%;
    }
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.models-container {
    background-color: #f9f9f9;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.model-item {
    background-color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.model-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.model-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
}

.model-item a {
    text-decoration: none;
    color: inherit;
}

.model-item p {
    font-size: 14px;
    color: #333;
    margin: 5px 0 0;
}

.show-more-container {
    text-align: center;
    margin-top: 30px;
}

.show-more-btn {
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
}

.elementor-price-table__starting-price{
    color:#000 !important;
    font-size: 15px !important; 
    display:block !important;
    width:100% !important;
}

    /*.show-more-btn:hover {
        background-color: #4c8e46;
    }*/

    @media (max-width: 768px) {

        .brand-grid {  /* Changement du sélecteur .models-container à .brand-grid */
            grid-template-columns: repeat(2, 1fr); /* Force 2 colonnes de taille égale */
            gap: 15px;
        }
        
        .brand-block img {  /* Ajustement pour les images des marques */
            width: 60px; 
            height: 60px;
        }

        .brand-block {
            min-height: 120px;  /* Réduction de la hauteur minimale sur mobile */
            padding: 8px;  /* Réduction du padding */
        }

        .show-more-btn {
            padding: 15px;
            font-size: 14px;
        }

    }

    /* Ajout d'une media query spécifique pour les très petits écrans */
    @media (max-width: 500px) {
        .brand-grid {
            grid-template-columns: repeat(2, 1fr);  /* Maintient 2 colonnes même sur très petits écrans */
            gap: 15px;  /* Réduit encore l'espace entre les éléments */
        }
    }



    .container-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .container-wrapper h3{
        font-size: 19px ;
        text-align: center;
        clear: both !important;
        display: block !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .container-wrapper p{
        text-align: center;
        clear: both !important;
        display: block !important;
        margin-bottom: 30px !important;
    }

    .telephoneHeader{
        background: #fff;
        width:350px;
        margin-left:auto;
        margin-right:auto;
        padding: 20px;
        border-radius: 5px;
    }

    /* Styles pour le modèle spécifique */
    .specific-model {
        max-width: 150px;
        margin: 0 auto 30px auto;
        text-align: center;
        margin-bottom: 30px;
    }

    .specific-model-image {
        max-width: 300px;
        margin: 0 auto;
    }

    .specific-model-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 4px;
    }


    .brand-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .brand-logo {
        width: 90px;
        object-fit: contain;
        margin-bottom: 15px;
    }

    .brand-header h3 {
        font-size: 19px;
        text-align: center;
        clear: both !important;
        display: block !important;
        margin: 10px 0 !important;
    }


    .models-container {
        background-color: #f9f9f9;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        max-width: 1000px;  /* Limite la largeur */
        margin: 0 auto;    /* Centre le container */
    }

    .model-item {
        background-color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        transition: transform 0.2s ease;
    }

    .model-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .model-item img {
        width: 120px;
        height: 120px;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .model-item a {
        text-decoration: none;
        color: inherit;
    }

    .model-item p {
        font-size: 14px;
        color: #333;
        margin: 5px 0 0;
    }

    @media (max-width: 768px) {

        .container-wrapper {
            padding-left:20px;
            padding-right: 20px:;
        }

        .models-container {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            max-width: 100%;  /* Sur mobile, prend toute la largeur disponible */
        }

        .model-item img {
            width: 80px;
            height: 80px;
        }

        .specific-model {
            padding: 15px;
        }

        .specific-model-image {
            max-width: 200px;
        }

        .telephoneHeader{
            background: #fff;
            width:100%;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left:auto;
            margin-right:auto;
            padding: 20px;
            border-radius: 5px;
        }

    }

    .selector-container {
        max-width: 800px;
        margin-top: 40 !important;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px !important;
        font-family: Arial, sans-serif;
    }
    .selector-container .main-button {
        background: #C8A048;
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
        padding: 15px;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: bold;
    }
    .region-filter {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 15px 10px 25px 10px;
        border-bottom: 1px solid #eee;
    }
    .region-btn {
        padding: 10px 15px;
        border: 1px solid #eee;
        background: #f8f9fa;
        color: #000;
        border-radius: 4px;
        cursor: pointer;
        text-transform: capitalize;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }

    .region-btn[data-depts="all"] {
        grid-column: span 2;
        max-width: 100%;
        justify-self: center;
    }
    .region-btn.active {
        background: #61b15a;
        border: 1px solid #61b15a;
        color: white;
    }
    .content-panel {
        display: none;
        margin-top: 20px;
        /*border: 1px solid #ddd;*/
        border-radius: 8px;
        background: white;
        /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
    }
    .departements-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px 10px 15px 10px;
    }
    .departement-item {
        border: 1px solid #eee;
        border-radius: 4px;
    }
    .departement-header {
        padding: 12px 15px;
        background-color: #f8f9fa;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .departement-header:hover {
        background-color: #f0f0f0;
    }
    .villes-panel {
        display: none;
        padding: 15px;
        background-color: white;
        max-height: 300px;
        overflow-y: auto;
    }
    .ville-link {
        display: block;
        padding: 6px 0;
        color: #000;
        text-decoration: none;
        text-transform: capitalize;
        border-bottom: 1px solid #eee;
    }
    .ville-link:hover {
        text-decoration: underline;
    }
    .arrow {
        transition: transform 0.3s ease;
    }

    .active .arrow {
        transform: rotate(180deg);
    }

    .info-btn {
        display: block;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        text-decoration: none;
        padding: 5px 10px;
        color: #000;
        text-align: center;
    }

    .info-content {
        margin-top: 10px;
        padding: 20px;
        background: #f9f9f9;
        border: 1px solid #ddd;
    }

    @media (max-width: 768px) {

    .btn-login{
        display: block !important;
       margin-top:20px !important;
       margin-bottom:20px !important;
       margin-right:10px !important;
    }

    .selector-container {
        max-width: 100%;
        padding: 10px;
    }

    .selector-container .main-button {
        max-width: 90%;
        padding: 10px;
        font-size: 14px;
        margin:auto;
    }

    .region-filter {
        gap: 10px;
    }

    .departements-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

.kk-star-ratings{
    text-align: center !important;
}