.bp-header {
  position: relative;
  height: auto;
  min-height: 215px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  margin-bottom: 45px;
  background-image: url("../img/bg-auction.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;

  &.bp-header-simple {
    min-height: 215px;
    align-content: center;
    text-align: center;
    height: 215px;

    .bp-header__content {
      h1 {
        margin: 0;
      }
    }
  }

  .bp-header__overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000026;
  }

  .bp-header__content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;

    h1,
    .title {
      font-size: 48px;
      margin: 0;
      line-height: 58px;
      font-weight: 700;
    }

    hr {
      width: 100%;
      height: 1px;
      background-color: #fff;
      margin: 25px auto;
    }
  }

  .bp-header__time {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;

    &:first-letter {
      text-transform: uppercase;
    }
  }

  .bp-header__desc {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
    display: none;
  }

  .bp-header__btn-group {
    margin-top: 25px;
  }
}

.bp-header__btn {
  min-width: 180px;
  margin: 0 6px;
  padding: 1.1em 1.44em;
  text-transform: uppercase;
  font-size: 16px;
}

.bp-content {
  margin-bottom: 45px;

  &.bp-add-padding {
    padding: 0 15px;
  }

  &.bp-content_archive {
    justify-content: center;

    .bp-content__text {
      max-width: 794px;
      width: 100%;
      text-align: center;
    }
  }

  .bp-content__text {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    color: $black;
    font-weight: 300;
    max-width: 100%;
    width: 100%;
    margin-bottom: 15px;
  }

  .bp-content__wrp-tools {
    align-content: flex-start;
    justify-content: flex-end;
  }

  .bp-content__tool {
    flex-basis: 20%;
    flex-wrap: wrap;

    .bp-form-control {
    }
  }

  .bp-content__filter {
    flex-basis: 100%;

    .bp-btn {
      position: absolute;
      right: 0;
      padding: 2px 10px;

      &.bp-btn-close {
        right: 45px;
      }
    }
  }
}

