/* ============================================
   SERVICES PAGE LAYOUT FIXES
   Comprehensive layout corrections
   ============================================ */

/* ============================================
   1. RESET CONFLICTING STYLES
   ============================================ */

/* Ensure no negative margins causing overlap */
.services-hero-header {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Fix hero content layout */
.services-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* ============================================
   2. NAVBAR OVERLAP FIX
   ============================================ */

/* Proper spacing from navbar - use safe calculation */
.services-hero-header {
  padding-top: clamp(8.75rem, calc(6.75rem + 5vw), 12rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
  min-height: auto !important;
}

/* Ensure content doesn't get cut off */
.services-hero-header .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
  box-sizing: border-box !important;
}

/* ============================================
   3. SERVICES GRID LAYOUT FIX
   ============================================ */

/* Fix pricing plans section */
.pricing-plans {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: clamp(4rem, 8vw, 6rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Fix container width */
.pricing-plans .container {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fix grid layout */
.pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: clamp(1.5rem, 3vw, 2rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Fix card layout */
.pricing-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================
   4. RESPONSIVE GRID FIXES
   ============================================ */

/* Tablet and below - single column */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(1.25rem, 3vw, 1.75rem) !important;
  }
  
  .services-hero-header {
    padding-top: clamp(6rem, calc(4rem + 5vw), 8rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  }
  
  .pricing-plans {
    padding-top: clamp(3rem, 6vw, 4.5rem) !important;
    padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
  }
}

/* Mobile - ensure no overflow */
@media (max-width: 480px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(1rem, 2.5vw, 1.5rem) !important;
  }
  
  .services-hero-header {
    padding-top: clamp(5.5rem, calc(3.5rem + 4vw), 7rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
  }
  
  .pricing-plans {
    padding-top: clamp(2.5rem, 5vw, 3.5rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
  }
  
  .pricing-card {
    padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  }
}

/* ============================================
   5. OVERFLOW PREVENTION
   ============================================ */

/* Prevent horizontal scroll */
body.services-page,
body.main-services {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

#main-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Fix all sections */
section {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================
   6. TEXT AND CONTENT OVERFLOW
   ============================================ */

/* Prevent text overflow in cards */
.pricing-card-title,
.pricing-card-description,
.pricing-features li {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Fix image containers */
.service-card-image-wrapper,
.service-card-icon-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.service-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================
   7. PAGINATION LAYOUT FIX
   ============================================ */

.pricing-pagination {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: clamp(0.75rem, 2vw, 1rem) !important;
  margin-top: clamp(2.5rem, 5vw, 3.75rem) !important;
  padding: clamp(1rem, 2vw, 1.25rem) !important;
  box-sizing: border-box !important;
}

.pagination-btn {
  flex-shrink: 0 !important;
  min-width: auto !important;
  white-space: nowrap !important;
}

.pagination-info {
  flex-shrink: 0 !important;
  min-width: auto !important;
}

/* Mobile pagination */
@media (max-width: 480px) {
  .pricing-pagination {
    flex-direction: row !important;
    gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
  }
  
  .pagination-btn {
    padding: clamp(0.5rem, 1vw, 0.625rem) clamp(0.875rem, 1.5vw, 1rem) !important;
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
  }
  
  .pagination-btn-text {
    display: none !important;
  }
}

/* ============================================
   8. Z-INDEX FIXES
   ============================================ */

/* Ensure proper stacking */
.services-hero-header {
  z-index: 1 !important;
}

.services-hero-header::before,
.services-hero-header::after {
  z-index: 1 !important;
}

.services-hero-content {
  z-index: 2 !important;
}

.pricing-plans {
  z-index: 0 !important;
  position: relative !important;
}

.pricing-plans::before {
  z-index: 0 !important;
}

.pricing-grid {
  z-index: 1 !important;
  position: relative !important;
}

.pricing-card {
  z-index: 1 !important;
  position: relative !important;
}

/* ============================================
   9. FLEXBOX AND GRID FIXES
   ============================================ */

/* Ensure cards are equal height */
.pricing-grid {
  align-items: stretch !important;
}

.pricing-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Make card content flexible */
.pricing-card-header,
.pricing-features,
.pricing-card-btn {
  flex-shrink: 0 !important;
}

.pricing-card-description {
  flex-grow: 1 !important;
}

/* ============================================
   10. LOADING STATE FIXES
   ============================================ */

.loading-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}

.loading-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================
   11. PRINT AND ACCESSIBILITY
   ============================================ */

@media print {
  .services-hero-header,
  .pricing-plans {
    page-break-inside: avoid !important;
  }
  
  .pricing-card {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* Focus states for accessibility */
.pricing-card:focus-visible,
.pagination-btn:focus-visible {
  outline: 3px solid #2563EB !important;
  outline-offset: 4px !important;
  border-radius: 12px !important;
}

/* ============================================
   12. CRITICAL LAYOUT OVERRIDES
   ============================================ */

/* Override any conflicting inline styles or other CSS */
.services-hero-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.services-hero-content {
  display: block !important;
  text-align: center !important;
}

/* Ensure badge, title, and subtitle are centered */
.services-badge,
.services-main-title,
.services-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix container max-width */
.container {
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
  box-sizing: border-box !important;
}