@use  "tailwindcss/base";
@use  "tailwindcss/components";
@use  "tailwindcss/utilities";
@use  "@/styles/font.scss";
@use  "@/styles/custom-classes.scss";
@use  "@/styles/components/btn.scss";

// @import "@/styles/base/fonts.scss";

:root {
  --website_primary_color: #f6b3ff;
  --website_secondary_color: #f5ebff;
  --website_tertiary_color: #8f8f8f;
  --website_light_border_color: #eff0f1;
  --website_font_color: #171717;
  --website_light_font_color: #828aba;
  --website_success_color: #06d6a0;
  --website_warning_color: #ff445b;
  --website_dark_border_color: #797979;
  --website_footer_color: #000000;
  --website_white_color: #f6f6f6;
}


::-webkit-scrollbar {
  @apply w-2 h-2;
}

img {
  -webkit-user-drag: none; /* For Safari */
  user-drag: none; /* Non-standard but widely supported in modern browsers */
  pointer-events: none; /* Optional: Prevents any mouse events on the image */
}

body {
  @apply has-[.main-modal]:overflow-hidden relative text-text-gray ;
}
body:after {
  content: "";
  @apply has-[.main-modal]:absolute top-0 left-0 w-full h-full bg-[#000000cc];
}

* {
  scroll-behavior: smooth;
}

/* Track */
::-webkit-scrollbar-track {
  @apply bg-border/10;
}

/* Handle */
::-webkit-scrollbar-thumb {
  @apply bg-primary rounded-lg;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #000;
  -webkit-background-clip: text !important;
  background-color: transparent !important;
}

input[type="radio"] {
  @apply accent-primary;
}


html[dir="ltr"] body,
html[dir="ltr"] body * {
  font-family: "HelveticaNeueCond", sans-serif !important;
}

html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: "URWDin", sans-serif !important;
}

.main-sec{
  @apply py-3 lg:py-10;
}
.section-title{
  @apply text-sm md:text-[20px] font-bold  ;
}

.icons{
  @apply flex items-center gap-2 ;
  a{
      @apply text-white hover:text-primary cursor-pointer size-8 md:size-10 transition-all duration-300 flex items-center justify-center ;
    }
}

.ant-drawer-body{
  @apply overflow-hidden #{!important}
}

