/* =================================================================
   CUSTOM SWIPER JS STYLES
   Minimal styles to customize Swiper arrows and pagination.
================================================================= */

/* --- Homepage Hero Slider --- */
.home-slider .swiper-slide .slide-content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.home-slider .swiper-slide-active .slide-content > * {
    opacity: 1;
    transform: translateY(0);
}
.home-slider .swiper-slide-active .slide-eyebrow { transition-delay: 0.2s; }
.home-slider .swiper-slide-active .slide-heading { transition-delay: 0.3s; }
.home-slider .swiper-slide-active .slide-subheading { transition-delay: 0.4s; }
.home-slider .swiper-slide-active .slide-button { transition-delay: 0.5s; }

/* NEW: Brand Slider Marquee Effect */
.brand-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}


/* --- General Swiper Controls --- */
.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.9);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: white;
    transform: scale(1.05);
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a; /* primary */
}

/* NEW: Hide deals slider arrows on mobile */
@media (max-width: 1023px) {
    .deals-slider .swiper-button-prev,
    .deals-slider .swiper-button-next,
    .homepage-product-carousel .swiper-button-prev,
    .homepage-product-carousel .swiper-button-next {
        display: none;
    }
}

/* Pagination dots for sliders */
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: background-color 0.3s ease, width 0.3s ease;
}
.swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background-color: var(--color-secondary);
}

/* =================================================================
   NEW: SECTION HEADING STYLES
================================================================= */
.section-heading {
    position: relative;
    padding-bottom: 0.75rem; /* 12px */
}
.section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 80px;
    border-radius: 2px;
    background-image: linear-gradient(to right, var(--color-secondary), var(--color-accent));
}


/* =================================================================
   UTILITIES & ANIMATIONS
================================================================= */

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* --- General Fade-in Animation --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up-anim 0.8s ease-out forwards;
}
@keyframes fade-in-up-anim {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Mobile Menu Styles (NEW: Sticky Header Dropdown) --- */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#mobile-nav-panel {
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border-top: 1px solid transparent;
}
.header-is-open #mobile-nav-panel {
    max-height: calc(100vh - 4rem); 
    border-top-color: #e2e8f0; /* gray-200 */
}
.dark .header-is-open #mobile-nav-panel {
    border-top-color: #334155; /* slate-700 */
}

/* Staggered animation for menu items */
.header-is-open #mobile-nav-panel ul > li {
    opacity: 0;
    transform: translateY(-10px);
    animation: menu-item-fade-in 0.3s ease forwards;
}

@keyframes menu-item-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.header-is-open #mobile-nav-panel ul > li:nth-child(1) { animation-delay: 0.1s; }
.header-is-open #mobile-nav-panel ul > li:nth-child(2) { animation-delay: 0.15s; }
.header-is-open #mobile-nav-panel ul > li:nth-child(3) { animation-delay: 0.2s; }
.header-is-open #mobile-nav-panel ul > li:nth-child(4) { animation-delay: 0.25s; }
.header-is-open #mobile-nav-panel ul > li:nth-child(5) { animation-delay: 0.3s; }
.header-is-open #mobile-nav-panel ul > li:nth-child(6) { animation-delay: 0.35s; }


/* --- Search Overlay --- */
#search-overlay-container {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}
body.search-open #search-overlay-container {
    transform: translateY(0);
}
body.search-open {
    overflow: hidden;
}

/* --- Animated Hamburger Icon --- */
.hamburger {
  padding: 8px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; 
}
.hamburger-box {
  width: 24px;
  height: 18px;
  display: inline-block;
  position: relative; 
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px; 
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 24px;
  height: 2.5px;
  background-color: #0f172a; /* primary color */
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; 
}
.dark .hamburger-inner, .dark .hamburger-inner::before, .dark .hamburger-inner::after {
    background-color: #f1f5f9; /* slate-100 */
}
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block; 
}
.hamburger-inner::before {
  top: -8px; 
}
.hamburger-inner::after {
  bottom: -8px; 
}
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; 
}
.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; 
}
.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}


/* =================================================================
   NEW: ADMIN PANEL STYLES
================================================================= */
.admin-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.admin-submenu.submenu-open {
  max-height: 500px; /* A large enough value to show all items */
}
.admin-submenu .submenu-link {
    display: block;
    padding: 0.65rem 1.5rem 0.65rem 3.75rem; /* Indented from left */
    color: #d1d5db; /* text-gray-300 */
    font-size: 0.9rem;
    position: relative;
    transition: all 0.2s ease;
}
.admin-submenu .submenu-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.admin-submenu .submenu-link.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-weight: 600;
}
/* --- Homepage Layout Selector --- */
.layout-selector input[type="radio"] {
    display: none; /* Hide the actual radio button */
}
.layout-selector label {
    display: block;
    border: 2px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    background-color: #ffffff;
}
.layout-selector input[type="radio"]:checked + label {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--color-secondary);
    background-color: #f0f9ff; /* A light blue */
}
.layout-selector label:hover {
    border-color: #9ca3af; /* border-gray-400 */
}


/* =================================================================
   NEW: GRADIENT BUTTONS
================================================================= */
.btn-gradient {
    background-image: linear-gradient(to right, var(--color-secondary) 0%, var(--color-accent) 51%, var(--color-secondary) 100%);
    transition: all 0.4s;
    background-size: 200% auto;
}
.btn-gradient:hover {
    background-position: right center; /* Animate the gradient */
}

.btn-gradient-green {
    background-image: linear-gradient(to right, #25D366 0%, #128C7E 51%, #25D366 100%);
    transition: all 0.4s;
    background-size: 200% auto;
}
.btn-gradient-green:hover {
    background-position: right center;
}

/* =================================================================
   NEW: ANIMATED TAGS
================================================================= */
@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(var(--shadow-color-rgb), 0.2), 0 2px 4px rgba(0,0,0,0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(var(--shadow-color-rgb), 0.5), 0 4px 8px rgba(0,0,0,0.15);
  }
}

.animated-tag {
  animation: pulse-glow 2.5s infinite ease-in-out;
  color: white;
  padding: 0.25rem 0.75rem; /* py-1 px-3 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 700; /* font-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
  border-radius: 9999px; /* rounded-full */
}

.tag-new {
  --shadow-color-rgb: 59, 130, 246; /* blue-500 */
  background-image: linear-gradient(to right, #3B82F6, #60A5FA);
}

.tag-hot {
  --shadow-color-rgb: 249, 115, 22; /* orange-500 */
  background-image: linear-gradient(to right, #F97316, #FB923C);
}

.tag-trending {
  --shadow-color-rgb: 168, 85, 247; /* purple-500 */
  background-image: linear-gradient(to right, #A855F7, #C084FC);
}

.tag-deals {
    --shadow-color-rgb: 239, 68, 68; /* red-500 */
    background-image: linear-gradient(to right, #EF4444, #F87171);
}

.tag-offers {
    --shadow-color-rgb: 234, 179, 8; /* yellow-500 */
    background-image: linear-gradient(to right, #EAB308, #FACC15);
}

/* =================================================================
   NEW: SHOP PAGE FILTER STYLES
================================================================= */

/* --- Filter Accordion --- */
.filter-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.filter-accordion-toggle.open + .filter-accordion-content {
    /* max-height is set by JS */
}
.filter-accordion-toggle.open .chevron-icon {
    transform: rotate(180deg);
}
.filter-accordion-toggle .chevron-icon {
     transition: transform 0.3s ease-out;
}


/* --- Mobile Filter Panel --- */
body.filter-open {
    overflow: hidden;
}
body.filter-open #mobile-filter-overlay {
    opacity: 1;
    pointer-events: auto;
}
body.filter-open #filter-sidebar.is-mobile {
    transform: translateX(0);
}

.mobile-filter-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    /* Tailwind classes will handle bg, padding, border */
}

/* --- Skeleton Loader --- */
.skeleton-card {
    background-color: #f3f4f6;
}
.dark .skeleton-card {
    background-color: #1f2937;
}
.skeleton-card .skeleton-img {
    background-color: #e5e7eb;
}
.dark .skeleton-card .skeleton-img {
    background-color: #374151;
}
.skeleton-card .skeleton-line {
     background-color: #e5e7eb;
     height: 1rem;
     border-radius: 0.25rem;
}
.dark .skeleton-card .skeleton-line {
     background-color: #374151;
}

/* --- List View Styles --- */
.product-grid-container.list-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}
.product-grid-container.list-view > * {
    width: 100%;
}


/* =================================================================
   DARK MODE STYLES
================================================================= */
.dark .swiper-button-next,
.dark .swiper-button-prev {
    background-color: rgba(30, 41, 59, 0.8); /* slate-800 */
}
.dark .swiper-button-next::after,
.dark .swiper-button-prev::after {
    color: #f1f5f9; /* slate-100 */
}
.dark .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.3);
}
.dark .brand-slider img {
    filter: brightness(0) invert(1) grayscale(1) opacity(0.6);
}
.dark .brand-slider a:hover img {
    filter: none;
}
.dark #live-search-results a:hover {
    background-color: #1e293b; /* slate-800 */
}