/* Reset & Base */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.5;
  transition: background-color 0.5s ease, color 0.5s ease;
}

header {
  background-color: #007acc;
  color: white;
  padding: 0.4rem 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgb(0 122 204 / 0.4);
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Main layout */
main {
  max-width: 900px;
  margin: 1rem auto;
  padding: 0 1rem 3rem;
  text-align: center; /* 置中 */
}

/* 地圖 */
#map {
  width: 100%;
  height: 420px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.1);
  margin-bottom: 1.5rem;
}

/* 搜尋區塊 */
#search-bar-wrapper {
  position: relative;
  max-width: 600px;
  margin: 1rem auto 1.2rem;
}

#searchInput {
  width: 100%;
  padding: 0.5rem 4.8rem 0.5rem 1rem; /* 右側留空給按鈕 */
  font-size: 1.1rem;
  border: 2px solid #007acc;
  border-radius: 50px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

#searchInput:focus {
  outline: none;
  border-color: #005a9c;
  box-shadow: 0 0 5px #005a9c;
}

#searchBtn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 0.35rem 1rem;
  border-radius: 50px;
  border: none;
  background-color: #007acc;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  max-width: 80px;   /* 微調縮小搜尋按鈕寬度 */
  min-width: 55px;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

#searchBtn:hover {
  background-color: #005a9c;
}

/* 行政區選單 */

#area-selector {
  margin-top: 0.8rem;
  display: none;
  justify-content: center;  /* ⬅️ 關鍵：置中排列 */
  gap: 0.5rem;
  flex-wrap: wrap;
}

#area-selector select {
  min-width: 140px;
  font-size: 1rem;
}

select:disabled {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
}

/* 清除紀錄按鈕 */
#btn-clear-history {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #333;
  padding: 0.3rem 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin: 0.5rem auto 1rem;
  text-align: center;
  font-size: 0.85rem;
  max-width: 130px;
}

#btn-clear-history:hover {
  background-color: #e0e0e0;
  border-color: #999;
}

button {
  cursor: pointer;
  border-radius: 25px;
  border: none;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background-color: #007acc;
  color: white;
}

.btn-primary:hover {
  background-color: #005a9c;
}

.btn-secondary {
  background-color: #eee;
  color: #333;
  margin: 0.5rem 0.3rem 0 0;
  max-width: 180px;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
}

.btn-secondary:hover {
  background-color: #ccc;
}

/* 顯示清單、我的收藏按鈕 */
#action-buttons {
  max-width: 300px;
  margin: 0 auto 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

#action-buttons button {
  flex: 1 1 auto;
  max-width: 180px;
  background-color: #007acc;  /* 主藍色 */
  color: white;
  border-radius: 25px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  border: none;
}

#action-buttons button:hover {
  background-color: #005a9c;
}

/* 結果列表與詳細卡 */
#result-list {
  position: relative;
  overflow: visible;
  border-radius: 12px;
  background-color: #f0f4ff;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.1);
  margin-bottom: 1.5rem;
  color: #334e8c;
}

/* 日夜模式切換按鈕 */
#toggle-theme-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10000;
  background-color: #f0f0f0;  /* 灰白色 */
  border: none;
  border-radius: 50%;
  padding: 8px 12px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: background-color 0.3s ease, color 0.3s ease;
  color: #333;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#toggle-theme-btn:hover {
  background-color: orange;
}

/* 夜間模式下調整按鈕顏色 */
body.dark-mode {
  background-color: #121212;
  color: #ddd;
}

body.dark-mode header {
  background-color: #1e1e1e;
  color: #eee;
}

body.dark-mode #result-list,
body.dark-mode #detail-card {
  background-color: #222;
  color: #ddd;
}

/* 夜間模式切換按鈕 夜間樣式 */
body.dark-mode #toggle-theme-btn {
  background-color: #222;    /* 深灰色背景 */
  color: #ffd43b;             /* 黃色字色 */
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

body.dark-mode #toggle-theme-btn:hover {
  background-color: #444;
  color: #fff176;
}

/* ========== 🌐 視覺狀態控制 ========== */
#map {
  display: none;  /* 初始隱藏地圖 */
  width: 100%;
  height: 400px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}

#result-list {
  display: none;  /* 預設隱藏清單，切換後開啟 */
}

/* ========== 店家小卡清單 ========== */
.result-card h3.place-name {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: #1a3a8a;
}

.result-card p {
  margin: 0.3rem 0;
  font-size: 1rem;
  color: #333;
}

