/* Mobile safeguards for the custom J88 detail-page components. */
@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .j88-welcome-offer,
  .j88-payment-panel,
  .j88-promotions,
  .j88-platform-info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
  }

  .j88-offer-reward,
  .j88-offer-highlight-value,
  .j88-payment-panel__title,
  .j88-promotions__title,
  .j88-promotion__name,
  .j88-platform-info__title,
  .j88-platform-info__heading {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .j88-offer-actions,
  .j88-payment-panel__methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .j88-offer-button,
  .j88-payment-panel__button,
  .j88-promotion__claim {
    width: 100%;
    min-height: 48px;
    margin-right: 0;
    margin-left: 0;
    white-space: normal;
    touch-action: manipulation;
  }

  .j88-offer-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .j88-promotion__summary {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    min-height: 60px;
    padding: 10px;
    touch-action: manipulation;
  }

  .j88-promotion__heading,
  .j88-promotion__panel,
  .j88-payment-panel__method {
    min-width: 0;
    max-width: 100%;
  }

  .j88-platform-info__table-wrap {
    overflow: visible;
    border: 0;
  }

  .j88-platform-info table,
  .j88-platform-info tbody,
  .j88-platform-info tr,
  .j88-platform-info th,
  .j88-platform-info td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .j88-platform-info table {
    table-layout: auto;
  }

  .j88-platform-info tr {
    margin-bottom: 9px;
    overflow: hidden;
    border: 1px solid #ddd5c2;
    border-radius: 7px;
    background: #fff;
  }

  .j88-platform-info tr:last-child {
    margin-bottom: 0;
  }

  .j88-platform-info th,
  .j88-platform-info td {
    padding: 9px 10px;
    border: 0;
  }

  .j88-platform-info th {
    background: #f2ead7;
  }

  .j88-platform-info td {
    background: #fff !important;
  }
}

@media (max-width: 360px) {
  .j88-welcome-offer,
  .j88-payment-panel,
  .j88-platform-info {
    padding: 13px 10px;
  }

  .j88-promotions__title {
    padding: 12px 10px;
  }

  .j88-promotion__summary {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    gap: 7px;
  }

  .j88-promotion__number {
    width: 28px;
    height: 28px;
  }
}