/* ==========================================================================
   EVOMNI STOREFRONT — 貨到通知登記對話框

   ⚠️ 與 mini-cart.css 同樣的紀律（理由見該檔頭）：**自帶完整樣式、全部 scope 在
   `.restock-notify` 內、每個 var() 帶字面 fallback**。
   這支對話框跟著購買按鈕走，會出現在「沒載 storefront.css / tokens.css 的一般頁面」上
   （首頁的推薦商品、文章頁的商品區塊都可能有缺貨商品）。
   ⛔ 不要為了少寫幾行就去載 storefront.css——那支的通用選擇器會潑到全站。
   ========================================================================== */

.restock-notify {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius, 0px);
  background: var(--fill-100, #ffffff);
  color: var(--fg, #303133);
  font-family: var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
}
.restock-notify::backdrop { background: rgba(0, 0, 0, 0.32); }

/* 一般頁面不保證有全域 border-box */
.restock-notify,
.restock-notify *,
.restock-notify *::before,
.restock-notify *::after { box-sizing: border-box; }

.restock-notify__body { padding: var(--s-6, 24px); }

.restock-notify__title {
  font: var(--w-semibold, 600) var(--t-h4, 18px)/1.4 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  color: var(--fg, #303133);
  margin: 0 0 var(--s-2, 8px);
}
.restock-notify__desc {
  font-size: var(--t-sm, 14px);
  color: var(--fg-subtle, #909399);
  margin: 0 0 var(--s-5, 20px);
}

.restock-notify__label {
  display: block;
  font-size: var(--t-sm, 14px);
  color: var(--fg-muted, #606266);
  margin-bottom: var(--s-2, 8px);
}
.restock-notify__input {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3, 12px);
  border: 1px solid var(--border, #dcdfe6);
  border-radius: var(--radius, 0px);
  background: var(--fill-100, #ffffff);
  color: var(--fg, #303133);
  font: var(--w-regular, 400) var(--t-sm, 14px)/1 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
}
.restock-notify__input:focus { outline: 2px solid var(--brand, #303133); outline-offset: -2px; }
.restock-notify__input[aria-invalid="true"] { border-color: var(--danger, #f56c6c); }

.restock-notify__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2, 8px);
  margin-top: var(--s-4, 16px);
  font-size: var(--t-sm, 14px);
  color: var(--fg-muted, #606266);
  cursor: pointer;
}
.restock-notify__consent input { margin-top: 3px; flex: none; }

.restock-notify__error {
  font-size: var(--t-xs, 14px);
  color: var(--danger, #f56c6c);
  margin: var(--s-2, 8px) 0 0;
}
.restock-notify [hidden] { display: none !important; }

.restock-notify__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3, 12px);
  margin-top: var(--s-6, 24px);
}
.restock-notify__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3, 12px) var(--s-6, 24px);
  border: 1px solid transparent;
  border-radius: var(--radius, 0px);
  font: var(--w-medium, 500) var(--t-sm, 14px)/1.4 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  letter-spacing: var(--ls-wide, 0.08em);
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.restock-notify__btn--primary { background: var(--brand, #303133); color: var(--brand-on, #ffffff); }
.restock-notify__btn--primary:hover { background: var(--brand-hover, #1a1b1d); }
.restock-notify__btn--primary:disabled { background: var(--fg-disabled, #c0c4cc); cursor: not-allowed; }
.restock-notify__btn--ghost {
  background: none;
  color: var(--fg, #303133);
  border-color: var(--border, #dcdfe6);
}
.restock-notify__btn--ghost:hover { background: var(--fill-200, #fafafa); }