// Core variables and mixins
@import "variables-site.less";
@colordefault: desaturate(lighten(@colordark, 14%),25%);
@colorlighter: lighten(@colorlight, 10%);
@colorbrighter: lighten(@colorbright, 30%);

/*************************************/
/**************  Main  ***************/
/*************************************/
body {
    color: @colordark !important;

    & a {
        color: @colordefault;
    }

    & a:hover, a:focus, a:active {
        color: lighten(@colordefault,7%);
    }

    .navbar {

        .fa-bars {
            color: @colorbright;
        }

        .navbar-nav, nav {
            li {
                &.active {
                    a {
                        border-bottom: 2px solid @colorbright;
                        color: @colorbright;
                    }

                    &:after {
                        border: 7px solid @colorbright;
                        border-color: transparent;
                        border-bottom-color: @colorbright;
                    }
                }

                a {

                    &:hover {
                        border-bottom: 2px solid @colorbright;
                        color: @colorbright;
                    }
                }
            }
        }
    }

    & #main-header {
        position: relative;
        z-index: 10;
        background: #fff;

        & #top-container {
            border-top: 13px solid @colordark;
        }
    }

    & #top-carousel {
        & #carousel .item-slideshow .caption-container .container .caption > span span.caption-line span {
            background: rgba( red(@colordefault), green(@colordefault), blue(@colordefault), .6 ) !important;
        }
    }

    & .owl-pagination .owl-page.active span {
        background: @colordefault !important;
    }

    & .tooltip {
        font-size: 1.1em;

        & .tooltip-inner {
            background: @colorbright !important;
            max-width: 500px !important;
        }

        &.top .tooltip-arrow {
            border-top-color: @colorbright !important;
        }

        &.top-left .tooltip-arrow {
            border-top-color: @colorbright !important;
        }

        &.top-right .tooltip-arrow {
            border-top-color: @colorbright !important;
        }

        &.right .tooltip-arrow {
            border-right-color: @colorbright !important;
        }

        &.left .tooltip-arrow {
            border-left-color: @colorbright !important;
        }

        &.bottom .tooltip-arrow {
            border-bottom-color: @colorbright !important;
        }

        &.bottom-left .tooltip-arrow {
            border-bottom-color: @colorbright !important;
        }

        &.bottom-right .tooltip-arrow {
            border-bottom-color: @colorbright !important;
        }
    }

    .popover {
        background: @colordark !important;

        a {
            color: @colorbright !important;

            &.fa {
                background: @colorbright;
            }
        }

        &.top > .arrow {
            border-top-color: @colordark !important;

            &:after {
                border-top-color: @colordark !important;
            }
        }



        &.right > .arrow {
            border-right-color: @colordark !important; // IE8 fallback
            border-right-color: @colordark !important;

            &:after {
                border-right-color: @colordark !important;
            }
        }

        &.bottom > .arrow {
            border-bottom-color: @colordark !important; // IE8 fallback
            border-bottom-color: @colordark !important;

            &:after {
                border-bottom-color: @colordark !important;
            }
        }

        &.left > .arrow {
            border-left-color: @colordark !important; // IE8 fallback
            border-left-color: @colordark !important;

            &:after {
                border-left-color: @colordark !important;
            }
        }
    }

    & .form-control {
        color: @colordefault;
    }

    & #main-footer {
        background: @colordark;

        a:hover {
            color: @colorbright;
        }
    }

    .owl-controls {
        & .owl-buttons {
            & .owl-prev, .owl-next {
                & .fa, span {
                    color: @colorbright;
                }
            }
        }

        & .nav, .owl-prev, .owl-next {
            background: @colorbright;
        }

        & .nav {
            color: @colordefault;
        }
    }

    .preloader-container {

        & .preloader {

            & span {
                background: @colorbright;
            }
        }

        & .ball-pulse > div {
            background: @colorbright;
        }

        @-webkit-keyframes preloader {
            0% {
                opacity: 0.3;
                -webkit-transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }

            50% {
                opacity: 1;
                -webkit-transform: translateY(-10px);
                background: @colordefault;
                box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);
            }

            100% {
                opacity: 0.3;
                -webkit-transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }
        }

        @-moz-keyframes preloader {
            0% {
                opacity: 0.3;
                -moz-transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }

            50% {
                opacity: 1;
                -moz-transform: translateY(-10px);
                background: @colordefault;
                box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);
            }

            100% {
                opacity: 0.3;
                -moz-transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }
        }

        @-ms-keyframes preloader {
            0% {
                opacity: 0.3;
                -ms-transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }

            50% {
                opacity: 1;
                -ms-transform: translateY(-10px);
                background: @colordefault;
                box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);
            }

            100% {
                opacity: 0.3;
                -ms-transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }
        }

        @keyframes preloader {
            0% {
                opacity: 0.3;
                transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }

            50% {
                opacity: 1;
                transform: translateY(-10px);
                background: @colordefault;
                box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);
            }

            100% {
                opacity: 0.3;
                transform: translateY(0px);
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }
        }
    }

    .back-top {
        background: @colorbright;
    }



    .remodal-header {
        background: @colordark;
    }

    .remodal-confirm {
        color: #fff;
        background: @colorbright;

        &:hover,
        &:focus {
            background: darken(@colorbright,6%);
        }
    }
}

