@layer components {
  .dashboard-8 {
    .input-group {
      @apply !flex-nowrap;
      .input-group-text {
        @apply rounded-tl-[5px] rounded-tr-none rounded-br-none rounded-bl-[5px] border-r-0;
      }
      .form-control {
        @apply rounded-tl-none rounded-tr-[5px] rounded-br-[5px] rounded-bl-none border-l-0;
      }
    }
    .card-header-right-icon {
      &.create-right-btn {
        a {
          @apply block;
        }
      }
    }
  }
  .card-header-right-btn {
    @apply font-medium bg-[rgba(var(--light-slate),1)] px-[11px] py-[9px] rounded-[5px];
  }
  .shop-box {
    @apply w-[88px] h-[88px] bg-[rgba(var(--light-slate),1)] flex justify-center items-center shadow-[var(--product-shadow)] text-center mx-auto my-0 rounded-[50%];
  }
  .category-title {
    @apply text-center !block;
  }
  .main-our-product {
    &.card-body {
      @apply pt-0;
    }
  }
  .main-product-wrapper {
    @apply flex justify-between relative;
    .product-body {
      @apply flex justify-center items-center gap-[15px];
      .product-search {
        @apply flex-nowrap;
        .input-group-text {
          @apply bg-[unset] border rounded-tl-[5px] rounded-tr-none rounded-br-none rounded-bl-[5px] border-solid border-r-0 border-[rgba(229,229,243,0.8)];
          .search-icon {
            @apply w-5 h-5;
          }
        }
        .form-control {
          @apply border pl-0 pr-2 py-2 rounded-tl-none rounded-tr-[5px] rounded-br-[5px] rounded-bl-none border-l-0 border-solid border-[rgba(229,229,243,0.8)] focus:shadow-[unset];
          [dir="rtl"] & {
            @apply rounded-tl-[5px] rounded-tr-[unset] rounded-br-[unset] rounded-bl-[5px] border-l-[rgba(229,229,243,0.8)] border-r-[unset] border-l border-solid;
          }
        }
      }
    }
  }
  .our-product-wrapper {
    @apply shadow-[0px_9px_20px_rgb(46_35_94_/_7%)] transition-all duration-[0.5s] ease-[ease] p-2.5 rounded-[5px];
    .our-product-img {
      @apply flex justify-center items-center shadow-[var(--product-shadow)] bg-[rgba(var(--light-slate),1)] h-[158px] p-6 rounded-[5px];
      img {
        @apply w-full h-full object-contain;
      }
    }
    .our-product-content {
      .common-f-start {
        @apply gap-1.5 mt-2;
      }
      .add-quantity {
        @apply flex justify-center items-center gap-1.5 px-3 py-[5px];
        & ~ .btn {
          @apply px-3 py-[5px];
        }
        .countdown-remove {
          @apply text-center w-[25px] bg-transparent text-[rgba(var(--chart-text-color),0.8)] border-[unset];
          &:focus {
            outline: none;
          }
        }
        .common-align {
          @apply gap-1.5;
        }
      }
    }
    &:hover {
      .our-product-img {
        img {
          @apply transition-all duration-[0.5s] ease-[ease] scale-110;
        }
      }
    }
  }
  .order-details {
    .common-search {
      &.input-group {
        .input-group-text {
          @apply bg-[rgba(var(--transparent-color),1)];
        }
        svg {
          @apply w-[calc(16px_+_(18_-_16)_*_((100vw_-_320px)_/_(1920_-_320)))] h-[calc(16px_+_(18_-_16)_*_((100vw_-_320px)_/_(1920_-_320)))];
        }
        .form-control {
          @apply indent-[0px] transition-all duration-[0.3s] ease-[ease] pl-[unset] border-l-[unset] focus:border-[rgba(var(--chart-progress-light),1)] focus:shadow-[unset] focus:indent-[0px] focus:transition-all focus:duration-[0.3s] focus:ease-[ease] focus:pl-[unset] focus:border-l-[unset];
        }
      }
    }
    .search-items {
      @apply relative flex justify-center items-start flex-col gap-2.5 border-b-[rgba(var(--recent-dashed-border),1)] pb-5 border-b-2 border-dashed;
      .common-flex {
        .button-light-secondary {
          @apply text-[#212529];
        }
      }
    }
    .form-select {
      &:focus {
        @apply shadow-[unset];
      }
    }
    h5 {
      @apply pt-5 pb-[18px] px-0;
    }
    .order-quantity {
      @apply flex flex-col gap-[18px];
      > div {
        @apply flex flex-col gap-[18px];
      }
      .order-details-wrapper {
        @apply flex gap-2.5;
        .left-details {
          @apply flex gap-2.5;
          .order-img {
            @apply flex justify-center items-center shadow-[var(--product-shadow)] bg-[rgba(var(--light-slate),1)] h-[94px] w-[100px] px-5 py-[15px] rounded-[10px];
            img {
              @apply w-[100px] h-full object-contain;
            }
          }
        }
        .category-details {
          @apply flex items-center gap-[3px] justify-between flex-1;
          -webkit-box-flex: 1;
          .right-details {
            @apply bg-[rgba(var(--light-slate),1)] text-center m-0 p-1 rounded-[50px];
            .touchspin-wrapper {
              @apply block;
              .btn-touchspin {
                @apply w-[27px] h-[27px] flex justify-center items-center bg-[rgba(var(--white-bg),1)] rounded-[50px] border-[unset];
              }
              input[type="number"] {
                @apply w-[25px] text-center bg-[unset] text-[rgba(var(--body-font-color),1)] px-0 py-2.5 border-[unset];
              }
            }
          }
          .order-details-right {
            .last-order-detail {
              @apply flex items-center gap-[15px];
              a {
                i {
                  @apply text-[rgba(var(--chart-text-color),1)] text-[15px];
                }
              }
            }
          }
        }
        &.product-remove {
          @apply hidden;
        }
      }
    }
    .total-item {
      @apply bg-[rgba(var(--light-slate),1)] mt-[20px] px-[15px] py-3 rounded-[5px];
      .item-number {
        @apply flex justify-between pb-2.5;
      }
    }
  }
  .payment-methods {
    @apply flex text-center justify-between;
    .bg-payment {
      @apply cursor-pointer bg-[rgba(var(--light-slate),1)] flex justify-center items-center w-20 h-[70px] border transition-all duration-[0.5s] ease-[ease] px-[21px] py-[23px] rounded-[5px] border-solid border-transparent;
      img {
        @apply grayscale-[1] h-[calc(28px_+_(35_-_28)_*_((100vw_-_320px)_/_(1920_-_320)))];
      }
      &:hover,
      &.active,
      :focus {
        @apply border border-[rgba(var(--theme-default),1)] bg-[rgba(var(--primary-color),0.1)] transition-all duration-[0.5s] ease-[ease] border-solid;
        img {
          filter: unset;
        }
      }
    }
    span {
      @apply pt-3;
    }
  }
  .place-order {
    @apply mt-[17px];
    button {
      @apply px-0 py-[11px];
    }
  }
  .empty-card {
    @apply hidden;
    &.show {
      @apply block;
    }
  }
  .empty-cart-wrapper {
    @apply flex justify-center flex-col items-center;
    .empty-cart-content {
      @apply flex justify-center items-center w-[100px] h-[100px] rounded-[50%] bg-[rgba(var(--light-slate),1)];
      img {
        @apply w-full h-full;
      }
    }
    h6 {
      @apply leading-[22px] pt-3.5;
    }
  }
  .coupon-code {
    .input-group {
      @apply !flex-nowrap;
      .form-control {
        @apply rounded-tr-none rounded-tl-[5px] rounded-bl-[5px] rounded-br-none border-l-[1px] border-r-0;
      }
    }
    .input-group {
      .form-control {
        &:focus {
          box-shadow: unset;
          @apply shadow-[unset] border-[rgba(var(--chart-progress-light),1)];
        }
      }
      .btn {
        @apply text-[rgba(var(--body-font-color),1)] border border-[rgba(var(--chart-progress-light),1)] !rounded-tr-[5px] !rounded-tl-none !rounded-bl-none !rounded-br-[5px] border-solid;
      }
    }
  }

  @screen sm360 {
    .card-header-right-btn a {
      @apply text-xs;
    }
    .create-right-btn a {
      @apply text-xs;
    }
    .card-header-right-btn {
      @apply p-2;
    }
  }
  @screen xl1366 {
    .main-product-wrapper .product-header p {
      @apply hidden;
    }
    .main-product-wrapper {
      @apply items-center;
    }
  }
  @screen sm439 {
    .main-product-wrapper .product-body {
      @apply justify-end;
    }
    .main-product-wrapper .product-body .product-search {
      @apply hidden;
    }
  }
  @screen between1920-1200 {
    .customer-sticky {
      @apply h-[calc(100%_-_20px)];
    }
  }
  @screen xl1700 {
    .order-details {
      .order-quantity {
        .order-details-wrapper {
          @apply gap-2;
          .category-details {
            @apply flex-col gap-3 items-start;
            .right-details {
              .touchspin-wrapper {
                @apply flex justify-between items-center;
                input[type="number"] {
                  @apply p-0;
                }
              }
            }
          }
        }
      }
    }
  }
  @screen between1399-1200 {
    .order-details .order-quantity .order-details-wrapper .left-details .order-img {
      @apply w-20 h-[74px];
    }
    .order-details .order-quantity .order-details-wrapper .left-details .order-img img {
      @apply w-[75px];
    }
  }
  @screen xl1400 {
    .order-details .order-quantity .order-details-wrapper .category-details .right-details {
      @apply w-[100px];
    }
  }
  @screen xl1580 {
    .coupon-code .input-group .form-control::placeholder {
      @apply text-[13px];
    }
    .coupon-code .input-group .btn {
      @apply text-[13px];
    }
  }
}