:root {
    --color-text: #1a1a1a;
    --color-background: #ffffff;
    --color-primary: #0052FF; /* 一個現代、專業的藍色作為品牌強調色 */
    --color-light-gray: #f7f7ff; /* 帶一點藍色的淺灰，更有科技感 */
    --color-medium-gray: #e5e5e5;
    --color-dark-gray: #555555;
    --star-color: #FFC700;
    --header-h: 64px; /* Default value, updated by script.js */
}
html, body {
    overflow-x: hidden !important;
    width: 100%;
}
body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* 自訂時間選擇器樣式 */
.custom-time-select {
    position: relative;
}
.time-picker-dropdown {
    position: absolute;
    bottom: calc(100% + 4px); /* 從輸入框上方 4px 處彈出 */
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 0.375rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 110; /* 比 header 高 */
    width: 100%;
    box-shadow: 0 -4px 6px rgba(0,0,0,0.1); /* 陰影向上 */
}
.time-picker-dropdown div {
    padding: 8px 12px;
    cursor: pointer;
}
.time-picker-dropdown div:hover {
    background-color: #f7f7ff;
}
.time-picker-dropdown div.selected {
    background-color: var(--color-primary);
    color: white;
}

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.main-cta {
    background-color: var(--color-primary);
    color: white;
    transition: background-color 0.3s;
}
.main-cta:hover {
    background-color: #0045d1;
}
.whatsapp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    color: white;
    font-weight: bold;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s;
}
.whatsapp-cta:hover {
    background-color: #1EBE57;
}
.whatsapp-cta i {
    margin-right: 0.5rem;
}

.feature-card img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover img {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.service-badge {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.service-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.modal {
    transition: opacity 0.3s ease;
}
.modal-content {
    transition: transform 0.3s ease;
}
.modal-body::-webkit-scrollbar {
    width: 8px;
}
.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--color-medium-gray);
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-track {
    background-color: var(--color-light-gray);
}

:target::before {
  content: "";
  display: block;
  height: 80px;
  margin: -80px 0 0;
}

#lang-dropdown {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
#lang-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.testimonial-slide {
    min-width: 100%;
    box-sizing: border-box;
}
.star-rating .fa-star {
    color: var(--star-color);
}
.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}
.testimonial-dot.active {
    background-color: white;
}

/* ===== About Hero image focus (參考7.txt) ===== */
.about-hero-img {
    object-position: center 35%; /* default: slightly lower focus */
}
@media (min-width: 768px) {
    .about-hero-img {
        object-position: center 45%; /* desktop: move focus further down */
    }
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}

.vehicle-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.vehicle-card.selected {
    border-color: var(--color-primary);
    background-color: var(--color-light-gray);
    box-shadow: 0 4px 10px rgba(0, 82, 255, 0.1);
}

.vehicle-card img {
    width: 80px;
    margin-right: 1rem;
}

.vehicle-card .info {
    flex-grow: 1;
}

.vehicle-card .info h4 {
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-text);
}

.vehicle-card .info p {
    font-size: 0.875rem;
    color: var(--color-dark-gray);
}

.vehicle-card .price {
    font-weight: bold;
    font-size: 1.125rem;
    color: var(--color-text);
    text-align: right;
}

.vehicle-card .price span {
    font-size: 0.75rem;
    color: var(--color-dark-gray);
    font-weight: normal;
    display: block;
}

#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}
#mobile-menu.open {
    transform: translateX(0);
}

/* 【修正】只在手機選單開啟時鎖定 body 滾動 */
body.mobile-menu-open {
    overflow: hidden;
    height: 100vh;
}

#result-page, #result-page .md\:hidden.flex-grow {
    overflow-x: hidden;
}

@media (min-width: 768px) { 
    #result-page .overflow-y-auto::-webkit-scrollbar {
        display: none;
    }
    #result-page .overflow-y-auto {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

.clear-input-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.clear-input-btn:hover {
    color: #374151;
}
.clear-input-btn.hidden {
    display: none;
}

/* 手機版地圖樣式 */
#map-container {
    height: 0;
    overflow: visible; /* 允許拉環顯示在外部 */
    transition: height 0.4s ease-in-out;
    position: relative;
    flex-shrink: 0; /* 防止被 flex item 壓縮 */
}
#map-container.map-expanded {
    height: 250px;
}
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 10;
    pointer-events: auto; /* 預設攔截事件，讓頁面可以滾動 */
}
#map-container.map-expanded .map-overlay {
    pointer-events: none; /* 地圖展開時，允許操作地圖 */
}

/* 【手機版滾動體驗優化】 */
#mobile-scroll-content { /* 針對新的滾動容器 ID */
  -webkit-overflow-scrolling: touch; /* iOS 慣性滑動 */
  overscroll-behavior: contain;       /* 阻斷滾動鍊傳到 body */
}
.map-overlay {
  touch-action: pan-y;
}

