/* =====================================================================
   search-overlay.css —— 搜尋覆蓋層（mini-home / mini-feature 共用）
   視覺依據：設計端 features/mini-home/search-core.css（2026-08-19 取用），
   改寫成 demo 既有的 class 名稱（.search-modal__* / .search-result / .search-state），
   所以 BLOCK 3 的 JS 不用動。
   與設計稿的差異：設計稿的模態定位在 .phone-canvas 裡（position:absolute），
   demo 是真的滿版一頁，所以維持 position:fixed。
   ===================================================================== */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  flex-direction: column;
  background: var(--bg-0);
  font-family: var(--font-zh);
  font-size: 14px;
}
.search-modal.is-open { display: flex; }

.search-modal__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-0);
}

/* 關閉鈕的文字在 HTML 已改成「取消」（單一個「×」會讓人以為是關掉整個網頁）；
   位置移到輸入框右邊 —— demo 的 JS 只認 id 不認位置，用 order 調換即可。 */
.search-modal__close {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--pro-link);
  font: 400 14px/1.57 var(--font-zh);
  white-space: nowrap;
  cursor: pointer;
}
.search-modal__close:active { background: var(--bg-1); }

/* font-size:16px 是必要的：小於 16px 時 iOS 聚焦會自動放大整頁 */
.search-modal__input {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 44px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-zh);
  font-size: 16px;
  outline: none;
}
.search-modal__input::placeholder { color: var(--fg-5); }
.search-modal__input:focus {
  border-color: var(--pro-green);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.search-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + var(--s-6));
}

.search-sechead {
  margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-2);
  color: var(--fg-4);
  font: 400 14px/1.57 var(--font-zh);
  font-weight: 400;
}

/* 結果列：設計稿改成整列分隔線，不再是一張張圓角卡（清單密度較高，一屏看得到更多） */
.search-result {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  padding: var(--s-4) var(--s-5);
  background: transparent;
  color: var(--fg-1);
  text-align: left;
  font-family: var(--font-zh);
  cursor: pointer;
}
.search-result:active { background: var(--bg-1); }
.search-result__title {
  display: block;
  color: var(--fg-1);
  font: 400 16px/1.6 var(--font-zh);
}
.search-result__desc {
  display: block;
  margin-top: var(--s-1);
  overflow: hidden;
  color: var(--fg-5);
  font: 400 14px/1.57 var(--font-zh);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 載入中／空關鍵字提示 */
.search-state {
  padding: var(--s-6) var(--s-5);
  color: var(--fg-5);
  text-align: left;
  font: 400 14px/1.57 var(--font-zh);
}
/* 有標題的狀態（無結果／錯誤）＝設計稿的 .sm-msg */
.search-state:has(.search-state__title) { padding: var(--s-8) var(--s-5); }
.search-state__title {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--fg-1);
  font: 700 20px/1.4 var(--font-zh);
  word-break: break-word;
}
.search-state__desc {
  display: block;
  margin-bottom: var(--s-5);
  color: var(--fg-4);
  font: 400 16px/1.6 var(--font-zh);
}
.search-state__actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: 0;
}
.search-state__btn {
  height: 44px;
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--bg-0);
  color: var(--fg-2);
  font: 500 14px/1.5 var(--font-zh);
  cursor: pointer;
}
.search-state__btn:active { background: var(--bg-1); }
.search-state__btn.is-primary {
  border-color: var(--pro-green);
  background: var(--pro-green);
  color: var(--fg-invert);
}
.search-state__btn.is-primary:active { background: var(--pro-link); border-color: var(--pro-link); }