/* Base sizes for modal gallery main image */
.gallery-main {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- Responsive tweaks ---------- */

/* Tablets & small laptops */
@media (max-width: 1024px) {

  /* Keep modal height under control */
  .modal {
    max-height: 90vh;
  }
}

/* Tablets & larger phones (portrait) */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  /* Make modal a bit more compact and give breathing room around it */
  .modal {
    max-height: calc(100vh - 2rem);
    margin: 1rem;
    border-radius: 1.5rem;
  }

  /* So inner content has slightly smaller padding on small screens */
  #modalContent {
    padding: 1rem;
  }

  /* Any 2-column grid inside the modal becomes single-column on small screens */
  #modalContent .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .gallery-main {
    height: 220px;
  }

  .gallery-thumb {
    width: 52px;
    height: 52px;
  }

  /* Tabs slightly smaller so they don’t overflow */
  .tab-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Small phones */
@media (max-width: 640px) {

  /* Modal becomes full-screen on very small devices */
  .modal {
    margin: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  /* Header row inside modal (with title/close) sticks to edges nicely */
  .modal>.flex {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #modalContent {
    padding: 1rem;
  }

  .gallery-main {
    height: 200px;
    border-radius: 0;
  }

  /* Make filter pills smaller so they wrap better */
  .filter-pill {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Accordion text slightly smaller to fit better */
  .accordion-header {
    padding: 10px 12px;
  }

  .accordion-inner {
    padding: 10px 12px;
  }
}

/* Navigation Base - Solid White */
header nav {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* State when the page is scrolled */
header nav.nav-scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #f1f5f9;
}

/* Ensure mobile menu is also white and not transparent */
#mobileMenu {
  background-color: #ffffff;
}

/* Existing modal responsive code below... */
.gallery-main {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
}

/* ... rest of your code ... */
/* Navigation & General */
header nav {
  background-color: #ffffff !important;
  transition: all 0.3s ease;
}

header nav.nav-scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #f1f5f9;
}

#mobileMenu {
  background-color: #ffffff;
}

