*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", Arial, sans-serif;
  background: #eef0ee;
  color: #202522;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* ---------- Hero ---------- */
.hero {
    min-height: 100vh;
    padding: 100px 0;
    display: flex;
    align-items: center;
    color: #fff;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
        url("/images/hero-logo2.webp") 80% center / cover no-repeat;
}

.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6.5vw, 78px);
  line-height: 1.1;
  font-weight: 500;
  margin: 18px 0;
}

.hero p {
  font-size: 18px;
  max-width: 650px;
}

.ey {
  letter-spacing: 4px;
  color: #e0c78e;
  font-size: 13px;
  text-transform: uppercase;
}

.btn {
  display: inline-block;
  margin: 10px 10px 0 0;
  padding: 12px 22px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.btn.primary {
  background: #b79a63;
  color: #fff;
}

.btn.primary:hover {
  background: #a68753;
}

.btn:not(.primary) {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.btn:not(.primary):hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Sections ---------- */
.sec {
  padding: 80px 8%;
}

.sec.cream {
  background: #f6f3eb;
}

.head {
  margin-bottom: 40px;
  max-width: 720px;
}

.kick {
  letter-spacing: 3px;
  color: #b79a63;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.head h2,
.sec h2 {
  font-family: Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  margin: 0 0 12px;
  line-height: 1.25;
}

.lead {
  color: #5a625c;
  font-size: 16px;
  margin: 0;
}

/* ---------- Cards / Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}

.card .pic {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.card .body {
  padding: 20px 22px 24px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.card p {
  margin: 0;
  color: #5a625c;
  font-size: 14px;
}

/* ---------- Split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}

.split img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.list li {
  padding: 10px 0;
  border-bottom: 1px solid #e4e0d6;
  font-size: 15px;
}

.list li b {
  color: #b79a63;
  margin-right: 6px;
}

/* ---------- Weather ---------- */
.weather-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  margin-top: 24px;
}

.weather-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
  background: #f8f5ee;
  padding: 16px 18px;
  border-radius: 8px;
}

.weather-note .ico {
  font-size: 28px;
  line-height: 1;
}

.weather-note p {
  margin: 0;
  font-size: 14px;
  color: #4a524c;
}

.weather-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.wday {
  text-align: center;
  padding: 14px 8px;
  background: #f4f6f4;
  border-radius: 8px;
}

.wday .d {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.wday .ic {
  font-size: 22px;
  margin: 4px 0;
}

.wday .t {
  font-size: 15px;
  font-weight: 600;
}

.wday .p {
  font-size: 12px;
  color: #6a726c;
  margin-top: 4px;
}

.weather-status {
  margin-top: 14px;
  font-size: 13px;
  color: #6a726c;
}

.weather-link {
  display: inline-block;
  margin-top: 12px;
  color: #b79a63;
  font-size: 14px;
  text-decoration: none;
}

.weather-link:hover {
  text-decoration: underline;
}

/* ---------- Luggage tip ---------- */
.luggage-img {
  width: 100%;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.tip-box {
  background: #fff8e8;
  border-left: 4px solid #b79a63;
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #4a3f28;
  margin: 16px 0;
}

/* ---------- Contact / CTA ---------- */
.cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  background: #1a221e;
  color: #fff;
  padding: 60px 8%;
}

.cta h2 {
  font-family: Georgia, serif;
  font-size: clamp(26px, 3.5vw, 36px);
  margin: 0 0 10px;
  font-weight: 500;
}

.cta p {
  margin: 0;
  color: #c8cdc9;
}

.cta .btn.primary {
  white-space: nowrap;
}

.contact-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  padding: 50px 8%;
  background: #fff;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.social-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.social-line {
  background: #06c755;
}

.social-wa {
  background: #25d366;
}

.social-wc {
  background: #07c160;
}

.contact-info strong {
  font-size: 18px;
  display: block;
  margin-bottom: 6px;
}

.contact-info p {
  margin: 0;
  color: #5a625c;
  font-size: 14px;
}

/* ---------- Booking form ---------- */
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  max-width: 820px;
  margin: 0 auto;
}

.book-grid label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #3a423c;
}

.book-grid input,
.book-grid select,
.book-grid textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d6d2c6;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}

.book-grid input:focus,
.book-grid select:focus,
.book-grid textarea:focus {
  outline: 2px solid #b79a63;
  border-color: #b79a63;
}

.book-full {
  grid-column: 1 / -1;
}

.book-btn {
  grid-column: 1 / -1;
  background: #b79a63;
  color: #fff;
  border: 0;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.book-btn:hover {
  background: #a68753;
}

.book-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.book-status {
  grid-column: 1 / -1;
  font-size: 14px;
  min-height: 20px;
  text-align: center;
}

.book-status.ok {
  color: #1a7a3c;
}

.book-status.err {
  color: #b33;
}

/* ---------- Footer ---------- */
footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px 8%;
  background: #121816;
  color: #9aa39c;
  font-size: 13px;
}

