/* ============================================================================
 * RexConsent 樣式（鼎綸保經 / rex1688.com）
 * 站台簡約風 · 支援手機 · 純 CSS 零依賴。
 * 配色取自站台既有 slate/indigo 調性（indigo #4F46E5 / slate 灰階 / 警示紅）。
 * 搭配 consent.js 使用。法律效力以後端 record_consent 為準（見 consent.js 檔頭）。
 * ==========================================================================*/

:root {
  --rexc-indigo: #4F46E5;
  --rexc-indigo-d: #4338CA;
  --rexc-ink: #1e293b;
  --rexc-slate: #475569;
  --rexc-muted: #64748b;
  --rexc-line: #E2E8F0;
  --rexc-bg-soft: #F8FAFC;
  --rexc-bg-tint: #EEF2FF;
  --rexc-red: #dc2626;
  --rexc-red-bg: #fef2f2;
  --rexc-red-line: #fecaca;
}

/* 鎖住背景捲動，避免遮罩下方表單可滑動 */
html.rexc-lock, html.rexc-lock body { overflow: hidden !important; }

.rexc-overlay {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  color: var(--rexc-ink);
  -webkit-text-size-adjust: 100%;
  animation: rexc-fade .18s ease both;
}
@keyframes rexc-fade { from { opacity: 0; } to { opacity: 1; } }

.rexc-modal {
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.30);
  overflow: hidden;
  animation: rexc-pop .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rexc-pop { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.rexc-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rexc-line);
  background: linear-gradient(180deg, var(--rexc-bg-tint), #fff);
}
.rexc-title {
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .01em;
  color: var(--rexc-indigo-d);
}

.rexc-body {
  padding: 16px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  font-size: 14px; line-height: 1.65;
}
.rexc-lead { margin: 0 0 14px; color: var(--rexc-slate); }
.rexc-lead strong { color: var(--rexc-ink); }

.rexc-sec { margin: 0 0 12px; }
.rexc-sec-h {
  font-size: 12.5px; font-weight: 700; color: var(--rexc-indigo);
  letter-spacing: .04em; margin-bottom: 4px;
}
.rexc-sec-b { color: var(--rexc-slate); }
.rexc-muted { color: var(--rexc-muted); margin: 0; font-size: 13px; }

.rexc-fields {
  margin: 4px 0 0; padding: 8px 10px 8px 26px;
  list-style: disc; background: var(--rexc-bg-soft);
  border: 1px solid var(--rexc-line); border-radius: 10px;
}
.rexc-fields li { margin: 2px 0; }

.rexc-link { color: var(--rexc-indigo); font-weight: 600; text-decoration: underline; }
.rexc-link:hover { color: var(--rexc-indigo-d); }

/* 特種個資（§6）獨立區塊 — 視覺上明顯與一般同意分離 */
.rexc-special {
  margin: 14px 0 4px; padding: 12px 14px;
  background: var(--rexc-red-bg);
  border: 1px solid var(--rexc-red-line);
  border-left: 4px solid var(--rexc-red);
  border-radius: 10px;
}
.rexc-special p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #7f1d1d; }
.rexc-special-tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--rexc-red);
  padding: 2px 9px; border-radius: 999px;
}

.rexc-consents { margin-top: 14px; }

.rexc-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; margin: 8px 0 0;
  border: 1px solid var(--rexc-line); border-radius: 10px;
  background: #fff; cursor: pointer;
  font-size: 13.5px; line-height: 1.55; color: var(--rexc-slate);
  transition: border-color .12s, background .12s;
}
.rexc-check:hover { border-color: #c7d2fe; background: var(--rexc-bg-soft); }
.rexc-check input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--rexc-indigo); cursor: pointer;
}
.rexc-check span strong { color: var(--rexc-ink); }
.rexc-check-special { border-color: var(--rexc-red-line); background: #fff; margin-top: 0; }
.rexc-check-special:hover { border-color: var(--rexc-red); background: var(--rexc-red-bg); }
.rexc-check-special input[type="checkbox"] { accent-color: var(--rexc-red); }

.rexc-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--rexc-line);
  background: var(--rexc-bg-soft);
}
.rexc-btn {
  appearance: none; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s, transform .05s;
}
.rexc-btn:active { transform: translateY(1px); }
.rexc-btn-ghost {
  background: #fff; color: var(--rexc-slate); border-color: var(--rexc-line);
}
.rexc-btn-ghost:hover { background: #fff; border-color: var(--rexc-muted); color: var(--rexc-ink); }
.rexc-btn-primary {
  background: var(--rexc-indigo); color: #fff;
}
.rexc-btn-primary:hover:not([disabled]) { background: var(--rexc-indigo-d); }
.rexc-btn-primary[disabled] { opacity: .45; cursor: not-allowed; }

/* 手機 — 全寬底部彈出風、加大觸控目標 */
@media (max-width: 560px) {
  .rexc-overlay { padding: 0; align-items: flex-end; }
  .rexc-modal {
    max-width: none; max-height: 92vh;
    border-radius: 16px 16px 0 0;
    animation: rexc-sheet .22s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes rexc-sheet { from { transform: translateY(100%); } to { transform: none; } }
  .rexc-head { padding: 16px 18px 12px; }
  .rexc-title { font-size: 17px; }
  .rexc-body { padding: 14px 18px; }
  .rexc-foot {
    flex-direction: column-reverse; gap: 8px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .rexc-btn { width: 100%; padding: 13px 18px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .rexc-overlay, .rexc-modal { animation: none !important; }
}
/* EOF */