/* 【桌機版地圖高度修正】 */
@media (min-width: 768px) {
    #map-container {
        height: 100%;
    }
    #map {
        width: 100%;
        height: 100%;
    }
}

/* 確保 body/html 的預設滾動行為 */
html, body { 
    height: auto; 
    overflow-y: auto; 
}
#page-content { 
    height: auto; 
    overflow: visible; 
}

/* 父層：高度只算到 Header 底下，不負責捲動 */
#result-page, #confirmation-page {
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;             /* 父不捲，交給子欄位 */
}
/* 兩個內容欄可以捲動（iOS 慣性滾動） */
.result-col {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 避免邊界彈到整頁 */
}

/* JS 沒載到時，讓內容直接可見（取消淡入的預設隱藏）*/
.fade-in-section {
    opacity: 1 !important;
    transform: none !important;
}


/* === 以下為滾動優化樣式 === */

/* 地圖容器的觸控宣告（保險但溫和） */
#map, #map-container {
  touch-action: pan-x pan-y;   /* 不要用 none，避免吃掉滾動 */
}

/* 新增：在 result-page-open 狀態下，強制 body 處理固定定位 */
body.result-page-open {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}/* --- Mobile booking fixes --- *//* (1) 固定內容區：使用 100dvh，避免 iOS 地址列伸縮造成灰條 */
#result-page,
#confirmation-page {
  top: var(--header-h);
  height: calc(100dvh - var(--header-h)) !important;
  background: #fff; /* 防止透出灰色縫隙 */
  overflow: hidden;
}
/* (2) iOS/Safari 表單控制統一白底 */
input[type="date"],
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.375rem !important;
}
/* (3) 地圖收合/展開：確保高度切換穩定 */
#map-container {
  height: 0;
  overflow: visible;
  transition: height 0.4s ease-in-out;
  position: relative;
  flex-shrink: 0;
}
#map-container.map-expanded {
  height: 250px; /* 展開時的高度 */
}
#map-container .map-overlay {
  /* Intercept vertical scroll when collapsed so page can scroll over the map */
  pointer-events: auto !important;
  touch-action: pan-y !important;
}
#map-container.map-expanded .map-overlay {
  /* When expanded, allow interacting with the map (do not block taps) */
  pointer-events: none !important;
}
.sticky-cta {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0px);
  background: #fff;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e5e5e5;
  z-index: 20;
}
/* (5) 讓表單控制在深色模式/半透明父層也維持白底 */
@media (prefers-color-scheme: dark) {
  input[type="date"],
  select {
    background-color: #fff !important;
    color: #111 !important;
  }
}

/* --- Result page fixes (override) --- */
/* 1) 保持 Header 可見但透明，避免灰色帶；內容避開 Header 高度 */
/* 預訂/確認頁：隱藏全站統一頁首 */
body.result-page-open #site-header,
body.confirmation-page-open #site-header { display: none !important; }
/* 保持 Header 原樣式（不要透明） */
#result-page,
#confirmation-page {
  top: 0 !important;
  height: 100dvh !important;
}

/* Allow confirmation page to scroll its content */
#confirmation-page {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 2) 桌面版強制讓地圖佔滿高度，避免被行動版規則覆蓋 */
@media (min-width: 768px) {
  #map-container { height: 100% !important; }
  #map { height: 100% !important; }
}



/* === Mobile-specific overrides (append) === */
/* 讓資訊區在地圖覆蓋層之上，確保可點擊與輸入 */
#mobile-scroll-content { position: relative; z-index: 2; }
.result-col { position: relative; z-index: 2; }
/* Raise map container so its toggle handle can sit above content */
#map-container { z-index: 5; }

/* 行動版：統一日期/時間欄位高度，避免換行或不齊 */
#result-page input[type="date"],
#result-page input#time-result-mobile,
#result-page input#time-result,
#date-mobile,
#date,
#date-result {
  height: 48px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Prevent date text wrapping on small widths; keep height consistent */
input[type="date"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure the mobile map toggle is always clickable above overlays */
#map-toggle-handle {
  z-index: 50; /* above .map-overlay */
  pointer-events: auto;
}



/* === Legal pages font normalization (參考5.txt) === */
.legal-body, .legal-body * {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               Arial, sans-serif !important;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "hlig" 0;
          font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "hlig" 0;
}
.legal-body h1, .legal-body h2, .legal-body h3, .legal-body h4 {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "hlig" 0;
          font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "hlig" 0;
}

/* === Legal hero top spacing (參考6.txt) === */
.page-legal section.relative:first-of-type {
  padding-top: calc(var(--header-h) + 2rem);
}
@media (min-width: 768px) {
  .page-legal section.relative:first-of-type {
    padding-top: calc(var(--header-h) + 3rem);
  }
}