.seller-search-box {
   background: $body-bg;
   border-radius: $border-radius;
   margin: 0 auto;
   max-width: 1100px;
   padding: 30px 25px;
   position: relative;
   width: 96%;
   z-index: 1;

   &.search-box-hidden {
      display: none;
   }
}

.seller-search-form {
   display: flex;
   align-items: center;
   justify-content: space-between;

   .h4 {
      margin: 0;
      padding-left: 30px;
      position: relative;

      &::before {
         color: $brand-ctr;
         font-size: 24px;
         position: absolute;
         left: 0;
         top: -3px;
      }
   }

   .search-box-close {
      display: block;
      margin-left: 40px;

      .fc {
         font-size: $font-size-smaller;
         margin-left: 5px;
         position: relative;
         top: -2px;
      }

      @media screen and (max-width: $lg - 1) {
         display: none;
      }
   }
}

.seller-search-form-inner {
   display: flex;
   flex: 1;
   margin-left: 40px;

   .form-wrap {
      position: relative;
      flex: 1;
      margin-right: $grid-gutter-width;
   }

   .form-control {
      background: $body-bg-alt;
      border-color: $body-bg-alt;
   }

   .btn-gps {
      @include underline-default;

      position: absolute;
      background: transparent;
      cursor: pointer;
      border: 0;
      padding: 0;
      top: 0;
      right: 15px;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
         font-size: 21px;
         position: relative;
         top: -1px;
         margin-left: 15px;
      }
   }

   .btn-primary {
      width: 227px;
   }
}

.search-box-active {
   position: absolute;
   background: $body-bg;
   width: 540px;
   top: 12px;
   left: calc(50% - 270px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;

   &.search-box-empty {
      display: none;
   }

   p {
      margin: 0;
      font-size: $font-size-smaller;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 30px;

      i {
         font-size: 20px;
         position: absolute;
         left: 0;
      }

      span {
         position: relative;
         top: 1px;
      }
   }

   .change-city {
      cursor: pointer;
      font-size: $font-size-smaller;
      position: relative;
      top: 1px;
   }
}

@media screen and (max-width: $lg - 1) {
   .seller-search-box {
      padding: 0;
      width: 100%;
   }

   .seller-search-form {
      flex-wrap: wrap;

      .h4 {
         flex: 100%;
         margin-bottom: 20px;
      }
   }

   .seller-search-form-inner {
      margin: 0;
   }

   .search-box-active {
      width: 90%;
      left: 5%;
   }
}

@media screen and (max-width: $md - 1) {
   .seller-search-form {
      flex-wrap: wrap;

      h5 {
         text-align: center;
         padding: 0;

         &::before {
            position: relative;
            top: -2px;
            margin-right: 10px;
         }
      }
   }

   .seller-search-form-inner {
      flex-wrap: wrap;

      .form-wrap {
         margin: 0 0 10px;
      }

      .btn {
         width: 100%;
      }
   }
}
