@import "~bootstrap/scss/bootstrap";
@import url("~jquery-range/jquery.range.css");
@import url("~bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css");
@import "partials/_bootstrap-social";
@import "partials/_commons";
@import "lib/swiper-custom";
@import "components/checkout";
@import "components/customer";
@import "components/custom-text";
@import "components/categories";
@import "components/product-miniatures";
@import "components/cart";
@import "components/stores";
@import "components/errors";
@import "components/sitemap";
@import "components/ps_emailsubscription";
@import "partials/_linearicons";

/**
 * Main Header styles
 */
#header {
  background: $header-bg;

  .jxml-logo {
    display: inline-block;
  }

  .settings-toggle {
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: $teal;
    transition: all 0.3s ease-in-out;

    @include hover-focus-active {
      color: $brand-primary;
    }
  }

  .settings-wrapper {

    .lang-wrapper,
    .currency-wrapper {
      width: 45%;
      display: inline-block;
    }
  }

  .jxwishlist-link>a,
  .compare-header>a {
    text-transform: uppercase;
    letter-spacing: $letter-spacing;
    display: flex;
    align-items: center;

    i {
      font-size: 20px;
      margin-right: 10px;
    }
  }

  .link-block {
    >ul {
      >li {
        a {
          font: 500 13px/16px $font-family-base;
          letter-spacing: $letter-spacing;
          color: $black;
          text-transform: uppercase;

          @include hover-focus-active {
            color: $brand-primary;
          }
        }

        &:not(:last-child) {
          margin-right: 36px;
        }
      }
    }
  }

  @include media-breakpoint-up(md) {
    padding-bottom: 40px;
  }
}

/**
 * Main WRAPPER styles
 * make layout's columns position
 */
#wrapper {
  flex: 1 1 auto;

  body:not(#index) & {
    padding: 50px 0;
  }

  body#product & {
    @include media-breakpoint-up(md) {
      padding-top: 80px;
    }

    @include media-breakpoint-up(xl) {
      padding-top: 130px;
    }
  }

  .left-column,
  .right-column {
    flex: 0 0 100%;

    @include media-breakpoint-up(xl) {
      max-width: 300px;
      flex: 0 0 300px;
    }
  }

  @include media-breakpoint-up(md) {

    .left-column,
    .right-column {
      >* {
        margin-bottom: 40px;
      }
    }

    .left-column {
      order: 1;
    }

    .content-wrapper {
      order: 2;
    }

    .right-column {
      order: 3;
    }
  }

  @include media-breakpoint-up(xl) {

    .left-column,
    .right-column {
      >* {
        margin-bottom: 50px;
      }
    }
  }
}

/**
 * Main FOOTER styles
 */
#footer {
  background: $footer-bg;

  .border-top-black {
    border-top: solid 1px $black;
  }

  .jxml-logo {
    display: inline-block;
  }

  .footer-links {
    ul {
      >li {
        margin-bottom: 0;

        a {
          display: inline-block;
          font: 400 13px/16px $font-family-base;
          color: $black;
          position: relative;

          &:before {
            position: absolute;
            content: '';
            height: 1px;
            background: $black;
            top: 100%;
            left: 0;
            width: 0;
            transition: all 0.3s ease-in-out;
          }

          @include hover-focus-active {
            &:before {
              width: 100%;
            }
          }
        }

        +li {
          margin-top: 8px;
        }
      }
    }
  }

  .block-social {
    >ul {
      >li {
        a i {
          font-size: 18px;
          line-height: 1;
        }

        +li {
          margin-left: 35px;
        }
      }
    }

  }

  .jxml-copyright {
    color: $gray-61;
    font: 400 14px/18px $font-family-base;

    a {
      color: $gray-61;

      @include hover-focus-active {
        color: $black;
      }
    }
  }
}

/**
 * Wishlist override styles
 * Fix urls for images
 */
.jxwl_popup_item>.jxwl_row_1 {
  background: url(../img/jxwl_row_1.jpg) left top no-repeat;
  background-size: 100% 100%;
}

.jxwl_popup_item>.jxwl_row_2 {
  background: url(../img/jxwl_row_2.jpg) left top no-repeat;
  background-size: 100% 100%;
}

.jxwl_popup_item>.jxwl_row_3 {
  background: url(../img/jxwl_row_3.jpg) left top no-repeat;
  background-size: 100% 100%;
}

.jxwl_popup_item>.jxwl_row_4 {
  background: url(../img/jxwl_row_4.jpg) left top no-repeat;
  background-size: 100% 100%;
}

/**
 * Jx Header Account override styles
 * Fix form control
 */
.jx-header-account-wrapper {
  .form-control {
    @extend .form-control-lg;
  }
}

/**
 * Fix urls for images
 */
.custom-bg {
  position: relative;
  z-index: 0;
}

.custom-bg-1 {
  position: relative;
  z-index: 0;
}

.custom-bg-2 {
  position: relative;
  z-index: 0;
}

.tabs.product-tabs {
  position: relative;
  z-index: 0;

  .tab-content>.tab-pane {
    color: $white;
  }
}

.slide-type-01 .jxml-banner-description {
  @include media-breakpoint-up(lg) {
    background: url("../img/vector-slider.png") no-repeat;
    background-position: 50% 10%;
  }
}


#newsletter_popup {
  background: $brand-primary-lighten;

  @include media-breakpoint-up(md) {
    background: url('../img/newsletter.jpg') $brand-primary-lighten no-repeat left top;
    background-size: contain;
  }
}