/**
 * Furkid Barrier - Frontend Auth Modal Scoped Styles (v2)
 *
 * 專屬 Scoped CSS，隔離佈景主題全域樣式干擾。
 * v2 變更：
 *  - 對話框寬度改為流體縮放（手機 / 平板 / 桌機分段）
 *  - Logo 區塊：限制高度、圖片 contain、未設定 Logo 時自動收合
 *  - 補上自訂登入模板（furkid-login-*）的樣式，避免被其他樣式覆蓋
 *  - 補上鍵盤焦點、減少動態偏好、dvh 支援
 */

/* ==========================================================================
   0. 設計變數 (Design Tokens)
   ========================================================================== */
.furkid-modal-wrapper {
  --fk-accent: #c99b4e;
  --fk-accent-hover: #b88a3f;
  --fk-accent-contrast: #ffffff;
  --fk-ink: #0f172a;
  --fk-ink-soft: #334155;
  --fk-muted: #64748b;
  --fk-faint: #94a3b8;
  --fk-line: #e2e8f0;
  --fk-line-strong: #cbd5e1;
  --fk-surface: #ffffff;
  --fk-surface-soft: #f8fafc;
  --fk-ok: #10b981;

  /* 對話框尺寸：由下方斷點覆寫 */
  --fk-dialog-width: min(92vw, 440px);
  --fk-dialog-pad-y: 24px;
  --fk-dialog-pad-x: 28px;
}

/* ==========================================================================
   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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.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: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   2. 對話框卡片主體 (Dialog Card)
   ========================================================================== */
.furkid-modal-dialog {
  position: relative;
  z-index: 10;
  width: var(--fk-dialog-width);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fk-surface);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: var(--fk-dialog-pad-y) var(--fk-dialog-pad-x);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.furkid-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  padding: 4px 12px;
}

.furkid-status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--fk-ok);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  animation: furkid-pulse 2s infinite;
}

@keyframes furkid-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

.furkid-badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  line-height: 1;
}

.furkid-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--fk-faint);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.furkid-modal-close:hover {
  color: #1e293b;
  background: #f1f5f9;
}

/* ==========================================================================
   4. 內文與通知區域 (Body & Notices)
   ========================================================================== */
.furkid-modal-title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--fk-ink);
  text-align: left;
}

.furkid-modal-subtitle {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: var(--fk-muted);
  line-height: 1.5;
  text-align: left;
}

.furkid-modal-notice {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.4;
  word-break: break-word;
}

.furkid-modal-notice.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.furkid-modal-notice.is-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

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

.furkid-input-group {
  margin-bottom: 16px;
}

.furkid-input-group input[type="email"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--fk-surface-soft);
  border: 1px solid var(--fk-line-strong);
  border-radius: 8px;
  font-size: 14px;
  color: var(--fk-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.furkid-input-group input[type="email"]:focus {
  background: #ffffff;
  border-color: var(--fk-accent);
  box-shadow: 0 0 0 3px rgba(201, 155, 78, 0.22);
}

.furkid-turnstile-wrapper {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  min-height: 65px;
}

.furkid-btn-submit {
  width: 100%;
  height: 44px;
  background: var(--fk-accent);
  color: var(--fk-accent-contrast);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, transform 0.1s ease;
}

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

.furkid-btn-submit:active:not(:disabled) {
  transform: translateY(1px);
}

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

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  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: 20px 0 16px 0;
}

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

.furkid-modal-divider span {
  position: relative;
  z-index: 2;
  background: var(--fk-surface);
  padding: 0 10px;
  font-size: 12px;
  color: var(--fk-faint);
}

.furkid-modal-oauth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.furkid-btn-oauth {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--fk-surface);
  border: 1px solid var(--fk-line-strong);
  border-radius: 8px;
  color: var(--fk-ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.furkid-btn-oauth:hover {
  background: var(--fk-surface-soft);
  border-color: var(--fk-faint);
  color: var(--fk-ink);
}

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

.furkid-btn-passkey:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* ==========================================================================
   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 24px;
}

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

:where(.furkid-modal-body .furkid-login-brand) {
  font-size: clamp(22px, 2.2vw + 14px, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--fk-ink);
  overflow-wrap: anywhere;
}

:where(.furkid-modal-body .furkid-login-accent) {
  width: 44px;
  height: 3px;
  margin: 4px auto 0;
  border-radius: 2px;
  background: var(--fk-accent);
}

:where(.furkid-modal-body .furkid-login-footer) {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--fk-faint);
  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: 16px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 65px;
  box-sizing: border-box;
}

