/* Fit Life Physiotherapy CSS File */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Color Variables */
:root {
  --primary: #0F766E;
  --primary-light: #115E59;
  --secondary: #14B8A6;
  --secondary-light: #2DD4BF;
  --accent: #3B82F6;
  --bg: #FFFFFF;
  --bg-section: #F8FAFC;
  --text: #1E293B;
  --text-muted: #64748B;
  --success: #22C55E;
  --border: #E2E8F0;
  
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px 0 rgba(15, 118, 110, 0.06);

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Dark Mode Variables */
.dark {
  --bg: #0B0F19;
  --bg-section: #111827;
  --text: #F3F4F6;
  --text-muted: #9CA3AF;
  --border: #1F2937;
  
  --glass-bg: rgba(17, 24, 39, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Reset and Core Setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-section);
}
::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Glassmorphism card template */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 1.5rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Preloader styling */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg); /* Connected to theme variable to prevent white flash in dark mode */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.spinner {
  width: 55px;
  height: 55px;
  border: 4px solid rgba(20, 184, 166, 0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Floating animated background shapes */
.bg-shape {
  position: absolute;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.35;
  border-radius: 50%;
  pointer-events: none;
  animation: pulse-shapes 15s infinite alternate ease-in-out;
}

.dark .bg-shape {
  opacity: 0.15;
}

@keyframes pulse-shapes {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, -35px) scale(1.08);
  }
  100% {
    transform: translate(-20px, 30px) scale(0.95);
  }
}

/* Micro-interaction & Hover effects */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -15px rgba(15, 118, 110, 0.18);
}

.hover-glow {
  transition: all 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 15px rgba(20, 184, 166, 0.5);
}

/* Active navigation dot animation */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2.5px;
  background-color: var(--secondary);
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}

/* Timeline Custom Classes */
.timeline-progress {
  height: 4px;
  background: var(--border);
  position: relative;
  border-radius: 2px;
}

.timeline-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FAQ Accordion Transitions */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}

/* Custom Lightbox preview modal styling */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(12px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-modal.open {
  display: flex;
  opacity: 1;
}

.lightbox-content img,
.lightbox-content video {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightbox-modal.open .lightbox-content img,
.lightbox-modal.open .lightbox-content video {
  transform: scale(1);
}

/* Counter animation triggers */
.counter-num {
  font-feature-settings: "tnum";
}

/* Scroll Fade In Animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Toast Message Toastify styling */
.toast-msg {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10001;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-msg.show {
  transform: translateY(0);
  opacity: 1;
}

/* Gallery Hover zoom effects */
.gallery-zoom img {
  transition: transform 0.5s ease;
}
.gallery-zoom:hover img {
  transform: scale(1.08);
}

/* Custom Input Dark Mode Override styling */
.dark input, 
.dark select, 
.dark textarea {
  background-color: #1F2937 !important; /* slate-800 */
  color: #F3F4F6 !important; /* slate-100 */
  border-color: #374151 !important; /* slate-700 */
}

.dark input::placeholder, 
.dark textarea::placeholder {
  color: #9CA3AF !important; /* slate-400 */
  opacity: 0.8 !important;
}

/* Reviews Infinite Marquee Row */
.reviews-marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 1.5rem;
  padding: 1rem 0;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

.reviews-marquee-track {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee-scroll 65s linear infinite;
}

.reviews-marquee-container:hover .reviews-marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 0.75rem));
  }
}