/* Mobile Responsive Quick Fix */
/* This file makes the site usable on mobile devices */

/* ============================================
   MOBILE BREAKPOINTS
   ============================================ */

/* Tablets and below (768px) */
@media (max-width: 768px) {
  
    /* CONTAINER & LAYOUT FIXES */
    body {
      font-size: 16px !important;
      -webkit-text-size-adjust: 100%;
    }
    
    /* Make all containers full-width on mobile */
    [style*="maxWidth"] {
      max-width: 100% !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
    
    /* Stack all grids vertically */
    [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }
    
    [style*="display: flex"] {
      flex-direction: column !important;
    }
    
    /* NAVIGATION FIXES */
    nav {
      flex-direction: column !important;
      padding: 12px !important;
    }
    
    nav a,
    nav button {
      margin: 8px 0 !important;
      width: 100% !important;
    }
    
    /* BUTTON FIXES */
    button,
    a[style*="button"],
    [style*="primaryButton"],
    [style*="secondaryButton"] {
      width: 100% !important;
      padding: 16px 24px !important;
      font-size: 16px !important;
      margin: 8px 0 !important;
      min-height: 48px !important; /* Touch-friendly */
    }
    
    /* CARD FIXES */
    [style*="card"],
    div[style*="borderRadius"] {
      margin-bottom: 16px !important;
      padding: 16px !important;
    }
    
    /* HEADING FIXES */
    h1 {
      font-size: 28px !important;
      line-height: 1.2 !important;
      margin-bottom: 16px !important;
    }
    
    h2 {
      font-size: 24px !important;
      line-height: 1.3 !important;
    }
    
    h3 {
      font-size: 20px !important;
      line-height: 1.3 !important;
    }
    
    /* TEXT FIXES */
    p {
      font-size: 16px !important;
      line-height: 1.6 !important;
    }
    
    /* FORM FIXES */
    input,
    textarea,
    select {
      width: 100% !important;
      padding: 14px !important;
      font-size: 16px !important; /* Prevents iOS zoom */
      margin-bottom: 12px !important;
      min-height: 48px !important; /* Touch-friendly */
    }
    
    /* SPACING FIXES */
    [style*="xlarge"] {
      margin: 24px 0 !important;
    }
    
    [style*="large"] {
      margin: 16px 0 !important;
    }
    
    /* LANDING PAGE SPECIFIC */
    [style*="pageContainer"] {
      padding: 16px !important;
    }
    
    /* DASHBOARD METRICS */
    [style*="metricsGrid"] {
      gap: 16px !important;
    }
    
    /* PRICING CARDS */
    [style*="pricingGrid"] {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    
    /* FEATURE SECTIONS */
    section {
      padding: 32px 16px !important;
    }
    
    /* IMAGES */
    img {
      max-width: 100% !important;
      height: auto !important;
    }
    
    /* TABLE FIXES */
    table {
      display: block !important;
      overflow-x: auto !important;
    }
    
    /* MODAL FIXES */
    [style*="modal"] {
      width: 95% !important;
      max-width: 95% !important;
      margin: 16px !important;
    }
    
    /* HIDE DESKTOP-ONLY ELEMENTS */
    .desktop-only {
      display: none !important;
    }
  }
  
  /* Small phones (480px and below) */
  @media (max-width: 480px) {
    
    /* Even smaller fonts for tiny screens */
    h1 {
      font-size: 24px !important;
    }
    
    h2 {
      font-size: 20px !important;
    }
    
    h3 {
      font-size: 18px !important;
    }
    
    /* Smaller padding on tiny screens */
    [style*="card"] {
      padding: 12px !important;
    }
    
    button {
      padding: 14px 20px !important;
    }
  }
  
  /* ============================================
     UTILITY CLASSES
     ============================================ */
  
  /* Add these classes to elements for better mobile control */
  
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-stack {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .mobile-center {
    text-align: center !important;
  }
  
  .mobile-hidden {
    display: none !important;
  }
  
  @media (min-width: 769px) {
    .desktop-hidden {
      display: none !important;
    }
    
    .mobile-hidden {
      display: block !important;
    }
  }
  
  /* ============================================
     TOUCH OPTIMIZATIONS
     ============================================ */
  
  /* Make tap targets bigger */
  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: rgba(220, 20, 60, 0.2);
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent text selection on buttons */
  button {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Better font rendering on mobile */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }