/* SkyTravel Hotel Top Page - Tablet Compatibility Patch */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  /* 1. 覆盖全局补丁，恢复首页透明头部的绝对定位和透明背景 */
  #header-placeholder.is-transparent .header {
    position: absolute !important;
    background-color: transparent !important;
    border-bottom: none !important;
  }

  /* 2. 恢复 900px 以下首页脱落的业务导航栏 */
  #hotel-search-placeholder #service_nav-placeholder {
    display: block !important;
    min-height: 60px !important;
    height: auto !important;
    padding: initial !important;
    margin: initial !important;
  }

  /* 3. 应对 901px - 1199px：此时 JS 把菜单塞进了头部 #header-box 里，
     导致应用了桌面端的居中、无图标样式。我们要强行把它打回原形，变成跟手机端一模一样！ */
  #header-placeholder.is-transparent .header-service-nav-slot {
    display: block !important;
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
  }
  
  /* 强行剥除桌面端的恶臭居中和隐藏图标，恢复手机版的左侧滚动和图标显示 */
  #header-placeholder.is-transparent #header-box .service-nav-container {
    padding: 5px 20px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 5px !important;
  }
  
  #header-placeholder.is-transparent #header-box .service-nav-item {
    padding: 8px 15px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
  
  #header-placeholder.is-transparent #header-box .service-nav-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
  }
  /* 4. 解决平板模式下搜索框在一行过于拥挤的问题：换行显示 */
  .hotel-search-form .search-row {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  
  /* 第一排：目的地全宽 */
  .hotel-search-form .search-row > .destination-field {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* 第二排：日期范围占据较多空间 (60%) */
  .hotel-search-form .search-row > .hotel-date-range-row {
    width: calc(60% - 8px) !important;
    flex: 0 0 calc(60% - 8px) !important;
  }
  
  /* 第二排：入住人数占据剩余空间 (40%) */
  .hotel-search-form .search-row > .guests-field {
    width: calc(40% - 8px) !important;
    flex: 0 0 calc(40% - 8px) !important;
  }
    /* 5. 解决平板模式下浏览历史卡片挤压的问题：引入横向滚动并固定卡片宽度 */
  .hotel-history-track {
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .hotel-history-track::-webkit-scrollbar {
    display: none;
  }
  
  .hotel-history-search-card {
    flex: 0 0 240px !important; /* 平板上稍微宽一点，240px */
    width: 240px !important;
    max-width: none !important; /* 必须清除 max-width 限制 */
    scroll-snap-align: start;
  }
  
  .hotel-history-view-card {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: none !important; /* 必须清除 max-width 限制 */
    scroll-snap-align: start;
  }
  
  /* 防止单卡片时过度拉伸 */
  .hotel-history-search-track.is-single .hotel-history-search-card {
    flex-basis: 320px !important;
    width: 320px !important;
    max-width: 320px !important;
  }
}
  .hotel-history-track {
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .hotel-history-track::-webkit-scrollbar {
    display: none;
  }
  
  .hotel-history-search-card {
    flex: 0 0 240px !important; /* 平板上稍微宽一点，240px */
    width: 240px !important;
    scroll-snap-align: start;
  }
  
  .hotel-history-view-card {
    flex: 0 0 220px !important;
    width: 220px !important;
    scroll-snap-align: start;
  }
  
  /* 防止单卡片时过度拉伸 */
  .hotel-history-search-track.is-single .hotel-history-search-card {
    flex-basis: 320px !important;
    width: 320px !important;
  }
}