/* X、Y 捲動條都關掉 */
/* html,body {
  height: 100%;
  overflow: hidden; 
} */

/* ----------------------------label----------------------------- */

.label-row {
  display: flex;
  align-items: center;
  gap: 680px; /* 出發和抵達之間距離 */
  font-size: 20px;
  color: rgb(80, 126, 220);
}
.label-right {
  margin-left: 150px; /* 向右移動 100px */
}

/* ----------------------------row1Btn----------------------------- */
.row1Btn {
  /* btn大小 */
  height: 60px;
  width: 350px;

  /* btn圓角 */
  border-radius: 0.25rem; /* 4px */

  /* bg-blue-600 */
  background-color: #e4e4e4;

  /* text-white */
  color: rgb(86, 89, 95);

  /* font-medium */
  /* font-weight: 500; */

  /* shadow */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);

  /* transition */
  transition: background-color 0.2s, transform 0.1s;

  font-size: 30px;
}

/* hover:bg-blue-700 */
.row1Btn:hover {
  background-color: #c3c3c3;
}

/* active 效果（按下去縮小一點，更像 app button） */
.row1Btn:active {
  transform: scale(0.95);
}

/* ----------------------------roundTripBtn----------------------------- */
.roundTripBtn {
  /* btn大小 */
  height: 60px;
  width: 360px;

  font-size: 50px;

  /* text-white */
  color: rgb(140, 174, 238);
}

.roundTripBtn:hover {
  color: #1d4ed8;
}
/* active 效果（按下去縮小一點，更像 app button） */
.roundTripBtn:active {
    transform: scale(0.95);
  }

/* ----------------------------row2AndRow3Btn----------------------------- */
.row2AndRow3Btn {
  /* btn大小 */
  height: 50px;
  width: 343px;

  /* btn圓角 */
  border-radius: 0.25rem; /* 4px */

  /* 預設顏色 */
  background-color: #e4e4e4;

  /* 文字 */
  color: rgb(86, 89, 95);
  font-size: 25px;

  /* 按鈕分開 */
  margin-bottom: 10px;

  /* 動畫過渡（可有可無） */
  transition: background-color 0.2s ease;
}

/* 滑鼠移上去時才變色 */
.row2AndRow3Btn:hover {
  background-color: #c3c3c3;
}
/* active 效果（按下去縮小一點，更像 app button） */
.row2AndRow3Btn:active {
    transform: scale(0.95);
  }


/* ----------------------------row4Btn----------------------------- */
.row4Btn {
  /* btn大小 */
  height: 70px;
  width: 1070px;

  /* btn圓角 */
  border-radius: 0.25rem; /* 4px */

  /* 預設顏色 */
  background-color: #2563eb;

  /* 文字 */
  color: white;
  font-size: 25px;

  /* 按鈕分開 */
  margin-bottom: 10px;

  /* transition */
  transition: background-color 0.2s, transform 0.1s;

  /* 動畫過渡（可有可無）
  transition: background-color 0.2s ease; */
}

/* 滑鼠移上去時才變色 */
.row4Btn:hover {
  background-color: #1d4ed8;
}
/* active 效果（按下去縮小一點，更像 app button） */
.row4Btn:active {
  transform: scale(0.95);
}

/* --------------------------------------showTable---------------------------------------------- */
/* 整個遮罩區域 */
.popup {
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px; /* 視窗往下移一點 */
  z-index: 50;
}

/* 內容卡片 */
.popup-content {
  background: white;
  padding: 16px 20px 20px;
  border-radius: 8px;
  min-width: 520px;
  max-width: 720px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  height: 400px;
  width: 500px;
}

/* 標題 + 關閉鈕簡單排版 */
.popup-content h2 {
  margin: 0;
  font-size: 20px;
}

.close-btn {
  float: right;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

/* 兩欄容器 */
.popup-body {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

/* 左右各一欄 */
.popup-column {
  flex: 1;
}

/* 標題 */
.popup-column h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

/* 清單區：可捲動 */
.popup-list {
  max-height: 260px; /* 清單高度，可調 */
  overflow-y: auto; /* 超出就出現卷軸 */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  background: #f9fafb;
}

/* 每一個項目（縣市 / 車站） */
.popup-item {
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

/* hover 效果 */
.popup-item:hover {
  background-color: #e5e7eb;
}

/* 左欄選中的縣市 */
.popup-item.active {
  background-color: #2563eb;
  color: white;
}

/* --------------------------------------日期時間相關---------------------------------------------- */
.hidden-date-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}

/* 遮罩層 */
.time-picker-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none; /* 預設隱藏 */
    justify-content: center;
    align-items: center; /* 讓選擇器居中顯示 */
}

/* 選擇器本體 */
.time-picker-container {
    width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* 標題區 */
.tp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}
.tp-title {
    font-size: 16px;
    color: #333;
}
.tp-confirm {
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
}

/* 滾輪區域主體 */
.tp-body {
    position: relative;
    height: 200px; /* 顯示 5 行高度 (40px * 5) */
    display: flex;
    justify-content: center;
    background: #fff;
}

/* 綠色高亮選取條 (絕對定位) */
.tp-highlight-bar {
    position: absolute;
    top: 80px; /* (200px/2) - (40px/2) 置中 */
    left: 0;
    width: 100%;
    height: 40px;
    background: #a1a8e0;
    pointer-events: none; /* 讓點擊穿透，才能滑動 */
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}

.tp-colon {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    z-index: 2;
}

/* 滾動容器 */
.tp-wheel {
    flex: 1;
    overflow-y: auto;
    scroll-snap-type: y mandatory; /* 關鍵：強制吸附 */
    height: 100%;
    z-index: 2; /* 在綠色條之上 */
    scrollbar-width: none; /* Firefox 隱藏捲軸 */
    -ms-overflow-style: none;  /* IE 隱藏捲軸 */
    text-align: center;
}
.tp-wheel::-webkit-scrollbar { 
    display: none; /* Chrome 隱藏捲軸 */
}

/* 選項樣式 */
.tp-item {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #888;
    scroll-snap-align: center; /* 關鍵：每次停在正中間 */
    transition: color 0.2s;
    cursor: pointer;
}

/* 為了讓第一個和最後一個能滾到中間，需要墊高 */
.tp-padding {
    height: 80px; /* 兩格的高度 */
}

/* 當選項在綠色區域時的顏色 (需要配合 JS 動態判斷，或利用混合模式偷吃步) */
/* 這裡簡單處理：字體在上面顯示 */