/* 已登入會員結帳 Email 唯讀鎖定樣式 */
#billing_email[readonly],
.woocommerce-checkout input#billing_email.furkid-readonly-email {
  background-color: #f0f0f1 !important;
  color: var(--fk-ink-soft, #475569) !important;
  cursor: not-allowed !important;
  border-color: var(--fk-line-strong, #cbd5e1) !important;
  box-shadow: none !important;
  user-select: none;
}

/* ==========================================================================
   9. 前台認證短代碼微膠囊按鈕 (Shortcode Capsule Trigger)
   ========================================================================== */
/*
 * 範圍限定：選單項目的 <li> 也會被 PHP 加上 furkid-auth-trigger / furkid-logout-trigger class，
 * 因此這裡只針對短代碼輸出的 <button> 與 <a data-action="logout">，避免選單被套上膠囊外框。
 *
 * 設計原則：
 *  - 字體、字級、文字顏色、背景一律繼承佈景（不指定），自動吃布景風格
 *  - 只提供「外框」：細邊線取自當前文字色，膠囊圓角，懸停時轉為金色並浮出外環
 *  - 邊線顏色用 currentColor 推算，深色或淺色佈景都看得清楚
 */
button.furkid-auth-trigger,
a.furkid-logout-trigger[data-action="logout"],
.furkid-btn-auth {
  --fk-trigger-accent: #c99b4e;
  --fk-trigger-line: rgba(128, 128, 128, 0.45); /* 不支援 color-mix 的備援 */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65em 1.6em;
  margin: 8px 4px;
  min-height: 38px;
  box-sizing: border-box;
  font: inherit;
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--fk-trigger-line);
  border-radius: 9999px;
  box-shadow: 0 0 0 0 transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  button.furkid-auth-trigger,
  a.furkid-logout-trigger[data-action="logout"],
  .furkid-btn-auth {
    --fk-trigger-line: color-mix(in srgb, currentColor 38%, transparent);
  }
}

button.furkid-auth-trigger:hover,
a.furkid-logout-trigger[data-action="logout"]:hover,
.furkid-btn-auth:hover {
  border-color: var(--fk-trigger-accent);
  box-shadow: 0 0 0 3px rgba(201, 155, 78, 0.2);
  color: inherit;
  text-decoration: none;
}

button.furkid-auth-trigger:active,
a.furkid-logout-trigger[data-action="logout"]:active,
.furkid-btn-auth:active {
  transform: translateY(1px);
}

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-trigger-accent);
  outline-offset: 3px;
}

/* 登出按鈕：懸停時改用較中性的外環，避免與登入的金色混淆 */
a.furkid-logout-trigger[data-action="logout"]:hover {
  border-color: var(--fk-trigger-line);
  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.18);
}

@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(--fk-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .furkid-modal-wrapper,
  .furkid-modal-dialog,
  .furkid-status-dot,
  .btn-spinner {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   11. 響應式適配 (RWD)
       手機 → 平板 → 桌機，對話框寬度與內距逐級放大
   ========================================================================== */

/* 手機：480px 以下 */
@media screen and (max-width: 480px) {
  .furkid-modal-wrapper {
    --fk-dialog-width: 90%;
    --fk-dialog-pad-y: 20px;
    --fk-dialog-pad-x: 32px;
  }
  .furkid-modal-dialog {
    border-radius: 12px;
  }
  .furkid-modal-title {
    font-size: 18px;
  }
  .furkid-login-header {
    margin-bottom: 18px;
  }
}

/* 平板：481px ~ 1024px */
@media screen and (min-width: 481px) {
  .furkid-modal-wrapper {
    --fk-dialog-width: 70%;
    --fk-dialog-pad-y: 22px;
    --fk-dialog-pad-x: 36px;
  }
}

/* 桌機：1025px 以上 */
@media screen and (min-width: 1025px) {
  .furkid-modal-wrapper {
    --fk-dialog-width: 50%;
    --fk-dialog-pad-y: 24px;
    --fk-dialog-pad-x: 40px;
  }
}

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

/* ==========================================================================
   12. 模板適配層 (Template Adaptation Layer)
   --------------------------------------------------------------------------
   後台使用者可自訂登入頁 HTML（僅 HTML + <style>，不含 JS / 表單）。
   模板常是「整頁式」寫法：min-height:100vh、外層 padding、max-width + margin:auto。
   本層任務：讓任何模板放進彈窗都不爆版，而不是替模板決定版面。

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

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

.furkid-modal-wrapper .furkid-modal-header {
  margin-bottom: 6px;
}

/* --- 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: 14px 0 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 {
  --fk-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(--fk-logo-max-h);
  object-fit: contain;
}
:where(.furkid-modal-body .furkid-logo-text) {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}