/* =====================================================================
   bhb-auth.css —— 登入 / 註冊彈窗（2026-08-31）

   ── 為什麼要獨立一支樣式表 ──────────────────────────────────────
   上一版的登入彈窗借用付款彈窗的 .paygate 樣式，而那些樣式住在
   bhb-web.css 裡 —— **首頁根本沒有載 bhb-web.css**。結果是：首頁的導覽列
   有一顆 Sign in，按下去彈出一個完全沒有樣式的白框。之前沒人發現，
   是因為登入入口實際上只有 /websites 在用。
   現在老闆要求每一頁的導覽列都放登入和註冊，這個洞就非補不可。
   所以這支只管彈窗，四個頁面全部載它。

   區號控件（.dial / .flag-dot）也搬進來了，理由一樣：付款彈窗和註冊表單
   都用它，而兩者出現的頁面不是同一組。原本在 bhb-web.css 的那一段已刪，
   不要兩邊各留一份。
   ===================================================================== */

/* ── 對話框本體 ─────────────────────────────────────────────────── */
.authbox {
  border: 0; border-radius: 16px; padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: min(88vh, 780px);
  background: var(--paper, #fff); color: var(--ink, #171a19);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
}
.authbox::backdrop { background: rgba(10, 12, 14, 0.62); }

.auth-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 3.4vw, 32px);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ── 頁籤：登入 / 註冊 ──────────────────────────────────────────── */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: rgba(23, 26, 25, 0.06);
}
.auth-tabs[hidden] { display: none; }   /* class 的 display 會蓋掉 UA 的 [hidden] */
.auth-tab {
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 8px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted, rgba(23, 26, 25, 0.68));
  cursor: pointer; transition: background 0.16s ease, color 0.16s ease;
}
.auth-tab.is-on { background: var(--paper, #fff); color: var(--ink, #171a19); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.auth-h { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.auth-h[hidden] { display: none; }

/* ── 步驟容器 ───────────────────────────────────────────────────── */
.auth-step { display: flex; flex-direction: column; gap: 13px; }
.auth-step[hidden] { display: none; }
.auth-cf { min-height: 0; }
.auth-cf[hidden] { display: none; }

/* ── 欄位 ───────────────────────────────────────────────────────── */
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"] {
  font: inherit; font-weight: 400; font-size: 15px;
  width: 100%;
  padding: 11px 13px; border: 1px solid var(--line, rgba(23, 26, 25, 0.22)); border-radius: 9px;
  background: #fff; color: var(--ink, #171a19);
}
.auth-form input:focus-visible {
  outline: 2px solid var(--brand, #278d82); outline-offset: 1px; border-color: var(--brand, #278d82);
}
.auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-two label { min-width: 0; }
.auth-tel { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 8px; }

.auth-hint { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted, rgba(23, 26, 25, 0.68)); }
.auth-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted, rgba(23, 26, 25, 0.68)); }

/* 密碼欄 + 眼睛。眼睛壓在輸入框右邊，所以右內距要留出它的位置，
   否則長密碼會鑽到圖示底下。 */
