/* ===========================================
   DSGVO Cookie Consent – Frontend Banner
   CSS Custom Properties gesetzt via PHP
   =========================================== */

:root {
  --dcc-banner-bg:       #1e1e2e;
  --dcc-banner-text:     #e2e8f0;
  --dcc-primary:         #6366f1;
  --dcc-link-color:      #8b8ff5;
  --dcc-btn-acc-bg:      #6366f1;
  --dcc-btn-acc-text:    #ffffff;
  --dcc-btn-save-bg:     #6366f1;
  --dcc-btn-save-text:   #ffffff;
  --dcc-btn-cust-bg:     #2a2a40;
  --dcc-btn-cust-text:   #e2e8f0;
  --dcc-btn-cust-border: #4a4a6e;
  --dcc-btn-rej-bg:      #2a2a40;
  --dcc-btn-rej-text:    #b0b8d0;
  --dcc-btn-rej-border:  #3a3a58;
  --dcc-cat-bg:          #252538;
  --dcc-cat-border:      #3a3a58;
  --dcc-overlay-bg:      #000000;
  --dcc-overlay-opacity: 0.6;
  --dcc-reopen-bg:       #1e1e2e;
  --dcc-reopen-border:   #4a4a6e;
  --dcc-radius:          14px;
}

#dcc-root *, #dcc-root *::before, #dcc-root *::after { box-sizing: border-box; }

