:root {
  --color-primary: #0e7cff;
  --color-accent: #0be370;
  --color-bg: #ffffff;
  --color-text: #111827;
  --color-muted: color-mix(in oklch, var(--color-text) 35%, var(--color-bg));
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --radius: 0.375rem;
  --section-y: 1.25rem;
  --separator: color-mix(in oklch, var(--color-text) 8%, transparent);
}

body {
  background: #ffffff;
  color: #111827;
}

/* Button styles based on theme */
.btn-primary {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-primary) !important;
}
.btn-primary:hover {
  filter: brightness(0.95) !important;
}
.btn-primary:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--color-primary) 35%, white) !important;
  outline-offset: 2px !important;
}
.btn-outline {
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
}
.btn-outline:hover {
  background: color-mix(in oklch, var(--color-primary) 10%, #fff) !important;
}
.btn-outline:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--color-primary) 35%, white) !important;
  outline-offset: 2px !important;
}

/* Section styles */
:where(.section) {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
:where(.section) + :where(.section) {
  border-top: 1px solid var(--separator);
}

/* Custom component styles */
.sticky-bar {
  transition: all 0.3s ease;
}
.hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}
.benefit-item {
  transition: transform 0.2s ease;
}
.benefit-item:hover {
  transform: translateY(-4px);
}

/* Mobile call button */
.mobile-call-button {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  padding: 16px 32px !important;
  border-radius: 50px !important;
  background: var(--color-primary, #0e7cff) !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-decoration: none !important;
  width: 200px !important;
  height: 60px !important;
  box-shadow:
    0 20px 40px rgba(14, 124, 255, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.mobile-call-button:hover {
  transform: translateX(-50%) scale(1.05) !important;
}

/* Animation utilities */
.motion-safe\:hover\:scale-\[1\.05\]:hover {
  transform: scale(1.05);
}

/* FORCE STICKY BAR LEFT ALIGNMENT - AGGRESSIVE OVERRIDE */
.flex.items-center.justify-start {
  justify-content: flex-start !important;
}

@media (min-width: 1024px) {
  .flex.items-center.justify-start {
    justify-content: space-between !important;
  }
}
.motion-safe\:hover\:scale-\[1\.03\]:hover {
  transform: scale(1.03);
}
.motion-safe\:hover\:scale-\[1\.02\]:hover {
  transform: scale(1.02);
}

/* Responsive utilities */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1.125rem;
  }
}

/* Hide mobile call button on desktop (xl+ screens) */
@media (min-width: 1280px) {
  .mobile-call-button {
    display: none !important;
  }
}

/* WebP background image support */
.webp .img-bg-block[style*='servise-cont-1'] {
  background-image: url('./assets/roofing/servise-cont-1.webp') !important;
}
.webp .img-bg-block[style*='servise-cont-2'] {
  background-image: url('./assets/roofing/servise-cont-2.webp') !important;
}
.webp .img-bg-block[style*='servise-cont-3'] {
  background-image: url('./assets/roofing/servise-cont-3.webp') !important;
}
.webp .img-bg-block[style*='servise-cont-4'] {
  background-image: url('./assets/roofing/servise-cont-4.webp') !important;
}
.webp .img-bg-block[style*='servise-cont-5'] {
  background-image: url('./assets/roofing/servise-cont-5.webp') !important;
}
.webp .img-bg-block[style*='servise-cont-6'] {
  background-image: url('./assets/roofing/servise-cont-6.webp') !important;
}