/* Mobile Responsive Fixes */

/* Prevent horizontal overflow */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
}

/* Ensure all fixed/absolute elements stay within viewport */
@media (max-width: 768px) {
  [style*="position: fixed"],
  [style*="position: absolute"] {
    max-width: 100vw !important;
  }
}

/* Fix Navbar Overflow */
.navbar {
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 !important;
  }

  .navbar-brand {
    max-width: calc(100vw - 120px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar-brand span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navbar-menu {
    max-width: 100vw !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    z-index: 1001 !important;
  }

  /* Ensure mobile menu toggle doesn't cause overflow */
  .mobile-menu-toggle {
    position: fixed !important;
    right: 16px !important;
  }

  /* Ensure navbar actions don't overflow */
  .navbar-actions {
    max-width: 100% !important;
  }
}

@media (max-width: 400px) {
  .navbar-brand {
    max-width: calc(100vw - 100px) !important;
  }

  .mobile-menu-toggle {
    right: 12px !important;
  }
}

.container {
  max-width: 100%;
  overflow-x: hidden;
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure sections have proper padding on mobile */
@media (max-width: 768px) {
  .section {
    padding: 60px 20px !important;
  }

  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 40px 16px !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Hero Section Mobile */
@media (max-width: 768px) {
  .hero-section {
    padding: 40px 20px !important;
    margin-top: 64px !important;
  }

  .hero-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }

  .section-badge {
    font-size: 0.75rem !important;
    padding: 8px 14px !important;
    text-align: center;
    display: inline-block;
  }

  .section-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  .section-subtitle {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.75rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
  }

  .section-title {
    font-size: 1.5rem !important;
  }
}

/* Card Icon Centering */
.card {
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Card Mobile Sizing */
@media (max-width: 768px) {
  .card {
    padding: 24px !important;
    margin: 0 !important;
  }

  /* Reduce card padding on very small screens */
  @media (max-width: 480px) {
    .card {
      padding: 20px !important;
    }
  }
}

/* Ensure icon containers are centered within cards */
.card > div[style*="width: 64px"],
.card > div[style*="width: 80px"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Feature list icons - ensure they stay inline with text */
.card ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
}

.card ul li i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* How It Works section - center icons on mobile */
@media (max-width: 768px) {
  .grid-2 > div,
  .grid-3 > div,
  .grid-4 > div {
    text-align: center;
  }

  .grid-2 > div > div[style*="width: 80px"],
  .grid-3 > div > div[style*="width: 80px"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Pricing Section */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }

  .pricing-card {
    max-width: 100%;
  }

  .pricing-toggle-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

/* CTA Section */
@media (max-width: 768px) {
  .cta-wrapper {
    margin: 0 -20px;
    border-radius: 0 !important;
    padding: 40px 20px !important;
  }

  .cta-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  .cta-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .cta-benefits {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .cta-actions .btn {
    width: 100%;
  }
}

/* Grid System - Mobile */
@media (max-width: 768px) {
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override any inline gap styles on mobile */
  .grid[style*="gap"],
  .grid-2[style*="gap"],
  .grid-3[style*="gap"],
  .grid-4[style*="gap"] {
    gap: 24px !important;
  }
}

/* Innovative Features Section - Specific Fix */
@media (max-width: 768px) {
  /* Target the specific grid in Innovative Features */
  section .grid-2[style*="gap: 48px"] {
    gap: 20px !important;
    margin-top: 30px !important;
  }

  /* Ensure cards don't overflow */
  section .grid-2 .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Fix icon containers in feature cards */
  section .grid-2 .card > div[style*="width: 64px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure list items wrap properly */
  section .grid-2 .card ul {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  section .grid-2 .card ul li {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Button Responsiveness */
@media (max-width: 480px) {
  .btn {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }

  .btn-lg {
    padding: 14px 24px !important;
    font-size: 1rem !important;
  }
}

/* Footer */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .footer-section {
    text-align: center;
  }
}

/* Ensure images/emojis don't overflow */
img, svg {
  max-width: 100%;
  height: auto;
}

/* Text Wrapping */
h1, h2, h3, h4, h5, h6, p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Fix any hardcoded widths that might cause overflow */
@media (max-width: 768px) {
  [style*="max-width: 800px"],
  [style*="max-width: 700px"] {
    max-width: 100% !important;
  }
}