/* ── Overlay ───────────────────────────────────── */
.dcc-overlay {
  position: fixed; inset: 0; z-index: 999997;
  background: var(--dcc-overlay-bg);
  opacity: var(--dcc-overlay-opacity);
  animation: dcc-fade-in .3s forwards;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ── Base banner ───────────────────────────────── */
.dcc-banner {
  position: fixed; z-index: 999998;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  background: var(--dcc-banner-bg);
  color:      var(--dcc-banner-text);
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
}

/* ── Position: Bottom Bar ──────────────────────── */
.dcc-banner.dcc-pos-bottom-bar {
  bottom: 0; left: 0; right: 0;
  border-radius: var(--dcc-radius) var(--dcc-radius) 0 0;
  transform: translateY(100%);
  animation: dcc-slide-up .35s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── Position: Center Modal ────────────────────── */
.dcc-banner.dcc-pos-center-modal {
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.92);
  opacity: 0;
  width: min(600px, calc(100vw - 32px));
  max-height: 90vh; overflow-y: auto;
  border-radius: var(--dcc-radius);
  animation: dcc-modal-in .3s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── Position: Bottom corners ──────────────────── */
.dcc-banner.dcc-pos-bottom-left,
.dcc-banner.dcc-pos-bottom-right {
  bottom: 20px;
  width: min(420px, calc(100vw - 32px));
  border-radius: var(--dcc-radius);
  opacity: 0;
  transform: translateY(120%) scale(.95);
  animation: dcc-slide-corner .35s cubic-bezier(.16,1,.3,1) forwards;
}
.dcc-banner.dcc-pos-bottom-left  { left:  20px; }
.dcc-banner.dcc-pos-bottom-right { right: 20px; }

/* ── Inner ─────────────────────────────────────── */
.dcc-inner { padding: 24px 28px; }

/* ── Header ────────────────────────────────────── */
.dcc-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.dcc-banner-title { font-size: 17px; font-weight: 700; color: var(--dcc-banner-text); margin: 0; }

/* ── Description ───────────────────────────────── */
.dcc-desc { color: var(--dcc-banner-text); opacity: .75; font-size: 13px; margin: 0 0 18px; }
.dcc-links { margin-top: 6px; font-size: 12px; }
.dcc-links a { color: var(--dcc-link-color); text-decoration: none; }
.dcc-links a:hover { text-decoration: underline; }
.dcc-links span { margin: 0 5px; opacity: .4; }

/* ── Action buttons ────────────────────────────── */
.dcc-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.dcc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: calc(var(--dcc-radius) * 0.65);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: filter .15s, transform .1s;
  white-space: nowrap; font-family: inherit;
}

/* Accept all — fully free colors */
.dcc-btn-primary {
  background: var(--dcc-btn-acc-bg);
  color:      var(--dcc-btn-acc-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.dcc-btn-primary:hover   { filter: brightness(1.1); transform: translateY(-1px); }

/* Auswahl speichern — eigene Farbe, unabhängig von "Alle akzeptieren" */
.dcc-btn-save {
  background: var(--dcc-btn-save-bg);
  color:      var(--dcc-btn-save-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.dcc-btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Customize */
.dcc-btn-secondary {
  background:    var(--dcc-btn-cust-bg);
  color:         var(--dcc-btn-cust-text);
  border: 1.5px solid var(--dcc-btn-cust-border);
}
.dcc-btn-secondary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Reject / necessary only */
.dcc-btn-reject {
  background:    var(--dcc-btn-rej-bg);
  color:         var(--dcc-btn-rej-text);
  border: 1.5px solid var(--dcc-btn-rej-border);
}
.dcc-btn-reject:hover    { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Details toggle ────────────────────────────── */
.dcc-details-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--dcc-link-color);
  font-size: 12px; font-weight: 600; padding: 0;
  margin-top: 13px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
}
.dcc-details-toggle:hover { text-decoration: underline; }
.dcc-chevron { transition: transform .2s; }
.dcc-details-toggle.open .dcc-chevron { transform: rotate(180deg); }

/* ── Details panel ─────────────────────────────── */
.dcc-details-panel { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1); }
.dcc-details-panel.open { max-height: 1200px; }

.dcc-categories { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; }

/* ── Category item ─────────────────────────────── */
.dcc-category {
  border-radius: 9px;
  border: 1px solid var(--dcc-cat-border);
  background: var(--dcc-cat-bg);
  overflow: hidden;
}
.dcc-cat-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; cursor: pointer;
  transition: filter .15s;
}
.dcc-cat-row:hover { filter: brightness(1.05); }

.dcc-cat-info { flex: 1; min-width: 0; }
.dcc-cat-name { font-weight: 600; font-size: 13px; color: var(--dcc-banner-text); }
.dcc-cat-desc { font-size: 12px; color: var(--dcc-banner-text); opacity: .6; margin-top: 2px; }

/* Toggle switch — uses accent color */
.dcc-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.dcc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.dcc-switch-track {
  position: absolute; inset: 0;
  background: rgba(128,128,128,.35);
  border-radius: 24px; transition: background .2s; cursor: pointer;
}
.dcc-switch-track::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.dcc-switch input:checked + .dcc-switch-track { background: var(--dcc-primary); }
.dcc-switch input:checked + .dcc-switch-track::before { transform: translateX(18px); }
.dcc-switch input:disabled + .dcc-switch-track { opacity: .5; cursor: not-allowed; }

.dcc-always-active {
  font-size: 11px; font-weight: 600;
  color: var(--dcc-primary);
  background: rgba(128,128,255,.12);
  padding: 3px 9px; border-radius: 20px; flex-shrink: 0;
}

.dcc-cat-arrow { color: var(--dcc-banner-text); opacity: .35; flex-shrink: 0; transition: transform .2s; }
.dcc-category.open .dcc-cat-arrow { transform: rotate(90deg); }

/* ── Cookie table inside category ──────────────── */
.dcc-cookie-details {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  border-top: 1px solid var(--dcc-cat-border);
}
.dcc-category.open .dcc-cookie-details { max-height: 500px; }
.dcc-cookie-details-inner { padding: 2px 15px 14px; }
.dcc-cookie-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 10px; }
.dcc-cookie-tbl th { text-align: left; padding: 4px 8px; color: var(--dcc-banner-text); opacity: .45; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.dcc-cookie-tbl td { padding: 5px 8px; color: var(--dcc-banner-text); opacity: .8; border-top: 1px solid rgba(128,128,128,.1); }
.dcc-cookie-tbl td:first-child { font-family: 'SF Mono', 'Fira Code', monospace; opacity: 1; }

/* ── Save row ───────────────────────────────────── */
.dcc-save-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(128,128,128,.15); }

/* ── Reopen button ─────────────────────────────── */
.dcc-reopen {
  position: fixed; z-index: 999996;
  background:   var(--dcc-reopen-bg);
  border: 1.5px solid var(--dcc-reopen-border);
  color:        var(--dcc-banner-text);
  border-radius: 50%; width: 48px; height: 48px;
  cursor: pointer; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
}
.dcc-reopen:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.dcc-reopen.dcc-pos-bottom-right { bottom: 20px; right: 20px; }
.dcc-reopen.dcc-pos-bottom-left  { bottom: 20px; left:  20px; }

/* ── Animations ────────────────────────────────── */
@keyframes dcc-fade-in    { from { opacity: 0; } to { opacity: var(--dcc-overlay-opacity); } }
@keyframes dcc-slide-up   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes dcc-modal-in   { from { transform: translate(-50%,-50%) scale(.92); opacity: 0; }
                             to   { transform: translate(-50%,-50%) scale(1);   opacity: 1; } }
@keyframes dcc-slide-corner { from { transform: translateY(120%) scale(.95); opacity: 0; }
                               to   { transform: translateY(0)     scale(1);   opacity: 1; } }

/* ── Exit animation ────────────────────────────── */
.dcc-banner.dcc-hiding {
  animation: none !important;
  transition: opacity .25s, transform .25s !important;
  opacity: 0 !important;
}
.dcc-banner.dcc-pos-bottom-bar.dcc-hiding { transform: translateY(100%) !important; }
.dcc-banner.dcc-pos-center-modal.dcc-hiding { transform: translate(-50%,-50%) scale(.92) !important; }
.dcc-banner.dcc-pos-bottom-left.dcc-hiding,
.dcc-banner.dcc-pos-bottom-right.dcc-hiding { transform: translateY(40px) scale(.95) !important; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 600px) {
  .dcc-inner { padding: 18px 16px; }
  .dcc-actions { flex-direction: column; }
  .dcc-btn { width: 100%; }
  .dcc-banner.dcc-pos-bottom-left,
  .dcc-banner.dcc-pos-bottom-right {
    bottom: 0; left: 0; right: 0; width: 100%;
    border-radius: var(--dcc-radius) var(--dcc-radius) 0 0;
  }
}

/* ── Font sizes from settings ──────────────────── */
:root {
  --dcc-fs-title: 17px;
  --dcc-fs-desc:  13px;
  --dcc-fs-btn:   13px;
  --dcc-fs-cat:   13px;
}
.dcc-banner-title  { font-size: var(--dcc-fs-title) !important; }
.dcc-desc          { font-size: var(--dcc-fs-desc)  !important; }
.dcc-btn           { font-size: var(--dcc-fs-btn)   !important; }
.dcc-cat-name      { font-size: var(--dcc-fs-cat)   !important; }

/* ── Font family from settings ─────────────────── */
:root { --dcc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.dcc-banner { font-family: var(--dcc-font-family) !important; }

/* ── Leere Kategorie: kein-Cookie-Hinweis ──────── */
.dcc-no-cookies {
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--dcc-banner-text);
  opacity: .65;
}
.dcc-no-cookies strong {
  font-weight: 700;
  opacity: 1;
}

/* Inline-Hinweis bei leerer Kategorie */
.dcc-cat-no-cookies {
  margin-top: 8px;
}
.dcc-no-cookies-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(128,128,128,.18);
  color: var(--dcc-banner-text);
  opacity: .85;
  letter-spacing: .01em;
}