@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  font-family: Inter, sans-serif !important;
}
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: Tajawal, sans-serif !important;
}
:root {
  --background: 171 100% 95%;
  --foreground: 171 5% 0%;
  --card: 171 50% 90%;
  --card-foreground: 171 5% 10%;
  --popover: 171 100% 95%;
  --popover-foreground: 171 100% 0%;
  --primary: 171 96.8% 36.7%;
  --primary-foreground: 0 0% 100%;
  --secondary: 171 30% 70%;
  --secondary-foreground: 0 0% 0%;
  --muted: 133 30% 85%;
  --muted-foreground: 171 5% 35%;
  --accent: 133 30% 80%;
  --accent-foreground: 171 5% 10%;
  --destructive: 0 100% 30%;
  --destructive-foreground: 171 5% 90%;
  --border: 171 30% 50%;
  --input: 171 30% 18%;
  --ring: 171 96.8% 36.7%;
  --radius: 0.5rem;
}
.dark {
  --background: 171 50% 5%;
  --foreground: 171 5% 90%;
  --card: 171 50% 0%;
  --card-foreground: 171 5% 90%;
  --popover: 171 50% 5%;
  --popover-foreground: 171 5% 90%;
  --primary: 171 96.8% 36.7%;
  --primary-foreground: 0 0% 100%;
  --secondary: 171 30% 10%;
  --secondary-foreground: 0 0% 100%;
  --muted: 133 30% 15%;
  --muted-foreground: 171 5% 60%;
  --accent: 133 30% 15%;
  --accent-foreground: 171 5% 90%;
  --destructive: 0 100% 30%;
  --destructive-foreground: 171 5% 90%;
  --border: 171 30% 18%;
  --input: 171 30% 18%;
  --ring: 171 96.8% 36.7%;
  --radius: 0.5rem;
}
* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* For WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  @apply !w-[15px] h-2; /* Thin scrollbar (width & height) */
}

::-webkit-scrollbar-track {
  @apply bg-transparent; /* Transparent track */
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full; /* Rounded thumb */
  border: 2px solid transparent; /* Creates padding effect */
  background-clip: content-box; /* Ensures rounded edges */
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500; /* Darker on hover */
}

.slick-prev {
  @apply !left-3 !z-20;
}
.slick-next {
  @apply !right-3 !z-20;
}
.slick-next::before,
.slick-prev::before {
  @apply !text-[24px];
}
.slick-dots {
  @apply !bottom-2;
}
.ant-checkbox-wrapper {
  @apply !flex !items-start;
}
.slick-dots.custom-dots {
  @apply flex justify-center space-x-1 !relative mt-[20px] ;
}
.slick-dots.custom-dots li {
  @apply m-0;
}
.slick-dots.custom-dots li.slick-active div {
  @apply bg-gray-400;
}
.product-item:last-child {
  @apply !ms-0;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 500px) {
  .swiper .product-item:last-child {
    @apply !ms-auto;
  }
}
.cart-product:last-child {
  @apply !border-none;
}
.ant-steps
  .ant-steps-item-finish.ant-steps-item-custom
  .ant-steps-item-icon
  > .ant-steps-icon,
.ant-steps
  .ant-steps-item-process.ant-steps-item-custom
  .ant-steps-item-icon
  > .ant-steps-icon {
  @apply !text-primary;
}
.ant-steps-item-finish
  > .ant-steps-item-container
  > .ant-steps-item-content
  > .ant-steps-item-title::after {
  @apply !bg-primary;
}
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  @apply !border-primary !bg-primary;
}
.ant-select {
  @apply!h- [50px];
}
.add-address textarea {
  @apply !bg-custom-gradient !border-primary;
}
.ant-checkbox-checked .ant-checkbox-inner {
  @apply !border-primary !bg-primary;
}
.ant-pagination {
  @apply !justify-end !mt-[30px];
}
.ant-pagination .ant-pagination-item-active a {
  @apply !text-primary;
}
.ant-pagination .ant-pagination-item-active {
  @apply !border-primary;
}
.ant-pagination
  .ant-pagination-jump-next
  .ant-pagination-item-container
  .ant-pagination-item-link-icon,
.ant-pagination
  .ant-pagination-jump-prev
  .ant-pagination-item-container
  .ant-pagination-item-link-icon {
  @apply !text-primary;
}
.ant-form-item-control-input-content input {
  @apply !py-[15px] !outline-none !shadow-none;
}
.ant-form-item-control-input-content input:hover {
  @apply !border-primary;
}
.ant-input-affix-wrapper:focus-within,
.ant-input-affix-wrapper:hover,
.ant-input-outlined:focus {
  @apply !border-primary;
}
.ant-input-affix-wrapper {
  @apply !py-0 !pe-[10px] !outline-none !shadow-none;
}
.ant-message {
  @apply !z-[10000];
}
.ant-pagination-options .ant-select {
  @apply !h-[32px]
}
.ant-collapse-header {
  @apply !bg-white !rounded-[8px];
}
/* .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important; 
}

.swiper-slide {
  height: auto !important; 
}
.product-item {
  display: flex;
  flex-direction: column;
  
} */

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.ant-select-focused .ant-select-selector,  .ant-select-selector:hover {
  @apply !border-primary  ;
}
:where(.css-dev-only-do-not-override-7ny38l).ant-select-multiple
  .ant-select-selection-overflow {
  height: 50px;
}
.ant-select {
  height: 55px;
  width: 100%;
  padding: 0;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.custom-select .ant-select-selector {
  height: 55px !important;
  border: 1px solid #03b89e !important;
  border-radius: 12px !important;
  padding: 0 15px !important;
  display: flex;
  align-items: center;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -ms-border-radius: 12px !important;
  -o-border-radius: 12px !important;
}
:where(.css-dev-only-do-not-override-7ny38l).ant-select-single:not(
    .ant-select-customize-input
  )
  .ant-select-selector
  .ant-select-selection-search-input {
  height: 55px;
}
[dir="rtl"] .slick-prev {
  left: auto !important;
  right: 20px !important;
}
[dir="rtl"] .slick-next {
  right: auto !important;
  left: 20px !important;
}
.ant-dropdown-menu {
  padding: 14px 10px !important;
  min-width: 200px;
  border: 1px solid;
  @apply !border-primary;
  @apply !text-secondary;
}
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content > a,
.ant-dropdown-menu-title-content {
  @apply !text-secondary;
  font-weight: 500;
  font-size: medium;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox-inner:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
  @apply !border-primary 
}
.ant-pagination {
  @apply !items-center
}
.ant-dropdown-menu-title-content {
  color: red !important;
}
.leaflet-geosearch-bar form input {
  @apply !px-3
}
.header-profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.rtl-pagination .ant-pagination-prev,
.rtl-pagination .ant-pagination-next {
  transform: rotate(180deg);
}
.custom-div-icon {
  background: transparent !important;
  border: none !important;
}

.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}
.leaflet-marker-icon {
  margin: 0 !important;
}

.location-permission-popup .leaflet-popup-content-wrapper {
  padding: 12px !important;
  border-radius: 8px !important;
}
@media screen and (device-aspect-ratio:2/3){select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"]{font-size:16px}}@media screen and (device-aspect-ratio:40/71){select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"]{font-size:16px}}@media screen and (device-aspect-ratio:375/667){select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"]{font-size:16px}}@media screen and (device-aspect-ratio:9/16){select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"]{font-size:16px}}