.auth-pw { position: relative; display: block; }
.auth-pw input { padding-right: 44px; }
.auth-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--muted, rgba(23, 26, 25, 0.68)); cursor: pointer;
}
.auth-eye:hover { color: var(--ink, #171a19); }
.auth-eye:focus-visible { outline: 2px solid var(--brand, #278d82); outline-offset: -2px; }
/* 開着的時候在眼睛上劃一道，表示「現在是看得見的狀態」 */
.auth-eye.is-on { color: var(--brand, #278d82); }
.auth-eye.is-on::after {
  position: absolute; left: 7px; right: 7px; top: 50%;
  height: 1.8px; background: currentColor; content: "";
  transform: rotate(-38deg);
}

.auth-agree {
  flex-direction: row !important; align-items: flex-start; gap: 10px;
  font-weight: 400; font-size: 13.5px; line-height: 1.5; margin-top: 2px;
}
.auth-agree input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--brand, #278d82); flex: none; }
.auth-agree a { color: var(--brand, #278d82); }

/* 六位數的框（2026-08-31 第三輪改回驗證碼）。
   等寬字、weight 500 —— 老闆：「就是那個計算機用的，但是不要太粗，
   就最正經的那種。」和郵件裡那組碼用同一套處理，抄的時候兩邊長得一樣。
   text-indent 補回最後一個字後面那格 letter-spacing，不補的話整組會偏左半格。
   選擇器寫成 `.auth-form input.auth-code` 而不是 `.auth-form .auth-code`：
   上面那條通用樣式是 `.auth-form input[type="text"]`，屬性選擇器算一個 class，
   所以它是 (0,2,1)。只寫 `.auth-form .auth-code` 是 (0,2,0)，**會輸** ——
   實測過，輸碼框當時整格退回 15px 的 Inter。加上 input 才打平，
   再靠「後寫的贏」拿下。 */
.auth-form input.auth-code {
  width: 100%; max-width: 250px;
  padding: 14px 12px;
  font: 500 27px/1.15 Menlo, Consolas, "Courier New", monospace;
  letter-spacing: 0.26em; text-indent: 0.26em; text-align: center;
  border-radius: 12px;
}
.auth-form input.auth-code::placeholder { color: rgba(23, 26, 25, 0.18); }

/* ── 按鈕 ───────────────────────────────────────────────────────── */
.auth-primary {
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 24px; border: 0; border-radius: 999px;
  background: var(--brand, #278d82); color: #fff; cursor: pointer;
  transition: opacity 0.16s ease;
}
.auth-primary:hover { opacity: 0.88; }
.auth-primary:disabled { opacity: 0.5; cursor: progress; }

.auth-link {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 4px 2px; border: 0; background: none;
  color: var(--brand, #278d82); cursor: pointer; text-align: left;
}
.auth-link:hover { text-decoration: underline; }
.auth-link:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: none; }

.auth-coderow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-cd {
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--muted, rgba(23, 26, 25, 0.68));
}
.auth-cd[hidden] { display: none; }

.auth-actions { display: flex; justify-content: flex-end; }
.auth-cancel {
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 22px; border: 0; border-radius: 999px;
  background: #14181a; color: #fff; cursor: pointer;
}
.auth-cancel:hover { opacity: 0.88; }

/* ── 訊息 ───────────────────────────────────────────────────────── */
.auth-msg {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(181, 45, 26, 0.08); color: #9B2C2C;
  font-size: 13px; line-height: 1.5;
}
.auth-msg[hidden] { display: none; }
.auth-sent { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted, rgba(23, 26, 25, 0.68)); }
.auth-sent b { color: var(--ink, #171a19); overflow-wrap: anywhere; }

/* ── 沒填的欄位：紅框 + 閃兩下 ──────────────────────────────────
   和付款彈窗、回收站是同一套（同名 keyframes，兩支樣式表同時載入時
   內容一致，誰後載都一樣）。 */
.auth-form input[aria-invalid="true"] {
  outline: 2px solid #b52d1a; outline-offset: 3px; border-color: #b52d1a;
}
.auth-agree[aria-invalid="true"] {
  outline: 2px solid #b52d1a; outline-offset: 5px; border-radius: 6px;
}
@keyframes validation-border-blink {
  0%, 20%, 45%, 65%, 90%, 100% { outline-color: #b52d1a; }
  25%, 40%, 70%, 85%           { outline-color: transparent; }
}
.is-validation-flashing { animation: validation-border-blink 720ms step-end 1; }

@media (prefers-reduced-motion: reduce) {
  .is-validation-flashing { animation: none; }
}

@media (max-width: 460px) {
  /* 姓和名手機上也並排（老闆 2026-08-31：「它們都可以短一點點，
     不會寫太長」）。只把間距收窄，不換成單欄。 */
  .auth-two { grid-template-columns: 1fr 1fr; gap: 8px; }
  .auth-tel { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); }
}

/* ── 輸碼那一步（2026-08-31 第三輪：改回六位數）──────────────────
   一個信封、一句大字、收件信箱、六位數的框。整步居中：只有一個欄位，
   靠左對齊反而會讓那個框孤零零地黏在邊上。 */
.auth-step[data-step="code"] { align-items: center; text-align: center; gap: 10px; padding: 6px 0 2px; }

.auth-sent-mark {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(39, 141, 130, .10);
  color: var(--brand, #278d82);
}
.auth-sent-lead { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.auth-sent-to { margin: 0; font-size: 14px; color: var(--muted, rgba(23, 26, 25, .68)); }
.auth-sent-to b { color: var(--ink, #171a19); font-weight: 600; overflow-wrap: anywhere; }
.auth-step[data-step="code"] .auth-primary { min-width: 210px; margin-top: 2px; }
.auth-step[data-step="code"] .auth-coderow { justify-content: center; margin-top: 2px; }

/* ── 人機驗證那一步（2026-08-31 老闆要求前置）────────────────────
   整步只有 Cloudflare 那個框和一顆按鈕，沒有標題也沒有說明文字。
   按鈕在驗證通過之前是灰的、按不動 —— 灰色本身就是說明。 */
.auth-step[data-step="gate"] { align-items: center; gap: 16px; padding: 8px 0 4px; }
.auth-step[data-step="gate"] .auth-cf { min-height: 65px; }
.auth-gate-go { min-width: 220px; }
/* disabled 不用共用的半透明樣式：那個看起來像「正在忙」，
   這裡要的是「還不能按」。 */
.auth-gate-go:disabled {
  background: rgba(23, 26, 25, .10);
  color: rgba(23, 26, 25, .42);
  opacity: 1;
  cursor: not-allowed;
}

/* ══ 區號選擇器（從 bhb-web.css 原封搬過來，見檔頭）═══════════════
   原生 <option> 裝不了圖片，所以這是一個自訂 listbox；
   邏輯在 assets/bhb-dial.js，圓形國旗在 assets/bhb-flag.js。
   數值一個都沒改 —— /websites 上的付款彈窗要跟搬家前長得一模一樣。 */
.flag-dot { width: 20px; height: 20px; flex: none; display: block; }

.dial { position: relative; }
.dial-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px;
  font: inherit; text-align: left; cursor: pointer;
  border: 1px solid rgba(23, 26, 25, .22); border-radius: 10px;
  background: #fff;
}
.dial-btn:hover { border-color: rgba(23, 26, 25, .40); }
.dial-btn[aria-expanded="true"] { border-color: var(--brand); }
.dial-code { font-variant-numeric: tabular-nums; font-weight: 600; }
.dial-caret { margin-left: auto; opacity: .5; font-size: .8em; }

.dial-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  width: min(320px, 78vw);
  background: #fff; border: 1px solid rgba(23, 26, 25, .16); border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(23, 26, 25, .5);
  overflow: hidden;
}
.dial-panel[hidden] { display: none; }   /* class 的 display 會蓋掉 UA 的 [hidden] */

.dial-search {
  width: 100%; padding: 11px 13px; font: inherit;
  border: 0; border-bottom: 1px solid rgba(23, 26, 25, .12);
  background: rgba(39, 141, 130, .05);
}
.dial-search:focus { outline: 2px solid var(--brand); outline-offset: -2px; }

.dial-list { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.dial-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.dial-item:hover { background: rgba(39, 141, 130, .10); }
.dial-item.is-on { background: rgba(39, 141, 130, .16); font-weight: 600; }
.dial-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dial-none { padding: 14px 12px; color: var(--muted); font-size: .9rem; }