/* Custom Design System & CSS Utilities for PMB Home Service Hub */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary-blue: #2563EB;
  --primary-blue-dark: #1D4ED8;
  --primary-green: #22C55E;
  --primary-green-dark: #16A34A;
  --accent-blue: #0EA5E9;
  --bg-slate: #F8FAFC;
  --text-main: #111827;
  --text-muted: #6B7280;
  --border-light: #E5E7EB;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-slate);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Glassmorphism utility */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

/* Floating Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.animate-pulse-ring {
  animation: pulse-ring 2.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Before and After Image Comparison Slider */
.ba-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1.25rem;
  user-select: none;
  touch-action: pan-y;
}

.ba-image-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-image-after-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  border-right: 3px solid #FFFFFF;
  box-shadow: 2px 0 10px rgba(0,0,0,0.25);
}

.ba-image-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2563EB;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  cursor: ew-resize;
  z-index: 20;
}

/* Swiper custom overrides */
.swiper-pagination-bullet-active {
  background-color: var(--primary-blue) !important;
  width: 24px !important;
  border-radius: 999px !important;
}

/* Responsive bottom padding for sticky bar */
.pb-sticky-bar {
  padding-bottom: 84px;
}

/* Tap Target Enforcement */
.tap-target-48 {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}