/* ============================================================
   PDPA consent UI (markup comes from js/consent.js)
   ------------------------------------------------------------
   Standalone copy for pages that don't load css/style.css
   (the /blog articles). style.css and promo.css carry their own.
   ============================================================ */
.consent-banner .btn, .consent-modal .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 500; font-size: 0.88rem; text-decoration: none; }
.consent-banner .btn-primary, .consent-modal .btn-primary { background: linear-gradient(135deg, #d4af37, var(--gold, #ffd700)); color: #111; }
.consent-banner .btn-secondary, .consent-modal .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--text, #f4f4f5); border-color: rgba(255, 255, 255, 0.18); }
.consent-banner .btn-outline, .consent-modal .btn-outline { background: transparent; color: var(--muted, #a1a1aa); border-color: rgba(255, 255, 255, 0.18); }
.consent-banner { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 120%); width: min(1100px, calc(100% - 24px)); z-index: 9998; background: rgba(16, 16, 24, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.6); transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); }
.consent-banner.show { transform: translate(-50%, 0); }
.consent-inner { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 1.4rem; flex-wrap: wrap; }
.consent-text { flex: 1 1 340px; min-width: 240px; }
.consent-text h3 { color: var(--gold, #ffd700); font-size: 1rem; margin-bottom: 0.3rem; }
.consent-text p { font-size: 0.86rem; color: #d4d4d8; margin: 0; }
.consent-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.consent-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .3s; }
.consent-modal-overlay.show { opacity: 1; }
.consent-modal { background: var(--card, #18181b); color: var(--text, #f4f4f5); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 16px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.8rem; }
.consent-modal h3 { color: var(--gold, #ffd700); }
.consent-modal > p { font-size: 0.88rem; color: var(--muted, #a1a1aa); margin-bottom: 1rem; }
.consent-row { border-top: 1px solid var(--border, #27272a); padding: 0.9rem 0; }
.consent-row-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.3rem; }
.consent-row p { font-size: 0.84rem; color: var(--muted, #a1a1aa); padding-left: 3.5rem; margin: 0; }
.consent-tag { margin-left: auto; font-size: 0.7rem; color: var(--gold, #ffd700); border: 1px solid rgba(255, 215, 0, 0.3); padding: 2px 8px; border-radius: 999px; }
.consent-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.consent-switch input { opacity: 0; width: 0; height: 0; }
.consent-slider { position: absolute; cursor: pointer; inset: 0; background: #3a3a44; border-radius: 999px; transition: .3s; }
.consent-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.consent-switch input:checked + .consent-slider { background: linear-gradient(135deg, #d4af37, var(--gold, #ffd700)); }
.consent-switch input:checked + .consent-slider::before { transform: translateX(20px); }
.consent-switch input:disabled + .consent-slider { opacity: 0.6; cursor: not-allowed; }
.consent-modal .consent-actions { margin-top: 1.2rem; justify-content: flex-end; }
.consent-reopen { position: fixed; left: 18px; bottom: 18px; z-index: 9990; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 215, 0, 0.3); background: rgba(16, 16, 24, 0.9); color: var(--gold, #ffd700); font-size: 1.1rem; cursor: pointer; transition: transform .25s ease, border-color .25s ease; }
.consent-reopen:hover { transform: scale(1.08); border-color: var(--gold, #ffd700); }
@media (prefers-reduced-motion: reduce) {
  .consent-banner, .consent-modal-overlay, .consent-slider, .consent-slider::before, .consent-reopen { transition: none; }
}