/* =========================================================
   oheim – Complianz Styles (Plugin)
   Datei: assets/css/complianz.css
   Zweck:
   - nutzt Theme-Variablen (--o-*) wenn vorhanden
   - hat eigene Fallbacks über Alias-Tokens (--c-*)
   ========================================================= */

/* =========================================================
   0) Alias-Tokens (Fallbacks bündeln)
   ========================================================= */
:root{
  /* Colors */
  --c-bg: var(--o-bg, #420d00);
  --c-text: var(--o-text, #FFF4E0);
  --c-text-soft: var(--o-text-soft, #FFF8EB);
  --c-accent: var(--o-accent, #FFC700);
  --c-accent-soft: var(--o-accent-soft, #FFE38A);

  /* Borders / surfaces / shadows */
  --c-border: var(--o-border, rgba(255,244,224,.18));
  --c-border-strong: var(--o-border-strong, rgba(255,244,224,.30));
  --c-surface: var(--o-surface, rgba(255,244,224,.05));
  --c-shadow-1: var(--o-shadow-1, 0 10px 30px rgba(0,0,0,.40));
  --c-shadow-2: var(--o-shadow-2, 0 18px 40px rgba(0,0,0,.45));

  /* Radius / spacing */
  --c-radius-l: var(--o-radius-l, 12px);
  --c-radius-pill: var(--o-radius-pill, 999px);
  --c-space-4: var(--o-space-4, 16px);
  --c-space-5: var(--o-space-5, 24px);

  /* Typography */
  --c-font: var(--o-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --c-fw-body: var(--o-fw-body, 400);
  --c-fw-ui: var(--o-fw-ui, 500);
  --c-fw-head: var(--o-fw-head, 700);
  --c-leading-body: var(--o-leading-body, 1.4);
  --c-leading-compact: var(--o-leading-compact, 1.0);

  /* Common UI surfaces */
  --c-panel: rgba(255,244,224,.06);
  --c-head: rgba(255,244,224,.10);
  --c-head-open: rgba(255,244,224,.14);
  --c-sep: rgba(255,244,224,.10);
  --c-inset: rgba(0,0,0,.14);
}

/* =========================================================
   1) Shared building blocks (cards / headerbands / inset)
   ========================================================= */

/* Card container (used by cookies overview + categories) */
#cmplz-cookies-overview details.cmplz-dropdown,
.cmplz-categories details.cmplz-category{
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-l);
  background: var(--c-panel);
  box-shadow: var(--c-shadow-1);
  overflow: hidden;
  margin: 0 0 var(--c-space-4) 0;
}

/* Standard-Markierungen der Summary entfernen */
#cmplz-cookies-overview summary,
.cmplz-categories summary{
  list-style: none;
}
#cmplz-cookies-overview summary::-webkit-details-marker,
.cmplz-categories summary::-webkit-details-marker{
  display: none;
}
#cmplz-cookies-overview details > summary::marker,
.cmplz-categories details > summary::marker{
  content: "";
}

/* Headerband surface */
#cmplz-cookies-overview .cmplz-service-header > div,
.cmplz-categories .cmplz-category-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--c-head);
  border-bottom: 1px solid var(--c-sep);
}
#cmplz-cookies-overview details[open] .cmplz-service-header > div,
.cmplz-categories details[open] .cmplz-category-header{
  background: var(--c-head-open);
}

/* Title style (left) */
#cmplz-cookies-overview .cmplz-service-header h3,
.cmplz-categories .cmplz-category-title{
  margin: 0;
  font-weight: var(--c-fw-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
}
#cmplz-cookies-overview .cmplz-service-header h3{ font-size: 1.15rem; }
.cmplz-categories .cmplz-category-title{ font-size: 1.05rem; }

/* Right-aligned status area */
#cmplz-cookies-overview .cmplz-service-header p,
.cmplz-categories .cmplz-always-active{
  margin-left: auto;
  color: var(--c-text);
  font-weight: var(--c-fw-ui);
  letter-spacing: .04em;
  opacity: .9;
}

/* Icon color (chevron svg) */
.cmplz-categories .cmplz-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  opacity: .9;
}
.cmplz-categories .cmplz-icon svg{ fill: currentColor; }

/* Inset content surface (used for “body” panels) */
#cmplz-cookies-overview .cookies-per-purpose,
.cmplz-categories .cmplz-description{
  background: var(--c-inset);
  color: var(--c-text-soft);
}

/* Links: nur innerhalb von Complianz-UI/Dokumenten (nicht global) */
.cmplz-cookiebanner a,
.cmplz-links .cmplz-documents a,
#cmplz-cookies-overview a,
.cmplz-document a,
.cmplz-cookie-statement a,
.cmplz-document .cmplz-categories a,
.cmplz-cookie-statement .cmplz-categories a{
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Checkbox color */
.cmplz-cookiebanner input[type="checkbox"],
.cmplz-document input[type="checkbox"],
.cmplz-cookie-statement input[type="checkbox"],
.cmplz-categories input[type="checkbox"]{
  accent-color: var(--c-accent);
}

/* =========================================================
   2) Cookie Banner (Popup)
   ========================================================= */
.cmplz-cookiebanner{
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-l) !important;
  box-shadow: var(--c-shadow-2) !important;
  font-family: var(--c-font);
}

.cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-footer{
  padding-left: var(--c-space-5) !important;
  padding-right: var(--c-space-5) !important;
}

.cmplz-cookiebanner .cmplz-logo{
  max-height: 38px !important;
  width: auto !important;
  opacity: .95 !important;
}

.cmplz-cookiebanner .cmplz-title{
  color: var(--c-accent-soft) !important;
  font-weight: var(--c-fw-head) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.cmplz-cookiebanner .cmplz-close{
  color: var(--c-text) !important;
  opacity: .85 !important;
}
.cmplz-cookiebanner .cmplz-close:hover{
  opacity: 1 !important;
  color: var(--c-accent) !important;
}

.cmplz-cookiebanner .cmplz-message{
  color: var(--c-text-soft) !important;
  font-weight: var(--c-fw-body) !important;
  line-height: 1.6 !important;
}

/* Category separators inside banner */
.cmplz-cookiebanner .cmplz-category{
  border-top: 1px solid var(--c-border) !important;
}
.cmplz-cookiebanner .cmplz-category-title{
  color: var(--c-text) !important;
  font-weight: var(--c-fw-ui) !important;
  letter-spacing: .04em !important;
}

/* Buttons */
.cmplz-buttons{ gap: 10px !important; }

.cmplz-buttons .cmplz-btn{
  background: transparent !important;
  color: var(--c-accent) !important;
  border: 2px solid var(--c-accent) !important;
  border-radius: var(--c-radius-pill) !important;
  font-family: var(--c-font) !important;
  font-weight: var(--c-fw-ui) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  box-shadow: none !important;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease !important;
}
.cmplz-buttons .cmplz-btn:hover{
  background: var(--c-accent) !important;
  color: var(--c-bg) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.45) !important;
}

/* Button roles */
.cmplz-btn.cmplz-accept,
.cmplz-btn.cmplz-accept-all{
  background: var(--c-accent) !important;
  color: var(--c-bg) !important;
}
.cmplz-btn.cmplz-accept:hover,
.cmplz-btn.cmplz-accept-all:hover{ opacity: .95 !important; }

.cmplz-btn.cmplz-deny,
.cmplz-btn.cmplz-deny-all{
  background: transparent !important;
  color: var(--c-text) !important;
  border-color: var(--c-text) !important;
}
.cmplz-btn.cmplz-deny:hover,
.cmplz-btn.cmplz-deny-all:hover{
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}

.cmplz-btn.cmplz-save-preferences,
.cmplz-btn.cmplz-view-preferences{
  background: transparent !important;
  color: var(--c-text) !important;
  border-color: var(--c-border-strong) !important;
}
.cmplz-btn.cmplz-save-preferences:hover,
.cmplz-btn.cmplz-view-preferences:hover{
  border-color: var(--c-text) !important;
  background: rgba(255,244,224,.08) !important;
}

/* Manage consent tab */
#cmplz-manage-consent .cmplz-manage-consent{
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-pill) !important;
  box-shadow: var(--c-shadow-1) !important;
}
#cmplz-manage-consent .cmplz-manage-consent:hover{
  border-color: var(--c-accent) !important;
}