/* ---------- Category Pills (Professional Tab UI) ---------- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 99px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  cursor: pointer;
}

.category-pill svg {
  color: #94a3b8;
  transition: color 0.3s ease;
}

.category-pill:hover {
  border-color: #0B6E99;
  color: #0B6E99;
  background-color: #f8fafc;
}

/* Active State with brand gradient */
.category-pill.active {
  background: linear-gradient(135deg, #0B6E99 0%, #10B981 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(11, 110, 153, 0.25);
}

.category-pill.active svg {
  color: #ffffff;
}

/* Modal Gallery Sizes */
.gallery-main {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- Responsive Tweaks ---------- */

@media (max-width: 1024px) {
  .modal {
    max-height: 90vh;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .modal {
    max-height: calc(100vh - 2rem);
    margin: 1rem;
    border-radius: 1.5rem;
  }

  #modalContent {
    padding: 1rem;
  }

  #modalContent .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .gallery-main {
    height: 220px;
  }

  .gallery-thumb {
    width: 52px;
    height: 52px;
  }

  .tab-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .modal {
    margin: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .gallery-main {
    height: 200px;
    border-radius: 0;
  }

  /* Category Pill smaller for mobile */
  .category-pill {
    padding: 8px 14px;
    font-size: 13px;
  }

  .accordion-header,
  .accordion-inner {
    padding: 10px 12px;
  }
}

/* --- Professional Product Badge UI Upgrade --- */

/* Base style for all top-left badges */
.trending-badge,
.generic-badge {
  display: inline-flex !important;
  align-items: center;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 4px;
}

/* Trending Badge: Frosted Gold/Amber look */
.trending-badge {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #b45309 !important;
  /* Amber 700 */
}

/* Injecting a professional flame icon via CSS */
.trending-badge::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.99 7.99 0 0120 13a7.98 7.98 0 01-2.343 5.657z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.99 7.99 0 0120 13a7.98 7.98 0 01-2.343 5.657z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

/* Generic Badge: Frosted Medical Blue look */
.generic-badge {
  background: rgba(11, 110, 153, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Injecting a professional beaker/lab icon via CSS */
.generic-badge::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

/* Rx Badge: The Circular Red Seal */
.rx-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 30px !important;
  height: 30px !important;
  background: #ef4444 !important;
  /* Medical Red */
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 800 !important;
  font-size: 11px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4) !important;
  z-index: 10;
}

/* Safety Badges Hover Effects (The 🍷🤰🚗 icons) */
.safety-badge {
  padding: 4px 8px !important;
  border-radius: 6px !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Animation for the Trending Flame */
@keyframes flame-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

.trending-badge::before {
  animation: flame-pulse 2s infinite ease-in-out;
}

/* ---------- Enhanced Professional Modal UI ---------- */

/* 1. Backdrop - Deeper Blur for Focus */
#modalBackdrop {
  background: rgba(15, 23, 42, 0.7) !important;
  /* Slate-900 with opacity */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Modal Container */
.modal {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 3. Modal Header */
.modal .sticky {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px);
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

#modalTitle {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-weight: 800 !important;
}

/* 4. Main Gallery Section */
.gallery-main {
  height: 320px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 4px solid #fff;
  transition: transform 0.3s ease;
}

.gallery-thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  padding: 2px;
}

.gallery-thumb.active {
  border-color: #0B6E99 !important;
  background: #f0f9ff;
}

/* 5. Modern Tab Bar (Segmented Control look) */
.tab-btn {
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.3s ease !important;
  position: relative;
}

.tab-btn.active {
  color: #0B6E99 !important;
  border-bottom: 2px solid #0B6E99 !important;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #0B6E99, #10B981);
}

/* 6. Interaction Cards (Alcohol, Pregnancy, etc.) */
.interaction-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 16px !important;
  transition: all 0.3s ease;
}

.interaction-card:hover {
  border-color: #0B6E99;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.interaction-card .font-medium {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 13px;
}

/* 7. Composition Tags */
.composition-tag {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 8. Modern Accordion (Q&A) */
.accordion-item {
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden;
}

.accordion-header {
  background: #f8fafc !important;
  padding: 14px 18px !important;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background: #f1f5f9 !important;
}

.accordion-content-inner {
  padding: 16px 18px !important;
  line-height: 1.6;
  background: #fff;
  border-top: 1px solid #f1f5f9;
}

/* 9. Action Buttons in Footer */
#modalContent .flex-row gap-3 {
  background: #f8fafc;
  margin: 0 -24px -24px -24px;
  padding: 24px;
  border-top: 1px solid #f1f5f9;
}

/* WhatsApp Button Pulse */
[href*="wa.me"] {
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

/* Custom Scrollbar for Modal Content */
.tab-contents::-webkit-scrollbar {
  width: 6px;
}

.tab-contents::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.tab-contents::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

/* ---------- 1. TAB VISIBILITY LOGIC ---------- */
/* Ensures only the active tab is shown with a smooth fade-in */
.tab-content {
  display: none !important;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.tab-content.active {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 2. TAB BUTTONS UI (Segmented Control) ---------- */
.tab-btn {
  position: relative;
  padding: 12px 24px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  white-space: nowrap;
}

.tab-btn.active {
  color: #0B6E99 !important;
}

/* The animated underline for active tab */
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #0B6E99, #10B981);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-radius: 10px 10px 0 0;
}

.tab-btn.active::after {
  width: 80%;
}

/* ---------- 3. ICON REPLACEMENT (Safety Info) ---------- */
/* Targets the emoji spans in the interaction cards */
.interaction-card .text-lg {
  font-size: 0 !important;
  /* Hides the emoji text */
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Professional SVG Icons injected via CSS Masks */
.interaction-card .text-lg::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-color: #475569;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* 🍷 Alcohol Icon Replacement */
.interaction-card:has(span:contains('🍷')) .text-lg::before,
/* Compatibility check */
.interaction-card [title*="Alcohol"]+.text-lg::before,
.interaction-card .text-lg:nth-child(1)::before {
  /* Fallback */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2l1 1h-2l1-1zm0 0v18m-5-5h10M7 7l1 10h8l1-10H7z'/%3E%3C/svg%3E");
}

/* 🤰 Pregnancy Icon Replacement */
.interaction-card .text-lg:nth-child(1)::before {
  /* The Logic Targets the specific Card headers */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'/%3E%3C/svg%3E");
}

/* Since Emojis vary, we will target the card titles for icon accuracy */
.interaction-card:has(.font-medium:contains('Alcohol')) .text-lg::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11l4.553 2.276A1 1 0 0120 14.17V19a2 2 0 01-2 2H6a2 2 0 01-2-2v-4.83a1 1 0 01.553-.894L9 11m6 0v-2a3 3 0 00-6 0v2m6 0H9'/%3E%3C/svg%3E");
}

.interaction-card:has(.font-medium:contains('Driving')) .text-lg::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Ccircle cx='12' cy='12' r='10' stroke-width='2'/%3E%3Cpath stroke-width='2' d='M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E");
}

/* ---------- 4. COMPOSITION TAGS UPGRADE ---------- */
.composition-tag {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  padding: 14px !important;
  border-radius: 12px !important;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.composition-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #0B6E99;
}

/* ---------- 5. ACCORDION (Q&A) FIX ---------- */
.accordion-header {
  transition: background 0.2s ease;
}

.accordion-header .accordion-icon {
  color: #0B6E99;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
}

.accordion-content.open {
  max-height: 500px;
  /* Adjust based on content length */
  border-bottom: 1px solid #f1f5f9;
}

/* Clean up the scrollable area */
.tab-contents {
  padding-right: 8px;
  scrollbar-gutter: stable;
}

/* ============================================================
   RESPONSIVE MODAL SYSTEM (No Changes to HTML/JS)
   ============================================================ */

/* 1. Backdrop Center & Layering */
#modalBackdrop {
  display: none;
  /* Controlled by JS flex/hidden classes */
  z-index: 9999;
  padding: 1rem;
}

#modalBackdrop.flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 2. Modal Core Container */
.modal {
  width: 100%;
  max-width: 1100px;
  height: auto;
  max-height: 90vh;
  /* Keeps it within view on desktop */
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* 3. Header Fix - Keeps it fixed at the top */
.modal>.sticky {
  flex-shrink: 0;
  /* Prevents header from squashing */
}

/* 4. Content Area - The Scroll Engine */
#modalContent {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll for iOS */
}

/* 5. Handle Injected Grids (Auto-collapse from 2 cols to 1) */
#modalContent .grid.lg\:grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 6. Tabs Handling - Horizontal Scroll for Mobile */
.modal .flex.gap-1.overflow-x-auto {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px solid #e2e8f0;
}

.modal .flex.gap-1.overflow-x-auto::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Tablets & Small Laptops */
@media (max-width: 1024px) {
  #modalContent .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    /* Stack columns */
    gap: 2rem;
  }

  .modal {
    max-height: 95vh;
    width: 95%;
  }
}

