/* Shared mobile overflow guard. Component-level scrolling remains confined to
   explicit table/compare wrappers instead of widening the document. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

input, select, textarea, button {
  max-width: 100%;
}

p, li, td, th, a, button, label, .attendant-name, .success-ref {
  overflow-wrap: anywhere;
}

.viewport, .wrap, .main-content, .card, .modal, .drawer,
.table-wrap, .compare-table-wrap, .attendant-info, .tip-item-main {
  min-width: 0;
  max-width: 100%;
}

.table-wrap, .compare-table-wrap {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
  .viewport {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .section-divider {
    margin-left: -14px !important;
    margin-right: -14px !important;
  }

  .amounts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .amount-btn {
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 16px !important;
  }

  .amount-btn.selected::after {
    right: 1px !important;
  }

  .success-card, .rating-section, .checkout-order {
    min-width: 0;
    max-width: 100%;
  }

  .footer-links, .header-actions, .request-row, .qr-card {
    flex-wrap: wrap;
  }

  .drawer, .detail-drawer {
    width: calc(100vw - 16px) !important;
  }
}