.seller-search {
   .form-group {
      position: relative;

      .fc {
         position: absolute;
         color: $text-dark;
         font-size: 22px;
         right: 20px;
         top: calc(50% - 11px);
      }
   }

   .form-control {
      min-height: 40px;
   }
}

.product-reservation-sellers-list {
   max-height: 400px;
   overflow-x: hidden;
   overflow-y: auto;
   padding-right: 20px;

   &::-webkit-scrollbar {
      width: 5px;
   }

   &::-webkit-scrollbar-track {
      box-shadow: none;
      background: $body-bg-alt;
   }

   &::-webkit-scrollbar-thumb {
      background: $black;
   }

   .sellers-city {
      border-bottom: 1px solid $border-color;

      .title {
         @if mixin-exists(seller-city-title) {
            @include seller-city-title;
         } @else {
            font-weight: $font-weight-bold;
            font-size: $font-size-base;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-lg;
         }
      }

      .count {
         color: $text-muted;

         &.has-pieces {
            position: relative;
            padding-left: 18px;
            min-width: 90px;
            text-align: right;

            &::before {
               content: "";
               position: absolute;
               top: 50%;
               left: 0;
               transform: translateY(-50%);
               width: 8px;
               height: 8px;
               border-radius: 50%;
               background-color: $state-success;
            }
         }
      }
   }

   .sellers-opener {
      @include btn-reset;

      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 9px 10px 9px 32px;
      position: relative;
      width: 100%;
      cursor: pointer;

      &::before {
         @include fonticon;

         content: $icons_caret-right;
         position: absolute;
         left: 10px;
         top: calc(50% - 6px);
         font-size: 10px;
         transition: all $transition-speed;
      }

      &.active {
         &::before {
            transform: rotate(90deg);
         }
      }
   }

   .opener-content {
      padding: 0 10px 0 32px;
   }

   .sellers-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;

      .content {
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex: 1;
      }

      p {
         line-height: $line-height-sm;
         margin-bottom: 0;
      }

      .name {
         font-size: $font-size-base;
         font-weight: $font-weight-bold;
         color: $text-dark;
      }

      .address {
         font-size: $font-size-smaller;
         color: $text-muted;
      }

      .seller-delivery-wrapper {
         width: 180px;
         text-align: left;
      }

      .delivery {
         font-size: $font-size-smaller;
      }

      .seller-btn-wrapper {
         min-width: 140px;
      }
   }

   @media screen and (max-width: $md - 1) {
      .sellers-item {
         .content {
            display: block;
         }
      }
   }

   @media screen and (max-width: $xs - 1) {
      .sellers-city {
         .title {
            width: 100%;
            text-align: left;
         }
      }
   }
}