/* Portrait Tablets & Large Phones */
@media (max-width: 768px) {
  .modal {
    width: 100%;
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
  }

  .gallery-main {
    height: 250px !important;
  }

  /* Shrink the info cards so they stay side-by-side if possible, or stack */
  #modalContent .grid.grid-cols-2 {
    gap: 0.75rem;
  }
}

/* Small Phones */
@media (max-width: 640px) {
  #modalBackdrop {
    padding: 0;
    /* Remove padding to allow full-screen modal */
  }

  .modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    /* Professional full-screen look on mobile */
  }

  #modalContent {
    padding: 1rem;
  }

  .gallery-main {
    height: 200px !important;
    border-radius: 12px;
  }

  /* Stack everything for small screens */
  #modalContent .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Increase touch targets for buttons */
  .tab-btn {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .modal .sticky {
    padding: 1rem !important;
  }
}

/* Landscape Mode for Phones (Short screens) */
@media (max-height: 500px) {
  .modal {
    height: 100vh;
    max-height: 100vh;
  }

  .gallery-main {
    height: 150px !important;
  }
}

/* 1. Zoom effect for the main product image in the modal */
#mainProductImage {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mainProductImage:hover {
  transform: scale(1.15);
  /* Adjust the zoom level here */
}

/* 2. Container for the modal image to prevent it from overflowing when zoomed */
#modalContent .relative:has(> #mainProductImage) {
  overflow: hidden;
  border-radius: 24px;
  /* Matches your existing gallery-main radius */
  z-index: 1;
}

