/* Pre-React loader styles — loaded before React mounts.
   Critical spinner rules (@keyframes rock, .loader-spinner, .loader-airport)
   are inlined directly in index.html so they apply before this file loads.
   This file only contains non-critical responsive breakpoints for the
   root landing-page layout. */

/* ── Mobile: stack header and body columns ── */
@media (max-width: 767px) {
  #loader-header {
    flex-direction: column !important;
  }
  #loader-header > div:first-child {
    flex: none !important;
    width: 100% !important;
  }
  #loader-header > div:last-child {
    flex: none !important;
    width: 100% !important;
  }
  #loader-icons-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    justify-items: center !important;
  }
  #loader-body {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #loader-body-left,
  #loader-body-right {
    flex: none !important;
    width: 100% !important;
  }
}