:root {
  --primary-color: #655df5;
  --secondary-color: #EC7063;
  --transition-speed: 0.3s;
  --shadow-light: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  --shadow-dark: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  --border-radius-sm: 10px;
  --border-radius-lg: 20px;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--primary-color);
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

.body-light,
.light-theme {
  background-color: #f8f9fa;
  color: #1a1e22;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.light-theme .component-theme,
.component-light {
  background-color: #ffffff;
  color: #1a1e22;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-theme .shadow-theme {
  box-shadow: var(--shadow-light) !important;
}

.light-theme .border-theme {
  border: 1px solid #e2e8f0;
}

.light-theme::-webkit-scrollbar-thumb {
  background: #a0aec0;
}

.body-dark,
.dark-theme {
  background-color: #0f1115;
  color: #e2e8f0;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.dark-theme .component-theme,
.component-dark {
  background-color: #1a1e22;
  color: #f8f9fa;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-theme .shadow-theme {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.dark-theme .border-theme {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme ::placeholder {
  color: #718096;
}

.dark-theme::-webkit-scrollbar-thumb {
  background: #4a5568;
}

.bg-main {
  background-color: var(--primary-color);
  color: #ffffff;
}

.text-main {
  color: var(--primary-color);
}

.border-main {
  border: 1px solid var(--primary-color) !important;
}

.btn-main,
.component-main {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-main:hover,
.component-main:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(236, 112, 99, 0.4);
}

.btn-main:active,
.component-main:active {
  transform: translateY(0);
  background-color: var(--secondary-color);
}

.hovered {
  transition: all 0.2s ease;
}

.hovered:hover {
  background-color: var(--secondary-color) !important;
  color: #ffffff !important;
  border-color: var(--secondary-color) !important;
}

.component-gradient {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: #ffffff;
}

.text-hover:hover {
  color: var(--secondary-color) !important;
  text-decoration: none;
}

.radius-10 {
  border-radius: var(--border-radius-sm) !important;
}

.radius-20 {
  border-radius: var(--border-radius-lg) !important;
}

.rtl-flip {
  transform: scaleX(1);
}

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

.object-fit-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-title-text {
  font-size: 1.5rem;
  font-weight: 700;
}

.product-price-text {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.product-footer-text {
  font-size: 1.1rem;
}

@media only screen and (max-width: 768px) {
  .navbar-brand img {
    width: 80px;
    height: 80px;
  }

  .display-4 {
    font-size: 2.5rem;
  }

  .product-img {
    height: 200px;
  }

  .product-title-text {
    font-size: 1.2rem;
  }

  .product-price-text {
    font-size: 1.1rem;
  }
}