/* ============================================================================
   SHARED STYLESHEET - My Therapy Space
   Common styles used across all pages
   ============================================================================ */

/* IE COMPATIBILITY FALLBACKS */
.no-js .scroll-smooth { scroll-behavior: auto; }
.lt-ie9 .backdrop-blur-md { background-color: rgba(255, 255, 255, 0.8); }
.lt-ie9 .bg-brandPeach\/90 { background-color: #ffefe3; }
.lt-ie9 .bg-brandPeach\/100 { background-color: #ffefe3; }
.lt-ie9 .bg-charcoal { background-color: #2E2E2E; }
.lt-ie9 .bg-opacity-50 { background-color: rgba(0, 0, 0, 0.5); }
.lt-ie9 .transition-all { transition: none; }
.lt-ie9 .animate-float,
.lt-ie9 .animate-breathe,
.lt-ie9 .animate-pulse-slow { animation: none; }

/* IE Grid Fallbacks */
.lt-ie10 .md\:grid-cols-2 { display: block; }
.lt-ie10 .grid { display: block; }
.lt-ie10 .md\:grid-cols-2 > * { float: left; width: 50%; }
.lt-ie10 .md\:grid-cols-2 > *:nth-child(odd) { clear: left; }

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background: #ffffff; }
::-webkit-scrollbar-thumb { background: #C85549; border-radius: 15px; }

/* HIDE SCROLLBAR (Carousel) */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.hover-card { 
  transition: all 0.4s ease; 
}
.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(200, 85, 73, 0.1);
  border-color: #C85549; 
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */
.nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}
.nav-link:hover {
  background-color: #C85549; 
  color: white;
}

/* MOBILE MENU STYLES */
#mobile-menu-button.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#mobile-menu-button.active span:nth-child(2) {
  opacity: 0;
}
#mobile-menu-button.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* ============================================================================
   TEXT & TYPOGRAPHY
   ============================================================================ */
.cursor {
  display: inline-block;
  width: 2px;
  background-color: #C85549;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================================
   CAROUSEL
   ============================================================================ */
.carousel-container {
  overflow: hidden;
  position: relative;
}
.carousel-track {
  display: flex;
  transition: transform 0.7s ease-in-out;
}
.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

/* ============================================================================
   PRODUCT & STORE STYLES
   ============================================================================ */
.ai-response strong { 
  color: #C85549; 
  font-weight: 700; 
}

/* Product hover expansion */
.more-info {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
article:hover .more-info {
  opacity: 1;
  max-height: 200px;
}