/* =========================================================
   Cosmos Logistics — Global mobile hardening
   Loaded on every front-end page AFTER the page's own styles.
   Purpose: kill horizontal overflow, let flex rows shrink,
   and tune spacing for small screens.
   NOTE: index.php is NOT included here — it ships its own
   complete responsive system.
   ========================================================= */

/* ---------- 1. Universal safety (all widths) ---------- */
html, body { max-width: 100%; }
body { overflow-wrap: break-word; }

img, video, canvas, svg, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }

input, select, textarea, button { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }

/* Flex children must be allowed to shrink below their content width,
   otherwise one long word or a non-wrapping badge row pushes the
   whole page wider than the viewport. */
.gw > div,
.tx .info,
.info-row > div,
.detail-row > div,
.profile-info > div { min-width: 0; }

/* Badge / pill rows wrap instead of forcing width */
.gw .nm { flex-wrap: wrap; row-gap: 5px; }

/* Raw tables (not already in a Bootstrap .table-responsive) get their
   own horizontal scroll rather than stretching the page. */
@media (max-width: 991.98px) {
  div:not(.table-responsive) > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 2. Tablet ---------- */
@media (max-width: 991.98px) {
  body { overflow-x: hidden; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 3. Phone ---------- */
@media (max-width: 767.98px) {

  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.35rem, 5.6vw, 1.8rem); }
  h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }

  /* ===== deposit.php (scoped) ===== */
  body.dep-page .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  body.dep-page .topbar .inner { padding: 12px 14px !important; }
  body.dep-page .topbar img { height: 32px !important; }
  body.dep-page .back { font-size: 13px !important; }

  body.dep-page .hero { padding: 22px 18px !important; border-radius: 18px !important; gap: 16px !important; }
  body.dep-page .hero .secure { font-size: 11.5px !important; padding: 9px 13px !important; }

  body.dep-page .panel { padding: 20px 16px !important; border-radius: 18px !important; }
  body.dep-page .amtbox input { font-size: 22px !important; padding: 16px 16px 16px 44px !important; }
  body.dep-page .amtbox .rs { left: 16px !important; font-size: 21px !important; }
  body.dep-page .chip { padding: 8px 13px !important; font-size: 12.5px !important; }

  body.dep-page .gw { padding: 14px !important; gap: 12px !important; }
  body.dep-page .gw .ic { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  body.dep-page .gw .nm { font-size: 14px !important; }
  body.dep-page .gw .tg { font-size: 11.5px !important; }
  body.dep-page .gw .rd { width: 18px !important; height: 18px !important; }
  body.dep-page .pillp,
  body.dep-page .pillt { font-size: 8.5px !important; padding: 3px 6px !important; }
  body.dep-page .tx .t2 { white-space: normal !important; }

  /* ===== label / value rows (account.php, track.php) ===== */
  .info-row, .detail-row { flex-wrap: wrap; gap: 2px; }
  .info-label, .detail-label { width: 100% !important; }

  /* ===== track.php ===== */
  .track-card { margin-left: 12px !important; margin-right: 12px !important; padding: 18px !important; }
  .map-container { height: 260px !important; }
  .chat-panel { width: calc(100vw - 28px) !important; max-width: 320px; right: 14px !important; }
  .timeline { padding-left: 30px !important; }

  /* ===== dashboard.php ===== */
  .tiles { grid-template-columns: 1fr !important; gap: 16px !important; }
  .navbar .btn-logout { padding: 6px 10px !important; font-size: 13px; }

  /* ===== profile.php ===== */
  .mobile-frame { margin: 10px !important; border-radius: 16px !important; }
  .top-actions { flex-wrap: wrap; gap: 6px !important; }
  .tx-item { padding: 9px !important; gap: 10px !important; }

  /* ===== Fran.php ===== */
  .hero .content { padding: 26px 16px !important; }
  .step { gap: 12px !important; }

  /* ===== auth / form pages ===== */
  .card { border-radius: 14px !important; }
  .card-body { padding: 20px 16px !important; }
  .form-control, .form-select { font-size: 16px; } /* stops iOS zoom-on-focus */

  /* ===== Bootstrap helpers that break on tiny screens ===== */
  .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px; }
  .btn { white-space: normal; }
}

/* ---------- 4. Small phone ---------- */
@media (max-width: 400px) {
  body.dep-page .wrap { padding-left: 12px !important; padding-right: 12px !important; }
  body.dep-page .panel { padding: 18px 13px !important; }
  body.dep-page .hero { padding: 18px 15px !important; }
  body.dep-page .chips { gap: 8px !important; }
  body.dep-page .chip { padding: 7px 11px !important; font-size: 12px !important; }
  body.dep-page .back { font-size: 12.5px !important; }
  .info-label, .detail-label { font-size: 13px !important; }
}

/* ---------- 5. Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}