/* Global responsive safety layer loaded after page-specific styles. */
:root {
  --trav-mobile-gutter: clamp(14px, 4vw, 22px);
  --trav-mobile-radius: 22px;
  --trav-touch-target: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

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

img,
video,
canvas {
  height: auto;
}

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

input,
select,
textarea {
  min-width: 0;
}

table {
  max-width: 100%;
}

:where(h1, h2, h3, h4, p, li, a, button, label, strong, span) {
  overflow-wrap: break-word;
}

:where(main, section, article, aside, header, footer, div, form, nav, ul, li) {
  min-width: 0;
}

:where(.modal-backdrop, .overlay, [class*="modal"], [class*="popup"]) {
  max-width: 100vw;
}

:where(.navbar-menu, .navbar-links, .dropdown-menu, .user-nav-inline) {
  min-width: 0;
}

:where(.table-wrapper, .table-scroll, .admin-table-wrap, .analytics-table-wrap, .booking-table-wrap) {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.leaflet-container, #map, #map-container, .map-container, .map-wrapper) {
  max-width: 100%;
}

:where(.flatpickr-calendar) {
  max-width: calc(100vw - 20px);
}

@media (max-width: 1180px) {
  :where(.hero-stat-grid, .highlight-grid, .decision-board-grid, .selection-grid, .posts-grid, .category-grid, .photo-preview-grid, .order-detail-grid, .selection-group-grid, .pdf-panel-grid, .pdf-card-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(.filter-grid, .form-location-grid, .advanced-form-grid, .profile-view-grid, .profile-field-grid.two-columns, .account-action-grid, .trip-focus-meta-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body {
    overflow-x: hidden;
  }

  :where(.home-main, .catalog-main, .detail-main, .legal-main, .community-main, .account-main, .payment-main, .confirmation-main, .pro-main, .dashboard-main, .page-main, main) {
    width: min(100%, 100vw);
  }

  :where(.home-main, .map-section, .catalog-shell, .catalog-page-shell, .activity-details-container, .housing-details-grid, .restaurant-details-grid, .restaurant-detail-shell, .detail-shell, .detail-layout, .community-shell, .legal-content, .payment-shell, .confirmation-shell, .account-shell, .pro-shell, .dashboard-shell, .analytics-shell, .moderation-shell) {
    width: min(100%, calc(100vw - (var(--trav-mobile-gutter) * 2))) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  :where(.activity-details-container, .housing-details-grid, .restaurant-details-grid, .detail-grid, .detail-layout, .reservation-layout, .payment-grid, .payment-layout, .confirmation-grid, .order-shell, .community-layout, .account-layout, .profile-layout, .profile-view-grid, .profile-edit-grid, .trip-focus-layout, .travel-history-layout, .travel-upcoming-layout, .dashboard-grid, .analytics-grid, .moderation-grid, .pro-form-grid, .single-canvas-form, .form-step-grid, .advanced-form-grid, .room-grid, .pricing-grid, .availability-grid, .destination-layout, .region-layout) {
    grid-template-columns: 1fr !important;
  }

  :where(.filter-grid, .form-location-grid, .hero-stat-grid, .highlight-grid, .decision-board-grid, .selection-grid, .posts-grid, .category-grid, .photo-preview-grid, .order-detail-grid, .selection-group-grid, .pdf-panel-grid, .pdf-card-grid, .trip-focus-meta-grid, .profile-field-grid, .account-action-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(.activity-cards, .housing-cards, .restaurant-grid, .cards-grid, .service-grid, .catalog-grid, .destination-grid, .region-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }

  :where(.sidebar, .reservation-container, .travel-plan, .travel-plan-shell, .summary-sidebar, .payment-sidebar, .account-sidebar, .filters-sidebar) {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  :where(.modal-backdrop, .comments-modal, .create-post-modal, .delete-post-modal, .account-modal-card, .profile-modal-card, .profile-view-container, .profile-edit-container, .profile-modal-content, .profile-delete-modal-card) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --trav-mobile-gutter: clamp(12px, 4vw, 18px);
  }

  :where(h1, .hero-title, .page-title) {
    font-size: clamp(2rem, 11vw, 3.2rem) !important;
    line-height: 0.98 !important;
  }

  :where(h2, .section-title) {
    font-size: clamp(1.45rem, 7vw, 2.2rem) !important;
    line-height: 1.05 !important;
  }

  :where(p, li, label, input, select, textarea, button) {
    font-size: max(0.95rem, 16px);
  }

  :where(.hero-shell, .hero-card, .content-card, .catalog-card, .activity-card, .housing-card, .restaurant-card, .post-card, .selection-card, .summary-card, .dashboard-card, .account-card, .profile-card, .modal-card, .reservation-container, .travel-plan-shell) {
    border-radius: var(--trav-mobile-radius) !important;
  }

  :where(.hero-shell, .content-card, .catalog-card, .activity-card, .housing-card, .restaurant-card, .post-card, .selection-card, .summary-card, .dashboard-card, .account-card, .profile-card, .modal-card, .reservation-container, .travel-plan-shell, .legal-content) {
    padding: clamp(16px, 5vw, 24px) !important;
  }

  :where(.inline-duo, .modal-actions, .form-actions, .profile-modal-footer, .account-actions, .card-actions, .hero-actions, .filter-actions, .roadmap-actions, .decision-board-actions) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  :where(.inline-duo > *, .modal-actions > *, .form-actions > *, .profile-modal-footer > *, .account-actions > *, .card-actions > *, .hero-actions > *, .filter-actions > *, .roadmap-actions > *) {
    width: 100% !important;
  }

  :where(button, .btn, .primary-btn, .secondary-btn, .nav-link, .submit-btn, .theme-btn, .filter-check-pill, .vote-button) {
    min-height: var(--trav-touch-target);
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea
  ) {
    width: 100% !important;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    width: auto !important;
    min-width: 0;
  }

  :where(.roadmap-chat-widget, .roadmap-chat-panel, .roadmap-activity-center, .roadmap-service-vote-panel) {
    left: var(--trav-mobile-gutter) !important;
    right: var(--trav-mobile-gutter) !important;
    bottom: var(--trav-mobile-gutter) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 96px) !important;
  }

  :where(.modal-backdrop) {
    padding: 12px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  :where(.create-post-modal, .comments-modal, .delete-post-modal, .account-modal-card, .profile-modal-card, .profile-modal-content, .profile-view-container, .profile-edit-container) {
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 480px) {
  :root {
    --trav-mobile-gutter: 12px;
    --trav-mobile-radius: 18px;
  }

  :where(.hero-shell, .content-card, .catalog-card, .activity-card, .housing-card, .restaurant-card, .post-card, .selection-card, .summary-card, .dashboard-card, .account-card, .profile-card, .modal-card, .reservation-container, .travel-plan-shell, .legal-content) {
    padding: 14px !important;
  }

  :where(.activity-cards, .housing-cards, .restaurant-grid, .cards-grid, .service-grid, .catalog-grid, .destination-grid, .region-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(.flatpickr-calendar) {
    transform-origin: top center;
  }
}

@media (hover: none) and (pointer: coarse) {
  :where(a, button, .nav-link, .dropdown-link, .theme-btn, .filter-check-pill) {
    touch-action: manipulation;
  }
}

/* Final component safeguards for narrow phones. */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 76px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  :where(main, .home-main, .community-main, .account-shell, .catalog-page-shell, .detail-shell, .payment-page, .confirmation-page, .trip-review-page, .subscription-main, .pro-dashboard) {
    max-width: 100% !important;
  }

  :where(.site-footer, footer) {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  :where(.cookie-banner) {
    align-items: stretch;
    gap: 12px;
    max-height: min(72dvh, 620px);
    padding: 16px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow-y: auto;
  }

  :where(.cookie-banner-text, .cookie-banner-actions) {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .cookie-banner-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-banner-actions .cookie-btn {
    width: 100%;
    min-height: var(--trav-touch-target);
  }

  .cookie-prefs-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .cookie-prefs-box {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 24px 18px 18px;
    border-radius: 24px;
  }

  :where(.modal, .modal-backdrop, .account-modal, .profile-modal-overlay, .roadmap-history-modal, .roadmap-chat-poll-modal-shell) {
    max-height: 100dvh;
    overscroll-behavior: contain;
  }

  :where(.modal-content, .modal-card, .account-modal-card, .profile-modal-card, .profile-modal-content, .profile-view-container, .profile-edit-container, .roadmap-history-dialog) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  :where(.modal-close-btn, .modal-close-icon, .forgot-password-close, .roadmap-history-close, .roadmap-chat-poll-modal-close) {
    min-width: var(--trav-touch-target) !important;
    min-height: var(--trav-touch-target) !important;
    display: inline-grid !important;
    place-items: center !important;
    line-height: 1 !important;
  }

  :where(.progress-strip) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(126px, 1fr)) !important;
    gap: 8px !important;
    padding: 2px 0 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  :where(.progress-strip)::-webkit-scrollbar {
    display: none;
  }

  :where(.progress-step) {
    min-height: var(--trav-touch-target) !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  :where(.trip-review-page, .confirmation-page) .progress-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
  }

  :where(.trip-review-page, .confirmation-page) .progress-step {
    padding-inline: 8px !important;
    font-size: clamp(0.68rem, 3vw, 0.82rem) !important;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .trip-review-page :where(.trip-review-hero, .hero-copy, .hero-visual, .review-content, .review-card),
  .confirmation-page :where(.confirmation-hero, .confirmation-copy-card, .confirmation-visual-card, .confirmation-content, .surface-card) {
    width: 100% !important;
    max-width: 100% !important;
  }

  :where(.table-wrapper, .table-scroll, .admin-table-wrap, .analytics-table-wrap, .booking-table-wrap, .matrix-grid) {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  :where(.table-wrapper, .table-scroll, .admin-table-wrap, .analytics-table-wrap, .booking-table-wrap, .matrix-grid)::-webkit-scrollbar {
    display: none;
  }

  .matrix-shell {
    max-width: 100%;
    overflow: hidden;
  }

  :where(.flatpickr-calendar.open) {
    right: auto !important;
    left: 50% !important;
    width: min(307px, calc(100vw - 20px)) !important;
    transform: translateX(-50%) !important;
  }

  :where(.flatpickr-calendar .flatpickr-innerContainer, .flatpickr-calendar .flatpickr-rContainer, .flatpickr-calendar .flatpickr-days, .flatpickr-calendar .dayContainer) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :where(.roadmap-toast-host, .roadmap-service-vote-tray) {
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
  }

  :where(.roadmap-chat-widget, .roadmap-chat-panel, .roadmap-activity-center, .roadmap-service-vote-panel) {
    bottom: max(var(--trav-mobile-gutter), env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 88px) !important;
  }

  :where(.roadmap-stats, .trip-section-status, .community-stats-bar) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  :where(.roadmap-stats, .trip-section-status, .community-stats-bar)::-webkit-scrollbar {
    display: none;
  }

  body.pro-activities-page :where(.activity-builder, .question-selection-container, .drop-zone, .drop-zone-container) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    right: auto !important;
    left: auto !important;
  }

  body.pro-activities-page .drop-zone .form-field {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  body.pro-activities-page .drop-zone .form-field > :is(input, select, textarea, button, .toggle-hours, .duration-fields, .time-selection, .custom-keyword-wrapper) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.pro-activities-page .bnb-type-container {
    grid-template-columns: 1fr !important;
  }

  .destination-details {
    display: grid;
    gap: 18px;
    width: min(100%, calc(100vw - (var(--trav-mobile-gutter) * 2)));
    margin-inline: auto;
  }

  .destination-details :where(.carousel-section, .carousel-container, .details-and-calendar, .details, .destination-info, .calendar-container) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .destination-details .carousel-container {
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  .destination-details .carousel,
  .destination-details .carousel-slide,
  .destination-details .carousel-slide img {
    height: 100% !important;
  }

  .destination-details :where(.details-and-calendar, .destination-info) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .destination-details :where(.details, .destination-info, .calendar-container, .country-entry) {
    padding: 18px !important;
    border-radius: var(--trav-mobile-radius) !important;
  }

  .destination-details .country-description h2 {
    font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
  }

  .destination-details #calendar-input {
    width: 100% !important;
    min-height: 48px;
  }

  .destination-details > .travel-plan:not(.travel-plan-shell),
  body:not(.has-travel-roadmap) > .travel-plan {
    position: static !important;
    width: min(100%, calc(100vw - (var(--trav-mobile-gutter) * 2))) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto 18px !important;
  }

  body:not(.has-travel-roadmap) > .button-next {
    position: static !important;
    width: min(100%, calc(100vw - (var(--trav-mobile-gutter) * 2))) !important;
    height: auto !important;
    margin: 12px auto !important;
    transform: none !important;
  }

  body:not(.has-travel-roadmap) > .button-next button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@supports selector(body:has(.destination-details)) {
  @media (max-width: 760px) {
    body:has(.destination-details) main > .intro {
      position: static !important;
      width: min(100%, calc(100vw - (var(--trav-mobile-gutter) * 2))) !important;
      height: auto !important;
      margin: 18px auto 8px !important;
    }
  }
}

@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  :where(.roadmap-chat-drawer, .roadmap-chat-poll-modal, .roadmap-history-dialog, .modal-content, .modal-card) {
    max-height: calc(100dvh - 16px) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  :where(.card, .catalog-card, .activity-card, .housing-card, .restaurant-card, .post-card, .roadmap-card):hover {
    transform: none;
  }
}