/* search_box */
#headBan #search_box .search_tabs {width: 400px;}
#headBan #search_box .search_tabs li { justify-content: flex-start; }

/* ====== Booking Box ====== */
#headBan #search_box {
  position: absolute;
  margin: -10% auto 0;
  width: min(92%, 1440px);
  bottom: 0;
  transform: none;
  z-index: 998;
  background: rgb(0 0 0 / 55%);           /* 黑色半透明底 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

#search_box .booking_container {
  padding: 2.5em 2.5% 2.5em 5%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  justify-content: space-between;
}
#search_box .booking_container .title_box{display: flex;gap: 5px;flex-direction: column;}
#search_box .booking_container .title_box * { color:#fff; }
#search_box .booking_container .title_box .page_title{
    font-family: "Noto Serif SC", serif;
    font-size: 1.2rem;
}
#search_box .booking_container .title_box .subtitle{
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1.3px;
    line-height: 120%;
    text-transform: uppercase;
    font-family: "Gilda Display", serif;
    }

/* ====== Form Layout ====== */
#search_box .form_box {
  display: flex;
  gap: 1em .5em;
  align-items: end;
}

#search_box .form_box label {
  margin-bottom: 0.4em;
  padding-left: 1em;
  font-size: 0.9em;
  font-weight: 500;
  color: #ffffff; /* 白字 */
  display: block;
  font-family: "Noto Serif SC";
  letter-spacing: 1px;
}

#search_box .form_box .form_item.carpicker { min-width: 240px; }
#search_box .form_box .form_item.people   { min-width: 110px; }

/* 統一 input / select 高度 */
#search_box .form_box .form_item input,
#search_box .form_box .form_item select {
  height: 42px;          /* 固定高度 */
  line-height: 42px;     /* 文字垂直置中 */
  padding: 0 1em;        /* 左右內距 */
  border: 1px solid rgba(255,255,255,.0);
  border-radius: 8px;
  font-size: 0.95em;
  color: #fff;
  background: rgba(255,255,255,.2);
  box-sizing: border-box;
}

/* select 箭頭 */
#search_box .form_box .select_wrap::after {
  height: 42px;          /* 跟欄位一樣高，垂直置中 */
  display: flex;
  align-items: center;
}
/* 下拉選單選項：黑字 */
#search_box .form_box .form_item select option {
  color: #000000;     /* 黑字 */
  background: #ffffff;/* 白底 */
}
/* Placeholder 顏色 */
#search_box .form_box .form_item input::placeholder {
  color: #bbbbbb;
}



/* 選單 focus 狀態 (點選中) */
#search_box .form_box .form_item input:focus,
#search_box .form_box .form_item select:focus {
  border-color: var(--primary);
  background: rgba(68, 68, 68, 0.034);  /* 半透明白，保持一致 */
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(230, 230, 230, 0.644); /* 光暈 */
}



/* 下拉清單 hover/選中 */
#search_box .form_box .form_item select option:checked,
#search_box .form_box .form_item select option:hover {
  background: var(--primary); /* 藍底 */
  color: #fff;                /* 白字 */
}

/* ====== Custom Select Wrap (箭頭固定) ====== */
#search_box .form_box .select_wrap {
  position: relative;
}
#search_box .form_box .select_wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.2em;
}
#search_box .form_box .select_wrap::after {
  content: "";
  position: absolute;
  right: 0.9em;
  top: 50%;
  width: 1.5em;
  height: 1em;
  pointer-events: none;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 5l-6.5 7L1 5' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 
    no-repeat calc(100% - .5em) 50% / auto 1em;
  background-size: contain;
}

/* ====== Input 包裹 (日期/時間+icon) ====== */
#search_box .form_box .input_wrap {
  position: relative;
  flex: 1;
}
#search_box .form_box .input_wrap.dateBox {width: 150px;}
#search_box .form_box .input_wrap.timeBox {width: 100px;flex: none;}

#search_box .form_box .input_wrap input {
  padding-right: 2em;
}

/* ====== Icons (白色 outline) ====== */
#search_box .form_box .icon {
  position: absolute;
  right: 0.8em;
  top: 51%;
  width: 1.2em;
  height: 1.2em;
  transform: translateY(-50%);
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
}

/* 日曆 icon */
#search_box .form_box .icon.calendar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* 時間 icon */
#search_box .form_box .icon.clock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* ====== 日期/時間 容器 ====== */
#search_box .form_box .madatabox {
  display: flex;
  gap: 0.6em;
  align-items: center;
}

/* ====== Submit Button ====== */
#search_box .form_box .send_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#search_box .form_box .send_btn {
  
                              /* 桌機版自適應 */
  background: transparent;                /* 預設透明底 */
  border: 1px solid rgba(255,255,255,.7); /* 白色半透明邊框 */
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  color: #fff;                            /* 白字 */
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#search_box .form_box .send_btn a{
    width: 100%;
    height: 100%;
    color: #ffffff;
    padding: 0.5em;
    text-align: center;
}
#search_box .form_box .send_btn:hover {
  background: var(--primary);             /* hover → 藍底 */
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px rgb(239 239 239 / 15%); /* 藍光暈 */
  transform: translateY(-1px);
}
#search_box .form_box .send_btn:active {
  transform: scale(0.97);
}

/* ====== Responsive ====== */
@media screen and (max-width: 1440px) {
  #search_box .booking_container {
    padding: 1.8em 6%;
  }
}
@media screen and (max-width: 960px) {
        #headBan #search_box{
    position: relative;
    margin: 30px auto 0;
    background: rgb(233 233 233 / 55%);
}
    #search_box .booking_container .title_box *,#search_box .form_box label{
    color: var(--info);
}
    #search_box .form_box .form_item input, #search_box .form_box .form_item select{
    background: rgb(2 2 2 / 20%);
}
    #search_box .booking_container{
    grid-template-columns: 1fr;
    gap: 40px;
}
}

@media screen and (max-width: 768px) {
  #search_box .form_box {
    flex-direction: column;
    gap: 1em;
    width: 100%;
  }
  #search_box .form_box .form_item {
    width: 100%; /* 手機版輸入框全寬 */
  }
  #search_box .form_box .send_box {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 1em;
    width: 100%;
  }
  #search_box .form_box .send_btn {
    width: 100%; /* 手機版按鈕全寬 */
    font-size: 1.1em;
    padding: .5em 1em;
    border: 1px solid rgb(112 112 112 / 70%);
    color: #3b3b3b;
  }
  #search_box .form_box .send_btn a{color: #3b3b3b;}
}
@media screen and (max-width: 640px) {
    #search_box .form_box .input_wrap.timeBox{width: 130px;}
#search_box .form_box .form_item input, #search_box .form_box .form_item select{background: #757373;}
    #search_box .form_box .form_item input:focus, #search_box .form_box .form_item select:focus{background: var(--primary);}
}