/* --- FONTS --- */
/* Yekan Bakh Font Family */
@font-face {
  font-family: "Yekan Bakh";
  src:
    url("/assets/fonts/yekan-bakh/woff2/YekanBakh-Regular.woff2")
      format("woff2"),
    url("/assets/fonts/yekan-bakh/woff/YekanBakh-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src:
    url("/assets/fonts/yekan-bakh/woff2/YekanBakh-Bold.woff2") format("woff2"),
    url("/assets/fonts/yekan-bakh/woff/YekanBakh-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src:
    url("/assets/fonts/yekan-bakh/woff2/YekanBakh-ExtraBlack.woff2")
      format("woff2"),
    url("/assets/fonts/yekan-bakh/woff/YekanBakh-ExtraBlack.woff")
      format("woff");
  font-weight: 900;
  font-style: normal;
}

/* Yekan Bakh FaNum Font Family */
@font-face {
  font-family: "Yekan Bakh FaNum";
  src:
    url("/assets/fonts/yekan-bakh-fanum/woff2/YekanBakhFaNum-Regular.woff2")
      format("woff2"),
    url("/assets/fonts/yekan-bakh-fanum/woff/YekanBakhFaNum-Regular.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh FaNum";
  src:
    url("/assets/fonts/yekan-bakh-fanum/woff2/YekanBakhFaNum-Bold.woff2")
      format("woff2"),
    url("/assets/fonts/yekan-bakh-fanum/woff/YekanBakhFaNum-Bold.woff")
      format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh FaNum";
  src:
    url("/assets/fonts/yekan-bakh-fanum/woff2/YekanBakhFaNum-ExtraBlack.woff2")
      format("woff2"),
    url("/assets/fonts/yekan-bakh-fanum/woff/YekanBakhFaNum-ExtraBlack.woff")
      format("woff");
  font-weight: 900;
  font-style: normal;
}

:root {
  --font-yekan-bakh: "Yekan Bakh", sans-serif;
  --font-yekan-bakh-fanum: "Yekan Bakh FaNum", sans-serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* --- STYLES --- */
body {
  font-family: var(--font-yekan-bakh);
  background: var(--color-body);
  overflow-x: hidden;
}

.contact-info::before,
.contact-info::after {
  content: "";
  width: 4px;
  height: 100%;
  position: absolute;
  background: var(--color-secondary);
  border-radius: 100vw;
}

.contact-info::before {
  left: 0px;
}
.contact-info::after {
  right: 0px;
}

.hero-image {
  animation: entrance 1s ease 1s 1 normal forwards;
}

.hero-section::before {
  content: "";
  width: 100%;
  height: calc(100% + 25vh);
  background: url("/assets/images/background-pattern.png") no-repeat center
    center/cover;
  position: absolute;
  inset: 0;
  top: -230px;
}

.grid-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 346px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.grid-slider.cols-3 {
  grid-auto-columns: 468px;
}

.hide-scrollbar.dragging {
  cursor: grabbing;
  user-select: none;
}

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* width */
.shopping-cart-list::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.shopping-cart-list::-webkit-scrollbar-track {
  background: #c5c5c52f;
}

/* Handle */
.shopping-cart-list::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 100vw;
}

.slim-select-main .ss-arrow {
  display: none !important;
}

.slim-select-main {
  position: relative;
}

.slim-select-main::after {
  font-family: "Font Awesome 6 Free" !important; /* یا "Font Awesome 5 Free" بسته به نسخه */
  content: "\f078" !important; /* Unicode برای chevron-down */
  font-weight: 900; /* برای نسخه های solid */
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
  color: var(--color-primary);
}

.slim-select-main.ss-open-below::after {
  transform: translateY(-50%) rotate(180deg);
}
.slim-select-main.ss-open-top::after {
  transform: translateY(-50%) rotate(180deg);
}

@keyframes entrance {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.loader {
  width: 23px;
  height: 23px;
  border: 5px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;

  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pagination-spinner {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: var(--color-primary);
}
.pagination-spinner:before,
.pagination-spinner:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.pagination-spinner:after {
  color: var(--color-secondary);
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin {
  0%,
  100% {
    box-shadow: 0.2em 0px 0 0px currentcolor;
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 0.2em 0 0px currentcolor;
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -0.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0px -0.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 currentcolor;
  }
}

/* media queries */
@media only screen and (max-width: 768px) {
  .hero-section::before {
    height: 100%;

    inset: 0;
    top: 0;
  }
}


/* notyf style */
.notyf__toast {
  border-radius: 1rem !important;
}

.notyf__wrapper {
  gap: .75rem;
}