/* ---------- WeChat modal ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.open {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-width: 360px;
  text-align: center;
  position: relative;
}

.modal-box img {
  width: 220px;
  margin: 16px auto;
  border-radius: 8px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #666;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split img {
    height: 320px;
  }

  .weather-days {
    grid-template-columns: repeat(4, 1fr);
  }

  .book-grid {
    grid-template-columns: 1fr;
  }

  .cta {
    flex-direction: column;
    text-align: center;
  }

  .contact-row {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 560px;
    padding: 80px 7%;
  }

  .sec {
    padding: 60px 7%;
  }

  /* v18.9.19: 首頁內嵌的預約表單（非 /booking 獨立頁）在手機上會疊加「區塊 7% 留白」+「卡片本身 32px 留白」
     兩層留白，導致左右被明顯擠壓，比獨立訂車頁窄很多。這裡單獨縮小卡片本身的留白，不影響獨立訂車頁
    （booking.html 用的是 .booking-card .book-grid，優先權更高，不受這條規則影響）。 */
  #booking .book-grid {
    padding: 18px 16px;
  }

  #booking.sec {
    padding-left: 4%;
    padding-right: 4%;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .weather-days {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Phone dial link ---------- */
.tel-link {
  color: #b79a63;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dashed #b79a63;
}
.tel-link:hover {
  color: #8a7040;
}

.contact-info .tel-link {
  color: #b79a63;
  font-size: inherit;
}

/* ---------- Floating Go button ---------- */
.float-go {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #b79a63;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  font-family: Georgia, "Times New Roman", serif;
}
.float-go:hover {
  background: #a68753;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.float-go:active {
  transform: scale(0.96);
}

@media (max-width: 480px) {
  .float-go {
    right: 14px;
    bottom: 18px;
    width: 52px;
    height: 52px;
  }
}
/* 卡片圓角防溢出設定 */
.card {
  overflow: hidden; /* 確保圖片完全收納在圓角框內，不溢出 */
}

/* 手機版 (768px 以下) 圖片高度優化 */
@media (max-width: 768px) {
  .card .pic {
    height: 180px; /* 手機版將高度稍微調矮，減少左右兩側被裁切的幅度 */
  }
}
/* 通訊軟體按鈕群組排版 */
.contact-btns-wrapper {
  display: flex;
  flex-direction: column; /* 手機版預設垂直整齊排列 */
  gap: 12px;
  width: 100%;
  max-width: 340px; /* 限制手機版最大寬度 */
  margin: 20px auto; /* 水平居中 */
}

.btn-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 品牌專屬色調（保持一致的高質感質感） */
.btn-chat.line { background-color: #06C755; }
.btn-chat.whatsapp { background-color: #25D366; }
.btn-chat.wechat { background-color: #07C160; }

/* 電腦版 (768px 以上) 自動切換為橫向並排 */
@media (min-width: 768px) {
  .contact-btns-wrapper {
    flex-direction: row;
    max-width: 100%;
    justify-content: center;
  }
  .btn-chat {
    min-width: 160px;
  }
}
/* 通訊圖示尺寸設定 */
.btn-img-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
/* 純圖片通訊軟體圖示排版 */
.social-icon-group {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 手機版貼左，若需置中可改為 center */
  gap: 16px;
  margin: 16px 0;
}

.social-icon-group a img {
  width: 52px; /* 圖示大小 (可依需求改為 48px ~ 60px) */
  height: 52px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.social-icon-group a:hover img {
  transform: scale(1.08); /* 滑鼠微幅放大互動感 */
/* 社群圖示尺寸強制約束 */
.social-icon-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}

.social-icon-group a img {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  object-fit: contain;
  display: block;
}
}
/* WeChat 彈窗燈箱樣式 */
.wechat-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.wechat-modal-content {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  position: relative;
  max-width: 320px;
  width: 85%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.wechat-close {
  position: absolute;
  right: 16px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
}

.wechat-close:hover {
  color: #333;
}
/* 讓滑鼠移到圖片時顯示放大鏡圖示 */
.zoomable-img {
  cursor: zoom-in;
  transition: opacity 0.2s;
}
.zoomable-img:hover {
  opacity: 0.9;
}

/* 全螢幕黑底 Modal */
.img-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
}

/* 放大後的圖片規格 */
.img-modal-content {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}
/* 表單送出狀態提示框 */
.book-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  display: none; /* 預設不顯示 */
}

/* 成功訊息 (綠色框) */
.book-status.ok {
  display: block;
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

/* 失敗訊息 (紅色框) */
.book-status.err {
  display: block;
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
/* ==========================================
/* ==========================================
   尊榮感謝與黑金頁尾 (精準還原版)
   ========================================== */
.luxury-thank-section {
  background-color: #0d0f12;
  position: relative;
  text-align: center;
  padding-top: 10px;
}

/* 上方深色卡片：底部雙側圓角 */
.luxury-card {
  max-width: 820px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1e222b 0%, #14171f 100%);
  padding: 45px 30px 40px;
  border-radius: 0 0 28px 28px; /* 關鍵：底部大圓角 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 2;
}

.luxury-subtitle {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.3rem;
  color: #c59d5f;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(197, 157, 95, 0.3);
}

.luxury-title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  color: #f0f2f5;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.luxury-desc {
  font-size: 1.02rem;
  color: #9096a2;
  line-height: 1.8;
  margin: 0;
}

/* 下方金屬橫條區域 (上下細金線) */
.luxury-badge-strip {
  background: radial-gradient(circle at 50% 50%, #181c24 0%, #0d0f12 80%);
  border-top: 1px solid rgba(197, 157, 95, 0.45);
  border-bottom: 1px solid rgba(197, 157, 95, 0.45);
  padding: 35px 0;
  margin-top: -15px; /* 與上方卡片自然重疊 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 金色圓形徽章外觀與發光效果 */
.gold-badge-circle {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a241b 0%, #12100d 100%);
  border: 3px solid #c59d5f;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 立體金色光暈 */
  box-shadow: 0 0 25px rgba(197, 157, 95, 0.5), inset 0 0 12px rgba(197, 157, 95, 0.4);
  transform: rotate(-35deg); /* 飛機傾斜角度 */
}

.badge-plane-icon {
  width: 42px;
  height: 42px;
  color: #dfb875;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

/* 最下層頁尾文字 */
.luxury-footer {
  background-color: #090a0d;
  padding: 25px 20px 30px;
  text-align: center;
}

.luxury-footer .copyright {
  color: #727885;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.luxury-footer .subtext {
  color: #505562;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* RWD 手機版適應 */
@media (max-width: 768px) {
  .luxury-card {
    border-radius: 0 0 20px 20px;
    padding: 35px 20px 30px;
  }
  .luxury-subtitle { font-size: 1.8rem; }
  .luxury-title { font-size: 1.25rem; }
  .luxury-desc { font-size: 0.9rem; }
  .gold-badge-circle { width: 70px; height: 70px; }
  .badge-plane-icon { width: 34px; height: 34px; }
}
/* 微調飛機圖案角度與光澤 */
.badge-plane-icon {
  width: 42px;
  height: 42px;
  color: #ebc37d; /* 提高金屬亮度 */
  transform: rotate(-45deg); /* 機頭朝右上起飛 */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
}
.luxury-badge-strip {
  margin-top: -22px; /* 增加卡片與底條的重疊立體感 */
}
/* ==========================================
   尊榮頁尾最終樣式修正 (覆蓋全域 Flex 干擾)
   ========================================== */

/* 1. 中間金屬橫條與雙金線 */
.luxury-badge-strip {
  width: 100% !important;
  background: radial-gradient(circle at 50% 50%, #1a1e28 0%, #0b0d12 100%) !important;
  border-top: 1px solid rgba(197, 157, 95, 0.45) !important;   /* 上金線 */
  border-bottom: 1px solid rgba(197, 157, 95, 0.45) !important;/* 下金線 */
  padding: 30px 0 !important;
  margin-top: -20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 2. 飛機徽章圓框與起飛角度 */
.gold-badge-circle {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #2c251d 0%, #100f0d 100%) !important;
  border: 2px solid #c59d5f !important;
  box-shadow: 0 0 20px rgba(197, 157, 95, 0.4), inset 0 0 10px rgba(197, 157, 95, 0.3) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.badge-plane-icon {
  width: 40px !important;
  height: 40px !important;
  color: #dfb875 !important;
  transform: rotate(60deg) !important; /* 機頭朝右上 */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important;
}

/* 3. 頁尾版權宣告 (強制上下垂直居中，取消左右分散) */
.luxury-footer {
  width: 100% !important;
  background-color: #08090c !important;
  padding: 25px 20px 30px !important;
  display: flex !important;
  flex-direction: column !important; /* 強制改為上下排列 */
  align-items: center !important;      /* 水平居中 */
  justify-content: center !important;
  text-align: center !important;
}

.luxury-footer .copyright {
  color: #727885 !important;
  font-size: 0.85rem !important;
  margin: 0 0 6px 0 !important;
}

.luxury-footer .subtext {
  color: #505562 !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}
/* 1. 表單白框與上方標題同步拉寬至 1100px 並水平置中 */
#booking .head,
#booking-form {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* 2. 表單輸入框與文字放大 */
#booking-form label {
  font-size: 15px !important;
  font-weight: 600 !important;
}

#booking-form input,
#booking-form select,
#booking-form textarea {
  font-size: 15px !important;
  padding: 12px 14px !important;
}

/* 3. 送出按鈕：於 Grid 網格中【強制絕對置中】 */
.book-btn {
  grid-column: 1 / -1 !important;  /* 跨滿全欄 */
  justify-self: center !important; /* 網格內部水平置中 */
  display: inline-block !important;
  margin: 24px auto 8px auto !important;
  padding: 14px 52px !important;   /* 按鈕尺寸加大 */
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* 4. 訂單結果提示訊息 */
.book-status {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  margin: 8px 0 0 0 !important;
}
/* v18.9.26：改用兩個獨立的 <span class="book-status-line">（display:block）取代 <br>，
   並用 !important 強制置中、允許換行，避免舊版 .book-status{text-align:left} 或其他樣式搶走對齊方式。 */
.book-status-line {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}
.book-status-line + .book-status-line {
  margin-top: 2px !important;
}
/* 縮小預約區塊兩側留白，讓白框可以佔用更多螢幕寬度 */
#booking {
  padding-left: 3% !important;
  padding-right: 3% !important;
}
/* ==========================================
   固定式頂部導覽列 (Site Header / Navbar)
   ========================================== */

/* 1. 預留頂部空間，避免內容被固定導覽列遮擋 */
body {
  padding-top: 70px !important;
}

/* 2. 導覽列本體（固定置頂 + 黑金玻璃質感） */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 70px !important;
  background: rgba(18, 24, 22, 0.92) !important; /* 深黑綠半透明 */
  backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
  border-bottom: 1px solid rgba(183, 154, 99, 0.3) !important; /* 細金線 */
}

.nav-container {
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo 樣式 */
.nav-logo {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #b79a63 !important;
  text-decoration: none !important;
  letter-spacing: 1px;
}

/* 選單連結群組 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-links a {
  color: #e0e6e2 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: #b79a63 !important;
}

/* 選單中的「線上預約」金底醒目按鈕 */
.nav-links .nav-btn {
  background: #b79a63 !important;
  color: #ffffff !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}

.nav-links .nav-btn:hover {
  background: #a68753 !important;
}

/* 3. 錨點跳轉修復：防止點擊選單後標題被導覽列遮住 */
section {
  scroll-margin-top: 80px;
}

/* 4. 手機版流暢適應 (支援左右滑動選單) */
@media (max-width: 768px) {
  .site-header {
    height: 60px !important;
  }
  body {
    padding-top: 60px !important;
  }
  .nav-container {
    padding: 0 12px;
  }
  .nav-logo {
    font-size: 16px;
  }
  .nav-links {
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
  }
  .nav-links a {
    font-size: 13px;
  }
}
/* ==========================================
   機場接送簡潔起價卡片與安心賣點樣式
   ========================================== */

/* 1. 三欄卡片網格 */
.shuttle-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 36px 0;
}

.s-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2ded4;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.s-card.featured {
  border: 2px solid #b79a63;
  background: #fffdf9;
}

/* 標籤 */
.s-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #5a625c;
  color: #fff;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.s-tag.gold {
  background: #b79a63;
}

.s-card h3 {
  font-size: 18px;
  margin: 10px 0 8px 0;
  color: #202522;
}

.s-price {
  font-size: 14px;
  color: #7a7365;
  margin-bottom: 16px;
}

.s-price span {
  font-size: 32px;
  font-weight: 800;
  color: #b79a63;
  font-family: Georgia, serif;
}

.s-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px dashed #e2ded4;
  padding-top: 14px;
  text-align: center;
}

.s-list li {
  font-size: 13px;
  color: #5a625c;
  margin-bottom: 8px;
}

.s-list li b {
  color: #202522;
}

/* 2. 3 大安心保證 */
.shuttle-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1050px;
  margin: 0 auto 30px auto;
}

.s-badge {
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.s-badge .ico {
  font-size: 28px;
}

.s-badge b {
  display: block;
  font-size: 14px;
  color: #202522;
  margin-bottom: 2px;
}

.s-badge p {
  margin: 0;
  font-size: 12px;
  color: #6a726c;
}

/* 3. CTA 專人報價引導 */
.shuttle-cta {
  text-align: center;
  background: #202522;
  color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  max-width: 1050px;
  margin: 0 auto;
}

.shuttle-cta p {
  margin: 0 0 14px 0;
  font-size: 15px;
  color: #e2e8e4;
}

.shuttle-cta .btn {
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 30px;
}

/* 手機版適應 (自動變成單欄，字體好閱讀) */
@media (max-width: 768px) {
  .shuttle-card-grid,
  .shuttle-badges {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .shuttle-cta p {
    font-size: 14px;
  }
}
/* ==========================================
   熱門包車旅遊範例路線卡片樣式
   ========================================== */

/* 1. 三欄網格卡片 */
.route-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 36px 0;
}

.r-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2ded4;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.r-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

/* 圖片與標籤 */
.r-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.r-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.r-card:hover .r-img-wrap img {
  transform: scale(1.06);
}

.r-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(32, 37, 34, 0.85);
  color: #ffffff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  z-index: 2;
  letter-spacing: 1px;
}

.r-tag.gold {
  background: #b79a63;
  font-weight: 700;
}

/* 卡片內容 */
.r-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.r-body h3 {
  font-size: 17px;
  color: #202522;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.r-meta {
  font-size: 12px;
  color: #7a7365;
  margin-bottom: 12px;
  background: #f7f5f0;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  align-self: center;
  text-align: center;
}

.r-path {
  font-size: 13px;
  color: #5a625c;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex-grow: 1;
  text-align: center;
}

/* 底部價格與按鈕 */
.r-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0ede6;
  padding-top: 14px;
}

.r-price {
  font-size: 12px;
  color: #7a7365;
}

.r-price span {
  font-size: 20px;
  font-weight: 800;
  color: #b79a63;
  display: block;
  font-family: Georgia, serif;
}

.r-btn {
  background: #202522;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  transition: background 0.2s ease;
}

.r-btn:hover {
  background: #b79a63;
}

/* 2. 底部的客製化引導框 */
.route-custom-box {
  background: #f9f7f2;
  border: 1px dashed #b79a63;
  padding: 28px 20px;
  border-radius: 14px;
  text-align: center;
  max-width: 1050px;
  margin: 0 auto;
}

.route-custom-box h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #202522;
}

.route-custom-box p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #6a726c;
}

/* 3. 手機版流暢適應 (自動改為單欄，圖片適中) */
@media (max-width: 768px) {
  .route-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* ==========================================
   右下角固定 LINE 浮動按鈕 (Floating Action Button)
   ========================================== */

.float-line-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 20px !important;
  background-color: #06C755 !important; /* LINE 官方綠 */
  color: #ffffff !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(6, 199, 85, 0.45) !important;
  z-index: 99999 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  animation: linePulse 2.5s infinite !important;
}

.float-line-btn:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(6, 199, 85, 0.6) !important;
  background-color: #05b34c !important;
}

.float-line-btn .line-ico {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* 按鈕輕微呼吸效果，吸引注意力 */
@keyframes linePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(6, 199, 85, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(6, 199, 85, 0);
  }
}

/* 手機版自動微調尺寸與位置，不遮擋表單內容 */
@media (max-width: 768px) {
  .float-line-btn {
    bottom: 18px !important;
    right: 14px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}
/* ==========================================
   電腦版 / 大螢幕視覺與版面專用優化 (Desktop Polish)
   ========================================== */
@media (min-width: 992px) {

  /* 1. 統一全站區塊最大寬度與上下留白，不再忽寬忽窄 */
  section, .sec {
    padding: 70px 20px !important;
  }

  .nav-container,
  .shuttle-badges,
  .shuttle-cta,
  .route-custom-box,
  .faq-card,
  .tips-container,
  #booking {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2. 強制卡片高度一致對齊 (避免因為文字多寡導致卡片底部高低不一) */
  .shuttle-card-grid,
  .route-card-grid {
    align-items: stretch !important;
  }

  .s-card,
  .r-card {
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. 頂部導覽列電腦版間距與文字優化 */
  .site-header {
    height: 75px !important;
  }

  body {
    padding-top: 75px !important;
  }

  .nav-links {
    gap: 28px !important;
  }

  .nav-links a {
    font-size: 15px !important;
  }

  /* 4. 常見問題 Q&A 電腦版雙欄兩列排版 (善用大螢幕空間) */
  .faq-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 32px !important;
  }

  /* 5. 貼心提醒 Step 區塊電腦版三欄並排 */
  .tips-step-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}
/* ==========================================
   電腦版大螢幕比例與版面拉正修正
   ========================================== */

/* 1. 修復：預約表單在大螢幕恢復寬大大氣的比例 */
#booking, 
#booking-form, 
.booking-box {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  padding: 40px !important;
}

/* 2. 修復：LINE / WhatsApp / WeChat 通訊圖示置中 */
section div:has(> a[href*="line.me"]),
.contact-channel-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 auto 20px auto !important;
}

/* 3. 修復：貼心提醒行李指南大黑框與 Q&A 區塊寬度對齊 */
.tips-container,
.tip-block,
.faq-card {
  max-width: 1050px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 4. 行李指南圖片居中與邊框縮小 */
.tip-block img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
}

/* 5. 電腦版表單輸入框雙欄並排 (姓名/電話) */
@media (min-width: 769px) {
  .form-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
/* 導覽列 Logo 與圖示樣式 */
.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.nav-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
  .nav-logo-img {
    height: 30px;
  }
}
/* 將圖片上方文字裁切掉，並將黑色背景融進網頁背景 */
.nav-logo-img {
  height: 38px !important;
  width: 48px !important;
  object-fit: cover !important;
  object-position: 0% 100% !important; /* 向上隱藏頂部文字 */
  mix-blend-mode: screen !important;   /* 自動過濾黑色背景，僅保留金色主體 */
}
  /* 導覽列左右對齊：左邊 Logo，右邊預約按鈕 */
  .nav-container,
  header div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 16px !important;
  }
}
/* 漢堡按鈕基本樣式 */
.menu-toggle {
  display: none; /* 桌機版預設隱藏 */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  width: 100%;
  height: 3px;
  background-color: #c59d5f; /* 按鈕顏色（可自訂金屬色/白色） */
  border-radius: 2px;
}

/* 手機版排版邏輯 (<= 768px) */
@media (max-width: 768px) {
  .site-header {
    position: relative;
    z-index: 1000;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1a1a1a;
    flex-direction: column;
    padding: 16px 0;
    text-align: center;
    z-index: 999; /* 確保下拉選單浮在最上層 */
  }

  .nav-links.active {
    display: flex !important;
  }
}
/* ===== Optimization v3: conversion + structure polish ===== */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
  border-radius: 4px;
}
.nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1050px;
  margin: -28px auto 40px;
  padding: 0 8%;
  position: relative;
  z-index: 2;
}
.trust-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid #e8e4da;
  font-size: 13px;
  color: #3a423c;
}
.trust-item b {
  display: block;
  color: #b79a63;
  font-size: 14px;
  margin-bottom: 4px;
}
.price-note {
  text-align: center;
  font-size: 13px;
  color: #6a726c;
  margin: -8px 0 20px;
}
.book-trust {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #5a625c;
}
.book-trust span::before {
  content: "✓ ";
  color: #1a7a3c;
  font-weight: 700;
}
.s-card .s-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  background: #b79a63;
  color: #fff !important;
  border-radius: 24px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
}
.s-card .s-cta:hover { background: #a68753; }
.s-card.featured .s-cta {
  background: #1a221e;
}
.form-section-title {
  grid-column: 1 / -1;
  font-size: 13px;
  letter-spacing: 1px;
  color: #b79a63;
  font-weight: 700;
  margin: 8px 0 0;
  border-bottom: 1px solid #e8e4da;
  padding-bottom: 6px;
}
#faq {
  margin-top: 40px;
}
.faq-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}
.faq-item:last-child { border-bottom: 0; }
@media (max-width: 800px) {
  .trust-strip {
    grid-template-columns: 1fr 1fr;
    margin-top: 16px;
    padding: 0 7%;
  }
  .nav-links ul { gap: 12px; }
}

