/* Tour-detail mobile width and text-wrapping guardrails. */
@media (max-width: 980px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }

  .topbar .brand-logo {
    width: min(128px, 100%) !important;
    height: auto;
  }

  .topbar .search-outer {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .topbar .hamburger {
    grid-column: 4;
  }

  .package-detail-body {
    padding: 10px 14px 36px !important;
  }

  .package-detail-grid,
  .package-detail-left,
  .package-detail-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .package-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .package-detail-left > *,
  .package-detail-right > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .package-detail-left h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
  }

  .package-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .package-chip-row span {
    flex: 1 1 135px;
    width: auto;
    min-width: 0 !important;
    padding: 8px 10px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
    justify-content: center;
  }

  .about-trip-box,
  .highlight-panel,
  .itinerary-panel,
  .inc-exc-panel,
  .costing-panel,
  .dates-panel,
  .text-detail-panel,
  .cancellation-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  .about-trip-box :is(p, li),
  .highlight-panel :is(p, li),
  .itinerary-panel :is(p, li),
  .inc-exc-panel :is(p, li),
  .costing-panel p,
  .dates-panel p,
  .text-detail-panel :is(p, li),
  .cancellation-panel :is(p, li),
  .hf-faq-q-text,
  .hf-faq-ans-inner,
  .review-text,
  .coupon-card,
  .price-widget {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .package-detail-left img,
  .hf-faq-ans-inner img {
    max-width: 100% !important;
    height: auto !important;
  }

  .detail-tab-strip {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  }

  .detail-tab-window {
    min-width: 0;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .detail-tab-window::-webkit-scrollbar {
    display: none;
  }

  .detail-tab-track {
    width: max-content;
    min-width: 100%;
    display: flex !important;
    transform: none !important;
  }

  .detail-tab-track a {
    flex: 0 0 auto;
    min-width: 132px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .highlight-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .highlight-card,
  .other-highlight-box,
  .itinerary-day,
  .itinerary-head,
  .itinerary-content,
  .itinerary-body-text,
  .itinerary-info-footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .itinerary-head {
    align-items: flex-start !important;
  }

  .itinerary-head > * {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .itinerary-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .inc-exc-head {
    width: 100%;
    min-width: 0;
  }

  .inc-tab-btn {
    min-width: 0;
    padding: 14px 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .about-full *,
  .inc-exc-content *,
  .itinerary-body-text *,
  .term-content *,
  .highlight-other-list * {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .detail-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    white-space: normal !important;
  }

  .detail-table th,
  .detail-table td {
    width: auto !important;
    padding: 11px 8px !important;
    font-size: 13px !important;
    line-height: 1.4;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .date-cards-grid,
  .date-card-new,
  .date-card-body,
  .reviews-section,
  .review-row,
  .hf-faq-section,
  .hf-faq-wrap,
  .hf-faq-item,
  .hf-faq-btn {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .hf-faq-btn {
    align-items: flex-start;
  }

  .hf-faq-q-text {
    min-width: 0;
    text-align: left;
  }

  .obt-card {
    width: min(86vw, 320px);
    max-width: 100%;
  }

  .obt-card__title,
  .obt-card__info-item,
  .obt-card__info-item span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .callback-dialog {
    width: calc(100% - 28px);
    max-width: 420px;
    margin: 14px;
    box-sizing: border-box;
  }
}

@media (max-width: 380px) {
  .package-chip-row span {
    flex-basis: 100%;
  }

  .detail-table th,
  .detail-table td {
    padding: 9px 6px !important;
    font-size: 12px !important;
  }
}