.checkout {
  &__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $gray-400;
  }
  &__logo {
    max-width: 250px;
  }
  &__steps {
    display: flex;
    &__btn {
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      padding: 14px 0;
      color: $gray-400;
      cursor: pointer;
      transition: all 0.2s;
      &:first-child {
        border-top-left-radius: 35px;
        border-bottom-left-radius: 35px;
      }
      &:last-child {
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
      }
      &.active {
        background-color: $primary-color;
        color: $barn-black;
      }
      &.visited {
        background-color: $primary-color-alt;
        color: $barn-black;
        &:hover {
          box-shadow: inset 0px -1px 0px 0px $primary-color;
        }
      }
      &.disabled {
        pointer-events: none;
      }
      input {
        display: none;
      }
      label {
        cursor: pointer;
        padding: 14px 24px;
      }
    }
    &__mob {
      display: none;
    }
  }
  &__wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .input {
      padding: 8px 14px;
    }
  }
  &__left {
    max-width: 560px;
    width: 100%;
    padding-right: 20px;
  }
  &__address--loggedIn {
    .bg-barn-light {
      padding: 20px;
    }
  }
  &__cart {
    max-width: 415px;
    width: 100%;
    position: relative;
    &__cont {
      width: 100%;
      position: sticky;
      top: 12px;
    }
    &__total {
      border: 1px solid $gray-400;
      padding: 24px;
    }
    &__summary {
      border: 1px solid $gray-400;
      padding: 24px;
      &__wrap {
        max-height: 240px;
        overflow-y: auto;
        //scrollbar
        &::-webkit-scrollbar {
          width: 10px;
        }
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px $gray-400;
        }
        &::-webkit-scrollbar-thumb {
          background: $primary-color;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: rgba($primary-color, 0.8);
        }
        .product-box-gray {
          margin: 0 0 8px 0;
          &:last-child {
            margin: 0;
          }
        }
      }
    }
    .btn--primary {
      &.msgNoValidForm {
        position: relative;
        &:before {
          position: absolute;
          background-color: inherit;
          content: 'Niste ispravno ispunili sve podatke';
          left: 20%;
        }
      }
    }
  }
  &__paymentImgs {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

@media (max-width: 1300px) {
  .checkout {
    &__logo {
      max-width: 200px;
    }
    &__steps__btn {
      padding: 10px 16px;
    }
  }
}

@media (max-width: 1100px) {
  .checkout {
    &__top {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

@media (max-width: 1000px) {
  .checkout__cart {
    max-width: 370px;
  }
}

@media (max-width: 900px) {
  .checkout {
    &__wrap {
      flex-direction: column;
      padding-top: 0;
    }
    &__cart {
      max-width: 560px;
      padding-bottom: 0;
    }
  }
}

@media (max-width: 850px) {
  .checkout__steps {
    display: none;
    &__mob {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: -1px;
      background-color: #fff;
      width: 100%;
      z-index: 5;
      border-bottom: 1px solid $gray-400;
      padding: 12px 0;
      margin-bottom: 32px;
    }
  }
  .checkout {
    &__left {
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 24px;
    }
  }
}

@media (max-width: 500px) {
  .checkout {
    &__cart {
      &__total {
        padding: 16px;
      }
      &__summary {
        padding: 16px;
      }
    }
    &__paymentImgs {
      padding-top: 70px;
    }
  }
}