.datepicker {
    & .datepicker-days {
        & thead {
             & tr:first-child {
                background: @colorlighter;
            }
            & th.prev {
                border-left: 15px solid @colorlighter !important;
            }

            & th.next {
                border-right: 15px solid @colorlighter !important;
            }
        }
    }
    & .active {
        background: @colorbright !important;
    }
}
/*************************************/
/*************  Product  *************/
/*************************************/
#pop-up-prod {
    .button-close {
        .fa {
            color: @colorbright;
        }
    }


    .header-prod {
        background: @colordark;
    }

    #services {

        .content-services {

            .category-title {
                background: @colordark;

                &:hover, &:focus {
                    background: @colorbright;
                }

                &.active {
                    background: @colorbright;
                }

                @media screen and (max-width: @screen-md) {
                    &:hover {
                        background: @colordark;
                    }

                    &:focus {
                        background: @colorbright;
                    }
                }
            }

            .inventaire {
                border: 1px solid @colorbright;

                .link-service {
                    &:hover {
                        background: lighten(@colorbright, 15%);
                        color: white;
                    }
                }
            }
        }
    }
}


#products {
    .header-product {
        background: @colordark;

        &:hover {
            background: @colorlighter;
            color: @colordark !important;
        }
    }

    .loading-element {
        background: @colorbright;
    }

    .picture-container {
        i {
            color: @colorbright;
        }

        .prs {
            background: @colordark;
        }
    }

    .show-gallery {
        i {
            color: @colorbright;
        }
    }

    .product-info {
        .fa-times { //croix fermante
            color: @colorbright;
            background: lighten(@colorlighter,2%);

            &:hover {
                color: lighten(@colorlighter,2%);
                background: @colorbright;
            }
        }
        .product-container {
            background: lighten(@colorlighter,2%);
        }
    }

    .product-nav {
        ul {
            li {
                background: @colorlight;

                &.active {
                    background: lighten(@colorlighter,2%);
                }

                &:not(.active):hover {
                    background: @colorbright;
                    color: @white;
                }
            }
        }
    }

    .product-container {
        .prices {
            .price-os {
                color: @colorbright;
            }
        }
    }
}
/*************************************/
/*************  Reviews  *************/
/*************************************/
.reviews-list {
    .review{
            background: lighten(@colorlighter,2%);
        
    }
    .rating-prod {
        border-right: 1px solid @colordark;
    }

    .note {
        color: @colorbright;
    }



    .tab-menu {
        a.tab {
            background: @colorbright;
        }

        .tab.active {
            color: @colordark !important;
        }

        .tab:not(.active):hover {
            background: darken(@colorbright,10%);
            color: @white;
        }
        & .tab-content {
            border: 1px solid @colorlight;
        }
    }

    .squares {
        border: 1px solid @colorbrighter;
    }

    .score-background {

        &.active, &.inactive {
            background: @colorbright;
        }
    }
}

#reviews-filters {

    h5 {
        color: @colorbright;
    }

    li.active-filter a, a:hover {
        color: @colorbright;
    }
}
/*************************************/
/*************  Results  *************/
/*************************************/
#mainSearch {
    background: @colordark;
}

.container-estab {

    .details-estab {
        background: @colordark;

        .picture-container {
            border: 1px solid @colordark;
        }

        .more-infos {
            .infos {
                a:hover {
                    color: @colorbright;
                }
            }
        }
    }

    .popover-title {
        color: @colordark;
    }
}

