/* =============================================================================
 * consent.css — styling for consent.js
 * Themed entirely with CSS variables: restyle any site by overriding the vars,
 * never the rules. Two built-in themes via [data-cm-theme="dark"|"light"].
 * ========================================================================== */

/* ---- Theme variables (dark is the default) ---- */
.cm-root[data-cm-theme="dark"] {
  --cm-bg:        #14161a;
  --cm-fg:        #e8eaed;
  --cm-muted:     #9aa0a6;
  --cm-border:    #2a2e35;
  --cm-primary:   #3b82f6;   /* Accept */
  --cm-primary-fg:#ffffff;
  --cm-secondary-bg:     #23272e;  /* Reject / Preferences — equal prominence */
  --cm-secondary-fg:     #e8eaed;
  --cm-secondary-border: #3a3f47;
  --cm-link:      #6ea8ff;
  --cm-switch-off:#3a3f47;
  --cm-switch-on: #3b82f6;
  --cm-focus:     #8ab4f8;
  --cm-shadow:    0 -6px 24px rgba(0,0,0,.45);
}

.cm-root[data-cm-theme="light"] {
  --cm-bg:        #ffffff;
  --cm-fg:        #1f2328;
  --cm-muted:     #57606a;
  --cm-border:    #d0d7de;
  --cm-primary:   #1f6feb;
  --cm-primary-fg:#ffffff;
  --cm-secondary-bg:     #f3f4f6;
  --cm-secondary-fg:     #1f2328;
  --cm-secondary-border: #d0d7de;
  --cm-link:      #0969da;
  --cm-switch-off:#c7ccd1;
  --cm-switch-on: #1f6feb;
  --cm-focus:     #1f6feb;
  --cm-shadow:    0 -6px 24px rgba(0,0,0,.15);
}

/* ---- Container: fixed to the bottom, never blocks page scroll/content ---- */
.cm-root {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483000;           /* above typical page chrome, below nothing critical */
  display: flex;
  justify-content: center;
  padding: 12px;
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  pointer-events: none;          /* let clicks pass except on the panel itself */
}

.cm-panel {
  pointer-events: auto;
  width: 100%;
  max-width: 920px;
  background: var(--cm-bg);
  color: var(--cm-fg);
  border: 1px solid var(--cm-border);
  border-radius: 12px;
  box-shadow: var(--cm-shadow);
  padding: 16px 18px;
  box-sizing: border-box;
}

.cm-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.cm-message {
  margin: 0 0 12px;
  color: var(--cm-fg);
}

.cm-link {
  color: var(--cm-link);
  text-decoration: underline;
}

/* ---- Preferences rows ---- */
.cm-prefs {
  border-top: 1px solid var(--cm-border);
  border-bottom: 1px solid var(--cm-border);
  margin: 0 0 12px;
  padding: 4px 0;
}
.cm-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.cm-pref-row + .cm-pref-row { border-top: 1px solid var(--cm-border); }
.cm-pref-info { display: flex; flex-direction: column; gap: 2px; }
.cm-pref-label { font-weight: 600; }
.cm-pref-desc  { color: var(--cm-muted); font-size: 13px; }

/* ---- Toggle switch (a real <button role="switch">) ---- */
.cm-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--cm-switch-off);
  cursor: pointer;
  transition: background .15s ease;
  padding: 0;
}
.cm-switch[aria-checked="true"] { background: var(--cm-switch-on); }
.cm-switch[aria-disabled="true"] { cursor: not-allowed; opacity: .7; }
.cm-switch-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.cm-switch[aria-checked="true"] .cm-switch-knob { transform: translateX(20px); }

/* ---- Action buttons ---- */
.cm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.cm-btn {
  appearance: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  min-width: 110px;             /* Reject and Accept get equal visual weight */
}
.cm-btn-primary {
  background: var(--cm-primary);
  color: var(--cm-primary-fg);
  border-color: var(--cm-primary);
}
.cm-btn-secondary {
  background: var(--cm-secondary-bg);
  color: var(--cm-secondary-fg);
  border-color: var(--cm-secondary-border);
}
.cm-btn:hover { filter: brightness(1.08); }

/* ---- Visible keyboard focus for ALL interactive elements ---- */
.cm-btn:focus-visible,
.cm-switch:focus-visible,
.cm-link:focus-visible,
.cm-fallback-link:focus-visible {
  outline: 2px solid var(--cm-focus);
  outline-offset: 2px;
}

/* ---- Inline fallback shown where a rejected embed would be ---- */
.cm-fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed #888;
  border-radius: 8px;
  color: inherit;
  font-size: 14px;
}
.cm-fallback-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--cm-link, #1f6feb);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* ---- Small screens: stack buttons full width ---- */
@media (max-width: 560px) {
  .cm-actions { justify-content: stretch; }
  .cm-btn { flex: 1 1 auto; }
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cm-switch, .cm-switch-knob { transition: none; }
}