/* Overlay / blocked content / per-service button */
.cmplz-soft-cookiewall{ background: rgba(0,0,0,.55) !important; }

.cmplz-blocked-content-container .cmplz-blocked-content-notice,
.cmplz-blocked-content-notice{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-l) !important;
  color: var(--c-text) !important;
}

button.cmplz-accept-service{
  background: var(--c-accent) !important;
  color: var(--c-bg) !important;
  border: 2px solid var(--c-accent) !important;
  border-radius: var(--c-radius-pill) !important;
  font-family: var(--c-font) !important;
  font-weight: var(--c-fw-ui) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
}
button.cmplz-accept-service:hover{ opacity: .95 !important; }

/* AMP notice */
#cmplz-consent-ui,
#cmplz-post-consent-ui{
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-l) !important;
  box-shadow: var(--c-shadow-2) !important;
}
#cmplz-consent-ui .cmplz-consent-message{ color: var(--c-text-soft) !important; }
#cmplz-consent-ui button,
#cmplz-post-consent-ui button{ border-radius: var(--c-radius-pill) !important; }

/* =========================================================
   3) Documents (Cookie-Richtlinie / Cookie-Statement)
   ========================================================= */
.cmplz-document,
.cmplz-cookie-statement{
  color: var(--c-text);
  font-family: var(--c-font);
  line-height: var(--c-leading-body);
}