.establishmentContact {
    background: @colordark;
}
/*************************************/
/*************  OS  *************/
/*************************************/
#special-offer {
    i {
        color: @colorbright;
    }

    .inverse-colors {
        color: white;
        background: @colorbright;
    }

    div[id^="offer-"] {
        border: 1px solid @colordark;

        .header-offer {
            background: @colordark;
        }
    }
}
/*************************************/
/*************  Booking  *************/
/*************************************/
#booking {

    & .breadcrumb-booking {
        background: @colordark;
        color: darken(@colorlight,30%);

        & ul li.active {
            /*background: @colorbrkight;*/
            color: @white;
        }
    }

    & #paymentSchedule {
        background: @colorbright;
        color: @colordark;
    }

    & #PaylineWidget {
        &.pl-container-default .pl-pmContainer {
            background: @colorlight;
        }

        .pl-btn, .pl-collect-btn, .pl-pay-btn {
            background: @colorbright;
        }
    }

    & #stay-summary {
        background: @colordark;

        .picture-container {
            border: 1px solid @colordark;
        }

        .details-summary {
            background: @colordark;

            ul li.total-price {
                color: @colordark;
            }
        }
    }
}

#options-extras, #options-packages {
    border-top: solid 1px @colordark;

    i {
        color: @colorbright;
    }
}

#options-extras, #included-options, #options-summary, #customerInfos, #customer-form, #additional-persons, #Subsidy {
    border-bottom: solid 1px @colordark;
}

.booking-common {
    a {
        color: @colorbright;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
    }
}

#pageSummary {
    #payments {
        & #payment-menu {
            & .fa {
                color: @white;
            }

            .btn-payment {
                background: @colordark;

                &:hover, &:active {
                    background: @colorbright;
                }
            }
        }

        & .active {
            background: darken(#eee,7%);
            color: @colordefault;

            & .fa-angle-right:before {
                content: "\f107";
            }
        }

        & .payment-content {
            background: @colorlighter;
        }
    }

    .caddy-mop {
        .btn {
            background: @colorbright;
        }
    }
}

#pageThankYou {
    & .id-booking {
        color: @colorbright;
    }
}


.btn.btn-universal {
    background: @colorbright;
    color: @white;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    /*margin-left: 15px;*/
    border-radius: 0;
    padding: 10px 5px;
    white-space: normal;
    //max-width: 140px;
}

.btn.btn-universal:hover, .btn.btn-universal:focus {
    background: darken(@colorbright,7%);
    color: @white;
}


#booking-page {
    .btn-link {
        & input[type="submit"] {
            background: @colorbright;
        }
    }

    .errorContainer {
        .error {
            background: @colorbright;
        }
    }
}

.container-search {
    & .product {
        & .product-nav {
            & ul {
                & li {
                    background: @colorlight;
                }

                & li.active {
                    background: lighten(@colorlighter,2%);
                }

                & li:not(.active):hover {
                    color: @white;
                }
            }
        }

        & .product-container {
            background: lighten(@colorlighter,2%);
            & .prices-product {
                & .product-result {
                    & .no-offer {
                        & i {
                            color: @brand-warning;
                        }
                    }
                }
            }
        }
    }
}
#opt-in-customers {
    border-top: solid 1px @colordark;
}

/*************************************/
/*********  Cookie consent ***********/
/*************************************/
.cc_banner-wrapper {
    background: @colordark;
}

.cc_container {
    p a {
        color: @colorbright;

        &:hover {
            color: #fff;
        }
    }

    .cc_btn {
        background: @colorbright;

        &:hover {
            background: desaturate(lighten(@colorbright, 10%),10%);
        }
    }
}

// Page de quotation et counterProposal
#search-page {
    #productLinkQuotation {
        color: @colordark;
    }
    #productLinkQuotation:hover {
        color: @colordefault;
    }
}

#legalNotice {
    a {
        color: @colorbright;
    }

    a:hover {
        color: @colordefault;
    }
}


/*************************************/
/*********  Gift ***********/
/*************************************/

& .margin-estab {
    margin-top: 30px;
}

& .margin-bon {
    margin-left: 15px;
}
& .margin-bon-recap {
    margin-left: 50px;
}
& .h2-gift {
    font-size: 20px;
    text-transform: uppercase;
}

& .block-gift {
    margin-top: 30px;
}

& .label-gift {
    font-weight: normal;
}