/* ============================================================
   AIVideoZ — Mobile & Small Screen Layer
   Loaded after all page styles; safe overrides only.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

@media (max-width: 820px) {
  /* Tailwind-free safety net for inline fixed widths on the landing page */
  [style*="width: 1240px"], [style*="width: 1100px"], [style*="width: 1040px"],
  [style*="width: 1200px"], [style*="width: 900px"], [style*="width: 780px"],
  [style*="width: 680px"], [style*="width: 650px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .wrap, .container { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Navbars */
  .navbar, .header, .topbar { flex-wrap: wrap !important; gap: 10px !important; height: auto !important; }
  .nav-actions { flex-wrap: wrap !important; gap: 8px !important; width: 100%; }
  .nav-actions > * { flex: 1 1 auto; }

  /* Layout shells */
  .admin-layout { flex-direction: column !important; }
  .sidebar {
    width: 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--border, #e5e7eb);
    flex-direction: row !important; align-items: center; gap: 8px !important;
    padding: 10px 12px !important; position: sticky; top: 0; z-index: 60;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .sidebar .logo-area { display: none !important; }
  .nav-list { flex-direction: row !important; gap: 8px !important; overflow-x: auto; width: 100%; }
  .nav-item { white-space: nowrap; font-size: 12px !important; padding: 8px 12px !important; }

  /* Cards, grids, stats */
  .card { padding: 16px !important; border-radius: 14px !important; }
  .metrics-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .pricing-grid, .plans-grid { grid-template-columns: 1fr !important; }
  .stat-val { font-size: 22px !important; }

  /* Tables scroll instead of squashing */
  table, .admin-table {
    display: block !important; width: 100% !important; overflow-x: auto !important;
    white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  table thead, table tbody { display: table; width: 100%; min-width: 620px; }

  /* Modals */
  .modal-content, .modal { width: 94% !important; max-width: 94% !important; padding: 20px !important; max-height: 88vh; overflow: auto; }

  /* Forms: 16px stops iOS auto-zoom */
  input, select, textarea, .form-input { font-size: 16px !important; width: 100% !important; }
  .auth-card { width: 100% !important; max-width: 100% !important; padding: 22px !important; margin: 12px !important; }
  .btn { font-size: 13px !important; padding: 10px 14px !important; }

  /* Landing specifics */
  #videoGridContainer { grid-template-columns: 1fr !important; }
  .video-card-item { width: 100% !important; }
  .comparison-row { grid-template-columns: 1fr !important; }
  .pricing-pill-toggle, .filter-tab-btn { font-size: 11px !important; }
  .hero h1, .gradient-headline { letter-spacing: -1.5px !important; }
  .footer-top { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .metrics-grid, .stats-grid { grid-template-columns: 1fr !important; }
  .header > div, .navbar > div { width: 100%; }
  .nav-actions .btn, .header .btn { width: 100%; justify-content: center; }
  .stat-label { font-size: 9px !important; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}