/* 3. Explicit cursor for the View Details button as a backup */
#productGrid button {
  cursor: pointer !important;
}

/* Product Carousel Styles */
.product-carousel {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.product-carousel::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.product-carousel-wrapper {
  position: relative;
  isolation: isolate;
}

/* Ensure images don't stretch weirdly in carousel */
.product-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent carousel clicks from triggering modal unless clicking details button */
.product-carousel-wrapper button {
  z-index: 20;
}

/* ============================================================
   PROFESSIONAL MOTION SYSTEM (Cubic-Bezier & Stagger)
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-main: all 0.6s var(--ease-out-expo);
}

/* 1. Refined Entrance Animation (Slide + Fade) */
.fade-in {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
  will-change: transform, opacity;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 2. Professional Card Hover (The "Lift" Effect) */
.card-hover {
  transition: var(--transition-main);
  background: #ffffff;
}

.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px -15px rgba(11, 110, 153, 0.15);
  border-color: rgba(11, 110, 153, 0.2);
}

/* Inner card image zoom refinement */
.card-hover:hover img {
  transform: scale(1.08);
}

/* 3. Button Micro-Interactions */
button,
.category-pill,
.whatsapp-btn {
  transition: all 0.3s var(--ease-out-expo) !important;
}

button:active,
.category-pill:active {
  transform: scale(0.95);
}

/* 4. Refined Modal Entrance (Spring Scale) */
.modal {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: opacity 0.5s var(--ease-out-expo),
    transform 0.5s var(--ease-out-back) !important;
}

.modal.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 5. Staggered Loading for Grid Items */
/* (This applies to the product cards as they are injected) */
#productGrid>div:nth-child(1) {
  transition-delay: 0.05s;
}

#productGrid>div:nth-child(2) {
  transition-delay: 0.1s;
}

#productGrid>div:nth-child(3) {
  transition-delay: 0.15s;
}

#productGrid>div:nth-child(4) {
  transition-delay: 0.2s;
}

#productGrid>div:nth-child(5) {
  transition-delay: 0.25s;
}

#productGrid>div:nth-child(6) {
  transition-delay: 0.3s;
}

#productGrid>div:nth-child(n+7) {
  transition-delay: 0.35s;
}

/* 6. Professional Pulse for Trending Badges */
.trending-badge {
  animation: badge-shine 3s infinite linear;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #fff 0%, #fef3c7 50%, #fff 100%);
}

@keyframes badge-shine {
  to {
    background-position: 200% center;
  }
}

/* 7. Smooth Category Pill Transitions */
.category-pill.active {
  animation: pill-pop 0.4s var(--ease-out-back);
}

@keyframes pill-pop {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* 8. Refined Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* 9. Floating WhatsApp Subtle Animation */
.whatsapp-btn {
  animation: float-slow 4s ease-in-out infinite;
}

@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ============================================================
   ADVANCED MOTION & PAGE LOAD SEQUENCE
   ============================================================ */

/* 1. THE CURTAIN PRELOADER 
   Creates a professional entrance without adding new HTML tags.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 10000;
  animation: curtain-reveal 1.4s cubic-bezier(0.8, 0, 0.2, 1) forwards;
  animation-delay: 0.5s;
  pointer-events: none;
}

/* Professional Spinner during initial load */
body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid #f1f5f9;
  border-top: 3px solid #0B6E99;
  border-radius: 50%;
  z-index: 10001;
  animation:
    spin 0.8s linear infinite,
    loader-fade-out 0.4s ease forwards;
  animation-delay: 0s, 0.8s;
  pointer-events: none;
}

@keyframes curtain-reveal {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

@keyframes loader-fade-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 2. LOGO ENTRANCE 
   Targets your existing logo for a subtle scale-in.
*/
header img {
  animation: logo-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 1.1s;
}

@keyframes logo-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* 3. SHIMMER LOADING EFFECT 
   Adds a professional skeleton-like shimmer to cards while images are loading.
*/
.card-hover {
  position: relative;
  overflow: hidden;
}

.card-hover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.5s infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* 4. "MAGNETIC" LINK EFFECT 
   Subtle movement for navbar items and category pills.
*/
.category-pill:hover span {
  display: inline-block;
  animation: link-wiggle 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes link-wiggle {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(0);
  }
}

/* 5. SEARCH BAR FOCUS ANIMATION */
#searchInput {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#searchInput:focus {
  transform: scale(1.01);
  box-shadow: 0 10px 25px -5px rgba(11, 110, 153, 0.1);
}

