/* ========================================================

   Avesh Technologies - Professional Maker & E-Commerce Theme

   Official Brand Colors:

   Primary: #1d4ed8 (Royal Blue)

   Secondary: #f97316 (Maker Orange)

   Dark: #0f172a (Deep Slate)

   Background: #f8fafc (Clean Slate Light)

   ======================================================== */



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



:root {

  --primary: #1d4ed8;

  --primary-hover: #1e40af;

  --secondary: #f97316;

  --secondary-hover: #ea580c;

  --dark: #0f172a;

  --card-bg: #ffffff;

  --border-color: #e2e8f0;

}



html, body {

  overflow-x: hidden;

  max-width: 100vw;

  width: 100%;

  position: relative;

}



body {

  font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;

  background-color: #f8fafc;

  color: #0f172a;

  -webkit-font-smoothing: antialiased;

}



/* Smooth Scrolling */

html {

  scroll-behavior: smooth;

}



/* Professional Custom Scrollbar */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}

::-webkit-scrollbar-track {

  background: #f1f5f9;

}

::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

  background: #94a3b8;

}



/* Subtle Card Hover */

.product-card {

  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;

}

.product-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.12);

  border-color: #bfdbfe;

}



/* Sticky Header & Announcements */

.announcement-bar {

  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);

}



/* ========================================================

   Hero Carousel Clean Single-Slide Engine

   Ensures ONLY ONE slide is ever visible at a time on all viewports (PC & Mobile)

   ======================================================== */

#hero-carousel {

  position: relative !important;

  display: block !important;

  width: 100% !important;

  overflow: hidden !important;

}

#hero-carousel .hero-slide,

.hero-slide {

  display: none !important;

  width: 100% !important;

}

#hero-carousel .hero-slide.active,

.hero-slide.active {

  display: flex !important;

  animation: heroSlideFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

@media (min-width: 768px) {

  #hero-carousel .hero-slide.active,

  .hero-slide.active {

    display: grid !important;

  }

}

@keyframes heroSlideFade {

  from {

    opacity: 0;

    transform: translateY(4px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Badge styles */

.badge-bestseller {

  background-color: #f97316;

  color: #ffffff;

}

.badge-trending {

  background-color: #8b5cf6;

  color: #ffffff;

}

.badge-new {

  background-color: #10b981;

  color: #ffffff;

}



/* Line clamps */

.line-clamp-1 {

  display: -webkit-box;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.line-clamp-2 {

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



/* Floating WhatsApp Button */

.floating-whatsapp {

  position: fixed;

  bottom: 24px;

  left: 24px;

  z-index: 999;

  width: 58px;

  height: 58px;

  background-color: #25D366;

  color: #ffffff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 32px;

  box-shadow: 0 10px 25px -3px rgba(37, 211, 102, 0.5);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  text-decoration: none;

}

.floating-whatsapp:hover {

  transform: scale(1.08);

  box-shadow: 0 15px 30px -3px rgba(37, 211, 102, 0.65);

}



/* Floating Instagram Pill */

.floating-social {

  position: fixed;

  bottom: 92px;

  left: 24px;

  z-index: 998;

  height: 40px;

  padding: 0 14px;

  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  color: #ffffff;

  border-radius: 20px;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  font-weight: 700;

  box-shadow: 0 8px 20px -3px rgba(220, 39, 67, 0.4);

  transition: transform 0.3s ease;

  text-decoration: none;

}

.floating-social:hover {

  transform: scale(1.05);

}



/* Skeleton Loading */

.skeleton {

  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);

  background-size: 200% 100%;

  animation: skeleton-wave 1.5s infinite;

}

@keyframes skeleton-wave {

  0% { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



/* Subtle Animations */

@keyframes fadeIn {

  from { opacity: 0; transform: translateY(6px); }

  to { opacity: 1; transform: translateY(0); }

}

.fade-in {

  animation: fadeIn 0.3s ease-out forwards;

}



/* Clean Category Pills */

.category-pill {

  transition: all 0.2s ease;

}

.category-pill:hover {

  border-color: #1d4ed8;

  color: #1d4ed8;

}

.category-pill.active {

  background-color: #1d4ed8;

  color: #ffffff;

  border-color: #1d4ed8;

}



/* ========================================================

   Mobile-First Responsive Alignment & No-Overflow System

   ======================================================== */

html, body {

  max-width: 100vw;

  overflow-x: hidden;

  position: relative;

}



/* Hide scrollbars cleanly across Chrome, Safari, Firefox, Edge */

.scrollbar-hide::-webkit-scrollbar,

.no-scrollbar::-webkit-scrollbar {

  display: none !important;

  width: 0 !important;

  height: 0 !important;

}

.scrollbar-hide,

.no-scrollbar {

  -ms-overflow-style: none !important;

  scrollbar-width: none !important;

}



/* Smooth Touch Scrolling for Horizontal Category Bars */

.header-cat-tab,

.featured-tab,

.cat-pill,

.category-pill {

  flex-shrink: 0 !important;

  white-space: nowrap !important;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Category sub-navbar touch scroll */

nav div[class*="overflow-x-auto"],

div[class*="overflow-x-auto"] {

  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;

}



/* Mobile Header & Button Alignment (Screens < 640px) */

@media (max-width: 639px) {

  header {

    padding-left: 0.5rem;

    padding-right: 0.5rem;

  }

  

  /* Prevent header buttons from wrapping or pushing off-screen */

  #header-creator-hub-btn {

    padding-left: 0.65rem;

    padding-right: 0.65rem;

  }



  /* Compact header auth button */

  #header-auth-label {

    display: none;

  }

  #header-auth-btn {

    padding-left: 0.5rem;

    padding-right: 0.5rem;

  }



  /* Product cards 2-column mobile optimization */

  .product-card {

    border-radius: 1rem;

  }

  .product-card h3 {

    font-size: 0.8rem;

    line-height: 1.15;

  }

  

  /* Touch-friendly category tabs */

  .featured-tab,

  .header-cat-tab,

  .cat-pill {

    font-size: 11px;

    padding: 6px 12px;

    flex-shrink: 0;

    white-space: nowrap;

  }



  /* Floating WhatsApp on mobile */

  .floating-whatsapp {

    bottom: 16px;

    left: 16px;

    width: 48px;

    height: 48px;

  }

  .floating-whatsapp i {

    font-size: 26px;

  }

  .floating-social {

    bottom: 72px;

    left: 16px;

    height: 34px;

    font-size: 11px;

    padding: 0 10px;

  }

}