.bp-lots {
  &.bp-possible-bids-on {
    .bp-lot {
      .bp-lot__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 0.1fr 1fr;
        gap: 0 0;
        grid-template-areas:
          "title title"
          "message message"
          "tool bid";

        .bp-lot__tool {
          width: 100%;
          margin-top: 0;
          height: 100%;
          display: flex;
          align-items: center;
          align-content: center;
          flex-wrap: wrap;

          > * {
            flex-basis: 100%;
          }
        }

        .bp-lot__bid {
          .bp-btn {
            width: 100%;
          }
        }
      }
    }
  }

  &.bp-d-flex {
    width: 100%;
  }

  .bp-lot {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 310px;
    width: 100%;
    margin: 0 15px 30px 15px;
    text-decoration: none;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    }

    &.bp-lot__large {
      max-width: 650px;

      .bp-lot__wrp-image {
        padding-top: 35%;

        .bp-lot__image {
          padding-bottom: 35%;
        }
      }
    }

    .bp-lot__badge {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 5px 7px;
      z-index: 9;

      .bp-lot__badge-text {
        color: $white;
      }
    }

    .bp-lot__badge-wrp {
      + .bp-lot__wrp-image {
        .bp__wishlist {
          top: 25px;
        }
      }
    }

    &.bp-lot_auction {
      max-width: 380px;
      padding: 15px 15px 40px 15px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

      &:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
      }

      .bp-lot__content {
        margin-top: 20px;
      }

      .bp-lot__date {
        font-size: 16px;
        font-weight: 400;
        margin: 15px 0 0;
      }

      .bp-lot__title {
        text-align: center;
        font-weight: 400;
        width: 100%;

        .bp-title {
          color: $dGray;
          text-transform: initial;
          display: block;
          font-size: 24px;
        }
      }

      .bp-lot__tool {
        width: 100%;
        display: flex;
        //flex-direction: column;
        //justify-content: space-between;
        align-items: flex-start;
        //flex-wrap: wrap;
        min-height: 110px;
        height: 110px;

        .bp-lot__tool__item {
          //display: block;
          flex-basis: 100%;
          text-align: center;
          display: flex;
          width: auto;
          align-content: center;
          align-items: center;
          margin-top: auto;
          justify-content: center;

          &.bp-btn {
            max-width: 176px;
            max-height: 48px;
            line-height: initial;
          }
        }
      }
    }

    .bp-lot__text {
      display: block;
      text-align: center;
      color: $gray;
      font-size: 16px;
      font-weight: 400;
      width: 100%;
    }

    .bp-lot__content {
      margin-top: 10px;
      align-items: flex-start;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &.lot-removed {
        .bp-lot__bid {
          display: none !important;
        }
      }

      .bp-lot__title {
        grid-area: title;
      }

      .bp-lot__message {
        grid-area: message;
      }

      .bp-lot__tool {
        grid-area: tool;
      }

      .bp-lot__bid {
        grid-area: bid;

        select,
        .select2 {
          width: 100%;
        }

        .bp-btn {
          padding: 12px 27px;
        }

        .select2-container--default {
          .select2-selection--single {
            border-radius: 0;
          }
        }
      }
    }

    &:hover {
      text-decoration: none;
    }

    .bp-lot__message {
      font-size: 12px;
      margin-top: auto;
      min-height: 15px;

      p {
        margin: 0;
      }

      .bp-lot__message-not_sold {
        display: none;
      }
    }

    .bp-lot__wrp-image {
      background-color: #fff;
      padding-top: 78%;
      position: relative;
      height: 0;
      display: block;
      overflow: hidden;

      .bp__wishlist {
        position: absolute;
        z-index: 9;
        top: 7px;
        left: 7px;
      }
    }

    .bp-lot__image {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      max-height: 220px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 78%;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;

      &::before {
        content: attr(data-text);
        color: #fff;
        text-align: center;
        top: 50%;
        position: absolute;
        transform: translateY(-50%);
        font-size: 16px;
        padding: 1rem;
      }

      img {
        max-width: 100%;
        width: 100%;
        height: auto;
      }
    }

    .bp-lot__title {
      font-size: 16px;
      line-height: 19px;
      letter-spacing: 0;
      border-bottom: 1px solid $lGray;
      color: $gray;
      padding-bottom: 5px;
      margin-bottom: 5px;
      overflow: hidden;
      width: 100%;
      min-height: initial;
      max-height: initial;

      p {
        font-size: 16px;
        color: $gray;
      }

      a {
        font-size: 16px;
        color: #7a838f;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .bp-title {
        padding-right: 5px;
        text-transform: uppercase;
        color: $orange;
        white-space: initial;
        line-height: 1.1;
        font-size: 16px;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .bp-lot__tool {
      color: $slGray;
      width: 50%;
      margin-top: 5px;

      p {
        margin: 0;
      }

      &.bp-lead {
        background-color: #003f91;
        padding: 5px;

        &.bp-bg-red {
          background-color: red;
        }

        &.bp-bg-green {
          background-color: green;
        }

        &.bp-bg-transparent {
          background-color: unset;

          .bp-price {
            color: #000;
          }

          .bp-subtitle {
            color: #a1a1a1;
          }
        }

        .bp-subtitle {
          color: #fff;
        }

        .bp-price {
          color: #fff;
        }
      }

      .bp-subtitle {
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
      }

      .bp-price {
        color: $black;
        font-size: 19px;
        line-height: 25px;
        white-space: nowrap;
      }
    }
  }
}

.bp-login {
  &.bp-approved-user {
    .bp-lots .bp-lot {
      &:hover, &:focus, &:active {
        .bp-lot__image {
          background-position: center;

          &::before {
            display: none;
          }
        }
      }

      .bp-lot__image {
        &:before {

        }
      }
    }
  }
}

