@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
@import "tailwindcss";

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    background-color: #F8F9FB;
    color: #1E293B;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
}

/* Custom Swiper Styles */
.swiper-pagination-bullet-active {
  background: #1976F3 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: #1976F3 !important;
  background: white;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px !important;
  font-weight: bold;
}

/* TechShop-style hero carousel (Slider Revolution-like) */
.techshop-hero .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.techshop-hero-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  margin: 0 4px !important;
  border-radius: 999px;
  transition: width 0.25s ease, background 0.25s ease;
}

.techshop-hero-pagination .swiper-pagination-bullet-active {
  width: 22px !important;
  background: #1976F3 !important;
  border-radius: 999px !important;
}

/* Layer entrance animations on active slide */
.techshop-layer {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.techshop-layer-media {
  transform: translateX(36px);
}

.techshop-hero-bg {
  transform: scale(1.06);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.swiper-slide-active .techshop-layer,
.swiper-slide-duplicate-active .techshop-layer {
  opacity: 1;
  transform: translate(0, 0);
}

.swiper-slide-active .techshop-layer-1,
.swiper-slide-duplicate-active .techshop-layer-1 {
  transition-delay: 0.12s;
}

.swiper-slide-active .techshop-layer-2,
.swiper-slide-duplicate-active .techshop-layer-2 {
  transition-delay: 0.22s;
}

.swiper-slide-active .techshop-layer-3,
.swiper-slide-duplicate-active .techshop-layer-3 {
  transition-delay: 0.32s;
}

.swiper-slide-active .techshop-layer-4,
.swiper-slide-duplicate-active .techshop-layer-4 {
  transition-delay: 0.42s;
}

.swiper-slide-active .techshop-layer-media,
.swiper-slide-duplicate-active .techshop-layer-media {
  transition-delay: 0.18s;
}

.swiper-slide-active .techshop-hero-bg,
.swiper-slide-duplicate-active .techshop-hero-bg {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .techshop-hero .swiper-wrapper {
    transition-duration: 0.01ms !important;
  }

  .techshop-layer,
  .techshop-hero-bg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hide scrollbars but keep scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Direct font overrides */
body, p, span, a, input, select, button {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-outfit {
  font-family: 'Outfit', sans-serif;
}

/* Force container max-width to 1400px on large displays */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px !important;
  }
}

/* Custom Utilities for Purchased Template Colors & Shadows */
.bg-bgLight { background-color: #F8F9FB; }
.bg-cardLight { background-color: #FFFFFF; }
.text-textMain { color: #1E293B; }
.text-textMuted { color: #64748B; }
.bg-primary { background-color: #1976F3; }
.bg-primary-hover:hover { background-color: #1565C0; }
.bg-primary-light { background-color: #E3F2FD; }
.text-primary { color: #1976F3; }
.border-primary { border-color: #1976F3; }
.shadow-soft { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -1px rgba(0, 0, 0, 0.03); }
.shadow-soft-hover:hover { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 15px -2px rgba(0, 0, 0, 0.04); }

/* Rich HTML product descriptions (bulk import + admin editor) */
.product-description-html ul,
.product-description-html ul li {
  list-style-type: disc !important;
}
.product-description-html ol,
.product-description-html ol li {
  list-style-type: decimal !important;
}
.product-description-html ul,
.product-description-html ol {
  padding-left: 1.75rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.product-description-html li {
  display: list-item !important;
  margin-bottom: 0.25rem !important;
}
.product-description-html [style*="text-align: center"],
.product-description-html p[style*="text-align: center"] {
  text-align: center !important;
}
.product-description-html [style*="text-align: right"],
.product-description-html p[style*="text-align: right"] {
  text-align: right !important;
}
.product-description-html [style*="text-align: justify"],
.product-description-html p[style*="text-align: justify"] {
  text-align: justify !important;
}
.product-description-html strong,
.product-description-html b {
  font-weight: 700;
}