/* ===== v4: logo alpha, lang switch, mobile menu, gallery ===== */
.nav-logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
  background: transparent !important;
  /* 金色標在深色導覽上自然融合 */
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(183,154,99,0.45);
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-btn {
  border: 0;
  background: transparent;
  color: #c8cdc9;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
}
.lang-btn.active {
  background: #b79a63;
  color: #1a221e;
}
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #e0c78e;
  border-radius: 1px;
}

/* Gallery modal (one-page) */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.gallery-modal[hidden] { display: none !important; }
.gallery-box {
  background: #f6f3eb;
  border-radius: 14px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 24px 20px 28px;
  position: relative;
}
.gallery-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  line-height: 1;
}
.gallery-box h3 { margin: 0 40px 8px 0; font-size: 20px; }
.gallery-note { margin: 0 0 16px; font-size: 13px; color: #5a625c; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gallery-grid figure {
  margin: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.gallery-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.gallery-grid figcaption {
  padding: 8px 10px;
  font-size: 13px;
  color: #3a423c;
}
.gallery-cta {
  display: inline-block;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(18,24,22,0.98);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 20px;
    gap: 0;
    border-bottom: 1px solid rgba(183,154,99,0.3);
  }
  .nav-links.open {
    display: flex !important;
  }
  .nav-links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-links li a {
    display: block;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links .nav-btn {
    margin-top: 12px;
    text-align: center;
  }
  .site-header { position: fixed; }
  .nav-container { position: relative; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid img { height: 200px; }
}

@media (min-width: 769px) {
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    padding: 0;
    border: 0;
  }
}

/* ===== v5: mobile menu fix, hero buttons row, section CTA ===== */
.hero .hero-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.hero .hero-actions .btn {
  margin: 0 !important;
}

.section-cta-bar {
  text-align: center;
  margin-top: 28px;
  padding-top: 8px;
}
.route-custom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.route-custom-actions .btn {
  margin: 0;
}

/* 強制修正：手機漢堡選單（覆蓋先前衝突樣式） */
@media (max-width: 900px) {
  .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(183, 154, 99, 0.5) !important;
    border-radius: 8px !important;
    z-index: 100001 !important;
    flex-shrink: 0 !important;
  }
  .menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #e0c78e !important;
    border-radius: 1px !important;
  }
  .lang-switch {
    display: none !important;
  }
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
  }
  .nav-container {
    position: relative !important;
  }
  .nav-links {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(18, 24, 22, 0.98) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 0 16px !important;
    border-bottom: 1px solid rgba(183, 154, 99, 0.35) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.35) !important;
  }
  .nav-links.open,
  .nav-links.active {
    display: flex !important;
  }
  .nav-links ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nav-links li {
    list-style: none !important;
    width: 100% !important;
  }
  .nav-links li a {
    display: block !important;
    padding: 14px 20px !important;
    color: #eef2ef !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 15px !important;
  }
  .nav-links .nav-btn {
    display: block !important;
    margin: 12px 16px 4px !important;
    text-align: center !important;
  }
}

