@import "/v2/themes/assets/base-colors.less?v=2";

@formThemeColor: @dark_font_color;
@svg-group-booking: fade(@formThemeColor, 99.9%);

@svgContrastColor: contrast(@sb_base_color, @dark_font_color, @light_font_color);
@svg-contrast-color: fade(@svgContrastColor, 99.9%);

body {
  background: @body_bg_color;
  color: @dark_font_color;
}

html {
  &::-webkit-scrollbar {
    _background-color: @body_bg_color;
  }
}

.company-name {
  color: @sb_company_label_color;
}

#header .items-wrapper .nav-item .item-container{
  background: rgba(@sb_base_color, 0.2);
  color: darken(@sb_base_color, 6%);
}

#sb_multiple_book_cart {
  .counter {
    background: @sb_base_color;
    color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
    //color: #ffffff;
    a {
      //color: #fffffe;
      color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
    }
  }
}

// copied from #sb_multiple_book_cart, TODO check
.cart-header-module {
  .counter {
    background: @sb_base_color;
    color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
    //color: #ffffff;
    a {
      //color: #fffffe;
      color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
    }
  }
}

.promotion-list .promotion-item .badge {
  color: @sb_base_color;
}

.promotion-item .select a {
  background-color: @sb_base_color;
  color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}

#sb_menu a {
  color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
  @media only screen and (max-width: 1024px) {
    color: #464646;
  }
}

.btn.book-btn {
  background: @new_btn_color;
  color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
    //color: #fffffe;
  }
}

.btn.btn-back {
  background-color: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
}

#client-profile-preview .bar-with-btn .btn.btn-logout{
  background-color: rgb(239, 239, 239);
  color: #333333;
  &:focus, &:active {
    outline: none;
  }
  &:hover {
    background-color: rgb(239, 239, 239);
    color: #333333;
  }
}

//.calendar-popup li .btn {
//  background: @btn_color_1;
//  color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
//  a {
//    color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
//  }
//}

#main #main-content #sb_content #sb_product_pagination .current,
#main #main-content #sb_content #sb_product_pagination .arrow:hover,
#main #main-content #sb_content #sb_product_pagination .current:hover{
  background-color: @sb_base_color;
  color: @light_font_color;
}

#footer .copyright {
  color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
}

//button with second color
.current-booking-info .sb-book {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

.current-booking-info .btn.sb_book_again {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

#header .nav-wrapper .items-wrapper .nav-item#book-btn .book-btn-container .item-container {
  background: @sb_base_color;
}

#client-profile-preview .btn {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

#header .items-wrapper .nav-item#sb_client_info .login-container .full-info #sb_login_form .not-logged .bar .btn {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }

  &.btn--sign-in{
    background: @new_btn_color;
    color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  }
}

#main #main-buttons .btn.custom {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

#main #main-buttons .btn.map {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

#main #main-buttons .btn.promo {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

.modal-dialog .modal-content .modal-header {
  background: @sb_base_color;
  .modal-title {
    color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
  }
}

.timezone-modal.modal-dialog .modal-content .modal-footer .btn {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

#steps #steps-content #sb_booking_content .detail-step .right-side #sb_multiple_booking_btn {
  background: @btn_color_1;
  color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    //color: #ffffff;
  }
}

//button with base color
.subscribe-component .btn-primary,
#main #main-buttons .btn.book {
  background: @new_btn_color;
  color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    //color: #fffffe;
    color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  }
}

.is-widget #main .btn.book {
  background: @new_btn_color;
  color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    //color: #fffffe;
    color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  }
}

#main #main-content #sb_content #client-login button.btn {
  background: @new_btn_color;
  color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  //color: #ffffff;
}

#header .nav-wrapper #sb_menu .nav li.active a {
  border-bottom-color: @sb_base_color;
}

#header .nav-wrapper #sb_menu .nav li a:hover {
  border-bottom-color: @sb_base_color;
}

#booking-result-view #booking-result-tabs .tabs-container .tab-link {
  a {
    color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
  }
  &.active {
    a {
      border-bottom-color: @sb_base_color;
    }
  }
}

#main #main-content #sb_content #reviews-view .add-review .form .social-container .line-arrow {
  background: @body_bg_color;
}

#sb-timeline #steps-nav #menu-active-bg {
  background: @booking_nav_bg_color;
}

#main #main-content #sb_content #sb_product_container .sb-list-type.simple-list .product-item .badge {
  background-color: @booking_nav_bg_color;
}

#sb-timeline #steps-nav li:not(.passed) {
  .title-small {
    color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
  }
}

#sb-timeline #steps-nav li:first-child,
#sb-timeline #steps-nav li.passed,
#sb-timeline #steps-nav li.passed + li:not(.passed) {
  background: @booking_nav_bg_color;
  .title-small {
    color: contrast(@booking_nav_bg_color, @dark_font_color, @light_font_color);
  }
}

#sb-timeline #steps-nav li:first-child .title-sub,
#sb-timeline #steps-nav li.passed .title-sub,
#sb-timeline #steps-nav li.passed + li:not(.passed) .title-sub{
  color: contrast(@booking_nav_bg_color, @dark_font_color, @light_font_color);
}

#sb-timeline #steps #steps-content #sb_booking_content .detail-step .right-side #sb_book_btn {
  background: @new_btn_color;
  color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  //color: #ffffff;
  a {
    //color: #fffffe;
    color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
  }
}

#sb-timeline #steps-nav li:first-child:after {
  background: #fff;
  border-top-color: #fff;
  border-left-color: @booking_nav_bg_color;
  border-bottom-color: #fff;
}

#sb-timeline #steps-nav li.passed + li:not(.passed):after {
  background: #fff;
  border-top-color: #fff;
  border-left-color: @booking_nav_bg_color;
  border-bottom-color: #fff;
}