/* Document accordions */
.cmplz-document details,
.cmplz-cookie-statement details{
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 14px 0;
  border: 1px solid var(--c-border);
  background: var(--c-panel);
}

.cmplz-document details summary,
.cmplz-cookie-statement details summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: var(--c-fw-head);
  background: var(--c-head);
  list-style: none;
}
.cmplz-document details summary::-webkit-details-marker,
.cmplz-cookie-statement details summary::-webkit-details-marker{ display: none; }

.cmplz-document details[open] summary,
.cmplz-cookie-statement details[open] summary{ background: var(--c-head-open); }

.cmplz-document details > *:not(summary),
.cmplz-cookie-statement details > *:not(summary){
  padding: 12px 14px 16px;
}

/* Tables */
.cmplz-document table,
.cmplz-cookie-statement table{
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  margin: 14px 0 18px;
  font-size: 14px;
}

.cmplz-document th,
.cmplz-cookie-statement th{
  text-align: left;
  color: var(--c-text);
  background: rgba(255,244,224,.12) !important;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
}

.cmplz-document td,
.cmplz-cookie-statement td{
  color: var(--c-text);
  padding: 10px 12px;
  border-top: 1px solid rgba(255,244,224,.14);
  vertical-align: top;
  background: transparent !important;
}

.cmplz-document tbody tr:nth-child(even) td,
.cmplz-cookie-statement tbody tr:nth-child(even) td{
  background: rgba(255,244,224,.05) !important;
}

.cmplz-document td,
.cmplz-cookie-statement td,
.cmplz-document th,
.cmplz-cookie-statement th{ word-break: break-word; }

/* =========================================================
   4) Cookies Overview (Abschnitt 6)
   ========================================================= */
#cmplz-cookies-overview{ margin-top: var(--c-space-5); }

