/* 小屏 App 化增强 — 预订流程、列表页与首页 */

:root {
  --sticky-cta-h: 4.25rem;
}

@media (max-width: 899px) {
  /* 首页 main 无 container，给内容区补左右留白 */
  main.tx-home > .content {
    padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
  }

  /* 页头 / 页脚品牌区：确保与 container 对齐 */
  .tx-page-header,
  .tx-footer-brand {
    padding-inline: 0;
  }

  /* 预订页：隐藏底栏 Tab，为底部操作栏留出空间 */
  body.tx-has-sticky-cta {
    padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom, 0px));
  }
  body.tx-has-sticky-cta .tx-mbar {
    display: none;
  }

  /* 紧凑页头 */
  .tx-page-header--compact {
    margin-bottom: 0.75rem;
  }
  .tx-page-header--compact h1 {
    font-size: 1.25rem;
    font-weight: 700;
  }

  /* 预订流程容器 */
  .tx-booking-page .tx-booking-flow {
    padding: 1rem;
    border-radius: 14px;
    margin-bottom: 0.5rem;
  }

  /* 步骤进度条 */
  .tx-booking-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
  }
  .tx-booking-progress-dot {
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .tx-booking-progress-dot.is-active {
    background: var(--color-primary);
    transform: scale(1.35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
  }
  .tx-booking-progress-dot.is-done {
    background: var(--color-primary);
  }
  .tx-booking-progress-line {
    flex: 1;
    max-width: 3.5rem;
    height: 2px;
    background: var(--color-border);
    transition: background 0.2s;
  }
  .tx-booking-progress-line.is-done {
    background: var(--color-primary);
  }

  /* 隐藏面板内导航，改用底部固定栏 */
  .tx-panel-nav,
  .tx-booking-actions {
    display: none !important;
  }

  /* 底部固定操作栏 */
  .tx-booking-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
  }
  .tx-booking-sticky[hidden] {
    display: none !important;
  }
  .tx-booking-sticky .tx-btn {
    flex: 1;
    min-height: 2.75rem;
    border-radius: 12px;
  }
  .tx-booking-sticky .tx-btn-ghost {
    flex: 0 0 auto;
    min-width: 5.5rem;
  }
  .tx-booking-sticky .tx-btn-primary,
  .tx-booking-sticky .tx-btn-accent {
    flex: 1;
  }
  .tx-booking-page .tx-booking-form {
    padding-bottom: 0.5rem;
  }

  /* 更大触控输入 */
  .tx-booking-page .tx-field input,
  .tx-booking-page .tx-field select,
  .tx-booking-page .tx-field textarea,
  .tx-booking-page .tx-traveler-input {
    min-height: 2.75rem;
    font-size: 1rem;
    border-radius: 12px;
  }
  .tx-booking-page .tx-check-line {
    font-size: 0.9375rem;
    padding: 0.35rem 0;
  }
  .tx-booking-page .tx-check-line input {
    width: 1.15rem;
    height: 1.15rem;
  }
  .tx-booking-page .tx-quote-box {
    border-radius: 12px;
    padding: 0.85rem 1rem;
  }

  /* 支付渠道：更大点击区域 */
  .tx-pay-channel-list {
    gap: 0.65rem;
  }
  .tx-pay-channel {
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
  }

  /* 我的预订 */
  .tx-my-bookings-page .tx-my-booking-card {
    padding: 1rem;
    border-radius: 14px;
  }
  .tx-my-bookings-page .tx-my-booking-meta {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
  }
  .tx-my-bookings-page .tx-my-booking-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
  }
  .tx-my-bookings-page .tx-my-booking-actions .tx-btn {
    flex: 1;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 12px;
  }
  .tx-my-bookings-page .tx-loading {
    padding: 2.5rem 1rem;
    font-size: 0.9375rem;
  }

  /* 团期 / 线路列表 */
  .tx-departure-card {
    padding: 0.85rem 1rem;
    border-radius: 14px;
  }
  .tx-departure-cover {
    border-radius: 10px;
  }
  .tx-route-grid .tx-route-card {
    border-radius: 14px;
  }
  .tx-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * max(1rem, env(safe-area-inset-left, 0px)));
    padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
    padding-block-end: 0.25rem;
  }
  .tx-filters::-webkit-scrollbar {
    display: none;
  }
  .tx-filter {
    flex-shrink: 0;
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
  }

  /* 首页目的地横向滑动（保留左右 gutter，仅卡片区溢出） */
  .tx-destinations-section .tx-section-head {
    padding-inline: 0;
  }
  .tx-destinations-section .tx-dest-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    padding-block-end: 0.35rem;
    margin-inline: calc(-1 * max(1rem, env(safe-area-inset-left, 0px)));
    padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tx-destinations-section .tx-dest-grid::-webkit-scrollbar {
    display: none;
  }
  .tx-destinations-section .tx-dest-card {
    flex: 0 0 min(68vw, 260px);
    scroll-snap-align: start;
  }

  /* 日历工具栏 */
  .tx-calendar-toolbar {
    margin-bottom: 1rem;
  }
  .tx-calendar-toolbar .tx-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 12px;
  }
}

@media (min-width: 900px) {
  .tx-booking-progress {
    display: none;
  }
  .tx-booking-sticky {
    display: none !important;
  }
  .tx-booking-steps.tx-hide-mobile {
    display: flex;
  }
  p.tx-page-lead.tx-hide-mobile {
    display: block;
  }
}