@media (hover: hover) {
  .element:hover {
    background-size: cover;
  }
}

@media (hover: none) {
  .element:active {
    background-size: cover !important;
  }
}

.bp-tools {
  &:not(.bp-pagination) {
    padding-top: 15px;
  }

  .bp-from {
    &.bp-from__tools {
      gap: 1rem;
      justify-content: space-between;

      .bp-from__item {
        flex-basis: 100%;
        flex-grow: 0;
      }

      .bp-content__filter {
        gap: 1rem;
      }

      .bp-form-group {
        .bp-form-control {
          padding: 1px 7px;
          margin-bottom: 0;
          border-radius: 0;
        }
      }
    }

    .bp-content__filter {
      &.bp-from__item {
        //flex-basis: 25%;
      }
      .bp-form__search,
      .bp-form_sold-unsold,
      .bp-form_category,
      .bp-form_sorter {
        min-width: 175px;
        display: flex;
        align-items: center;
      }

      .bp-form-group__inner {
        display: flex;
        align-content: center;
        align-items: center;

        .bp-form-control {
          margin-bottom: 0;
        }
      }

      .bp-form_category {
        .bp-form-group__inner {
        }
      }
    }
    .bp-content__pagination {
      display: flex;
      padding-top: 0;
      flex-grow: 1;
      gap: 1rem;
      align-items: center;

      &.bp-from__item {
        //flex-basis: 50%;
      }
      .bp-form-tools__item {
        max-width: 180px;
      }
      .bp-form-group__inner {
        display: flex;
        flex-wrap: nowrap;
        //align-items: flex-start;
        align-items: center;

        label {
          //max-width: 60px;
          font-size: 15px;
          line-height: 1.065;
          margin-bottom: 0;
        }

        .bp-per-page-select2 {
        }
      }
      .pagination {
        flex-basis: initial;

        &.navigation {
          margin: 0;
        }
      }
    }
    .bp-content__sorter {
      display: flex;
      align-items: center;

      &.bp-from__item {
        flex-basis: 10%;
      }
    }
  }

  .select2-container--default {
    width: 100%;

    &.bp-custom-select {
      .select2-selection--single {
        height: auto;

        .select2-selection__rendered {
          padding: 1px 20px 1px 7px;
          font-size: 18px;
          font-weight: 300;
          border-radius: 0;
        }
      }

      .select2-dropdown {
        .select2-search {
          .select2-search__field {
            padding: 4px 7px !important;
            margin: 0;
          }
        }
      }
    }
  }

  .bp-content__sorter {
    //max-width: 300px;
    //flex-basis: 100%;
    //width: 100%;

    .bp-form-tools__item {
      .bp-form-group__inner {
        flex-basis: 100%;
        width: 300px;
        max-width: 300px;
      }
    }

    .bp-form-group {
      margin-bottom: 0;
    }

    .bp-form-control {
      padding: 4px 7px;
    }
  }

  .pagination {
    margin-bottom: 0;

    .nav-links {
      margin-left: auto;
      gap: 0.2rem;
      display: flex;
      flex-wrap: wrap;
    }
  }
}

.bp-pagination {
  .nav-links {
    > * {
      margin-bottom: 0 !important;
    }
  }
}