@media (min-width: 901px) {
  .menu-toggle {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  .nav-links ul {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* ===== v6: mobile header clean + transparent menu + visible LINE btn ===== */

/* 淺底上的次要按鈕：不可用白色字 */
.route-custom-box .btn:not(.primary),
.section-cta-bar .btn:not(.primary),
.sec .btn:not(.primary),
.sec.cream .btn:not(.primary) {
  color: #1a221e !important;
  background: #ffffff !important;
  border: 1.5px solid #b79a63 !important;
}
.route-custom-box .btn:not(.primary):hover,
.sec .btn:not(.primary):hover {
  background: #f6f0e4 !important;
  color: #1a221e !important;
}
.route-custom-box .btn.primary {
  color: #fff !important;
  background: #b79a63 !important;
  border: 0 !important;
}

/* 手機頂欄：左 Logo+文字，右只放漢堡（不要露出選單裡的預約鈕） */
@media (max-width: 900px) {
  .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    height: 56px !important;
    max-width: 100% !important;
  }
  .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 56px) !important;
    overflow: hidden !important;
  }
  .nav-logo span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
  }
  .nav-logo-img {
    height: 28px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .nav-right {
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }
  /* 收合時整塊選單完全消失，避免「立即預約」金鈕跑到頂欄 */
  .nav-links {
    display: none !important;
  }
  .nav-links.open,
  .nav-links.active {
    display: flex !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
    background: rgba(10, 14, 12, 0.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 28px 20px 40px !important;
    gap: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 100000 !important;
  }
  .nav-links.open ul,
  .nav-links.active ul {
    width: 100% !important;
    max-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
  }
  .nav-links.open li,
  .nav-links.active li {
    width: 100% !important;
    text-align: center !important;
    border: 0 !important;
  }
  .nav-links.open li a,
  .nav-links.active li a {
    display: block !important;
    width: 100% !important;
    padding: 14px 12px !important;
    color: #f5f5f2 !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
    text-align: center !important;
  }
  .nav-links.open li a:hover,
  .nav-links.active li a:hover {
    color: #e0c78e !important;
  }
  /* 選單內預約：文字鈕，不要大金塊搶戲 */
  .nav-links.open .nav-btn,
  .nav-links.active .nav-btn {
    display: inline-block !important;
    margin-top: 22px !important;
    padding: 12px 28px !important;
    background: transparent !important;
    color: #e0c78e !important;
    border: 1px solid rgba(224, 199, 142, 0.7) !important;
    border-radius: 28px !important;
    font-size: 15px !important;
    text-align: center !important;
  }
  .menu-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(183, 154, 99, 0.55) !important;
    border-radius: 10px !important;
    background: transparent !important;
  }
  body {
    padding-top: 56px !important;
  }
  .site-header {
    height: 56px !important;
  }
}
.btn-outline-gold {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #1a221e !important;
  background: #fff !important;
  border: 1.5px solid #b79a63 !important;
  border-radius: 4px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.btn-outline-gold:hover {
  background: #f6f0e4 !important;
  color: #1a221e !important;
}

/* ===== v7: clean mobile header — LEFT brand, RIGHT hamburger ===== */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  height: 56px !important;
  background: rgba(18, 24, 22, 0.94) !important;
  border-bottom: 1px solid rgba(183, 154, 99, 0.3) !important;
}
body {
  padding-top: 56px !important;
}
.nav-bar {
  height: 56px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}
