/* Cookie consent banner, preference center and embed placeholders.
   Uses the site theme tokens from style.css, with fallbacks so the component still
   renders on a site that doesn't define them. */

.dbc-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1090;
  background: var(--db-surface-raised, #13202c);
  color: var(--db-text, #cbd6e2);
  border-top: 1px solid var(--db-border-strong, #223446);
  box-shadow: var(--db-shadow-lg, 0 1rem 2rem rgba(0,0,0,.35));
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: 70vh;
  overflow-y: auto;
}
.dbc-banner[hidden], .dbc-overlay[hidden] { display: none !important; }
.dbc-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  gap: 16px 24px;
  align-items: center;
}
.dbc-banner-text { flex: 1 1 auto; min-width: 0; }
.dbc-banner-text p { margin: 0 0 6px; font-size: .925rem; }
.dbc-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--db-text-strong, #e9eef6);
}
.dbc-links { font-size: .875rem; }
.dbc-links a, .dbc-banner a, .dbc-dialog a { color: var(--db-accent-soft, #7aa7d6); }
.dbc-gpc { color: var(--db-premium-teal, #6ee7c8); }
.dbc-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

/* Accept and Reject share one style so neither is more prominent than the other. */
.dbc-btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--db-radius-sm, .375rem);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--db-transition-fast, .15s ease), border-color var(--db-transition-fast, .15s ease);
}
.dbc-btn-choice {
  background: var(--db-accent, #1f6feb);
  border: 1px solid var(--db-accent, #1f6feb);
  color: var(--db-on-accent, #fff);
}
.dbc-btn-choice:hover { background: var(--db-accent-hover, #1a5fce); border-color: var(--db-accent-hover, #1a5fce); }
.dbc-btn-secondary {
  background: transparent;
  border: 1px solid var(--db-accent-soft, #7aa7d6);
  color: var(--db-text-strong, #e9eef6);
}
.dbc-btn-secondary:hover { background: var(--db-accent-subtle, rgba(122, 167, 214, .12)); }
.dbc-btn:focus-visible, .dbc-close:focus-visible, .dbc-dialog a:focus-visible, .dbc-banner a:focus-visible,
.dbc-details summary:focus-visible, .dbc-switch input:focus-visible + .dbc-switch-ui {
  outline: 3px solid var(--db-accent-soft, #ffd166);
  outline-offset: 2px;
}

/* Keep the page's last lines (footer links) and the focused element visible above the
   banner (WCAG 2.4.11). --dbc-banner-h is the banner's measured height, set by consent-ui.js. */
html.dbc-banner-open { scroll-padding-bottom: var(--dbc-banner-h, 180px); }
html.dbc-banner-open body { padding-bottom: var(--dbc-banner-h, 180px); }
html.dbc-modal-open { overflow: hidden; }

/* ---- Preference center ---- */
.dbc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1095;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dbc-dialog {
  background: var(--db-surface, #0f141a);
  color: var(--db-text, #cbd6e2);
  border: 1px solid var(--db-border-strong, #223446);
  border-radius: var(--db-radius, .75rem);
  box-shadow: var(--db-shadow-lg, 0 1rem 2rem rgba(0,0,0,.35));
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.dbc-dialog:focus { outline: none; }
.dbc-dialog-head, .dbc-dialog-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--db-border, #1c2a36);
}
.dbc-dialog-head { justify-content: space-between; }
.dbc-dialog-head .dbc-title { margin: 0; font-size: 1.2rem; }
.dbc-dialog-foot {
  border-bottom: 0;
  border-top: 1px solid var(--db-border, #1c2a36);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.dbc-dialog-body { padding: 14px 16px; overflow-y: auto; }
.dbc-dialog-body > p { font-size: .925rem; }
.dbc-close {
  background: transparent;
  border: 0;
  color: var(--db-text-strong, #e9eef6);
  font-size: 1.75rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--db-radius-sm, .375rem);
  cursor: pointer;
}
.dbc-close:hover { background: var(--db-surface-hover, rgba(255, 255, 255, .08)); }
.dbc-cat {
  border: 1px solid var(--db-border, #1c2a36);
  border-radius: var(--db-radius-sm, .375rem);
  background: var(--db-surface-alt, #0d151b);
  padding: 12px;
  margin-bottom: 10px;
}
.dbc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dbc-cat-label { font-weight: 700; color: var(--db-text-strong, #e9eef6); cursor: pointer; }
.dbc-cat-desc { margin: 6px 0 0; font-size: .875rem; color: var(--db-text-muted, #9fb3c8); }
.dbc-always { font-size: .85rem; font-weight: 600; color: var(--db-premium-teal, #6ee7c8); }
.dbc-receipt { font-size: .8rem; color: var(--db-text-muted, #9fb3c8); }

.dbc-switch { position: relative; display: inline-flex; flex: 0 0 auto; }
.dbc-switch input {
  position: absolute;
  opacity: 0;
  width: 52px;
  height: 30px;
  margin: 0;
  cursor: pointer;
}
.dbc-switch input:disabled { cursor: not-allowed; }
.dbc-switch-ui {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: var(--db-surface-raised, #3a4a5a);
  border: 1px solid var(--db-border-strong, #5b6f83);
  position: relative;
  transition: background-color var(--db-transition-fast, .15s ease);
  pointer-events: none;
}
.dbc-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--db-text-muted, #fff);
  transition: transform var(--db-transition-fast, .15s ease), background-color var(--db-transition-fast, .15s ease);
}
.dbc-switch input:checked + .dbc-switch-ui { background: var(--db-accent, #1f6feb); border-color: var(--db-accent, #1f6feb); }
.dbc-switch input:checked + .dbc-switch-ui::after { transform: translateX(22px); background: var(--db-on-accent, #fff); }
.dbc-switch input:disabled + .dbc-switch-ui { opacity: .45; }

.dbc-details { margin-top: 8px; font-size: .85rem; }
.dbc-details summary { cursor: pointer; color: var(--db-accent-soft, #7aa7d6); padding: 4px 0; min-height: 24px; }
.dbc-table-wrap { overflow-x: auto; margin-top: 6px; }
.dbc-table { width: 100%; border-collapse: collapse; }
.dbc-table th, .dbc-table td {
  text-align: left;
  vertical-align: top;
  padding: 6px 8px;
  border-top: 1px solid var(--db-border, #1c2a36);
}
.dbc-table thead th { color: var(--db-text-strong, #e9eef6); border-top: 0; }
.dbc-table tbody th { font-weight: 600; word-break: break-word; }

.dbc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---- Embed placeholders (no external request until allowed) ---- */
.consent-embed {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--db-surface-alt, #10161d), var(--db-surface-raised, #1a2633));
  color: var(--db-text, #cbd6e2);
  border: 1px solid var(--db-border-strong, #223446);
  border-radius: var(--db-radius-sm, .375rem);
  overflow: hidden;
}
.consent-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.consent-embed-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}
.consent-embed-inner[hidden] { display: none; }
.consent-embed-inner .bi-youtube { font-size: 2.25rem; color: #ff4e45; }
.consent-embed-inner p { margin: 0; max-width: 460px; font-size: .875rem; }
.consent-embed-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.consent-embed-link { font-size: .8rem; }
/* Cookie Policy status line: hidden until consent-ui.js fills it in. */
[data-consent-status]:empty { display: none; }
/* Small BBCode embeds (300x169) — keep the placeholder compact. */
.consent-embed-wrap.consent-embed-small { width: 300px; max-width: 100%; margin: 0 auto; }

@media (max-width: 767.98px) {
  .dbc-banner-inner { flex-direction: column; align-items: stretch; }
  .dbc-actions { flex-wrap: wrap; }
  .dbc-actions .dbc-btn { flex: 1 1 calc(50% - 4px); }
  .dbc-actions .dbc-btn-secondary { flex-basis: 100%; }
  .dbc-dialog-foot .dbc-btn { flex: 1 1 100%; }
  .dbc-overlay { padding: 0; align-items: stretch; }
  .dbc-dialog { max-height: 100vh; border-radius: 0; max-width: none; }
}