.pagination {
  margin-bottom: 25px;
  display: flex;
  justify-content: flex-end;
  padding: 0 15px;
  flex-basis: 100%;

  .page-numbers {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 6px;

    transition: 0.4s;
    cursor: pointer;
    text-align: center;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 7px 15px;
    vertical-align: middle;
    text-transform: uppercase;
    background-color: #fff;

    color: #000;
    font-size: 15px;
    border: solid 1px #111111;

    &.current,
    &.dots {
      opacity: 0.2;
      cursor: default;
      pointer-events: none;

      &:hover {
      }
    }

    &:hover {
      opacity: 0.7;
      background-color: #e6e6e6;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.bp-lot {
  .bp-from {
    position: relative;

    .bp__wishlist {
      top: 10px;
      right: 10px;
    }
  }

  .bp__wishlist {
    display: inline-block;
    position: absolute;
    height: 25px;
    width: 25px;
    cursor: pointer;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.556' height='17.736' viewBox='0 0 19.556 17.736'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23707070;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M638.281,548.136a4.488,4.488,0,0,0-2.282-2.6,5.483,5.483,0,0,0-2.326-.517,4.863,4.863,0,0,0-4.213,2.188l-.115.2-.1-.17a4.861,4.861,0,0,0-4.214-2.192,5.479,5.479,0,0,0-2.324.516,4.488,4.488,0,0,0-2.283,2.6,5.72,5.72,0,0,0,.205,4.29c1.434,3.03,8.223,8.993,8.512,9.245a.3.3,0,0,0,.2.065l.043,0a.336.336,0,0,0,.19-.094c.4-.346,7.08-6.235,8.5-9.24A5.711,5.711,0,0,0,638.281,548.136Z' transform='translate(-619.575 -544.521)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    z-index: 9;

    &.bp__wishlist-active {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.5' height='16.736' viewBox='0 0 18.5 16.736'%3E%3Cpath d='M638.281,548.136a4.488,4.488,0,0,0-2.282-2.6,5.483,5.483,0,0,0-2.326-.517,4.863,4.863,0,0,0-4.213,2.188l-.115.2-.1-.17a4.861,4.861,0,0,0-4.214-2.192,5.479,5.479,0,0,0-2.324.516,4.488,4.488,0,0,0-2.283,2.6,5.72,5.72,0,0,0,.205,4.29c1.434,3.03,8.223,8.993,8.512,9.245a.3.3,0,0,0,.2.065l.043,0a.336.336,0,0,0,.19-.094c.4-.346,7.08-6.235,8.5-9.24A5.711,5.711,0,0,0,638.281,548.136Z' transform='translate(-620.102 -545.021)'/%3E%3C/svg%3E");
    }

    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.5' height='16.736' viewBox='0 0 18.5 16.736'%3E%3Cpath d='M638.281,548.136a4.488,4.488,0,0,0-2.282-2.6,5.483,5.483,0,0,0-2.326-.517,4.863,4.863,0,0,0-4.213,2.188l-.115.2-.1-.17a4.861,4.861,0,0,0-4.214-2.192,5.479,5.479,0,0,0-2.324.516,4.488,4.488,0,0,0-2.283,2.6,5.72,5.72,0,0,0,.205,4.29c1.434,3.03,8.223,8.993,8.512,9.245a.3.3,0,0,0,.2.065l.043,0a.336.336,0,0,0,.19-.094c.4-.346,7.08-6.235,8.5-9.24A5.711,5.711,0,0,0,638.281,548.136Z' transform='translate(-620.102 -545.021)'/%3E%3C/svg%3E");
    }
  }
}

@keyframes fontPulse {
  50% {
    font-weight: 400;
    transform: matrix(1, 0, 0, 1, 1, 1);
    color: #000;
  }

  100% {
    font-weight: 700;
    transform: matrix(1.5, 0, 0, 1.5, 1, 1);
    color: red;
  }
}

.archive {
  #bid-max {
    position: relative;
    .bp-text-red {
      animation: fontPulse 1.2s infinite forwards;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      align-content: center;
      transform-origin: 100% 50%;
    }
  }
}

@media (min-width: 577px) {
  .bp-from {
    .bp-form-group {
      flex-wrap:nowrap;
    }
  }
}

body {
  &.rtl {
    .bp-tools .pagination .nav-links {
      margin-right: auto;
      margin-left: 0;
    }

    .bp-tools .select2-container--default.bp-custom-select .select2-selection--single .select2-selection__rendered {
      font-size: 18px;
      font-weight: 300;
      padding: 1px 7px 1px 20px;
    }
  }
}
