/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

:root {
    --font-primary: 'Roboto', sans-serif;
    --color-yellow: #f9b301;
}

/* nav */
span.menu-text.fusion-button{
    background-color:#feb300!important;
    color:#000;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
span.menu-text.fusion-button:hover{
    background:#f2f2f2!important;
    color:#000;
}
.fa-facebook-f {
    font-size: 14px;
    margin-top: 27px;
    padding: 9px;
    padding-left: 11px;
    padding-right: 11px;
    padding: 9 10 10 9;
    border: 2px solid #fff;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.fusion-main-menu > ul > li:last-child > a{
    color:#feb300!important;
}
.fusion-main-menu > ul > li:last-child > a:hover{
    color:#fff!important;
}

/* Txt top bar */
.fusion-contact-info {
    line-height: 22px;
    text-align: center;
    font-weight: 500;
	padding-top:10px;
}

.fusion-main-menu>ul>li>a {
    line-height: 120px!important;
}

/* Rev slider */
.rev-btn{
  -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;  
}

/* Contact - Heures ouverture */
.heures{
    text-align:center;
}
.heures-ouverture{
    padding:0px;
    margin-left:auto!important;
    margin-right:auto!important;
}
.heures-ouverture li{
    list-style:none;
    text-align:center;
    line-height:.8em;
	color:#fff;
}
.heures-ouverture li p:first-child{
    width:100px;
    display:inline-block;
    font-weight: bold;
    text-align:left;
}.heures-ouverture li p:last-child{
    width:150px;
    display:inline-block;
     text-align:left;
}


/* Formulaire de contact - main  */
#wpcf7-f1043-p539-o1 .wpcf7-text{
    background-color:#000!important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#wpcf7-f1043-p539-o1 .wpcf7-email{
    background-color:#000!important;
    /*border:1px solid #fff!important;*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#wpcf7-f1043-p539-o1 p:nth-child(4), #wpcf7-f1043-p539-o1 p:nth-child(2), #wpcf7-f1043-p539-o1 p:nth-child(3){
    display:inline-block!important; 
    padding:1%;
}
#wpcf7-f1043-p539-o1 .wpcf7-textarea{
    background-color:#000!important;
    width:85%!important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#wpcf7-f1043-p539-o1.wpcf7{
    text-align:center!important;
}
#wpcf7-f1043-p539-o1 .wpcf7-submit  {
        background-color:#000!important;
    width:85%!important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left: 17px!important;
}
.wpcf7-text:focus{
    border:1px solid #feb300!important;
}

#main{
    padding:0px;
}

.grosse-icone-accueil{
    margin:20px;    

}
#row-references{
    background-color:#feb300;
    background-image:url(http://dev.atelierducellulaire.com/wp-content/uploads/2016/10/accuei_reference_bg.jpg);
    background-position:center top;
}

.link-area-box{
    margin-bottom:60px;
}

/* Content icon block */
#wrapper .post-content .content-box-heading:hover{
    color:#fff!important;
}
.fusion-content-boxes .content-container{
    font-size:16px;
}
.fusion-imageframe{
    margin-bottom:40px;
}
.separator{
    margin-top:40px;
    margin-bottom:40px;
}
/* gmap */
#gmap{
    padding:0px!important;
    padding-left:0px!important;
    padding-right:0px!important;
    
}
#gmap .fusion-row{
    width:100%!important;
    max-width:none!important;
}
#gmap-container{
    max-width:100%!important;
}
#gmap-container .gmnoprint, .gm-style-cc{
    display:none;
}
.gm-style div:nth-child(2){
    z-index:-2;
}

/* Footer */

.fusion-copyright-notice a{
    color:#818181;
}
.text-widget p{
    padding-top:0px!important;
}

/* Contact form  inforlettre */

.wpcf7-email{
    background-color:#131313!important;    
    border:2px solid #feb300!important;
  
}
.wpcf7-submit, input[type=submit] {
    background-color:#fff!important;
    border: none;
    padding: 9px!important;
    margin: 10px 0px!important;
}
.wpcf7-form .wpcf7-not-valid-tip{
    display:none!important;
}

@media (max-width: 1200px) {
#wpcf7-f1043-p539-o1 p:nth-child(2), #wpcf7-f1043-p539-o1 p:nth-child(3){
    display:inline-block!important; 
    width:49%!important;
}
#wpcf7-f1043-p539-o1 p:nth-child(4){
    display:inline-block!important; 
    width:98%!important;
}
#wpcf7-f1043-p539-o1 .wpcf7-textarea{
    background-color:#000!important;
    width:96%!important;
}
#wpcf7-f1043-p539-o1 .wpcf7-submit{
    width:96%!important;

}
}

@media (max-width: 920px) {

#row-references{
    background-color:#feb300;
    background-image:none;
    
}
#leftcol-references{
    display:none;
}

}

@media (max-width: 480px) {
.fusion-content-boxes.content-boxes-icon-on-side .image{
    position:relative;
    text-align:center;
}

.fusion-contact-info a{
    font-size:12px;
}
.textwidget p{
    padding-top:0px;
}


}

.wpcf7-recaptcha div:first-child{
    width:100%!important;
}

.wpcf7-recaptcha .rc-anchor{
    border:none!important;
}
.wpcf7-recaptcha .rc-anchor-dark{
    background:none!important;
}

#rubik-api-copyright{
    justify-content: center;
}

.btn {
    display: block;
    width: fit-content;

    &.primary {
        background-color: #000;
        padding: 12px 40px;
        transition: all 0.3s ease-in-out;

        span {
            color: #fff;
            transition: all 0.3s ease-in-out;
            white-space: nowrap;
        }

        &:hover {
            background-color: #fff;

            span {
                color: #000;
            }
        }   
    }
}

