/* Elite Pay — global responsive sizing
   Mobile keeps the native app column; tablet/desktop get a wider, centred,
   comfortably scaled version of the same layout. */

html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* ---------- Small phones (≤360px) ---------- */
@media (max-width: 360px) {
  html { font-size: 15px; }
  .p-6 { padding: 1.15rem !important; }
  .p-5 { padding: 1rem !important; }
  .px-6 { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
  .gap-4 { gap: 0.8rem !important; }
  .text-3xl { font-size: 1.6rem !important; }
  .text-2xl { font-size: 1.35rem !important; }
}

/* ---------- Tablets (≥640px) ---------- */
@media (min-width: 640px) {
  body { background: #eef0f7; }
  .max-w-md { max-width: 34rem !important; }
}

/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
  html { font-size: 17px; }
  .max-w-md { max-width: 40rem !important; }

  /* Give the app column a framed, centred look on big screens */
  body > div.min-h-screen.max-w-md,
  body > div.max-w-md.min-h-screen,
  #profileContainer,
  body > div > div.max-w-md.min-h-screen {
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
    border-radius: 0;
  }

  /* Bottom navigation stays aligned with the app column */
  .bottom-nav, nav.fixed.bottom-0, div.fixed.bottom-0 {
    max-width: 40rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}

/* ---------- Large desktop (≥1440px) ---------- */
@media (min-width: 1440px) {
  .max-w-md { max-width: 44rem !important; }
  .bottom-nav, nav.fixed.bottom-0, div.fixed.bottom-0 { max-width: 44rem !important; }
}

/* Landscape phones: avoid cramped vertical padding */
@media (max-height: 480px) and (orientation: landscape) {
  .min-h-screen { min-height: auto !important; }
}