/* === Mobile-Only Overrides (safe for desktop; loaded with max-width media queries) === */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* Generic layout fixes */
  img, video { max-width: 100% !important; height: auto !important; }
  .container, .wrapper, .content, .inner, .section, .nk-container, .nk-content, .nk-boxed, .nk-section, .nk-block, .roi-wrap {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Collapse common grids/rows to single column on mobile */
  .grid, .nk-grid, .row, .rows, .cols, .columns, .roi-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .col, [class*="col-"], [class*="grid-cols-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Typography scaling */
  h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.4rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.2rem !important; line-height: 1.3 !important; }
  h4, h5, h6, p, li, label, small { font-size: 1rem !important; }
  .lead, .subtitle { font-size: 1.05rem !important; }

  /* Cards / panels */
  .card, .tile, .panel, .nk-card, .roi-card, .roi-panel, .roi-tile {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  /* Tables become scrollable */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; }

  /* Buttons and form controls */
  .btn, .button, button { padding: 12px 16px !important; font-size: 1rem !important; border-radius: 12px !important; }
  input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */

  /* Header/nav stacking (non-destructive) */
  header nav, .nk-nav, nav .menu {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* === ROI / Quick ROE Estimator specific fixes === */
  #roi .roi-wrap { max-width: 100% !important; }
  #roi .roi-card, #roi .roi-panel, #roi .roi-tile {
    background: rgba(7, 13, 28, 0.88) !important; /* deep navy translucency */
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
  }
  /* Ensure readable text (previously black-on-dark) */
  #roi, #roi .roi-card, #roi .roi-panel, #roi .roi-tile,
  #roi .roi-note, #roi .roi-resp-val, #roi .roi-roi, #roi .roi-revenue,
  #roi label, #roi .label, #roi .text, #roi .muted, #roi .help {
    color: #ffffff !important;
  }
  #roi .muted { opacity: .85 !important; }

  /* Spacing so text isn't cramped at top edges */
  #roi .roi-card > *:first-child,
  #roi .roi-panel > *:first-child { margin-top: 2px !important; }
  #roi .roi-card { padding-top: 18px !important; padding-bottom: 18px !important; }

  /* Controls stack nicely and fill width */
  #roi input[type="range"] { width: 100% !important; }
  #roi input[type="text"], #roi input[type="number"], #roi select, #roi textarea {
    width: 100% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #fff !important;
  }

  /* Action buttons sized consistently */
  #roi .btn, #roi .button, #roi button, #roi .submitBtn {
    width: 100% !important;
    margin-top: 6px !important;
  }

  /* Prevent oversized decorative elements from breaking layout */
  [class*="absolute"], [class*="fixed"] {
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
  }

  /* Hero/headers breathing room */
  .hero, .header-hero, .nk-hero {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
    background-position: center !important;
    min-height: auto !important;
  }
}