/*
Theme Name: 3D Filament Shop
Theme URI: https://3dfilamentshop.in
Author: 3D Filament Shop Development Team
Author URI: https://3dfilamentshop.in
Description: A modern, ultra-fast, accessible, and clean WordPress + WooCommerce theme crafted specifically for 3D printer filament retailers and custom 3D printing & CAD design service providers. Built with semantic HTML5, zero-bloat CSS, WooCommerce hooks, and localized Tricity (Chandigarh, Mohali, Panchkula, Kharar) SEO optimization.
Version: 1.1.2
Tested up to: 6.7
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3d-filament-shop
Tags: e-commerce, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, block-patterns, wide-blocks, one-column, two-columns

All custom styles are organized modularly in assets/css/main.css and assets/css/woocommerce.css.
*/

/* WordPress Header Navigation Layout & Spacing */
.main-navigation ul,
.main-navigation #primary-menu,
#primary-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.25rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-navigation li,
#primary-menu li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.main-navigation a,
#primary-menu a {
  display: inline-block !important;
  padding: 0.375rem 0.625rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.main-navigation a:hover,
#primary-menu a:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
#primary-menu li.current-menu-item > a {
  color: #0f172a !important;
  font-weight: 700 !important;
  background-color: #f8fafc !important;
}

/* ========================================================================== */
/* Hero Choice Cards Explicit Frosted Glass & Pure White Typography           */
/* ========================================================================== */
.perspective-1000 {
  perspective: 1000px !important;
}

.choice-card {
  background-color: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(51, 65, 85, 0.85) !important;
  color: #ffffff !important;
  border-radius: 1rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
  transform-style: preserve-3d !important;
  will-change: transform, box-shadow, border-color !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
  position: relative;
}

/* Text Color: Force pure white (#ffffff) for all description, tags and paragraphs */
.choice-card h2 {
  color: #ffffff !important;
}

.choice-card p,
.choice-card .choice-desc,
.choice-card .text-slate-300 {
  color: #ffffff !important;
  font-weight: 400 !important;
  opacity: 0.95 !important;
}

/* Material & Service Tag Pills */
.choice-card a.tag-pill,
.choice-card .choice-tags a,
.choice-card .tag-pill {
  color: #ffffff !important;
  background-color: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.6) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover effects for filaments card */
.choice-card-filaments:hover {
  border-color: #22d3ee !important;
  box-shadow: 0 25px 60px -10px rgba(6, 182, 212, 0.45), 0 0 35px rgba(6, 182, 212, 0.25) !important;
}

.choice-card-filaments a.tag-pill:hover,
.choice-card-filaments .choice-tags a:hover {
  border-color: #22d3ee !important;
  background-color: rgba(6, 182, 212, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3) !important;
}

/* Hover effects for services card */
.choice-card-services:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 25px 60px -10px rgba(245, 158, 11, 0.45), 0 0 35px rgba(245, 158, 11, 0.25) !important;
}

.choice-card-services a.tag-pill:hover,
.choice-card-services .choice-tags a:hover {
  border-color: #fbbf24 !important;
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

/* ========================================================================== */
/* Hero Animations: Dynamic Aurora Background Orbs & Ambient Breathing Glow   */
/* ========================================================================== */
@keyframes auroraPulse1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.15;
  }
  50% {
    transform: translate(30px, -20px) scale(1.2);
    opacity: 0.35;
  }
}

@keyframes auroraPulse2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.12;
  }
  50% {
    transform: translate(-35px, 25px) scale(1.25);
    opacity: 0.3;
  }
}

.animate-aurora-1 {
  animation: auroraPulse1 7s ease-in-out infinite alternate !important;
}

.animate-aurora-2 {
  animation: auroraPulse2 9s ease-in-out infinite alternate !important;
}

/* CTA Button Shimmer Sweep */
@keyframes ctaShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.cta-btn {
  background-size: 200% 200% !important;
  animation: ctaShimmer 6s ease infinite !important;
}

.cta-btn:hover {
  transform: translateY(-2px) !important;
}

/* Subtle continuous ambient breathing glow */
@keyframes ambientBreatheCyan {
  0%, 100% {
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(6, 182, 212, 0.12);
  }
  50% {
    box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(6, 182, 212, 0.25);
  }
}

@keyframes ambientBreatheAmber {
  0%, 100% {
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.12);
  }
  50% {
    box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.25);
  }
}

.choice-card-filaments {
  animation: ambientBreatheCyan 5s ease-in-out infinite alternate;
}

.choice-card-services {
  animation: ambientBreatheAmber 5s ease-in-out infinite alternate;
}

/* ========================================================================== */
/* Step 2 & 3 Configurator Action Buttons & Swatches                          */
/* ========================================================================== */
.select-subtype-btn,
.select-subtype-btn span,
.select-subtype-btn svg {
  color: #ffffff !important;
  text-decoration: none !important;
}

#btn-whatsapp-order,
#btn-whatsapp-order span,
#btn-whatsapp-order svg {
  color: #ffffff !important;
  text-decoration: none !important;
}

#btn-whatsapp-order:hover {
  filter: brightness(1.05);
}

.brand-btn {
  text-decoration: none !important;
}

.brand-btn:hover {
  text-decoration: none !important;
}

/* Swatch tactile button styling */
.tactile-chip-btn {
  text-decoration: none !important;
}

.tactile-chip-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ========================================================================== */
/* Catalog Cards Action Buttons - High Contrast 100% White Text & Icons        */
/* ========================================================================== */
.catalog-item a.btn-buy-spool,
.catalog-item a[href*="wa.me"],
.catalog-item a.bg-blue-900,
a.btn-buy-spool {
  color: #ffffff !important;
  background-color: #1e3a8a !important;
  text-decoration: none !important;
}

.catalog-item a.btn-buy-spool:hover,
.catalog-item a[href*="wa.me"]:hover,
.catalog-item a.bg-blue-900:hover,
a.btn-buy-spool:hover {
  background-color: #1e40af !important;
  color: #ffffff !important;
}

.catalog-item a.btn-buy-spool span,
.catalog-item a.btn-buy-spool svg,
.catalog-item a[href*="wa.me"] span,
.catalog-item a[href*="wa.me"] svg,
.catalog-item a.bg-blue-900 span,
.catalog-item a.bg-blue-900 svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}

.catalog-item .open-specs-btn {
  text-decoration: none !important;
}

.catalog-item .open-specs-btn span {
  color: #1e293b !important;
}

.catalog-item .open-specs-btn svg {
  color: #475569 !important;
  stroke: #475569 !important;
}

#in-stock-catalog {
  scroll-margin-top: 1.5rem;
}

/* ========================================================================== */
/* Slide-Out Shopping Cart Drawer Modal                                       */
/* ========================================================================== */
#filament-cart-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: none;
}

#filament-cart-modal.is-open {
  display: block !important;
}

#filament-cart-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background-color: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000000 !important;
  cursor: pointer;
}

#filament-cart-modal.is-open #filament-cart-backdrop {
  opacity: 1 !important;
}

#filament-cart-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
  height: 100vh !important;
  background-color: #ffffff !important;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1000001 !important;
}

#filament-cart-modal.is-open #filament-cart-panel {
  transform: translateX(0) !important;
}