.normal-input{
  @apply h-14 lg:h-16 p-4 placeholder:text-[#2d2d2db2]  lg:placeholder:text-xl placeholder:font-semibold placeholder:text-primary outline-0 border border-[#EAEDF0] rounded-xl pe-5;
}

.hide-arrows{
  .swiper-button-prev,
  .swiper-button-next {
    @apply hidden  #{!important};
  }
}

.sec_all_categories{
  .category_image_wrapper{
    @apply h-[100px] ; 
    img{
      @apply h-[100px] rounded-[50%];
    }
  }
  h5{
    @apply text-[1.3rem] mx-auto md:max-w-[180px]  text-secondary #{!important};
  }
}

.ant-slider{
  .ant-slider-step{
    @apply bg-[#000]/[.026];
  }
  .ant-slider-track-1{
    @apply bg-primary ;
  }
  .ant-slider-handle{
    @apply after:bg-primary  after:shadow-none before:hidden ;
  }
}

.success-toast-bg{
  @apply  *:text-success #{!important};
}


.error-toast-bg{
  @apply  *:text-error #{!important};
}

.badge_wrapper{
  span{
      @apply py-[5px] px-2.5 text-white font-semibold inline-flex mt-2 mb-4  items-center justify-start gap-[5px] rounded-es-[4px] rounded-ss-[12px]  ;
      &.top_deal_badge{
          @apply bg-[#ff8540] ;
      }
      &.offer_badge{
          @apply bg-[#cf0707];
      }
  }
}

.quantity-wrapper {
  @apply flex items-center font-extrabold md:min-h-[52px] px-4 bg-[#F5EBF64D]/[.3] border border-[#EFE0F1] rounded-xl;
  .quantity-btn{
      @apply  flex items-center text-primary justify-center disabled:cursor-not-allowed disabled:bg-[#ebf3f6]/[.5];
  }
  .quantity-text{
      @apply text-xl font-medium text-center min-w-8;
  }
}

.success-status{
  @apply bg-secSuccess text-success-600;
}

.failed-status{
  @apply bg-error-100 text-error;
}

.pending-status{
  @apply bg-gray-200 text-white;
}

// .quantity-wrapper {
//   @apply flex items-center font-extrabold py-1 text-xl border border-[#EFE0F1] rounded-xl;
//   .quantity-btn{
//       @apply w-12 h-12 flex items-center text-primary justify-center disabled:cursor-not-allowed disabled:bg-[#ebf3f6]/[.5];
//   }
//   .quantity-text{
//       @apply text-xl font-medium text-center min-w-8;
//   }
// }

.flagged_phone_content_wrapper{
  @apply flex items-center rtl:flex-row-reverse;
  .selected_flag_wrapper{
      @apply bg-white border border-solid border-[#ececec] rounded-[4px] py-2 px-[5px] flex items-center rtl:flex-row-reverse gap-2;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
  }
  input{
      @apply border border-solid border-[#ececec] w-full h-full py-[5px] px-3 rounded-[4px] transition-all leading-[18px] m-0 focus:outline-none #{!important};
  }
}

.hidden-icon{
  @apply hidden #{!important};
}

.custom-tabs-wrapper{
  .ant-tabs-nav{
    .ant-tabs-ink-bar,
      &::before {
        @apply hidden;
      }
  }
  .ant-tabs-nav-list{
    @apply flex items-center pb-4 p-0 text-center w-fit gap-3 lg:gap-6 overflow-x-auto ;
    // &::-webkit-scrollbar {
    //   height: 5px; /* Set scrollbar height */
    // }
    .ant-tabs-tab{
        @apply flex items-center justify-center border border-solid lg:min-w-[175px]  hover:text-primary focus:text-primary rounded-xl border-platinum m-0;
        .ant-tabs-tab-btn{
          @apply px-1.5 text-sm font-semibold ;
        }
        &.ant-tabs-tab-active{
          @apply border-primary;
          .ant-tabs-tab-btn{
            @apply text-primary;
          }
        }
    }
  }
}
.coupon-tabs{
  @apply mt-5;
  .ant-tabs-nav-list{
    @apply w-full;
    .ant-tabs-tab{
      @apply flex-1;
    }
  }
}

.product_fav_btn{
    @apply  flex items-center gap-1.5  bg-white p-2 rounded-full border border-solid border-greynormal cursor-pointer max-md:text-xs;
    &.active{
        @apply bg-secprimary border-transparent;
    }
}

.faqs-sec{
  // @apply
  .ant-collapse{
    @apply bg-transparent space-y-3 pb-4 lg:max-w-[60%];
    .ant-collapse-item{
      @apply border border-gray-100 rounded-[14px] bg-white #{!important};
      &:last-child{
        border-bottom: 1px solid #F3F3F3;
      }
      .ant-collapse-header{
        .ant-collapse-header-text{
          @apply text-xl  font-bold ; 
        }
        .ant-collapse-expand-icon{
          @apply  size-8 rounded-lg flex items-center justify-center transition-all duration-300 p-0;
        }
      }
      &.ant-collapse-item-active{
        .ant-collapse-expand-icon{
          @apply bg-secprimary size-8  ;
          svg {
            @apply rotate-0 ;
          }
        }
      }
    }
  } 
}

.app-input{
  @apply h-[52px] border-platinum rounded-xl  placeholder:text-gray-200 focus:border-platinum hover:border-platinum ;
}


.address-card{
  @apply bg-white mt-4 rounded-2xl p-5 flex flex-col md:flex-row ;
  .toggle-btn{
      @apply flex flex-col items-end  justify-between gap-2;
      p{
          @apply bg-secprimary text-[10px] sm:text-sm text-primary px-2 py-2.5 rounded-xl font-semibold cursor-pointer  ;
      }
  }
}
.ant-checkbox{
  .ant-checkbox-inner{
      @apply size-6  after:w-[7px] after:h-[12px];
  }
  &.ant-checkbox-checked{
    .ant-checkbox-inner{
        @apply bg-primary border-primary hover:bg-primary after:border-white #{!important};
    }
  }
}

.ant-form-item-explain-error{
  @apply text-[11px] absolute bottom-0 px-[2px] font-semibold;
}

.notifications-drawer-container{
  .ant-drawer-content-wrapper{
    @apply md:w-[476px] #{!important};
  }
  .ant-drawer-header-title{
    @apply flex-row-reverse gap-3;
  }
  .ant-drawer-close{
    @apply size-10 rounded-xl bg-[#F0F0F2];
  }
}

.checkout-payments-btn{
  @apply  bg-white items-center p-5 rounded-xl ;
  .ant-radio-wrapper{
      @apply flex flex-1 items-center flex-row-reverse  font-semibold justify-between w-full p-4 border border-platinum after:hidden rounded-xl h-14; 
      &.ant-radio-wrapper-checked{
          @apply bg-secprimary text-primary;
          .ant-radio-inner{
              @apply bg-primary  border-primary ;
          }
      }
  }
}

.change-status-btns{
  @apply min-w-[231px] #{!important};
  .ant-dropdown-menu-item{
    @apply hover:bg-transparent #{!important};
  }

  .ant-radio-wrapper{
    @apply flex flex-1 items-center flex-row-reverse  font-semibold justify-between w-full py-4 border-b border-b-platinum after:hidden  h-14; 
    &.ant-radio-wrapper-checked{
        @apply  text-primary;
        .ant-radio-inner{
            @apply bg-primary  border-primary ;
        }
    }
  }
}

.app-card-wrapper{
  @apply  p-3 lg:p-6 bg-white rounded-lg lg:rounded-[24px];
  h3{
    @apply text-sm md:text-lg font-medium
  }
  .icon-wrapper{
      @apply p-1.5 md:p-3 rounded-full bg-secprimary border border-[#EFE0F1];
  }
}

.actions-dropdown{
  @apply min-w-[230px] py-6 px-4 #{!important} ;
  .ant-dropdown-menu-title-content{
    @apply flex items-center gap-2 text-gray-500 ;
  }
}

.side-filter-wrapper{
  .ant-collapse{
      @apply border-none bg-transparent border-b-transparent rounded-none #{!important};
      .ant-collapse-item{
          @apply border-b-transparent  #{!important};
          .ant-collapse-content-box,
          .ant-collapse-header{
              @apply px-0 #{!important};
          }
          .ant-collapse-expand-icon{
              @apply -rotate-180 text-lg font-bold p-0 #{!important};
          }
          .ant-collapse-arrow{
              @apply text-sm font-bold #{!important};
          }
  
          &.ant-collapse-item-active{
              .ant-collapse-expand-icon{
                  @apply rotate-0 #{!important};
              }
          }
      }
      .ant-collapse-content{
          @apply bg-transparent border-none #{!important};
      }
  }
  .ant-checkbox-wrapper{
      @apply flex items-center mb-2;
      .ant-checkbox{
          @apply hover:border-[#ccc] ;
          .ant-checkbox-inner{
              @apply  rounded-lg after:border-white after:w-[7px] after:h-[12px] border-[#ccc] bg-transparent size-6 transition-all duration-150;
          }
          span{
              @apply font-semibold ;
          }
      } 
      span{
           @apply text-[#333333] text-sm #{!important};
      }
  }
  .ant-checkbox-wrapper-checked{
      .ant-checkbox .ant-checkbox-inner{
          @apply bg-primary hover:bg-primary border-primary #{!important};
      }
  }
}

.mobile-tab{
  @apply flex flex-col items-center gap-1;
  &.active-link{
    @apply text-primary #{!important};
    svg {
      @apply *:stroke-primary #{!important};
      &.home-icon{
        @apply *:fill-primary #{!important};
      }
    }
  }
}

.chat-typing{
    @apply flex items-center gap-0.5;

  .dot {
    animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
    background-color: #6CAD96 ; 
    border-radius: 50%;
    height: 4px;
    vertical-align: middle;
    width: 4px;
    display: inline-block;
  }
  .dot:nth-child(1) {
    animation-delay: 200ms;
  }
  .dot:nth-child(2) {
    animation-delay: 300ms;
  }
  .dot:nth-child(3) {
    animation-delay: 400ms;
  }
  .dot:last-child {
    margin-right: 0;
  }
  
}

@keyframes mercuryTypingAnimation {
  0% {
    transform: translateY(0px);
    background-color:#6CAD96; // rgba(20,105,69,.7);
  }
  28% {
    transform: translateY(-7px);
    background-color:#9ECAB9; //rgba(20,105,69,.4);
  }
  44% {
    transform: translateY(0px);
    background-color: #B5D9CB; //rgba(20,105,69,.2);
  }
}
.app_wrapper{
  @apply relative ;
}
.swal2-actions{
  @apply flex items-center gap-3;
}

#_rht_toaster,.swal2-container{
  @apply z-[9999999999] #{!important};
}

.search-products-dropdown{
  .ant-dropdown-menu{
    @apply h-[350px];
    .ant-dropdown-menu-item.products_list{
      a:hover{
        @apply text-primary #{!important};
      }
      &:hover{
        @apply bg-transparent #{!important};
      }
    }
  }
}

.category-select-wrapper{
  .ant-select-selection-item{
    @apply text-[10px] bg-[#F7F7F7] rounded-full flex items-center #{!important};
    span{
      @apply font-bold text-text-gray;
    }
    .ant-select-selection-item-remove{
      @apply size-4 text-[10px] bg-[#a5a6a8] text-[#292D32] rounded-[50%] grid place-content-center;
    }
  }
}