/**
 * Furkid Barrier - Frontend Auth Modal Scoped Styles (v3 · CIS v1.1)
 *
 * 依《FURKID 網站視覺識別規格書 v1.1》調整：
 *  - 直角、1px 暖灰細線、金棕只當重點、無陰影、無毛玻璃、無斜體
 *  - 本檔不定義、不覆寫任何 --fk-* Token；以外掛專屬前綴 --fkb-* 讀取，
 *    寫法 var(--fk-xxx, 規格值)：佈景有載入 Token 就跟著變，沒有就用規格值
 *  - 斷點只用 1024px / 768px（桌機優先 max-width）
 *  - 字型繼承佈景；標題用 --fk-font-heading
 */

/* ==========================================================================
   0. 設計變數 (Local tokens → CIS)
   ========================================================================== */
.furkid-modal-wrapper {
  --fkb-title: var(--fk-title, #111111);
  --fkb-text: var(--fk-text, #333333);
  --fkb-text-light: var(--fk-text-light, #6b6b6b);
  --fkb-accent-dark: var(--fk-accent-dark, #a08050);
  --fkb-accent-deeper: var(--fk-accent-deeper, #85663a);
  --fkb-accent: var(--fk-accent, #c8a87a);
  --fkb-accent-tint: var(--fk-accent-tint, #fcf9f4);
  --fkb-bg: var(--fk-bg, #ffffff);
  --fkb-bg-soft: var(--fk-bg-soft, #f7f5f2);
  --fkb-border: var(--fk-border, #e8e4de);
  --fkb-border-strong: var(--fk-border-strong, #bdb3a5);
  --fkb-danger: var(--fk-danger, #a3392b);
  --fkb-on-dark: var(--fk-on-dark, #ffffff);
  --fkb-shade: var(--fk-shade-start, rgba(0, 0, 0, 0.52));
  --fkb-font-heading: var(--fk-font-heading, inherit);
  --fkb-transition: var(--fk-transition, 0.27s ease);

  /* 對話框尺寸：由下方斷點覆寫 */
  --fkb-dialog-width: 50%;
  --fkb-dialog-pad-y: var(--fk-space-6, 24px);
  --fkb-dialog-pad-x: var(--fk-space-9, 40px);
  --fkb-btn-h: var(--fk-btn-h, 40px);
}

/* ==========================================================================
   1. 彈窗容器與遮罩 (Container & Backdrop)
   ========================================================================== */
.furkid-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--fkb-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fkb-transition), visibility var(--fkb-transition);
}

.furkid-modal-wrapper *,
.furkid-modal-wrapper *::before,
.furkid-modal-wrapper *::after {
  box-sizing: border-box;
}

.furkid-modal-wrapper.is-active {
  opacity: 1;
  visibility: visible;
}

.furkid-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--fkb-shade);
}

/* ==========================================================================
   2. 對話框卡片主體 (Dialog Card)：白底、1px 框、頂端 2px 金線，無圓角無陰影
   ========================================================================== */
.furkid-modal-dialog {
  position: relative;
  z-index: 10;
  width: var(--fkb-dialog-width);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fkb-bg);
  border: 1px solid var(--fkb-border);
  border-top: 2px solid var(--fkb-accent);
  border-radius: var(--fk-radius, 0);
  box-shadow: none;
  padding: var(--fkb-dialog-pad-y) var(--fkb-dialog-pad-x);
  transform: translateY(3px);
  transition: transform var(--fkb-transition);
}

.furkid-modal-wrapper.is-active .furkid-modal-dialog {
  transform: translateY(0);
}

/* ==========================================================================
   3. 頂部安全指示與關閉鈕 (Header & Status Dot)
   ========================================================================== */
.furkid-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fk-space-5, 20px);
}

/* 安全徽章：Eyebrow 樣式（小字、粗體、大字距、全大寫、金棕），直角細框 */
.furkid-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2, 8px);
  background: transparent;
  border: 1px solid var(--fkb-border);
  border-radius: var(--fk-radius, 0);
  padding: var(--fk-space-1, 4px) var(--fk-space-3, 12px);
}

.furkid-status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--fkb-accent);
  border-radius: 50%;
}

.furkid-badge-text {
  font-size: var(--fk-fs-label, 12px);
  font-weight: 700;
  letter-spacing: var(--fk-ls-label, 2px);
  text-transform: uppercase;
  color: var(--fkb-accent-dark);
  line-height: 1;
}

.furkid-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--fkb-text-light);
  cursor: pointer;
  padding: var(--fk-space-1, 4px) var(--fk-space-2, 8px);
  border-radius: var(--fk-radius, 0);
  transition: color var(--fkb-transition);
}

