/* 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);
  }

  body {
    padding-top: 0 !important;
  }

  .navbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    padding: 10px var(--trav-mobile-gutter) !important;
    border-radius: 0 0 20px 20px !important;
  }

  .navbar-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 12px !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  .navbar-logo {
    max-width: 120px !important;
    min-height: var(--trav-touch-target);
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    overflow: visible !important;
  }

  .navbar-logo img,
  .navbar-logo .logo {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
  }

  .navbar-toggle {
    grid-column: 2 !important;
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 20px rgba(25, 58, 37, 0.1) !important;
    cursor: pointer !important;
  }

  .navbar-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #1f4d35 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
  }

  .navbar-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .navbar-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .navbar-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .navbar-menu,
  .navbar-account-slot {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .navbar-menu {
    display: block !important;
  }

  .navbar-links {
    display: none !important;
    width: 100% !important;
    max-height: min(68vh, 560px) !important;
    margin-top: 4px !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    scrollbar-width: none !important;
  }

  .navbar-links::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .navbar-links.is-mobile-open,
  .navbar-links.active {
    display: flex !important;
  }

  .navbar-links > li,
  .navbar-links .dropdown,
  .navbar-account-slot,
  .navbar-account-slot .user-nav-inline,
  .user-nav {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .navbar-links .nav-link,
  .navbar-account-slot .nav-link,
  .logout-btn {
    width: 100% !important;
    min-height: var(--trav-touch-target) !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .navbar-account-slot .user-nav-inline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .navbar-roadmap-bell-slot {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }

  .navbar-roadmap-panel {
    position: fixed !important;
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 92px) !important;
    transform: none !important;
  }

  .dropdown {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .dropdown::after {
    display: none !important;
  }

  .dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .dropdown:focus-within .dropdown-menu,
  .dropdown:hover .dropdown-menu,
  .dropdown.is-dropdown-open .dropdown-menu {
    display: grid !important;
  }

  :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, select, textarea) {
    width: 100% !important;
  }

  :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;
  }

  .navbar {
    padding-inline: 10px !important;
  }

  .navbar-roadmap-panel {
    left: 8px !important;
    right: 8px !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: 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;
  }
}