/* ============================================================
   OurWayTrips V4.7.3 — Mobile Polish
   Focus: Cloud Sync, Checklist tabs, Weather hourly
   ============================================================ */

@media (max-width: 700px) {

  /* ---------- Family Cloud Sync ---------- */
  .cloud-sync-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
    padding: 18px !important;
  }

  .cloud-sync-card > .tool-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .cloud-sync-card > div:nth-child(2) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cloud-sync-card strong {
    font-size: 1.12rem !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  .cloud-sync-card p {
    font-size: .95rem !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
    max-width: 100% !important;
  }

  .cloud-sync-card .sync-state {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    align-items: center !important;
    margin-top: 2px !important;
  }

  .cloud-sync-card .sync-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .cloud-sync-card .sync-actions .btn {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ---------- Checklist category chips ---------- */
  .checklist-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    padding: 2px 16px 10px !important;
    scroll-padding-inline: 16px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .checklist-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .checklist-tabs .chip,
  .checklist-tabs button,
  .checklist-tabs [role="tab"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    padding: 11px 16px !important;
    font-size: .94rem !important;
    line-height: 1 !important;
    scroll-snap-align: start !important;
  }

  /* ---------- Weather hourly ---------- */
  .weather-hourly-scroll {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin-left: -2px !important;
    padding: 4px 14px 12px 2px !important;
    scroll-padding-left: 2px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .weather-hourly-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .weather-hour-card {
    flex: 0 0 96px !important;
    min-width: 96px !important;
    width: 96px !important;
    padding: 14px 8px !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
  }

  .weather-hour-card small {
    font-size: .74rem !important;
    line-height: 1.15 !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .weather-hour-card span {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    margin: 12px 0 10px !important;
  }

  .weather-hour-card strong {
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .weather-hour-card em {
    font-size: .75rem !important;
    line-height: 1.1 !important;
    margin-top: 8px !important;
  }

  .weather-hour-card.now {
    flex-basis: 100px !important;
    min-width: 100px !important;
    width: 100px !important;
  }

  /* Prevent the hourly panel itself from clipping the horizontal scroller. */
  .weather-hourly-panel {
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .cloud-sync-card .sync-actions {
    grid-template-columns: 1fr !important;
  }

  .weather-hour-card {
    flex-basis: 92px !important;
    min-width: 92px !important;
    width: 92px !important;
  }
}