.furkid-modal-close:hover {
  color: var(--fkb-title);
  background: transparent;
}

/* ==========================================================================
   4. 內文與通知區域 (Body & Notices)
   ========================================================================== */
.furkid-modal-title {
  margin: 0 0 var(--fk-space-2, 8px) 0;
  font-family: var(--fkb-font-heading);
  font-size: var(--fk-fs-h2, 24px);
  font-weight: 400;
  letter-spacing: var(--fk-ls-title, 0.5px);
  line-height: 1.3;
  color: var(--fkb-title);
  text-align: center;
}

.furkid-modal-subtitle {
  margin: 0 0 var(--fk-space-5, 20px) 0;
  font-size: var(--fk-fs-small, 14px);
  color: var(--fkb-text-light);
  line-height: 1.7;
  text-align: center;
}

/* 提示框：淡金底、左側 2px 金線；錯誤改 danger 左線（不靠綠色成功色塊） */
.furkid-modal-notice {
  padding: var(--fk-space-4, 16px) var(--fk-space-5, 20px);
  background: var(--fkb-accent-tint);
  border-left: 2px solid var(--fkb-accent);
  border-radius: var(--fk-radius, 0);
  font-size: var(--fk-fs-small, 14px);
  color: var(--fkb-text);
  margin-bottom: var(--fk-space-4, 16px);
  line-height: 1.7;
  word-break: break-word;
}

.furkid-modal-notice.is-error {
  border-left-color: var(--fkb-danger);
  color: var(--fkb-danger);
}

.furkid-modal-notice.is-success {
  border-left-color: var(--fkb-accent);
  color: var(--fkb-text);
}

/* ==========================================================================
   5. 表單輸入與送出按鈕 (Form & Buttons)
   ========================================================================== */
.furkid-modal-form {
  margin: 0;
  padding: 0;
}

.furkid-input-group {
  margin-bottom: var(--fk-space-4, 16px);
}

.furkid-input-group input[type="email"] {
  width: 100%;
  min-height: var(--fkb-btn-h);
  padding: var(--fk-space-3, 12px) var(--fk-space-4, 16px);
  background: var(--fkb-bg);
  border: 1px solid var(--fkb-border-strong);
  border-radius: var(--fk-radius, 0);
  font-size: 15px;
  color: var(--fkb-text);
  transition: border-color var(--fkb-transition);
}

.furkid-input-group input[type="email"]:focus {
  border-color: var(--fkb-accent-dark);
  outline: 2px solid var(--fkb-accent);
  outline-offset: 0;
}

.furkid-turnstile-wrapper {
  margin-bottom: var(--fk-space-4, 16px);
  display: flex;
  justify-content: center;
  min-height: 65px;
}

/* 送出鈕：CIS 深色按鈕（功能性按鈕），hover 字改淺金 */
.furkid-btn-submit {
  width: 100%;
  min-height: var(--fkb-btn-h);
  background: var(--fkb-text);
  color: var(--fkb-on-dark);
  border: none;
  border-radius: var(--fk-radius, 0);
  font-size: var(--fk-fs-btn, 13px);
  font-weight: 700;
  letter-spacing: var(--fk-ls-btn, 2px);
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-2, 8px);
  transition: color var(--fkb-transition);
}

.furkid-btn-submit:hover:not(:disabled) {
  color: var(--fkb-accent);
}

.furkid-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--fkb-border-strong);
  border-radius: 50%;
  border-top-color: var(--fkb-on-dark);
  animation: furkid-spin 0.8s linear infinite;
}

@keyframes furkid-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   6. 分隔線與第三方/無密碼登入 (OAuth & Passkey Actions)
   ========================================================================== */
