.tabs {
  display: flex;
  gap: 0.3rem;
  background-color: #ddd;
}

.tab {
  color: #fff;
  font-size: 0.16rem;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
}

.tab.active {
  color: #1E60C9;
  font-weight: 700;
  background-color: #fff;
}

.search-card {
  width: 10.24rem;
  margin: 0.2rem auto;
  background-color: #fff;
  border-radius: 0.06rem;
  overflow: hidden;
}

.search-form {
  display: flex;
  gap: 0.1rem;
  padding: 0.2rem;
}

.form-field {
  display: flex;
  flex: 2;
}
.form-field-input {
  display: flex;
  flex: 3;
}
.input-text {
    font-size: 0.13rem;
}
.input-text,
.select {
  height: 0.4rem;
  border: 1px solid rgba(211, 220, 230, 1);
  border-radius: 0.04rem;
  padding: 0 0.12rem;
  background-color: #fff;
  width: 100%;
}
.select {
 flex: 1;
}

.show-field {
    display: block;
}

.hide-field {
    display: none;
}

.btn-search {
  height: 0.4rem;
  background-color: #1E60C9;
  color: #fff;
  border-radius: 0.04rem;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.16rem;
  padding: 0px 0.15rem;
}

.table-wrapper {
  width: 100%;
  max-width: 10.24rem;
  margin: 0.2rem auto 0.2rem;
  background-color: #fff;
  padding: 0.4rem;
  border-radius: 0.06rem;
  overflow: hidden;
}
.tip-wrapper {
  width: 100%;
  max-width: 10.24rem;
  margin: 0rem auto 0.6rem;
  background-color: #fff;
  padding: 0.4rem;
  border-radius: 0.06rem;
}
.tip-wrapper-inner {
  width: 100%;
  height: 100%;
  background-color: rgba(221,56,54,0.05);
  padding: 0.2rem 0.4rem;;
}

.tip-title {
    font-weight: bold;
    font-size: 0.16rem;
    color: #DD3836;
    line-height: 0.3rem;
    text-align: left;
    font-style: normal;
}
.tip-content {
    font-family: MicrosoftYaHei;
    font-size: 0.13rem;
    color: #DD3836;
    line-height: 0.24rem;
    text-align: left;
    font-style: normal;
    margin-top: 0.1rem;
}


.flights-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border: none;
  border-top: 1px solid rgba(211, 220, 230, 1);
  border-bottom: 1px solid rgba(211, 220, 230, 1);
}

/* 列宽分配：统一最终比例（修复总和100%） */
.flights-table th:nth-child(1), .flights-table td:nth-child(1) { width: 20%; min-width: 1.2rem; }
.flights-table th:nth-child(2), .flights-table td:nth-child(2) { width: 6.25%; min-width: 0.8rem;}
.flights-table th:nth-child(3), .flights-table td:nth-child(3) { width: 6.25%; min-width: 0.8rem;}
.flights-table th:nth-child(4), .flights-table td:nth-child(4) { width: 6.25%; min-width: 0.8rem;}
.flights-table th:nth-child(5), .flights-table td:nth-child(5) { width: 30%; min-width: 1.2rem; }
.flights-table th:nth-child(6), .flights-table td:nth-child(6) { width: 10%; min-width: 0.8rem;}
.flights-table th:nth-child(7), .flights-table td:nth-child(7) { width: 4%; min-width: 0.8rem;}
.flights-table th:nth-child(8), .flights-table td:nth-child(8) { width: 20%; min-width: 1rem;}

/* 表头样式 */
.flights-table thead th {
  background-color: #344965;
  color: #fff;
  font-weight: 700;
  padding: 0 0.12rem;
  height: 0.6rem !important;
  font-size: 0.14rem;
  border: none;
  border-bottom: 1px solid #eee;
}

/* 静态单元格（短文本，无滚动） */
.static-cell {
  padding: 0.12rem;
  border: none;
  border-top: 1px solid #eee;
  color: rgba(42, 50, 59, 1);
  font-size: 0.14rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

/* 滚动单元格核心样式（修复垂直居中） */
.scroll-cell {
  position: relative;
  padding: 0 !important;
  height: 0.6rem !important; /* 固定高度 */
  line-height: 0.6rem !important; /* 行高=高度，垂直居中 */
  overflow: hidden !important;
  border: none;
  color: rgba(42, 50, 59, 1);
  font-size: 0.12rem;
}

/* 滚动文本容器（修复垂直居中+初始位置） */
.scroll-text {
  position: absolute;
  left: 0;
  top: 0; /* 配合line-height垂直居中，移除transform: translateY(-50%) */
  white-space: nowrap !important; /* 强制不换行 */
  padding: 0 0.12rem;
  margin: 0;
  will-change: transform; /* 优化性能 */
  transform: translateX(0); /* 初始位移重置 */
}

/* 奇偶行背景色 */
.flights-table tbody tr:nth-child(even) .scroll-cell,
.flights-table tbody tr:nth-child(even) .static-cell {
  background-color: #f5f5f7;
}

/* 表单字段容器优化 */
.form-field {
  display: flex;
  position: relative; /* 为下拉箭头定位提供基准 */
}

/* 核心：美化后的下拉框样式 */
.select {
  height: 0.4rem;
  width: 100%;
  padding: 0 0.35rem 0 0.15rem; /* 右侧预留箭头空间 */
  border: 1px solid #d3dce6;
  border-radius: 0.06rem; /* 圆角更圆润 */
  background-color: #ffffff;
  font-size: 0.14rem;
  color: #2a323b;
  /* 移除原生样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 优化视觉 */
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease; /* 过渡动画，交互更丝滑 */
  box-sizing: border-box;
}

/* 自定义下拉箭头（精致三角） */
.form-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.15rem;
  transform: translateY(-50%);
  /* 绘制更精致的三角箭头 */
  width: 0;
  height: 0;
  border-left: 0.05rem solid transparent;
  border-right: 0.05rem solid transparent;
  border-top: 0.05rem solid #889099;
  /* 防止箭头拦截点击 */
  pointer-events: none;
  transition: border-top-color 0.2s ease;
}

/* 悬浮状态 */
.select:hover {
  border-color: #1E60C9; /* 主色调边框 */
  box-shadow: 0 0 0 2px rgba(30, 96, 201, 0.08); /* 轻微发光效果 */
}

/* 悬浮时箭头变色 */
.form-field:hover::after {
  border-top-color: #1E60C9;
}

/* 聚焦状态（选中时） */
.select:focus {
  border-color: #1E60C9;
  box-shadow: 0 0 0 2px rgba(30, 96, 201, 0.15); /* 明显的聚焦发光 */
  background-color: #f8f9fa; /* 轻微背景色变化 */
}

/* 下拉选项美化（兼容大部分浏览器） */
.select option {
  padding: 0.1rem 0.15rem;
  background-color: #ffffff;
  color: #2a323b;
  font-size: 0.14rem;
}

/* 选项hover样式 */
.select option:hover {
  background-color: #e8f3ff;
  color: #1E60C9;
}

/* 禁用状态（可选，如需） */
.select:disabled {
  background-color: #f5f7fa;
  color: #c0c6cc;
  cursor: not-allowed;
  border-color: #e5e9f0;
}

.select:disabled + .form-field::after {
  border-top-color: #c0c6cc;
}