/* 彈窗。2026-09-22 起改成「左圖右面板」的雙欄（老闆拿 Starface 的 Klaviyo 彈窗當參考）。
   幾何是去量參考站的表單設定檔抄的，不是看截圖猜的：
   800 寬、最小高 600、圓角 12、無陰影、左右對半、右欄內距 40（上 15）、
   logo → 主標 32 → 副標 15 → 欄位標籤 18 → 輸入框 56 → 按鈕 56 → 小字 13、X 32px 距角 8。
   面板顏色由後台每一個彈窗自己設（--fp-bg），字色 popup.js 按亮度自動選黑或白（--fp-fg）。
   手機（≤640）是置中卡片（2026-09-25 起，原本是全螢幕蓋板）：KV 正方不裁在上、面板在下，放不下就在卡片內捲。

   ⚠️ z-index 要高過購物車抽屜（float-cart-drawer，z-index:100000）與選單抽屜
   （float-shell，最高 z-index:80）。100000 是目前全站唯一另一個滿版遮罩，跟它
   同分會由 DOM 插入順序決定誰疊在上面，等於碰運氣——所以刻意加十做緩衝。 */
/* ⚠️ 不能假設外層（Blocksy 或任何載入這支 CSS 的頁面）一定給 border-box——
   float-cart-drawer 與 float-shell 都各自補過同一個坑（見兩支檔案裡的
   box-sizing 註解），這裡比照辦理，整個彈窗自成一個 border-box 的世界。 */
.fp-overlay,.fp-overlay *,.fp-overlay *::before,.fp-overlay *::after{box-sizing:border-box}
.fp-overlay{position:fixed;inset:0;z-index:100010;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.68);padding:20px;opacity:0;transition:opacity 180ms ease;
  font-family:"InterLatin","Helvetica Neue",Helvetica,Arial,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
.fp-overlay.is-on{opacity:1}

/* --fp-bg／--fp-fg 由 popup.js 寫在 .fp-box 的 style 上；沒有的話退回黑底白字（跟站上其他版型一致）。 */
.fp-box{--fp-bg:#000;--fp-fg:#fff;
  position:relative;width:100%;max-width:800px;min-height:600px;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--fp-bg);color:var(--fp-fg);border-radius:12px;overflow:hidden;
  transform:translateY(8px);transition:transform 180ms ease}
.fp-overlay.is-on .fp-box{transform:none}
/* 沒放圖的彈窗：單欄、窄一點，面板照舊。 */
.fp-box--single{max-width:480px;min-height:0;grid-template-columns:1fr}

.fp-media{background-size:cover;background-position:center;min-height:100%}
.fp-panel{position:relative;padding:15px 40px 40px;display:flex;flex-direction:column;justify-content:center;min-width:0}

/* X：32px 本體（參考站的值），但可按面積補到 44×44——行動裝置公認的最小好按尺寸。 */
.fp-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;
  color:var(--fp-fg);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.9}
.fp-close svg{width:32px;height:32px;display:block}
.fp-close:hover,.fp-close:focus-visible{opacity:1}
.fp-close:focus-visible{outline:1px solid var(--fp-fg);outline-offset:-3px}

/* 站上的 wordmark 是深灰字透明底；白字面板上反白。 */
.fp-logo{display:block;width:96px;height:auto;margin:0 0 40px}
.fp-box--light .fp-logo{filter:none}
.fp-box--dark .fp-logo{filter:invert(1) brightness(1.2)}

.fp-h{margin:0 0 10px;font-size:32px;line-height:1.1;font-weight:700;color:var(--fp-fg)}
.fp-sub{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--fp-fg);text-wrap:pretty}  /* pretty：別讓最後一個字（「走。」）單獨掉到下一行 */
.fp-label{display:block;margin:15px 0 10px;font-size:18px;font-weight:700}
.fp-form{display:flex;flex-direction:column;gap:10px}
.fp-input{width:100%;height:56px;padding:0 16px;background:transparent;color:var(--fp-fg);
  border:1px solid var(--fp-fg);border-radius:0;font-size:18px;font-family:inherit}
