@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap");

* {
  font-family: "Vazirmatn", sans-serif;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.gradient-bg {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 90%);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover img {
  transition: all 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.shadow-inner {
  box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.02);
}
.slider-container {
  scroll-behavior: smooth;
}

.warning-box {
  background: rgba(255, 59, 48, 0.2);
  border-right: 4px solid #ff3b30;
}

.editor-sample {
  position: relative;
  overflow: hidden;
}
.qr-code {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}
.grad {
  background-image: linear-gradient(135deg, #ec4899, #f59e0b);
}
.grad-text {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.6);
}
.swiper {
  height: auto;
}
.nav a {
  transition: all 0.3s ease;
  font-weight: bold;
}
.nav a:hover {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.Hero {
  background-image: url("/assets/img/large.png");
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Animation for notifications */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes up {
  from {
    transform: translateY(-60%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes upRright {
  from {
    transform: translateX(-60%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.up {
  animation: up 0.9s ease-out forwards;
}
.upRright {
  animation: upRright 0.3s ease-out forwards;
}
.notification {
  animation: slideIn 0.3s ease-out forwards;
}

/* Transition for dark mode toggle */
.dark-toggle {
  transition: all 0.3s ease;
}

/* RTL adjustments */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}



        .product-image {
            transition: transform 0.3s ease;
        }
        .product-image:hover {
            transform: scale(1.02);
        }
        .thumbnail {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .thumbnail:hover, .thumbnail.active {
            border-color: #34d399;
            transform: translateY(-3px);
        }
        .add-to-cart-btn {
            transition: all 0.3s ease;
        }
        .add-to-cart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
        }
        .buy-now-btn {
            transition: all 0.3s ease;
        }
        .buy-now-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
        }
        .comment-box {
            transition: all 0.3s ease;
        }
        .comment-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(52, 211, 153, 0.2);
        }
        .language-selector {
            transition: all 0.3s ease;
        }
        .language-selector:hover {
            color: #34d399;
        }
        .star-rating .star {
            color: #6b7280;
            cursor: pointer;
            transition: color 0.2s;
        }
        .star-rating .star:hover, 
        .star-rating .star.active {
            color: #fbbf24;
        }