/* Web Compliance Journal: banner skin for the OMNI web-consent kit (consent.js, same classes and
 * behaviour as every kit site). Site B's own editorial look: white paper, square corners, a double
 * rule like the masthead, Libre Franklin headings and small capitals, claret accent. Light only.
 * "Reject all" and "Accept all" share one style, so neither choice is more prominent. */
.cc-banner, .cc-dialog {
  --cc-paper: #ffffff;
  --cc-paper-2: #f6f4ef;
  --cc-ink: #191919;
  --cc-ink-2: #44423e;
  --cc-rule: #d9d5cc;
  --cc-accent: #7c1d2b;
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--cc-ink);
  background: var(--cc-paper);
  box-sizing: border-box;
}
.cc-banner *, .cc-dialog * { box-sizing: border-box; }
.cc-banner {
  position: fixed; z-index: 2147483000; left: 0; right: 0; bottom: 0;
  padding: 1.1rem clamp(1rem, 4vw, 2.75rem) 1.2rem;
  border-top: 4px double var(--cc-ink);
  box-shadow: 0 -10px 30px rgba(25, 25, 25, 0.08);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 2rem; align-items: center;
}
.cc-banner > .cc-title, .cc-banner > .cc-text { grid-column: 1; }
.cc-banner > .cc-actions { grid-column: 2; grid-row: 1 / span 2; }
.cc-title {
  margin: 0; padding-right: 2.5rem;
  font-family: 'Libre Franklin', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.005em;
}
.cc-banner .cc-title::before {
  content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.55rem; background: var(--cc-accent); vertical-align: 0.12em;
}
.cc-text { margin: 0; max-width: 68ch; font-size: 0.95rem; line-height: 1.55; color: var(--cc-ink-2); }
.cc-link { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 0.15em; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.cc-btn {
  min-height: 44px; min-width: 9.5rem; padding: 0.6rem 1.1rem; margin: 0;
  border: 1px solid var(--cc-ink); border-radius: 0; background: var(--cc-ink); color: var(--cc-paper);
  font-family: 'Libre Franklin', 'Segoe UI', system-ui, sans-serif; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.cc-btn:hover { background: var(--cc-accent); border-color: var(--cc-accent); }
.cc-btn[data-consent-action="settings"], .cc-btn[data-consent-action="save"] { background: var(--cc-paper); color: var(--cc-ink); }
.cc-btn[data-consent-action="settings"]:hover, .cc-btn[data-consent-action="save"]:hover { background: var(--cc-paper-2); color: var(--cc-ink); border-color: var(--cc-ink); }
.cc-btn:focus-visible, .cc-close:focus-visible, .cc-category input:focus-visible, .cc-link:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 2px; }
.cc-close {
  position: absolute; top: 0.6rem; right: 0.8rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--cc-ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cc-close:hover { color: var(--cc-accent); }
.cc-dialog {
  width: min(42rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow: auto; margin: auto;
  padding: 1.6rem 1.6rem 1.3rem; border: 1px solid var(--cc-ink); border-top: 4px double var(--cc-ink); border-radius: 0;
  box-shadow: 0 18px 50px rgba(25, 25, 25, 0.18);
}
.cc-dialog::backdrop { background: rgba(25, 25, 25, 0.45); }
.cc-dialog .cc-title { font-size: 1.35rem; margin-bottom: 0.6rem; }
.cc-dialog .cc-text { margin-bottom: 1.1rem; }
.cc-categories { margin: 0 0 1.2rem; border-top: 2px solid var(--cc-ink); }
.cc-category { padding: 0.85rem 0; border-bottom: 1px solid var(--cc-rule); }
.cc-category-head { display: flex; align-items: center; gap: 0.75rem; }
.cc-category-title { flex: 1; font-family: 'Libre Franklin', 'Segoe UI', system-ui, sans-serif; font-weight: 650; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-always { font-size: 0.8rem; color: var(--cc-accent); font-weight: 600; }
.cc-category-text, .cc-services { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--cc-ink-2); }
.cc-services { font-style: italic; }
.cc-category input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 2.6rem; height: 1.4rem; position: relative; cursor: pointer;
  border: 1px solid var(--cc-ink); border-radius: 0; background: var(--cc-paper); transition: background 0.15s;
}
.cc-category input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px); background: var(--cc-ink); transition: transform 0.15s;
}
.cc-category input[type="checkbox"]:checked { background: var(--cc-accent); border-color: var(--cc-accent); }
.cc-category input[type="checkbox"]:checked::after { background: var(--cc-paper); transform: translateX(1.2rem); }
.cc-category input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }
html:lang(el) .cc-title, html:lang(bg) .cc-title, html:lang(el) .cc-btn, html:lang(bg) .cc-btn, html:lang(el) .cc-category-title, html:lang(bg) .cc-category-title { font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; }
@media (max-width: 48rem) {
  .cc-banner { grid-template-columns: minmax(0, 1fr); }
  .cc-banner > .cc-actions { grid-column: 1; grid-row: auto; justify-content: stretch; }
  .cc-btn { flex: 1 1 8rem; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .cc-category input[type="checkbox"], .cc-category input[type="checkbox"]::after { transition: none; } }
@media print { .cc-banner, .cc-dialog { display: none !important; } }