.home-price-section-container {
    background-color:var(--color-yellow)!important; 

    .home-price-section {

        .wrapper {
            width: calc(100% - 60px);
            max-width: 1400px;
            margin-inline: auto;

            .row {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-inline: -60px;

                .col-12 {
                    padding-inline: 60px!important;
                }

                .col-content {
                    padding: 40px 0;

                    h2 {
                        font-weight: 600;
                        font-size: 1.8em;
                        text-transform: uppercase;
                    }

                    h3 {
                        font-weight: 300;
                        font-size: 1.2em;
                        color: #000;
                    }

                    p {
                        color: #000;
                    }

                    .the-content {
                        margin-bottom: 40px;
                    }
                }

                .col-image {

                    img {
                        scale: 1.8;
                        translate: 0 175px;
                    }
                }
            }
        }
    }
}

.price-banner, .price-section-container {

    &.fusion-flex-container {

        .fusion-row {

            .fusion-flex-column {
                margin: 0!important;
            }
        }
    }
}

.device-search-bar {
    padding: 60px 0;
    background-color: var(--color-yellow);

    .wrapper {
        width: calc(100% - 60px);
        max-width: 1100px;
        margin-inline: auto;

        h2 {
            font-weight: 500;
            text-align: center;
            margin-bottom: 30px;
        }

        .search-container {
            position: relative;
            width: 100%;
            margin: 0 auto;
        }

        input {
            border-color: #fff;
            border-width: 1px;
            background-color: #000;
            color: #fff;
            width: 100%;

            &::placeholder {
                color: #fff;
            }
        }

        .autocomplete-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-top: none;
            border-radius: 0 0 5px 5px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

            &.visible {
                display: block;
            }

            .autocomplete-item {
                padding: 12px 20px;
                cursor: pointer;
                transition: background-color 0.2s ease;
                color: #000;
                border-bottom: 1px solid #f2f2f2;

                &:last-child {
                    border-bottom: none;
                }

                &:hover {
                    background-color: var(--color-yellow);
                    color: #000;
                }
            }

            .no-results {
                padding: 12px 20px;
                color: #848484;
                text-align: center;
                font-style: italic;
            }
        }
    }
}

.prices-section {
    padding: 60px 0;

    .wrapper {
        width: calc(100% - 60px);
        max-width: 1400px;
        margin-inline: auto;
    }

    h2 {
        font-weight: 600;
        margin-bottom: 30px;
    }

    .the-content {
        margin-bottom: 40px;

        p {
            color: #000;
        }
    }

    .brands-list {
        
        .brand-item {
            margin-bottom: 40px;

            .no-results {
                display: none;
            }

            h3 {
                font-weight: 500!important;
                font-size: 1.4em!important;
                color: #000!important;
                margin-bottom: 30px;
            }
        }
    }
}

.device-items {
    border-radius: 6px 6px 0px 0px;
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    overflow: hidden;
}

.device-item {
    
    .collapse-trigger {
        position: relative;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        border-bottom: 1px solid #e6e6e6;

        &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 20px;
            translate: 0 -50%;
            width: 10px;
            height: 20px;
            background: url(./assets/images/dropdown-arrow.svg) no-repeat center center;
            background-size: contain;
            transition: all 0.2s ease-in-out; 
        }

        &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 20px;
            translate: 0 -50%;
            width: 10px;
            height: 20px;
            background: url(./assets/images/dropdown-arrow-yellow.svg) no-repeat center center;
            background-size: contain;
            opacity: 0;
            transition: all 0.2s ease-in-out; 
        }

        h4 {
            font-weight: 600;
            font-size: 1.1em;
            color: #000;
            margin: 0;
            padding-left: 30px;
            transition: all 0.2s ease-in-out;
        }

        &.active {
            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);

            &:before {
                transform: rotate(90deg);
                opacity: 0;
            }

            &:after {
                transform: rotate(90deg);
                opacity: 1;
            }
            
            h4 {
                color: var(--color-yellow);
            }
        }

    }


    .collapse-content {
        display: none;
        
        .service-item {
            padding: 20px 50px;
            /* border-left: 1px solid #e6e6e6; */
            /* border-right: 1px solid #e6e6e6; */
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 40px;

            &:nth-child(even) {
                background-color: #f2f2f2;
            }

            .service-name {

                span {
                    font-style: italic;
                    font-size: 0.8em;
                    opacity: 0.7;
                }
            }

            p {
                margin: 0;
                font-weight: 600;
                font-size: 1em;
                color: #848484;

                &.price, a {
                    margin-left: auto;
                }
            }

            .btn {

                &.primary {
                    border: 1px solid #000;
                    border-radius: 5px;
                    font-size: 16px!important;
                    padding: 8px 20px;
                    
                    span { 
                        font-size: 1em!important;
                    }
                }

                &:hover {
                    background-color: transparent;
                }
            }
        }
    }
}


form {
    
    &.wpcf7-form {

        input, select, textarea {
            color: #fff!important;
        }

        .select-arrow {
            display: none;
        }

        .wpcf7-select-parent {
            position: relative;

            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 20px;
                translate: 0 -50%;
                width: 8px;
                height: 20px;
                background: url(./assets/images/dropdown-arrow-white.svg) no-repeat center center;
                background-size: contain;
                z-index: 5;
                rotate: 90deg;
            }
        }

        .wpcf7-select {
            background-color: #000;
            color: #7f8795;

        }
    }

    [data-id="service-fields"] {

        p {
            width: 100%!important;
        }
    }
}