.fp-input::placeholder{color:var(--fp-fg);opacity:.55}
.fp-input:focus{outline:2px solid var(--fp-fg);outline-offset:-2px}
/* 按鈕永遠白底黑字＋1px 面板字色的框：參考站在黃面板與白面板上都是這一顆，
   我們的藍／紅／黑面板也一樣成立（白鈕在深色上最跳，黑字在白鈕上最清楚）。 */
.fp-btn{display:block;width:100%;height:56px;background:#fff;color:#000;border:1px solid var(--fp-fg);
  border-radius:0;font-size:22px;font-weight:700;cursor:pointer;text-align:center;line-height:54px;
  text-decoration:none;font-family:inherit}
.fp-btn:hover{background:#000;color:#fff;border-color:#fff}
.fp-btn:focus-visible{outline:2px solid var(--fp-fg);outline-offset:2px}
.fp-btn[disabled]{opacity:.5;cursor:default}
.fp-consent{margin:0;font-size:13px;line-height:1.3;color:var(--fp-fg);opacity:.85}
.fp-note{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--fp-fg)}
.fp-note:empty{display:none}
/* 「不是這個信箱？換一個再試」的出口。刻意長得像次要連結、不像按鈕：它跟送出鈕
   同時存在，做成第二顆實心鈕會兩顆搶主導、讓人不知道該按哪一顆。
   高度仍然給滿 44px（跟 .fp-close 同一個標準）——它是手指要按的東西。 */
.fp-retry{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;
  background:none;border:0;color:var(--fp-fg);opacity:.85;font:inherit;font-size:13px;line-height:1.6;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fp-retry:hover{opacity:1}
.fp-retry:focus-visible{outline:1px solid var(--fp-fg);outline-offset:2px}
.fp-code-label{display:block;font-size:13px;letter-spacing:.08em;opacity:.75;margin:0 0 6px}
.fp-code{display:block;font-size:26px;font-weight:700;letter-spacing:.08em;color:#000;background:#fff;
  border:1px solid var(--fp-fg);padding:14px;text-align:center;margin:0 0 10px}
.fp-exp{display:block}
/* 使用限制與寄信說明。比 .fp-exp 小一階：它們是「醜話說在前面」，
   必須看得到、讀得懂，但不該跟代碼本身搶視線。
   ⚠️ 用 opacity 不用更淡的顏色：面板色是每個彈窗自己選的，寫死一個灰對黃底會消失。 */
.fp-rules,.fp-mail{display:block;margin:8px 0 0;font-size:12px;line-height:1.6;opacity:.75}

/* 手機：置中的卡片。2026-09-25 老闆退回全螢幕蓋板（「整個蓋住空白區太多變醜」）——
   面板下半截被硬撐到滿螢幕，字只佔上面一小塊。改成跟桌機同一種「浮在網頁上」的彈窗：
   四周留 16px 露出遮罩後的網頁，卡片高度跟著內容走。寬度上限 450 是 Starface 手機版
   Klaviyo 表單的 view size。圖正方不裁放上面（老闆 9/22 退回過 200px 的扁圖帶），
   面板接在下面；矮螢幕放不下就在卡片內捲。用 dvh 不用 vh（iOS 網址列會吃掉 vh）。 */
@media (max-width:640px){
  .fp-overlay{padding:16px}
  /* 不用 grid：grid 會為了塞進限高把 aspect-ratio 那一列壓扁（實測 390 寬只剩 300 高，圖被裁）。 */
  .fp-box{display:block;max-width:450px;min-height:0;max-height:calc(100dvh - 32px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .fp-media{width:100%;aspect-ratio:1/1;height:auto;min-height:0}
  /* 面板改回 static，X 才會以整張卡片（.fp-box）定位、落在圖的右上角，而不是圖下方。 */
  .fp-panel{position:static;padding:20px 24px 28px;justify-content:flex-start}
  .fp-close{background:rgba(255,255,255,.85);color:#000;border-radius:50%}
  .fp-box--single .fp-close{background:transparent;color:var(--fp-fg)}
  .fp-logo{width:84px;margin-bottom:20px}
  .fp-h{font-size:26px}
}