/* 6. MODAL OVERLAY BLUR TRANSITION */
#modalBackdrop {
  transition: backdrop-filter 0.5s ease, background 0.5s ease !important;
}

/* 7. WHATSAPP BUTTON "AURA" 
   Makes the button look alive without being annoying.
*/
.whatsapp-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.4;
  z-index: -1;
  animation: aura-pulse 2s infinite;
}

@keyframes aura-pulse {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* 8. SMOOTH SCROLL REVEAL (Enhancement) 
   Enhances the existing fade-in class with a more elegant clip path.
*/
.fade-in.show {
  animation: reveal-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveal-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
    clip-path: inset(100% 0 0 0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

/* 9. IMAGE CAROUSEL DOTS ANIMATION */
.product-carousel-wrapper .flex.gap-1\.5 div {
  transition: all 0.3s ease;
}

.product-carousel-wrapper:hover .flex.gap-1\.5 div {
  transform: scale(1.2);
}

/* ============================================
   GENIVIS REMEDIES - FOOTER STYLES
   ============================================ */

/* ===== FOOTER VARIABLES ===== */
:root {
  --footer-blue: #2E63A9;
  --footer-dark: #1E3A5F;
  --footer-green: #2FA84F;
  --footer-light-green: #7ED957;
  --footer-text-white: #ffffff;
  --footer-text-light: rgba(219, 234, 254, 0.8);
  --footer-text-muted: #93c5fd;
}

/* ===== ANIMATED GRADIENT DIVIDER ===== */
.footer-gradient-divider {
  height: 4px;
  background: linear-gradient(90deg,
      var(--footer-blue),
      var(--footer-green),
      var(--footer-light-green),
      var(--footer-green),
      var(--footer-blue));
  background-size: 300% 100%;
  animation: footerGradientShift 4s ease infinite;
}

@keyframes footerGradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

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

/* ===== MAIN FOOTER ===== */
.genivis-footer {
  background: linear-gradient(135deg, #1E3A5F 0%, #2E63A9 50%, #1E3A5F 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 -10px 60px rgba(30, 58, 95, 0.15);
  font-family: 'Inter', sans-serif;
}

/* ===== MEDICAL PATTERN OVERLAY ===== */
.footer-medical-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.03;
  background-image:
    radial-gradient(circle at 20% 30%, var(--footer-light-green) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--footer-green) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, #fff 0.5px, transparent 0.5px);
  background-size: 60px 60px, 80px 80px, 40px 40px;
  pointer-events: none;
}

/* ===== CROSS PATTERN ===== */
.footer-cross-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.02;
  pointer-events: none;
}

.footer-cross-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.1) 49%, rgba(255, 255, 255, 0.1) 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.1) 49%, rgba(255, 255, 255, 0.1) 51%, transparent 52%);
  background-size: 100px 100px;
}

/* ===== PARTICLES CONTAINER ===== */
.footer-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer-particle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: footerFloatParticle linear infinite;
}

@keyframes footerFloatParticle {
  0% {
    opacity: 0;
    transform: translateY(100%) rotate(0deg) scale(0.5);
  }

  10% {
    opacity: 0.15;
  }

  90% {
    opacity: 0.15;
  }

  100% {
    opacity: 0;
    transform: translateY(-100vh) rotate(360deg) scale(1);
  }
}

/* ===== DNA STRAND DECORATIONS ===== */
.footer-dna-strand {
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  opacity: 0.04;
}

.footer-dna-left {
  left: 5%;
}

.footer-dna-right {
  right: 8%;
}

.footer-dna-strand::before,
.footer-dna-strand::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--footer-light-green);
  animation: footerDnaBob 4s ease-in-out infinite;
}

.footer-dna-strand::after {
  animation-delay: -2s;
}

@keyframes footerDnaBob {

  0%,
  100% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(10px);
  }
}

/* ===== FOOTER CONTAINER ===== */
.footer-main-container {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1.5rem 2.5rem;
}

@media (min-width: 768px) {
  .footer-main-container {
    padding: 4rem 2rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .footer-main-container {
    padding: 4rem 3rem 2.5rem;
  }
}

/* ===== FOOTER GRID ===== */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.footer-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.footer-column:nth-child(1) {
  transition-delay: 0.1s;
}

.footer-column:nth-child(2) {
  transition-delay: 0.25s;
}

.footer-column:nth-child(3) {
  transition-delay: 0.4s;
}

.footer-column:nth-child(4) {
  transition-delay: 0.55s;
}

/* ===== LOGO SECTION ===== */
.footer-logo-wrap {
  margin-bottom: 1.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-logo-icon {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--footer-green), var(--footer-light-green));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(47, 168, 79, 0.3);
  flex-shrink: 0;
}

.footer-logo-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(126, 217, 87, 0.2);
  animation: footerLogoPulse 3s ease-in-out infinite;
}

@keyframes footerLogoPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

.footer-logo-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--footer-text-white);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}

.footer-logo-title span {
  color: var(--footer-light-green);
}

.footer-logo-tagline {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--footer-text-muted);
  font-weight: 500;
  margin: 0.125rem 0 0 0;
}

/* ===== GLOW LINE ===== */
.footer-glow-line {
  height: 3px;
  width: 5rem;
  background: linear-gradient(90deg, transparent, var(--footer-light-green), var(--footer-green), transparent);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.footer-glow-line::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -100%;
  bottom: -2px;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(126, 217, 87, 0.6), transparent);
  animation: footerGlowPulse 3s ease-in-out infinite;
}

@keyframes footerGlowPulse {
  0% {
    left: -60%;
  }

  100% {
    left: 100%;
  }
}

/* ===== FOOTER DESCRIPTION ===== */
.footer-description {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--footer-text-light);
  margin: 0 0 1.5rem 0;
}

/* ===== NEWSLETTER ===== */
.footer-newsletter {
  margin-top: 1rem;
}

.footer-newsletter-label {
  font-size: 0.75rem;
  color: var(--footer-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem 0;
}

.footer-newsletter-form {
  display: flex;
  gap: 0.5rem;
}

.footer-newsletter-input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 0.3s ease;
}

.footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--footer-light-green);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 20px rgba(126, 217, 87, 0.15);
}

.footer-newsletter-btn {
  padding: 0.625rem 1rem;
  background: linear-gradient(135deg, var(--footer-green), var(--footer-light-green));
  border: none;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.footer-newsletter-btn:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(47, 168, 79, 0.4);
}

/* ===== SECTION HEADINGS ===== */
.footer-heading {
  position: relative;
  color: var(--footer-text-white);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.625rem;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 3px;
  background: linear-gradient(90deg, var(--footer-light-green), var(--footer-green));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.footer-heading:hover::after {
  width: 55px;
}

.footer-heading-mt {
  margin-top: 2rem;
}

/* ===== FOOTER NAV LINKS ===== */
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  padding-bottom: 2px;
}

.footer-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-green), var(--footer-light-green));
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 1px;
}

.footer-nav-link:hover {
  color: var(--footer-light-green);
  text-shadow: 0 0 12px rgba(126, 217, 87, 0.3);
}

.footer-nav-link:hover::after {
  width: 100%;
}

.footer-nav-link:hover .footer-link-dot {
  background-color: var(--footer-light-green);
}

.footer-link-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: rgba(126, 217, 87, 0.5);
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

/* ===== CONTACT LIST ===== */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-style: normal;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: rgba(47, 168, 79, 0.15);
  color: var(--footer-light-green);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.footer-contact-icon i {
  font-size: 0.875rem;
}

.footer-contact-icon:hover {
  background: rgba(47, 168, 79, 0.3);
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(126, 217, 87, 0.3);
}

.footer-contact-row:hover .footer-contact-icon {
  animation: footerIconBounce 0.5s ease;
}

@keyframes footerIconBounce {

  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.2) translateY(-2px);
  }

  60% {
    transform: scale(1.05) translateY(1px);
  }
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
}