.furkid-modal-divider {
  position: relative;
  text-align: center;
  margin: var(--fk-space-5, 20px) 0 var(--fk-space-4, 16px) 0;
}

.furkid-modal-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--fkb-border);
  z-index: 1;
}

.furkid-modal-divider span {
  position: relative;
  z-index: 2;
  background: var(--fkb-bg);
  padding: 0 var(--fk-space-3, 12px);
  font-size: var(--fk-fs-label, 12px);
  color: var(--fkb-text-light);
}

.furkid-modal-oauth {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-3, 12px);
}

/* 外框按鈕：透明底、1px 金棕框、金棕字；hover 反白 */
.furkid-btn-oauth {
  width: 100%;
  min-height: var(--fkb-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-3, 12px);
  background: transparent;
  border: 1px solid var(--fkb-accent-dark);
  border-radius: var(--fk-radius, 0);
  color: var(--fkb-accent-dark);
  font-size: var(--fk-fs-btn, 13px);
  font-weight: 700;
  letter-spacing: var(--fk-ls-btn, 2px);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--fkb-transition), color var(--fkb-transition);
}

.furkid-btn-oauth:hover {
  background: var(--fkb-accent-dark);
  color: var(--fkb-on-dark);
}

.furkid-btn-passkey {
  cursor: pointer;
}

/* ==========================================================================
   7. 預設模板外觀 (Default Skin for furkid-login-*)
      ★ 全部用 :where() 把特異性降到 0。
        框架只提供「模板沒寫就有個樣子」的底；模板只要自己寫了同名 class，
        不論 class 或 ID 選擇器、不論載入順序，一律以模板為準，不會互相打架。
      ★ 刻意不替 header / main 加 flex、gap：間距是模板的設計，框架不介入。
   ========================================================================== */
:where(.furkid-modal-body .furkid-login-header) {
  text-align: center;
  margin: 0 0 var(--fk-space-6, 24px);
}

