/* FULL SITE MOBILE UPGRADE — 2026-08-26 — loaded on all pages */

html { scrollbar-gutter: stable; }
body { padding-bottom: env(safe-area-inset-bottom, 0); }
@supports (padding: max(0px)) {
  .site-footer, .footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
  .container, .max-w-7xl, .page-layout .main-content { padding-left: 12px !important; padding-right: 12px !important; }
  .card, .card-with-footer, .card-admin, .card-section, .box, .stat-card { border-radius: 12px !important; }
  .navbar, .navbar.admin-nav { position: sticky; top: 0; z-index: 1000; }
  .navbar .brand-title, .navbar-brand { font-size: 16px !important; }
  .auth-buttons .btn, .nav-actions .btn { min-height: 40px; font-size: 13px; }
}
@media (max-width: 640px) {
  .hero { padding: 16px 0 0 !important; }
  .hero-grid { gap: 16px !important; }
  .hero h1 { font-size: 26px !important; line-height: 1.2 !important; }
  .hero p { font-size: 14px !important; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-media { border-radius: 12px !important; }
  .hero-media img { height: 220px !important; }
  .hero-stats { padding: 10px !important; gap: 6px !important; }
  .features { gap: 10px !important; }
  .feature { padding: 14px !important; gap: 10px !important; }
  .feature h3 { font-size: 14px !important; }
  .feature p { font-size: 12px !important; }
  .services { gap: 10px !important; }
  .svc { padding: 14px !important; }
  .svc h3 { font-size: 13px !important; }
  .svc p { font-size: 12px !important; min-height: 0 !important; }
  .svc .btn { width: 100%; }
  .steps { gap: 12px !important; }
  .step { padding: 16px !important; }
  .cta-dark { padding: 20px 14px !important; border-radius: 12px !important; }
  .grid-cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .data-table tbody tr, .table tbody tr { padding: 12px !important; }
  .data-table td, .table td { font-size: 12px !important; padding: 7px 0 !important; }
  .data-table td a.btn, .table td a.btn, td a[href*="download"] { width: 100% !important; justify-content: center; margin-top: 6px; }
}
@media (max-width: 360px) { #svcGrid.svc-grid, .svc-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 361px) and (max-width: 640px) { #svcGrid.svc-grid, .svc-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } }
@media (max-width: 768px) {
  .form-group { margin-bottom: 12px !important; }
  .input, .select, .textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"] { font-size: 16px !important; min-height: 44px !important; }
  input[type="file"] { padding: 8px !important; }
  .field.has-addons { flex-wrap: wrap; }
  .field.has-addons .control { width: 100%; }
  .field.has-addons .control.is-expanded { width: 100% !important; }
  .field.has-addons .button { width: 100%; justify-content: center; }
}
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .auth-intro h1 { font-size: 24px !important; } .trust { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; } }
@media (max-width: 480px) { .card-head { flex-direction: column; align-items: flex-start !important; gap: 8px; } .alert { font-size: 12px !important; padding: 10px 12px !important; } .stat-cards { gap: 8px !important; } .stat-card { padding: 12px !important; } .stat-value { font-size: 16px !important; } }
@media (max-width: 768px) {
  .admin-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  .admin-layout { flex-direction: column !important; }
  .admin-sidebar { width: 100% !important; position: static !important; flex-direction: row !important; overflow-x: auto !important; gap: 6px !important; padding: 8px !important; }
  .admin-nav-item { white-space: nowrap; flex-shrink: 0; padding: 8px 10px !important; font-size: 13px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .table-container { margin: 0 -12px; border-radius: 0 !important; border-left: none !important; border-right: none !important; }
  .table-container table { min-width: 640px !important; }
  .columns { flex-direction: column; }
  .column { width: 100% !important; flex: none !important; max-width: 100% !important; }
  #pricingTable { min-width: 720px !important; }
}
@media (max-width: 640px) { .site-footer .footer-grid, .footer-grid { gap: 16px !important; } .footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 8px !important; } }
html, body, .page-layout, .container, .card, .navbar, .footer, .site-footer, .hero, .section { max-width: 100% !important; overflow-x: clip !important; }
img, video, iframe, table { max-width: 100% !important; }
* { word-wrap: break-word; overflow-wrap: break-word; }
@media (max-height: 500px) and (max-width: 900px) { .hero { padding: 12px 0 0 !important; } .hero-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .hero h1 { font-size: 22px !important; } .hero-media img { height: 180px !important; } }