.nav-brand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: #e0c78e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0.5px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 110px) !important; /* 預留給 chip + 漢堡 */
  z-index: 2 !important;
  order: 1 !important;
}
.nav-brand-img {
  display: block !important;
  height: 28px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}
.nav-brand-text {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #e0c78e !important;
}
.menu-toggle {
  order: 3 !important;
  margin-left: 0 !important; /* chip 已有 margin-left:auto，漢堡緊接其後 */
  flex: 0 0 auto !important;
  display: none;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 9px !important;
  border: 1px solid rgba(224, 199, 142, 0.55) !important;
  border-radius: 10px !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 3 !important;
}
.menu-toggle span {
  display: block !important;
  height: 2px !important;
  width: 100% !important;
  background: #e0c78e !important;
  border-radius: 1px !important;
}
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  order: 4 !important;
}
.nav-links a {
  color: #e0e6e2 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}
.nav-links .nav-btn {
  background: #b79a63 !important;
  color: #fff !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex !important;
  }
  /* 收合：選單隱藏，頂欄只剩 品牌 | 漢堡 */
  .nav-links {
    display: none !important;
  }
  .nav-links.open,
  .nav-links.active {
    display: flex !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    order: unset !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 24px 16px 40px !important;
    background: rgba(10, 14, 12, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100000 !important;
  }
  .nav-links.open a,
  .nav-links.active a {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    padding: 14px 10px !important;
    font-size: 17px !important;
    color: #f5f5f2 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
  }
  .nav-links.open .nav-btn,
  .nav-links.active .nav-btn {
    margin-top: 20px !important;
    background: transparent !important;
    color: #e0c78e !important;
    border: 1px solid rgba(224, 199, 142, 0.75) !important;
    border-radius: 28px !important;
    max-width: 200px !important;
  }
}

@media (min-width: 901px) {
  .menu-toggle {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
    margin-left: auto !important;
  }
  .site-header {
    height: 64px !important;
  }
  .nav-bar {
    height: 64px !important;
  }
  body {
    padding-top: 64px !important;
  }
}

.gallery-loading,
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #5a625c;
  font-size: 14px;
  padding: 24px 12px;
}
.gallery-empty code {
  background: #eee;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* =========================================================
   GoWithUs Gallery — Mobile First / v11 clean implementation
   - 縮圖：固定 4:3 視覺框，cover，避免不同原圖比例造成卡片高度跳動
   - 原圖：由 fullscreen viewer 的 contain 完整顯示，不裁切
   - 2 欄手機／2 欄平板／3 欄桌面
   ========================================================= */
.gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
.gallery-thumb {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.06) !important;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.gallery-thumb-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #e8e4db !important;
  line-height: 0 !important;
}
.gallery-thumb-frame img,
.gallery-modal .gallery-grid .gallery-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #e8e4db !important;
}
.gallery-thumb figcaption {
  display: block !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  color: #3a423c !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.gallery-thumb:focus-visible {
  outline: 3px solid rgba(183,154,99,.55);
  outline-offset: 2px;
}
.gallery-thumb:active {
  transform: scale(.99);
}
.gallery-modal {
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
}
.gallery-box {
  width: min(100%, 980px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.gallery-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f6f3eb;
}
.gallery-bottombar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px 0 max(0px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #f6f3eb 72%, rgba(246,243,235,.88));
}
.gallery-bottombar .btn {
  min-height: 44px;
}

/* Fullscreen viewer: always preserve original aspect ratio */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: rgba(0,0,0,.94);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.photo-viewer[hidden] { display: none !important; }
.pv-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}
.pv-counter { font-size: 14px; opacity: .88; }
.pv-close {
  min-width: 72px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.2);
  color: #fff;
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
}
.pv-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 52px;
  touch-action: pan-y;
}
.pv-img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}
.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 64px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 32px;
  line-height: 1;
}
.pv-prev { left: 6px; }
.pv-next { right: 6px; }
.pv-caption {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px 12px;
  text-align: center;
  font-size: 13px;
  opacity: .9;
}

@media (min-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
@media (min-width: 1000px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 699px) {
  .gallery-box {
    padding: 16px 12px 12px;
  }
  .gallery-note {
    font-size: 13px;
    line-height: 1.55;
  }
  .gallery-bottombar {
    flex-direction: column;
  }
  .gallery-bottombar .btn {
    width: 100%;
  }
  .pv-stage {
    padding: 8px 42px;
  }
  .pv-nav {
    width: 38px;
    height: 54px;
  }
}

/* ===== Funnel / conversion v11 ===== */
.hero h1 {
  font-size: clamp(28px, 6vw, 42px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em;
}
.hero-sub {
  margin: 10px 0 8px !important;
  font-size: clamp(15px, 3.5vw, 18px) !important;
  color: #e8e2d6 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.hero-brand-line {
  margin: 0 0 18px !important;
  font-size: 14px !important;
  color: rgba(224, 199, 142, 0.9) !important;
  font-style: italic;
  letter-spacing: 0.04em;
}
.hero-hint {
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.78) !important;
}
.price-help {
  text-align: center;
  margin: 20px auto 8px;
  max-width: 36em;
  font-size: 15px;
  color: #4a524c;
  line-height: 1.6;
}
.fleet-who {
  font-weight: 700 !important;
  color: #b79a63 !important;
  margin-bottom: 6px !important;
}
.moments-cta-block {
  margin-top: 8px;
  text-align: center;
}
.moments-cta-block h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.moments-cta-block > p {
  margin: 0 0 14px;
  color: #5a625c;
  font-size: 14px;
  line-height: 1.6;
}

/* FAQ accordion */
.faq-acc {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-acc-item {
  background: #fff;
  border: 1px solid #e2ded4;
  border-radius: 10px;
  padding: 0 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.faq-acc-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 28px 14px 0;
  font-weight: 700;
  color: #2a322e;
  position: relative;
  font-size: 15px;
}
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #b79a63;
  font-size: 20px;
  font-weight: 400;
}
.faq-acc-item[open] summary::after { content: "–"; }
.faq-acc-item p {
  margin: 0 0 14px;
  padding-bottom: 4px;
  color: #5a625c;
  font-size: 14px;
  line-height: 1.65;
}

/* Soft CTA */
.soft-cta-sec {
  padding: 28px 16px 8px;
  background: #f3efe6;
}
.soft-cta-box {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: #1a221e;
  color: #f5f2ea;
  border-radius: 14px;
  padding: 28px 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.soft-cta-box h2 {
  margin: 0 0 10px;
  font-size: clamp(18px, 4vw, 22px);
  color: #e0c78e;
}
.soft-cta-box p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: #c8cdc9;
}
.soft-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ===== Closing section / refined texture ===== */

.mobile-cta-bar {
  display: none;
}
@media (max-width: 900px) {
  .float-line-btn {
    display: none !important;
  }
  .mobile-cta-bar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    background: rgba(18, 24, 22, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(183, 154, 99, 0.35);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    align-items: stretch;
    justify-content: space-between;
  }
  .mobile-cta-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    min-height: 48px;
    padding: 6px 4px;
  }
  .mcta-phone {
    color: #e8e2d6;
    background: rgba(255,255,255,0.06);
  }
  .mcta-line {
    color: #fff;
    background: #06c755;
  }
  .mcta-book {
    color: #1a221e;
    background: #b79a63;
  }
  .mcta-ico { font-size: 16px; line-height: 1; }
  /* 避免內容被底部 bar 擋住 */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .gallery-bottombar,
  .closing-section,
  .site-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 901px) {
  .mobile-cta-bar { display: none !important; }
}


