@charset "UTF-8";
/* Consent UI Styles */
:root {
  --consent-bg: #0a0f1af2;
  --consent-panel-bg: #ffffff;
  --consent-border: #d6e3ed;
  --consent-focus: var(--brand-primary, #0aa0ff);
}
.consent-banner { position:fixed; inset:auto 0 0 0; background: var(--consent-bg); color:#fff; z-index:1200; padding: clamp(.75rem,1.5vw,1.25rem); box-shadow: 0 -4px 12px rgba(0,0,0,.25); font-size:.95rem; }
.consent-banner-inner { max-width: var(--max-width,72rem); margin:0 auto; display:grid; gap:.9rem; }
.consent-banner h2 { margin:0; font-size:1.05rem; letter-spacing:.4px; }
.consent-banner-text { margin:0; line-height:1.4; }
.consent-banner a { color: var(--brand-accent,#00d4a6); text-decoration:underline; }
.consent-banner-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.consent-banner .settings-btn { background:#fff; color:var(--brand-dark); border:1px solid #fff; }
.consent-banner .settings-btn:hover { background: var(--brand-light,#f5faff); }

/* Modal */
.consent-modal { position:fixed; inset:0; background:rgba(10,15,26,.72); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; z-index:1300; padding:1.5rem; }
.consent-modal[hidden] { display:none !important; }
.consent-modal-panel { width:min(760px,100%); background: var(--consent-panel-bg); color: var(--text-color,#0a0f1a); border:1px solid var(--consent-border); border-radius:16px; box-shadow:0 10px 30px -5px rgba(0,0,0,.3); position:relative; display:flex; flex-direction:column; max-height:calc(100vh - 3rem); animation: fadeIn .35s ease; }
.consent-modal-head { padding:1.25rem 1.5rem .75rem; }
.consent-modal-head h2 { margin:0 0 .35rem; font-size:1.35rem; }
.consent-modal-head p { margin:0; font-size:.85rem; opacity:.8; }
.consent-form { overflow:auto; padding:.5rem 1.5rem 1.5rem; display:grid; gap:1.25rem; }
.consent-group { border:1px solid var(--consent-border); border-radius:12px; padding:.9rem 1rem 1rem; background:#f9fbfd; }
.consent-group legend { font-weight:600; padding:0 .25rem; }
.consent-desc { margin:.25rem 0 .75rem; font-size:.8rem; opacity:.85; }
.toggle { display:flex; align-items:center; gap:.65rem; cursor:pointer; user-select:none; font-size:.85rem; }
.toggle.disabled { cursor:not-allowed; opacity:.55; }
.toggle input { position:absolute; opacity:0; pointer-events:none; }
.toggle-display { width:38px; height:22px; background:#c7d4df; border-radius:22px; position:relative; transition:160ms ease; box-shadow: inset 0 0 0 2px rgba(0,0,0,.05); }
.toggle-display::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:160ms ease; }
.toggle input:checked + .toggle-display { background: var(--brand-primary,#0aa0ff); }
.toggle input:checked + .toggle-display::after { transform: translateX(16px); }
.toggle-label { font-weight:500; }
.pulse { animation: pulseOutline 1.2s ease-in-out 0s 2; }
@keyframes pulseOutline { 0%{ box-shadow:0 0 0 0 var(--consent-focus); } 70%{ box-shadow:0 0 0 6px rgba(10,160,255,0); } 100%{ box-shadow:0 0 0 0 rgba(10,160,255,0); } }
.consent-modal-actions { display:flex; justify-content:flex-end; gap:.75rem; padding-top:.5rem; }
.consent-modal-close { position:absolute; top:.4rem; right:.6rem; width:38px; height:38px; border:none; background:transparent; color:#667; font-size:1.6rem; line-height:1; cursor:pointer; border-radius:8px; }
.consent-modal-close:hover, .consent-modal-close:focus-visible { background:#eef3f6; outline:none; }
.link-btn { background:none; border:none; padding:0; font:inherit; color:var(--brand-primary); text-decoration:underline; cursor:pointer; }
.link-btn:hover, .link-btn:focus { text-decoration:none; }

/* Focus states */
.consent-banner button:focus-visible, .consent-modal button:focus-visible, .toggle input:focus-visible + .toggle-display { outline:2px solid var(--consent-focus); outline-offset:2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .consent-modal-panel { animation:none; } .toggle-display, .toggle-display::after { transition:none; } }

@keyframes fadeIn { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:none;} }

/* Utilities */
[hidden] { display:none !important; }