.payment-modal #sb_pay_btn {
  color: @light_font_color;
}

#news-index .news-list .article .cap a {
  color: @sb_base_color;
}


//timeline colors

.badge {
  background: @sb_base_color;
  color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
  &:before {
    border-top: 40px solid @sb_base_color;
  }
  &:after {
    border-top: 5px solid @sb_base_color;
  }
}

#main #main-content #sb_content #sb_product_container .sb-list-type.simple-list .product-item .item-data .badge {
  color: @dark_font_color;
}

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .header span {
  color: @sb_base_color;
}

.plugin-group-booking:before{
  background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" width="24.61" height="25" viewBox="0 0 19.688 20"><path data-name="user copy" d="M9.844 10a5 5 0 1 0-4.922-5 4.975 4.975 0 0 0 4.922 5zm0 2.5C6.521 12.5 0 14.12 0 17.5V20h19.687v-2.5c0-3.38-6.521-5-9.843-5z" fill="@{svg-group-booking}" fill-rule="evenodd"/></svg>');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: left center;
}

.service-item .bar-service .badge{
  color: @sb_base_color;
}

.service-item .bar-service .service-deposit .text {
  color: @dark_font_color;
}

.active-count .plus:before:hover{
  border-bottom-color: @sb_base_color;
}
.active-count .minus:after:hover{
  border-top-color: @sb_base_color;
}

.service-bar__icon .icon.icon-reccuring .fa.fa-refresh:before{
  background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" width="18.938" height="18"><path d="M18.423 1.562a.69.69 0 0 0-.819.53l-.5 2.34A8.966 8.966 0 0 0 .404 8.97a.69.69 0 1 0 1.379 0 7.587 7.587 0 0 1 14.148-3.812l-2.3-.493a.69.69 0 0 0-.289 1.349l3.947.847a.687.687 0 0 0 .2.012.675.675 0 0 0 .317-.108.684.684 0 0 0 .3-.435l.846-3.949a.69.69 0 0 0-.529-.819zm-.694 6.5a.69.69 0 0 0-.667.712 7.587 7.587 0 0 1-7.331 7.837h-.253a7.585 7.585 0 0 1-6.452-3.6l2.4.643a.69.69 0 0 0 .358-1.333l-3.9-1.046a.689.689 0 0 0-.845.488l-1.045 3.9a.69.69 0 1 0 1.332.357l.588-2.192a8.96 8.96 0 0 0 7.566 4.16h.3a8.967 8.967 0 0 0 8.665-9.262.689.689 0 0 0-.716-.66z" fill="@{svg-group-booking}" fill-rule="evenodd"/></svg>');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right center;
}

.tab.tab-col .read-more,
.provider-item .read-more,
.membership-item .read-more{
  color: @sb_base_color;
}

#sb_main {
  #sb-main-container {
    .return-btn, #sb_back_button {
      a {
        color: @dark_font_color;
        &:hover {
          color: @sb_base_color;
        }
      }
    }
  }
}

#sb-main-container .custom-checkbox input:checked + .custom-label {
  border-color: @sb_base_color;
  background-color: @sb_base_color;
}

#sb_membership_container .alert-info a {
  color: @sb_base_color;
}

//RTL

html[dir="rtl"] #sb-timeline #steps-nav li:first-child:after {
  border-left-color: inherit;
  border-right-color: @booking_nav_bg_color;
}

html[dir="rtl"] #sb-timeline #steps-nav li.passed + li:not(.passed):after {
  border-left-color: inherit;
  border-right-color: @booking_nav_bg_color;
}

html[dir="rtl"] #sb-timeline #steps #steps-content #sb_booking_content .datetime-step .timeline-wrapper #sb_time_flexible_weekly_container .data-col .time-container .time-slot {
  border-right: inherit;
  border-left: 1px solid @border_slot_color;
}

// Theme main icons color
.preloader,
.photo,
.provider-item .default,
.empty-step__image,
  //.invoice-pay-page,
.invoice-notifications,
.error-card ,
.page-content--online-meeting .online-meeting__picture {
  svg * {
    stroke: @sb_base_color;
  }
}

// Samesite cookies popup
.samesite-cookies {
  background: fade(@body_bg_color, 70%);
  &__popup {
    background: @body_bg_color;

    &-btn {
      background: @new_btn_color;
      color: contrast(@new_btn_color, @dark_font_color, @light_font_color);

      &:hover {
        color: contrast(@new_btn_color, @dark_font_color, @light_font_color);
      }
    }

    &-link {
      color: @sb_base_color;
    }
  }
}

.login-container__remember-check {
  background: @sb_base_color;

  svg path {
    stroke: contrast(@sb_base_color, @dark_font_color, @light_font_color);
  }
}

.tab.tab-col .excerpt-info .btn-bar ,
.tab.tab-col .excerpt-info .btn-bar {
  button.btn.select-by-bonus,
  a.btn.select-by-bonus{
    background: @btn_color_1;
    color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    &.disabled{
      background: @btn_color_1;
      color: contrast(@btn_color_1, @dark_font_color, @light_font_color);
    }
  }
}

// Date field icon
.calendar-toggle {
  &__icon path {
    fill: @sb_base_color;

    &:last-child {
      fill: none;
      stroke: @sb_base_color;
    }
  }
}

.pwa-app--btn:hover,
.pwa-app--btn:focus,
.pwa-app--btn:active{
  color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}

.btn--next-available-date{
  background: @btn_color;
  color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.btn--next-available-date:active,
.btn--next-available-date:focus,
.btn--next-available-date:hover{
  background: darken(@btn_color, 4%);
  color: contrast(@btn_color, @dark_font_color, @light_font_color);
}