/* ===== v12: reference-matched closing footer ===== */
.closing-reference {
  position: relative;
  padding: 0 !important;
  background: #080b0d;
  overflow: visible;
}
.closing-panel {
  position: relative; z-index: 1;
  min-height: 340px;
  padding: 28px 18px 92px;
  text-align: center;
  color: #eee8dd;
  background: linear-gradient(180deg, #242b34 0%, #1d252d 55%, #182027 100%);
  border-radius: 0 0 48px 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.closing-panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 70%, rgba(183,154,99,.10), transparent 34%); }
.closing-eyebrow { margin:0 0 16px; font:400 clamp(32px,5vw,48px)/1.1 Georgia,serif; color:#d8b574; text-shadow:0 2px 4px rgba(0,0,0,.55); position:relative; z-index:1; }
.closing-title { margin:0 auto 14px; max-width:900px; font-size:clamp(27px,4.2vw,45px); line-height:1.3; color:#f2eee7; text-shadow:0 2px 4px rgba(0,0,0,.65); position:relative; z-index:1; }
.closing-text { margin:0 auto; max-width:760px; color:rgba(238,238,238,.68); font-size:clamp(15px,2vw,20px); line-height:1.75; position:relative; z-index:1; }
.closing-texture { min-height:132px; margin-top:-1px; position:relative; background:linear-gradient(rgba(7,10,12,.35),rgba(7,10,12,.35)), url('/images/bottom-texture.jpg') center/cover; border-top:1px solid rgba(183,154,99,.62); border-bottom:1px solid rgba(183,154,99,.28); display:grid; place-items:center; }
.site-footer { flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; padding:24px 16px 30px !important; text-align:center !important; background:#0a1111 !important; border-top:1px solid rgba(183,154,99,.62); }
.site-footer p { margin:0; }
.footer-copy { color:#9a9a96 !important; font-size:16px !important; }
.footer-tag { color:#777b78 !important; font-size:15px !important; }
.footer-contact { font-size:14px; margin-top:4px !important; }
.footer-contact a { color:#b79a63; text-decoration:none; }
@media (max-width:600px){ .closing-panel{min-height:300px;padding:24px 16px 78px;border-radius:0 0 34px 34px}.closing-title{font-size:25px}.closing-text{font-size:14px}.closing-texture{min-height:108px}.footer-copy{font-size:13px !important}.footer-tag{font-size:12px !important}.footer-contact{font-size:12px} }


/* ===== v13: booking/admin usability + refined closing ===== */
.booking-brand { display:inline-flex; align-items:center; gap:8px; }
.booking-brand img { width:32px; height:25px; object-fit:contain; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.booking-brand span { line-height:1; }
.booking-top { padding:11px 16px !important; }
.booking-intro { margin-bottom:12px !important; }
.booking-intro h1 { margin:4px 0 0 !important; }
.booking-card { padding:18px 20px !important; }
.booking-card .form-section-title { margin-top:10px; margin-bottom:8px; }
.booking-card .book-full textarea { min-height:72px; }
@media(max-width:600px){
  .booking-top { padding:9px 12px !important; }
  .booking-brand img { width:29px; height:23px; }
  .booking-brand { font-size:17px; }
  .booking-wrap { padding:14px 10px calc(76px + env(safe-area-inset-bottom,0px)) !important; }
  .booking-intro { margin-bottom:8px !important; }
  .booking-intro h1 { font-size:24px !important; }
  .booking-card { padding:13px 11px !important; border-radius:12px !important; }
  .booking-card .book-grid { gap:12px 10px; }
  .booking-card .book-grid input,
  .booking-card .book-grid select,
  .booking-card .book-grid textarea { padding:9px 10px; min-height:42px; }
  .booking-card .book-grid textarea { min-height:66px; }
  .booking-card .form-section-title { font-size:14px; margin:5px 0 0; }
  .booking-card .book-btn { min-height:48px; }
}

/* Closing: remove the old SVG badge and use a cleaner photographic texture. */
.closing-reference { background:#080b0d !important; }
.closing-panel { min-height:300px !important; padding:30px 18px 42px !important; background:
  radial-gradient(circle at 50% 85%, rgba(183,154,99,.12), transparent 34%),
  linear-gradient(180deg,#252d35 0%,#1c242b 58%,#151c22 100%) !important; }
.closing-eyebrow { letter-spacing:.02em; }
.closing-texture { min-height:138px !important; background:
  linear-gradient(180deg,rgba(4,7,9,.22),rgba(4,7,9,.54)),
  url('/images/bottom-texture-v13.jpg') center/cover no-repeat !important;
  border-top:1px solid rgba(214,174,99,.70) !important;
  border-bottom:1px solid rgba(183,154,99,.22) !important;
  box-shadow: inset 0 18px 34px rgba(0,0,0,.18), inset 0 -12px 24px rgba(0,0,0,.25);
}
@media(max-width:600px){
  .closing-panel { min-height:235px !important; padding:25px 14px 34px !important; border-radius:0 0 28px 28px !important; }
  .closing-eyebrow { margin-bottom:10px !important; font-size:32px !important; }
  .closing-title { font-size:24px !important; line-height:1.42 !important; }
  .closing-text { font-size:13px !important; line-height:1.7 !important; }
  .closing-texture { min-height:96px !important; }
}

/* ===== v14 admin + footer photo refinement ===== */
.closing-reference{background:#080b0d!important}
.closing-panel{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(18,23,28,.86),rgba(10,14,18,.78)),url('/images/footer-photo.jpg'),url('/images/bottom-texture.jpg') center/cover no-repeat!important}
.closing-photo{min-height:190px;position:relative;background:linear-gradient(180deg,rgba(5,8,10,.12),rgba(5,8,10,.68)),url('/images/footer-photo.jpg') center/cover no-repeat;border-top:1px solid rgba(214,174,99,.7);border-bottom:1px solid rgba(183,154,99,.25);box-shadow:inset 0 18px 35px rgba(0,0,0,.2),inset 0 -18px 35px rgba(0,0,0,.3)}
.site-footer{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:22px 16px 28px!important;text-align:center!important;background:#090f10!important;border-top:1px solid rgba(183,154,99,.58)}
.site-footer p{margin:0}.footer-copy{color:#9a9a96!important;font-size:16px!important}.footer-tag{color:#777b78!important;font-size:15px!important}.footer-contact{font-size:14px;color:#b79a63}.footer-contact a{color:#b79a63;text-decoration:none}.footer-dot{color:#777b78}
@media(max-width:600px){.closing-photo{min-height:130px}.site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important}.footer-copy{font-size:14px!important}.footer-tag{font-size:13px!important}.footer-contact{font-size:13px}}
.closing-texture{display:none!important}
/* v14 booking header: use the actual winged-arrow car mark at a readable size. */
.booking-top .booking-brand img{width:36px!important;height:36px!important;object-fit:contain!important;flex:0 0 36px}
.booking-top .booking-brand{gap:7px!important;min-height:36px}
@media(max-width:600px){.booking-top .booking-brand img{width:34px!important;height:34px!important;flex-basis:34px}.booking-top .booking-brand{font-size:17px!important}}
/* If footer-photo.jpg has not been supplied yet, keep the existing texture as a graceful fallback. */
.closing-photo{background-image:linear-gradient(180deg,rgba(5,8,10,.12),rgba(5,8,10,.68)),url('/images/footer-photo.jpg'),url('/images/bottom-texture.jpg')}

/* ===== v15：單一完整 Footer 照片區 ===== */
.closing-one-photo{
  position:relative!important;
  min-height:560px;
  padding:0!important;
  margin:0!important;
  overflow:hidden;
  background:#0a1011 url('/images/footer-photo.jpg') center center/cover no-repeat!important;
  border-radius:0!important;
}
.closing-one-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(5,9,12,.56) 0%,rgba(5,9,12,.38) 42%,rgba(5,9,12,.82) 100%);
}
.closing-overlay{
  position:relative;z-index:1;min-height:560px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;color:#f1eee7;padding:38px 20px 34px;
}
.closing-one-photo .closing-eyebrow{margin:0 0 16px;color:#e0bd7c;font:400 clamp(34px,5vw,52px)/1.05 Georgia,serif;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.closing-one-photo .closing-title{max-width:980px;margin:0 auto 14px;color:#fff;font-size:clamp(27px,4vw,46px);line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.closing-one-photo .closing-text{max-width:780px;margin:0 auto;color:rgba(255,255,255,.82);font-size:clamp(15px,2vw,20px);line-height:1.75;text-shadow:0 1px 5px rgba(0,0,0,.65)}
.closing-footer-copy{margin-top:auto;width:min(100%,900px);padding-top:28px;border-top:1px solid rgba(222,188,117,.72);text-shadow:0 1px 5px rgba(0,0,0,.8)}
.closing-footer-copy p{margin:5px 0}.closing-footer-copy .footer-copy{color:rgba(255,255,255,.82)!important;font-size:16px!important}.closing-footer-copy .footer-tag{color:rgba(255,255,255,.68)!important;font-size:15px!important}.closing-footer-copy .footer-contact{color:#e0bd7c;font-size:15px}.closing-footer-copy .footer-contact a{color:#e0bd7c;text-decoration:none}
@media(max-width:600px){
  .closing-one-photo,.closing-overlay{min-height:520px}
  .closing-overlay{padding:30px 14px 26px}
  .closing-one-photo .closing-eyebrow{font-size:32px;margin-bottom:12px}
  .closing-one-photo .closing-title{font-size:24px;line-height:1.45}
  .closing-one-photo .closing-text{font-size:13.5px;line-height:1.75}
  .closing-footer-copy{padding-top:22px}
  .closing-footer-copy .footer-copy{font-size:13px!important}.closing-footer-copy .footer-tag{font-size:12px!important}.closing-footer-copy .footer-contact{font-size:13px}
}

/* ===== v16 definitive fixes ===== */
/* No phantom white strips on one-page/booking pages. */
html, body { margin-bottom:0 !important; }
body { padding-bottom:0 !important; }
.booking-page { padding-top:0 !important; padding-bottom:0 !important; }
.booking-page .booking-top { position:sticky; top:0; }
/* The booking page intentionally has no extra trust strip/intro whitespace. */
.booking-page .booking-trust-strip, .booking-page .booking-share { display:none !important; }
.booking-page .booking-wrap { padding-top:14px !important; padding-bottom:34px !important; }
.booking-page .booking-intro { margin:0 0 8px !important; }
/* One complete footer photo: intrinsic aspect ratio, width 100%, NO crop. */
.closing-one-photo { position:relative !important; padding:0 !important; margin:0 !important; background:#0b1012 !important; overflow:hidden !important; min-height:0 !important; }
.closing-photo-frame { position:relative; width:100%; line-height:0; }
.footer-photo { display:block !important; width:100% !important; height:auto !important; max-width:none !important; object-fit:contain !important; }

.closing-photo-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,10,.18),rgba(4,7,10,.48));}
.closing-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:clamp(24px,4vw,52px) 18px 24px; color:#f4efe5; line-height:1.4; }
.closing-one-photo .closing-eyebrow { margin:0 0 12px; color:#e0bd7c; font:400 clamp(30px,4.2vw,50px)/1.05 Georgia,serif; text-shadow:0 2px 8px #000b; }
.closing-one-photo .closing-title { margin:0 auto 12px; max-width:980px; color:#fff; font-size:clamp(23px,3.7vw,44px); line-height:1.35; text-shadow:0 2px 8px #000c; }
.closing-one-photo .closing-text { margin:0 auto; max-width:780px; color:#fff; font-size:clamp(13px,1.7vw,19px); line-height:1.7; text-shadow:0 1px 6px #000d; }
.closing-one-photo .closing-footer-copy { margin-top:auto; width:min(100%,900px); padding-top:14px; border-top:1px solid #e0bd7c99; text-shadow:0 1px 6px #000d; }
.closing-one-photo .closing-footer-copy p { margin:4px 0; }
.closing-one-photo .footer-copy { color:#fff !important; font-size:clamp(11px,1.2vw,16px) !important; }
.closing-one-photo .footer-tag { color:#fff !important; font-size:clamp(10px,1.1vw,14px) !important; }
.closing-one-photo .footer-contact, .closing-one-photo .footer-contact a { color:#e0bd7c !important; font-size:clamp(11px,1.2vw,15px); text-decoration:none; }
@media(max-width:600px){
  .closing-overlay { padding:18px 10px 12px; }
  .closing-one-photo .closing-eyebrow { font-size:28px; margin-bottom:7px; }
  .closing-one-photo .closing-title { font-size:20px; line-height:1.32; margin-bottom:7px; }
  .closing-one-photo .closing-text { font-size:11.5px; line-height:1.5; }
  .closing-one-photo .closing-footer-copy { padding-top:8px; }
  .closing-one-photo .closing-footer-copy p { margin:2px 0; }
  .closing-one-photo .footer-copy { font-size:9.5px !important; }
  .closing-one-photo .footer-tag { font-size:9px !important; }
  .closing-one-photo .footer-contact, .closing-one-photo .footer-contact a { font-size:10px; }
}
/* Gallery controls become compact translucent overlays instead of large solid bars. */
.gallery-topbar { background:rgba(246,243,235,.72) !important; backdrop-filter:blur(7px); border-radius:12px 12px 0 0; }
.gallery-bottombar { background:linear-gradient(to top,rgba(246,243,235,.38),rgba(246,243,235,0)) !important; padding:7px 8px !important; backdrop-filter:blur(3px); }
.gallery-bottombar .btn { min-height:38px !important; padding:7px 12px !important; background:rgba(183,154,99,.78) !important; box-shadow:0 2px 8px #0002; }
.gallery-bottombar .gallery-close-btn { background:rgba(40,45,43,.48) !important; color:#fff !important; border:1px solid #ffffff88 !important; }
@media(max-width:699px){ .gallery-bottombar { flex-direction:row !important; justify-content:center !important; } .gallery-bottombar .btn { width:auto !important; flex:0 1 auto !important; } }


/* ===== v17: clean, responsive footer — text above photo, credits below photo ===== */
.closing-v17{width:100%;background:#0a0f10;color:#f5f1e8;padding:0;margin:0;overflow:hidden;border-top:1px solid rgba(183,154,99,.45)}
.closing-v17-inner{width:100%;max-width:1400px;margin:0 auto;background:linear-gradient(180deg,#151b1e 0%,#0b1012 100%);border-radius:0 0 34px 34px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.28)}
.closing-v17-message{text-align:center;padding:34px 22px 28px;background:linear-gradient(180deg,rgba(22,28,31,.98),rgba(14,19,21,.98))}
.closing-v17-eyebrow{margin:0 0 12px;color:#dfbc78;font:400 clamp(30px,4vw,50px)/1.05 Georgia,serif;letter-spacing:.02em}
.closing-v17-message h2{margin:0 auto 12px;max-width:1000px;color:#fff;font-size:clamp(22px,3vw,40px);line-height:1.35;text-shadow:0 2px 8px #000b}
.closing-v17-message p{margin:0 auto;color:rgba(255,255,255,.78);font-size:clamp(13px,1.55vw,18px);line-height:1.75}
.closing-v17-photo-frame{width:100%;padding:12px 18px;background:#0b1012;border-top:1px solid rgba(183,154,99,.52);border-bottom:1px solid rgba(183,154,99,.52)}
.closing-v17-photo-frame::before{content:"";display:block;border:1px solid rgba(183,154,99,.42);padding:0;pointer-events:none}
.closing-v17-photo{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;background:#0b1012;margin:-1px 0 0;border:1px solid rgba(183,154,99,.42)}
.closing-v17-contact{text-align:center;padding:20px 16px 26px;background:#090e0f;color:#9ea39f;font-size:14px;line-height:1.7}
.closing-v17-contact p{margin:3px 0}.closing-v17-contact a{color:#d9b66f;text-decoration:none}.closing-v17-contact span{color:#6f756f}
@media(max-width:600px){
  .closing-v17-inner{border-radius:0}
  .closing-v17-message{padding:24px 14px 20px}
  .closing-v17-eyebrow{font-size:28px;margin-bottom:9px}
  .closing-v17-message h2{font-size:20px;line-height:1.42;margin-bottom:8px}
  .closing-v17-message p{font-size:12.5px;line-height:1.65}
  .closing-v17-photo-frame{padding:8px 9px}
  .closing-v17-contact{padding:15px 10px 20px;font-size:11.5px;line-height:1.65}
}
/* 1. 外層大框框：統一背景與金色邊框 */
.closing-v17-inner {
  background: #12161c !important;
  border: none !important; /* 原本是 1px solid rgba(212, 175, 55, 0.35) */
  border-radius: 16px !important;
  padding: 24px 16px !important;
  overflow: hidden;
}

/* 2. 移除上方文字區的獨立背景與底邊線 */
.closing-v17-message {
  background: transparent !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
}

/* 3. 清除圖片區塊的所有上下邊線與背景 */
.closing-v17-photo-frame {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* 4. 關鍵修復：隱藏第 3115 行畫出金色內框的 ::before 偽元素 */
.closing-v17-photo-frame::before {
  display: none !important;
}

/* 5. 確保圖片乾淨呈現 */
.closing-v17-photo {
  border: none !important;
  border-radius: 8px;
}
/* v18.1 mobile photo viewer: pinch, double-tap, drag and desktop wheel zoom */
.photo-viewer .pv-stage {
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.photo-viewer .pv-img {
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  transition: transform .12s ease-out;
  will-change: transform;
  touch-action: none;
}
.photo-viewer .pv-img.is-zoomed { cursor: grab; }
.photo-viewer .pv-img.is-zoomed:active { cursor: grabbing; }
.photo-viewer .pv-stage.is-zoomed { cursor: grab; }
@media (max-width:699px) {
  .photo-viewer .pv-stage { padding: 8px 18px; }
  .photo-viewer .pv-nav { width:40px; height:56px; }
}


/* v18.1 service selection clarity */
.service-type-select { font-weight: 700; letter-spacing: .02em; }
.service-type-select:focus { outline: 3px solid rgba(183,154,99,.22); outline-offset: 1px; }
@media (max-width:699px) {
  .toolbar .btn { min-height: 44px; }
  .bulk .btn { min-height: 44px; }
}


/* ===== v18.2 mobile/gallery/WeChat fixes ===== */
.wechat-modal[hidden] { display: none !important; }
.wechat-modal.open { display: flex !important; }
.wechat-modal-content { width: min(92vw, 360px); padding: 26px 22px 22px; }
.wechat-modal-content h3 { margin: 0 0 8px; }
.wechat-modal-content p { margin: 8px 0 14px; color: #555; }
.wechat-qr { display: block; width: min(280px, 78vw); height: auto; aspect-ratio: 1; object-fit: contain; margin: 8px auto 10px; image-rendering: auto; }
.wechat-id { font-weight: 700; color: #333 !important; margin-bottom: 0 !important; }
.photo-viewer .pv-stage { touch-action: none !important; overscroll-behavior: none; }
.photo-viewer .pv-img { will-change: transform; transform-origin: center center; }
.gallery-thumb-frame img { content-visibility: auto; }
@media (max-width: 900px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-cta-bar { min-height: 64px; }
}
@media (min-width: 901px) { body { padding-bottom: 0 !important; } }
/* v18.2.2 mobile fixed CTA: do not leave a white body-padding strip above the bar. */
@media (max-width: 900px) {
  body { padding-bottom: 0 !important; }
  .closing-v17 { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* v18.9.5 image stability: these two source images have non-standard aspect ratios.
   Do not let the generic .split img { height:420px; object-fit:cover } crop them. */
.split > img.hero-logo-img,
.split > img.experience-photo {
  width: 100%;
  height: auto !important;
  max-height: 520px;
  object-fit: contain !important;
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  .split > img.hero-logo-img,
  .split > img.experience-photo { max-height: none; }
}
/* v18.7 Production UI helpers */
.hero-logo-img{width:100%;height:auto;object-fit:contain}.centered-head{text-align:center;margin:0 auto 36px}.checklist-head{text-align:center;margin:24px 0 8px;font-size:18px}.checklist-grid{margin-top:24px}.checklist-head.spaced{margin:40px 0 8px}.contact-info.centered{text-align:center}.booking-inline-row{display:flex;gap:8px}.booking-flex{flex:1}.booking-title-select{width:100px}.service-hint{font-size:.85rem;color:#b8860b;margin-top:6px;line-height:1.4;font-weight:500}.booking-time-help{display:block;color:#666;margin-top:4px;font-size:.82em}.booking-submit-wrap{text-align:center}.booking-note{margin-top:8px;font-size:.82em;color:#777}.booking-status{margin-top:10px;font-weight:700}.contact-sep{margin:0 12px}
/* 確保橫向排列容器使用 Flexbox，並設定欄位間距與下方外距 */
.booking-inline-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-bottom: 16px !important;
}

/* 讓輸入框自動放大填滿剩餘空間 */
.booking-inline-row .booking-flex {
  flex: 1 1 auto;
  width: 100%;
}

/* 固定稱謂選單（小姐/先生）的寬度 */
.booking-inline-row .booking-title-select {
  flex: 0 0 100px;
  width: 100px;
}

/* 修正提示文字顯示方式與上下間距 */
.booking-time-help {
  display: block !important;
  margin-top: 6px !important;
  margin-bottom: 16px !important;
  color: #c59b27 !important;
}

/* 補上全寬欄位與輸入框的下方外距 */
.book-grid .book-full {
  margin-bottom: 24px !important;
}

/* 強制讓 input 及 textarea#pickup 都套用放大與自動換行效果 */
#pickup,
textarea#pickup,
input#pickup {
  display: block !important;
  width: 100% !important;
  min-height: 85px !important;
  height: 85px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}
/* 強制 5 天天氣預報永遠在同一行 5 等分 */
#weatherDays.weather-days {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* 強制不換行 */
  justify-content: space-between !important;
  gap: 6px !important; /* 補上 px 單位 */
}

/* 讓每張卡片平均分配空間 */
#weatherDays.weather-days > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 8px 2px !important; /* 微調內距避免過寬 */
  box-sizing: border-box !important;
}

/* 讓卡片內部的文字與圖示不會過大而被擠壓 */
#weatherDays.weather-days .weather-card-title,
#weatherDays.weather-days .weather-card-temp {
  font-size: 13px !important; /* 稍微縮小字型以適應單行 5 等分 */
}
/* 縮小網頁底部留白與黑色區塊高度 */
.closing-v17 {
  padding-bottom: 20px !important;
}
.closing-v17-inner {
  margin-bottom: 0 !important;
}
/* v18.9.4 image safety: content photos keep their full aspect ratio on desktop and mobile.
   Hero/background sections intentionally continue using cover. */
.card .pic,
.r-img-wrap img,
.gallery-grid img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:contain;
  object-position:center;
  background:#f4f4f2;
}
.r-img-wrap{height:auto;aspect-ratio:4 / 3;background:#f4f4f2;}
@media (max-width:768px){
  .card .pic,.r-img-wrap img,.gallery-grid img{aspect-ratio:4 / 3;object-fit:contain;}
}

.turnstile-wrap{width:100%;max-width:100%;overflow:hidden;margin:14px 0;display:flex;justify-content:center;align-items:center;min-height:65px}.turnstile-wrap[hidden]{display:none!important;min-height:0}

/* v18.9.10: Rates / Popular Routes card grids now fill the section width
   just like Fleet's .grid does (no artificial cap) — that's what made Fleet
   look right and these two look cramped/empty-margined by comparison.
   Only the badges/CTA/custom-quote box stay narrower for readability. */
@media (min-width:769px){
  .shuttle-badges,.shuttle-cta,.route-custom-box{max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;}
  .shuttle-card-grid{gap:24px;}
  .s-card{padding:30px 24px;}
  .route-card-grid{gap:28px;}
  .luggage-img{width:min(100%,1000px);height:auto;margin:24px auto;object-fit:contain;}
}
@media (max-width:768px){
  .luggage-img{width:100%;height:auto;object-fit:contain;}
}
/* 將所有表格的容器強制改為區塊並允許水平滾動 */
.admin-table-wrapper, div[style*="overflow"], .table-container {
    overflow-x: auto !important;
}