:where(.furkid-modal-body .furkid-login-logo) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.furkid-modal-body .furkid-login-brand) {
  font-family: var(--fk-font-heading, inherit);
  font-size: var(--fk-fs-h2, 24px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--fk-ls-title, 0.5px);
  color: var(--fk-title, #111111);
  overflow-wrap: anywhere;
}

:where(.furkid-modal-body .furkid-login-accent) {
  width: 44px;
  height: 2px;
  margin: var(--fk-space-2, 8px) auto 0;
  border-radius: 0;
  background: var(--fk-accent, #c8a87a);
}

:where(.furkid-modal-body .furkid-login-footer) {
  margin: var(--fk-space-5, 20px) 0 0;
  text-align: center;
  font-size: var(--fk-fs-label, 12px);
  color: var(--fk-text-light, #6b6b6b);
  line-height: 1.5;
}

:where(.furkid-modal-body .furkid-login-brand:empty),
:where(.furkid-modal-body .furkid-login-logo:empty) {
  display: none;
}

/* ==========================================================================
   8. WooCommerce 結帳專屬 Turnstile 隔離容器與欄位鎖定 (Checkout Shield)
   ========================================================================== */
.furkid-checkout-turnstile-wrapper,
.furkid-checkout-turnstile-wrap {
  clear: both;
  margin: var(--fk-space-4, 16px) 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 65px;
  box-sizing: border-box;
}

/* 已登入會員結帳 Email 唯讀鎖定樣式（以 ID 選擇器取得足夠權重，不用 !important） */
#billing_email[readonly],
.woocommerce-checkout input#billing_email.furkid-readonly-email {
  background-color: var(--fk-bg-soft, #f7f5f2);
  color: var(--fk-text-light, #6b6b6b);
  cursor: not-allowed;
  border-color: var(--fk-border-strong, #bdb3a5);
  box-shadow: none;
  user-select: none;
}

/* ==========================================================================
   9. 前台認證短代碼按鈕 (Shortcode Trigger)
   ========================================================================== */
/*
 * 範圍限定：選單項目的 <li> 也會被 PHP 加上 furkid-auth-trigger / furkid-logout-trigger class，
 * 因此這裡只針對短代碼輸出的 <button> 與 <a data-action="logout">，避免選單被套上外框。
 *
 * CIS 6.6：登入＝外框按鈕（金棕框、金棕字、hover 反白）；登出＝次要（暖灰框、內文色）。
 * 直角、高 40px、13px、粗體、字距 2px、全大寫。
 */
button.furkid-auth-trigger,
a.furkid-logout-trigger[data-action="logout"],
.furkid-btn-auth {
  --fkb-trigger-accent: var(--fk-accent-dark, #a08050);
  --fkb-trigger-text: var(--fk-text, #333333);
  --fkb-trigger-line: var(--fk-border-strong, #bdb3a5);
  --fkb-trigger-on-dark: var(--fk-on-dark, #ffffff);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-2, 8px);
  padding: 0 var(--fk-btn-px, 24px);
  margin: var(--fk-space-2, 8px) var(--fk-space-1, 4px);
  min-height: var(--fk-btn-h, 40px);
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--fk-fs-btn, 13px);
  font-weight: 700;
  letter-spacing: var(--fk-ls-btn, 2px);
  text-transform: uppercase;
  line-height: 1;
  color: var(--fkb-trigger-accent);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--fkb-trigger-accent);
  border-radius: var(--fk-radius, 0);
  box-shadow: none;
  transition: background var(--fk-transition, 0.27s ease), color var(--fk-transition, 0.27s ease), border-color var(--fk-transition, 0.27s ease);
  -webkit-tap-highlight-color: transparent;
}

button.furkid-auth-trigger:hover,
.furkid-btn-auth:hover {
  background: var(--fkb-trigger-accent);
  color: var(--fkb-trigger-on-dark);
  text-decoration: none;
}

a.furkid-logout-trigger[data-action="logout"] {
  color: var(--fkb-trigger-text);
  border-color: var(--fkb-trigger-line);
}

a.furkid-logout-trigger[data-action="logout"]:hover {
  border-color: var(--fkb-trigger-text);
  color: var(--fkb-trigger-text);
  text-decoration: none;
}

button.furkid-auth-trigger:focus-visible,
a.furkid-logout-trigger[data-action="logout"]:focus-visible,
.furkid-btn-auth:focus-visible {
  outline: 2px solid var(--fk-accent, #c8a87a);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  button.furkid-auth-trigger,
  a.furkid-logout-trigger[data-action="logout"],
  .furkid-btn-auth {
    transition: none;
  }
}

/* ==========================================================================
   10. 無障礙：鍵盤焦點與減少動態 (Accessibility)
   ========================================================================== */
.furkid-modal-wrapper button:focus-visible,
.furkid-modal-wrapper a:focus-visible {
  outline: 2px solid var(--fkb-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .furkid-modal-wrapper,
  .furkid-modal-dialog,
  .furkid-btn-submit,
  .furkid-btn-oauth,
  .furkid-modal-close,
  .furkid-input-group input[type="email"],
  .btn-spinner {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   11. 響應式適配 (RWD)：只用 1024px / 768px 兩個斷點（max-width）
   ========================================================================== */

/* 平板：1024px 以下 */
@media screen and (max-width: 1024px) {
  .furkid-modal-wrapper {
    --fkb-dialog-width: 70%;
    --fkb-dialog-pad-x: var(--fk-space-8, 32px);
  }
}

/* 手機：768px 以下（點擊區 ≥ 44px） */
@media screen and (max-width: 768px) {
  .furkid-modal-wrapper {
    --fkb-dialog-width: 90%;
    --fkb-dialog-pad-y: var(--fk-space-5, 20px);
    --fkb-dialog-pad-x: var(--fk-space-6, 24px);
    --fkb-btn-h: var(--fk-btn-h, 44px);
  }
  .furkid-modal-title {
    font-size: var(--fk-fs-h2, 20px);
  }
  .furkid-modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  .furkid-login-header {
    margin-bottom: var(--fk-space-5, 20px);
  }
}

/* 低高度螢幕（橫向手機、小筆電）：壓縮垂直間距，減少捲動 */
@media screen and (max-height: 640px) {
  .furkid-login-logo,
  .furkid-login-logo img,
  .furkid-login-logo svg {
    max-height: 64px;
  }
  .furkid-login-header {
    gap: var(--fk-space-2, 8px);
    margin-bottom: var(--fk-space-3, 12px);
  }
}

/* ==========================================================================
   12. 模板適配層 (Template Adaptation Layer)
   --------------------------------------------------------------------------
   後台使用者可自訂登入頁 HTML（僅 HTML + <style>，不含 JS / 表單）。
   模板常是「整頁式」寫法：min-height:100vh、外層 padding、max-width + margin:auto。
   本層任務：讓任何模板放進彈窗都不爆版，而不是替模板決定版面。
   （本層屬「功能性防呆」而非視覺，沿用先前行為；!important 僅用於壓過使用者模板的內聯寫法。）

   規則
   1. 框架只管外框：對話框寬度、捲動、內距、徽章、關閉鈕。
   2. 不覆寫模板內部的 display / flex / margin / max-width。
   3. 只拆「會讓整頁式模板在彈窗裡出問題」的屬性：視窗高度類 min-height、
      根節點的外層 padding（對話框本身已有內距）。
   4. 框架自己產生的元件（Turnstile、{{logo}}）才用 !important 保證表現。
   ========================================================================== */

/* --- 12.1 對話框外框 ---------------------------------------------------- */
.furkid-modal-wrapper .furkid-modal-dialog {
  width: var(--fkb-dialog-width);
  height: auto;
  min-height: 0;
  max-height: min(92vh, 92dvh);
  margin: auto;
  padding: var(--fkb-dialog-pad-y) var(--fkb-dialog-pad-x);
  overflow-x: hidden; /* 模板內容過寬時不出現橫向捲軸 */
}

.furkid-modal-wrapper .furkid-modal-header {
  margin-bottom: var(--fk-space-2, 8px);
}

/* --- 12.2 模板容器：框架負責「放進彈窗」，模板負責「內部長相」 ----------- */
.furkid-modal-wrapper .furkid-modal-body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* 模板根節點：撐滿可用寬度；若模板自訂了 max-width，則由框架負責水平置中 */
.furkid-modal-wrapper .furkid-modal-body > * {
  width: 100%;
  align-self: center;
}

/* 整頁式模板的根節點通常帶外層 padding；彈窗已有內距，避免雙重留白 */
.furkid-modal-wrapper .furkid-modal-body > * {
  padding: 0 !important;
}

.furkid-modal-wrapper .furkid-modal-body > *:first-child {
  margin-top: 0 !important;
}
.furkid-modal-wrapper .furkid-modal-body > *:last-child {
  margin-bottom: 0 !important;
}

/* 拆掉 100vh / calc(100vh - …) 這類「整頁高度」，否則彈窗會被撐到滿版 */
.furkid-modal-wrapper .furkid-modal-body
  :where(div, section, main, article, aside, header, footer, nav, form):not(.furkid-turnstile-wrapper) {
  min-height: 0 !important;
}

/* 通用防呆：圖片不超出彈窗 */
.furkid-modal-wrapper .furkid-modal-body img {
  max-width: 100%;
  height: auto;
}

/* --- 12.3 框架自己產生的元件（可用 !important） ------------------------- */

/* Cloudflare Turnstile 水平置中 */
.furkid-modal-wrapper .furkid-turnstile-wrapper {
  margin: var(--fk-space-3, 12px) 0 var(--fk-space-2, 8px) 0;
  min-height: 65px;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.furkid-modal-wrapper .furkid-turnstile-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.furkid-modal-wrapper .furkid-turnstile-container iframe,
.furkid-modal-wrapper .furkid-turnstile-wrapper iframe {
  margin: 0 auto !important;
  display: block !important;
}

/* {{logo}} 輸出的 <a class="custom-logo-link"><img class="custom-logo">：
   只給「模板沒設定時」的安全上限（特異性 0，模板一設就以模板為準） */
.furkid-modal-wrapper {
  --fkb-logo-max-h: 96px;
}
:where(.furkid-modal-body .custom-logo-link) {
  display: inline-block;
  max-width: 100%;
}
:where(.furkid-modal-body .custom-logo) {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 220px);
  max-height: var(--fkb-logo-max-h);
  object-fit: contain;
}
:where(.furkid-modal-body .furkid-logo-text) {
  margin: 0;
  font-size: var(--fk-fs-h3, 22px);
  line-height: 1.3;
}