#cmplz-cookies-overview .cmplz-service-header{
  cursor: pointer;
  user-select: none;
  padding: 0;
}

#cmplz-cookies-overview .cmplz-service-description,
#cmplz-cookies-overview .cmplz-sharing-data,
#cmplz-cookies-overview .cookies-per-purpose{
  padding: 14px 16px;
}

#cmplz-cookies-overview .cmplz-service-description,
#cmplz-cookies-overview .cmplz-sharing-data{
  border-top: 1px solid var(--c-sep);
}

/* Sub-headings inside cards */
#cmplz-cookies-overview h4{
  margin: 0 0 8px 0;
  color: var(--c-accent-soft);
  font-weight: var(--c-fw-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1rem;
}

#cmplz-cookies-overview h5{
  margin: 0;
  color: var(--c-text);
  font-weight: var(--c-fw-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  opacity: .9;
}

/* Cookies grid */
#cmplz-cookies-overview .cookies-per-purpose{
  border-top: 1px solid var(--c-sep);
  border-bottom-left-radius: var(--c-radius-l);
  border-bottom-right-radius: var(--c-radius-l);

  display: grid;
  grid-template-columns: 1.1fr .55fr 1.35fr;
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;
}

#cmplz-cookies-overview .cookies-per-purpose .purpose{
  grid-column: 1 / -1;
  margin-bottom: 10px;
}
#cmplz-cookies-overview .cookies-per-purpose .purpose h4{ margin: 0; }

#cmplz-cookies-overview .cookies-per-purpose .name-header,
#cmplz-cookies-overview .cookies-per-purpose .retention-header,
#cmplz-cookies-overview .cookies-per-purpose .function-header{
  padding-top: 10px;
  border-top: 1px solid rgba(255,244,224,.12);
}

#cmplz-cookies-overview .cookies-per-purpose .name,
#cmplz-cookies-overview .cookies-per-purpose .retention,
#cmplz-cookies-overview .cookies-per-purpose .function{
  color: var(--c-text-soft);
  line-height: 1.55;
  padding-bottom: 6px;
  word-break: break-word;
}

#cmplz-cookies-overview .cookies-per-purpose .retention:empty::before,
#cmplz-cookies-overview .cookies-per-purpose .function:empty::before{
  content: "—";
  opacity: .55;
}

/* =========================================================
   5) Categories (Abschnitt 7) – same card look as Overview
   ========================================================= */
.cmplz-categories details.cmplz-category > summary{
  cursor: pointer;
}

/* Rechtsbündiger Fallback, falls kein „always active“-Element vorhanden ist */
.cmplz-categories .cmplz-category-header > .cmplz-banner-checkbox{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.cmplz-categories input.cmplz-consent-checkbox{
  width: 18px;
  height: 18px;
}

.cmplz-categories .cmplz-description{
  padding: 14px 16px;
  line-height: 1.6;
}

.cmplz-categories .cmplz-description > span{ display: block; }
.cmplz-categories .cmplz-description > span + span{ margin-top: 10px; }

/* =========================================================
   9) Mobile / Responsive (collected)
   ========================================================= */
@media (max-width: 800px){
  /* Overview header wraps */
  #cmplz-cookies-overview .cmplz-service-header > div{
    flex-wrap: wrap;
    gap: 8px;
  }
  #cmplz-cookies-overview .cmplz-service-header p{
    margin-left: 0;
    width: 100%;
    opacity: .85;
  }

  /* Overview grid becomes single column */
  #cmplz-cookies-overview .cookies-per-purpose{
    grid-template-columns: 1fr;
  }

  /* Categories header wraps */
  .cmplz-categories .cmplz-category-header{
    flex-wrap: wrap;
    gap: 8px;
  }
  .cmplz-categories .cmplz-always-active{
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .cmplz-categories .cmplz-category-header > .cmplz-banner-checkbox{
    margin-left: 0;
  }
}