.result-card .place-address {
  color: #666;
  font-size: 0.95rem;
}

/* ========== 首頁返回頂部按鈕 ========== */
#scrollToTopBtn {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #007acc;
  color: white;
  font-size: 1.4rem;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

#scrollToTopBtn.show {
  display: flex;
  opacity: 1;
}

#scrollToTopBtn:hover {
  background-color: #005a9c;
}

body.dark-mode #scrollToTopBtn {
  background-color: #333;
  color: #ffd43b;
}

body.dark-mode #scrollToTopBtn:hover {
  background-color: #555;
}

/* ========== 📋 排序按鈕樣式 ========== */
.sort-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.6rem 1rem;
  background-color: #f0f4ff;
  border-bottom: 1px solid #ccd3ff;
  color: #1a3a8a;
  text-align: center;
}

.sort-label {
  font-weight: bold;
  font-size: 0.95rem;
}

.sort-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.sort-btn {
  flex: 0 1 auto;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.9rem;
  white-space: nowrap;
  background-color: #ffd599;
  color: #5c3a00;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sort-btn:hover {
  background-color: #a1b4ff;
}

.sort-btn.active-sort {
  background-color: #007acc;
  color: white;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 🔥 熱門關鍵字按鈕樣式 */
.keyword-list {
  max-width: 600px;
  margin: 0 auto 1rem;
  padding: 1rem;
  border-radius: 12px;
  background-color: #444; /* 背景灰色，可依需求調整 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.keyword-list strong {
  color: white;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  text-shadow: 1px 1px 2px #000000; /* 黑邊陰影 */
}

.keyword-list .btn-keyword {
  background-color: #575757;   /* 深紅 */
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.keyword-list .btn-keyword:hover {
  background-color: #575757;   /* 深紅 */
  color: white;
}

body.dark-mode .keyword-list {
  background-color: #d9d9d9;
}

body.dark-mode .keyword-list strong {
  color: #424242;
  text-shadow: 1px 1px 3px #ffffff;
}

/* ✅ 小卡按鈕桌機與通用設定 */
.result-card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem 1.2rem;
  margin: 1rem auto;
  max-width: 680px;
  font-family: "Segoe UI", sans-serif;
}

/* 店名置中 */
.result-card .place-name {
  font-weight: bold;
  font-size: 1.15rem;
  text-align: center;
  margin-bottom: 0.3rem;
}

/* 地址與評價置中 */
.result-card .place-address,
.result-card .place-rating,
.result-card .place-distance {
  text-align: center;
  margin: 0.2rem 0;
}

/* ========== 📱 手機版 ========== */
@media (max-width: 600px) {
  .result-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 0.8rem;
  }

  .result-actions button {
    flex: 1;
    min-width: 70px;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    margin: 0 0.2rem;
    border: none;
    border-radius: 8px;
    background-color: #007acc;
    color: white;
    cursor: pointer;
  }
}

/* ========== 💻 桌機版 ========== */
@media (min-width: 601px) {
  .result-flex-row {
    display: flex;
    justify-content: space-between;
    margin-top: 0.8rem;
    align-items: stretch; /* ✅ 重點：左右等高，不再被撐歪 */
  }

  .result-flex-row .info-left {
    text-align: center;
    flex-grow: 1;
  }

  .result-flex-row .result-actions {
    display: flex;
    flex-direction: column;       /* ✅ 垂直排列按鈕 */
    justify-content: flex-end;    /* ✅ 貼底 */
    align-items: flex-end;        /* ✅ 貼右 */
    gap: 0.5rem;
  }

  .result-actions button {
    min-width: 80px;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    background-color: #007acc;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .result-actions button:hover {
    background-color: #005a9c;
  }
}

/* ========== ❤️ 我的收藏：全畫面獨立視圖 ========== */
#favorites-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background-color: var(--bg-color, #111);
  color: var(--text-color, #fff);
  display: none;                 /* 初始隱藏 */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;    /*⬅️ 改：從上方開始排，不要置中 */
  text-align: center;
  padding: 2rem 1rem 120px;       /* ⬅️ 底部留白，避免被返回鍵蓋住 */
  overflow-y: auto;               /* ⬅️ 開啟垂直滾動 */
  -webkit-overflow-scrolling: touch; /* iOS 惰性捲動 */
}

#favorites-page.show {
  display: flex;
}

#favorites-page h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

#favorites-page .empty-msg {
  color: #aaa;
  margin-bottom: 2rem;
}

#btn-back-home {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background-color: #ff5f5f;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

