/*
 * cookie-consent-generator.css — per-tool styles for the form option rows and
 * the live banner preview. Tokens only; theme-aware; no inline styles (CSP).
 * Loaded automatically by layout.php when this file exists.
 */

/* --- Two-column field pairing (accent + button style) --- */
.cc-col { flex: 1 1 180px; min-width: 160px; }

/* --- Category option rows (mirrors the text-cleaner option list) --- */
.cc-cats-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.cc-cats { display: flex; flex-direction: column; gap: 0; }
.cc-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
}
.cc-opt:last-child { border-bottom: 0; }
.cc-opt input {
  margin-top: 3px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--blue-600);
  cursor: pointer;
}
.cc-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-opt-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font: 500 14px/1.4 var(--font-sans);
  color: var(--text-primary);
}
.cc-opt-hint { font-size: 12px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.cc-opt-locked { opacity: .7; cursor: default; }
.cc-opt-locked input { cursor: not-allowed; }

/* --- Accent colour control --- */
.cc-color { display: flex; align-items: center; gap: var(--space-2); }
.cc-color input[type="color"] {
  width: 46px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.cc-color output { font-size: 13px; color: var(--text-secondary); }

/* =========================================================================
   Live preview — a mini "browser window" with the banner drawn from settings.
   Accent is driven by --cc-accent / --cc-ink set on the stage via the CSSOM.
   ========================================================================= */
.cc-stage {
  --cc-accent: #2563eb;
  --cc-ink: #ffffff;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken, var(--neutral-50));
}
.cc-stage__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--neutral-300); flex: none; }
.cc-stage__url {
  flex: 1 1 auto;
  height: 16px;
  margin-left: 8px;
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  max-width: 220px;
}
.cc-stage__body {
  position: relative;
  min-height: 240px;
  padding: 16px;
}
.cc-skel { height: 10px; border-radius: var(--radius-full); background: var(--neutral-200); margin-bottom: 12px; }
.cc-skel--sm { width: 40%; }
.cc-skel--md { width: 68%; }
.cc-skel--lg { width: 90%; }

/* Banner root positions itself within the stage body. */
.cc-bn { position: absolute; z-index: 2; }
.cc-bn__panel { background: var(--surface); color: var(--neutral-800); box-shadow: var(--shadow-lg); }
.cc-bn__title { margin: 0 0 4px; font: 700 14px/1.3 var(--font-sans); color: var(--text-primary); }
.cc-bn__msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--neutral-700);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.cc-bn__msg a { color: var(--cc-accent); text-decoration: underline; }

.cc-bn__prefs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cc-bn__opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-700); }
.cc-bn__opt input { width: 15px; height: 15px; accent-color: var(--cc-accent); flex: none; }

.cc-bn__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cc-btn {
  font: 600 13px/1 var(--font-sans);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: default;
}
.cc-btn--accept { background: var(--cc-accent); color: var(--cc-ink); border-color: var(--cc-accent); }
.cc-btn--reject,
.cc-btn--manage { background: var(--surface); color: var(--neutral-700); border-color: var(--neutral-300); }

/* Position: bottom bar */
.cc-bn--bar { left: 0; right: 0; bottom: 0; }
.cc-bn--bar .cc-bn__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.cc-bn--bar .cc-bn__content { flex: 1 1 220px; min-width: 0; }
.cc-bn--bar .cc-bn__actions { margin-top: 0; }
.cc-bn--bar .cc-bn__prefs { flex-basis: 100%; }

/* Position: bottom-left box */
.cc-bn--box { left: 16px; bottom: 16px; width: min(280px, calc(100% - 32px)); }
.cc-bn--box .cc-bn__panel { border-radius: var(--radius-lg); padding: 16px; }

/* Position: center modal */
.cc-bn--modal {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .45);
}
.cc-bn--modal .cc-bn__panel { border-radius: var(--radius-lg); padding: 18px; max-width: 320px; width: 100%; }

/* Button style modifiers */
.cc-bn--outline .cc-btn--accept { background: transparent; color: var(--cc-accent); }
.cc-bn--pill .cc-btn { border-radius: var(--radius-full); }

/* Preview caption */
.cc-preview-caption {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.cc-preview-caption .icon { flex: none; margin-top: 1px; }