.footer-contact-label {
  font-size: 0.75rem;
  color: var(--footer-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.25rem 0;
}

.footer-contact-text {
  font-size: 0.875rem;
  color: var(--footer-text-light);
  line-height: 1.6;
  margin: 0;
}

.footer-contact-link {
  font-size: 0.875rem;
}

/* ===== SOCIAL MEDIA ICONS ===== */
.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.15rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.footer-social-icon:hover {
  transform: translateY(-5px) scale(1.08);
  color: white;
  border-color: transparent;
}

.footer-social-icon:active {
  transform: translateY(-2px) scale(1.02);
}

/* Social Brand Colors */
.footer-social-facebook:hover {
  background: #1877F2;
  box-shadow: 0 8px 25px rgba(24, 119, 242, 0.4);
}

.footer-social-instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 8px 25px rgba(225, 48, 108, 0.4);
}

.footer-social-linkedin:hover {
  background: #0A66C2;
  box-shadow: 0 8px 25px rgba(10, 102, 194, 0.4);
}

.footer-social-youtube:hover {
  background: #FF0000;
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
}

.footer-social-whatsapp:hover {
  background: #25D366;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

/* ===== CERTIFICATIONS ===== */
.footer-certifications {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.footer-cert-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.footer-cert-badge:hover {
  border-color: rgba(126, 217, 87, 0.3);
}

.footer-cert-badge i {
  color: var(--footer-light-green);
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

.footer-cert-badge:hover i {
  transform: scale(1.1);
}

.footer-cert-badge span {
  font-size: 0.75rem;
  color: var(--footer-text-light);
  font-weight: 500;
}

/* ===== BUSINESS HOURS ===== */
.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.footer-hours-day {
  color: var(--footer-text-muted);
}

.footer-hours-time {
  color: var(--footer-text-light);
  font-weight: 500;
}

.footer-hours-closed {
  color: var(--footer-light-green);
}

/* ===== COPYRIGHT BAR ===== */
.footer-copyright {
  position: relative;
  z-index: 10;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .footer-copyright-inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.25rem 2rem;
  }
}

@media (min-width: 1024px) {
  .footer-copyright-inner {
    padding: 1.25rem 3rem;
  }
}

.footer-copyright-text {
  font-size: 0.875rem;
  color: rgba(147, 197, 253, 0.8);
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .footer-copyright-text {
    text-align: left;
  }
}

.footer-copyright-text span {
  color: white;
  font-weight: 500;
}

.footer-copyright-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-copyright-link {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-copyright-link:hover {
  color: var(--footer-light-green);
}

.footer-copyright-sep {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.4);
}

.footer-made-with {
  display: none;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgba(96, 165, 250, 0.5);
  margin: 0;
}

@media (min-width: 1024px) {
  .footer-made-with {
    display: flex;
  }
}

.footer-made-with i {
  color: #f87171;
  font-size: 0.625rem;
  animation: footerHeartPulse 2s infinite;
}

@keyframes footerHeartPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* ===== SCROLL TO TOP BUTTON ===== */
.footer-scroll-top {
  position: fixed;
  bottom: 1.875rem;
  right: 1.875rem;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--footer-blue), var(--footer-green));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 8px 30px rgba(46, 99, 169, 0.4);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  z-index: 1000;
}

.footer-scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.footer-scroll-top:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 40px rgba(46, 99, 169, 0.5);
}

.footer-scroll-top:active {
  transform: translateY(-2px) scale(1.05);
}

.footer-scroll-top i {
  animation: footerArrowFloat 2s ease-in-out infinite;
}

@keyframes footerArrowFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .footer-social-icon {
    width: 2.625rem;
    height: 2.625rem;
    font-size: 1rem;
  }

  .footer-scroll-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ===== FOCUS STATES FOR ACCESSIBILITY ===== */
.footer-nav-link:focus,
.footer-social-icon:focus,
.footer-newsletter-btn:focus,
.footer-scroll-top:focus {
  outline: 2px solid var(--footer-light-green);
  outline-offset: 2px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

  .footer-reveal,
  .footer-glow-line::after,
  .footer-logo-pulse,
  .footer-particle,
  .footer-dna-strand::before,
  .footer-dna-strand::after,
  .footer-scroll-top i,
  .footer-made-with i {
    animation: none !important;
  }

  .footer-reveal {
    opacity: 1;
    transform: none;
  }
}