#favorites-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  display: flex;                  /*⬅️ 新增 */
  flex-direction: column;         /* ⬅️ 新增 */
  gap: 12px;                      /* ⬅️ 新增 */
  padding-bottom: 96px;           /* ⬅️ 防止被右下「返回首頁」按鈕遮住 */
}

.favorite-card {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid #555;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.empty-msg {
  text-align: center;
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* ========== 🌗 我的收藏頁日夜間模式變數 ========== */
/* 💡 日間模式變數 */
:root {
  --bg-color: #f5f5f5;
  --text-color: #222;
  --card-bg: #ffffff; /* ✅ 日間卡片背景：亮白 */
}

/* 🌙 夜間模式變數 */
body.dark-mode {
  --bg-color: #111;
  --text-color: #fff;
  --card-bg: #1e1e1e; /* ✅ 夜間卡片背景：深黑 */
}


/* ==========  🍜 大卡獨立頁面 ========== */
#detail-page {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--card-bg, #fff);
  color: var(--text-color, #000);
  z-index: 999;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 100px;
}

#detail-page.show {
  display: block;
}

/* 回首頁按鈕固定右下 */
#btn-back-home-detail {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.button {
  background-color: #007acc;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #005a9c;
}

body.dark-mode .button {
  color: white;
}

.phone-link {
  color: inherit;
  text-decoration: underline;
}
body.dark-mode .phone-link {
  color: #aad;
}

/* ========== 🚉 附近交通與停車場區塊 ========== */
.detail-transport ul {
  padding-left: 1.5rem;
  margin-top: 0.6rem;
  margin-bottom: 1rem;
}

.detail-transport li {
  line-height: 1.6;
  margin-bottom: 0.3rem;
  list-style-type: disc;
  font-size: 0.95rem;
}

.detail-transport strong {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.05rem;
  color: #1a3a8a;
}

/* 夜間模式優化 */
body.dark-mode .detail-transport strong {
  color: #ffd43b;
}

.opening-hours {
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-line;
  text-align: center;
  color: #444;
}

body.dark-mode .opening-hours {
  color: #ccc;
}

/* ========== 註冊/登入 ========== */
/* ✅ header 區域設定 */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem;
  background-color: #111; /* 夜間預設為深色，白天可覆蓋 */
  color: white;
}

/* ✅ 左右區塊 */
.header-left,
.header-right {
  display: flex;
  align-items: center;
}

/* ✅ 夜間模式：深藍底白字 */
body.dark-mode .login-btn {
  background-color: #1976d2;
  color: white;
  border-radius: 0px; /* ✅ 改為輕微圓角（也可設為 0 完全長方形） */
}

body.dark-mode .login-btn:hover {
  background-color: #0d47a1;
}

/* ✅ 日間模式：白底黑字 */
body:not(.dark-mode) .login-btn {
  background-color: #ffffff;
  color: black;
  border-radius: 0px; /* ✅ 改為輕微圓角（也可設為 0 完全長方形） */
}

body:not(.dark-mode) .login-btn:hover {
  background-color: #ea580c;
}

/* ========== 註冊/登入彈出視窗 ========== */
/* 🪪 登入／註冊彈窗 */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 表單樣式 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form h2 {
  text-align: center;
  color: #333
}

.auth-form input {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.auth-form button {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.auth-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.auth-toggle button {
  flex: 1;
  padding: 0.5rem;
  border: none;
  background: #eee;
  cursor: pointer;
}

.auth-toggle .active {
  background: #1976d2;
  color: white;
  font-weight: bold;
}

.hidden {
  display: none !important;
}

/* ========== 未登入功能遮罩 ========== */
/* 🔒 模糊的小卡樣式 */
.result-card.blurred {
  position: relative;
  overflow: hidden;
}

/* ✅ 加一層背景模糊遮罩 */
.result-card.blurred::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(3px);
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

/* 🔒 覆蓋提示區 */
.card-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(0px);
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
}

.locked-message {
  text-align: center;
  font-size: 0.95rem;
  font-weight: bold;
  color: #333;
}

.unlock-btn {
  margin-top: 0.5rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  background-color: #ff9900;
  border: none;
  color: white;
  border-radius: 5px;
}

/* ========== 忘記密碼按鈕 ========== */

.login-extra {
  text-align: right;
  margin-top: 6px;
  margin-bottom: 4px;
}

.forgot-link {
  font-size: 13px;
  color: #1e73e8;
  text-decoration: none;
  cursor: pointer;
}
.forgot-link:hover { text-decoration: underline; }