/* Global mobile guard rules for Bookify surfaces */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

pre,
code,
.table,
.table-responsive,
.card,
.modal,
.offcanvas,
.row,
.container,
.container-fluid {
  min-width: 0;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Booking/Public layout fixes */
@media (max-width: 767.98px) {
  .pay-card {
    flex-direction: column;
  }

  .pay-card .right {
    width: 100% !important;
  }

  .pay-page dl.row dt,
  .pay-page dl.row dd {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
  }

  .pay-page dl.row dt {
    margin-top: 0.5rem;
    margin-bottom: 0.15rem;
  }

  .pay-page dl.row dd {
    margin-bottom: 0.5rem;
  }

  #ai-concierge-widget {
    right: 12px !important;
    bottom: 12px !important;
  }

  #ai-chat-window {
    width: min(94vw, 360px) !important;
    height: min(72vh, 520px) !important;
    right: 0 !important;
    bottom: 58px !important;
  }

  .navbar .navbar-brand {
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navbar .navbar-text {
    font-size: 0.85rem;
  }

  .bank-notify-actions {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch !important;
  }

  .bank-notify-actions .btn {
    width: 100%;
  }

  .activity-feed.container {
    max-width: 100% !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .purchase-toasts {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 0.75rem !important;
  }

  .purchase-toast {
    min-width: 0 !important;
    width: 100%;
  }
}

/* Panel mobile table and content safety */
@media (max-width: 991.98px) {
  .app-content,
  .content-wrapper,
  .content-body {
    overflow-x: hidden;
  }

  .content-body .table {
    min-width: 640px;
  }

  .content-body .table-responsive .table {
    min-width: 640px;
  }
}
