/* ============================================================
   NOISEWEAR CMP — Design overrides for vanilla-cookieconsent
   Scoped to #cc-main to override vendor `all: unset` resets.
   Design system: loud, sharp, editorial. Volt accent, ink
   borders, hard shadow, Space Mono labels, Archivo headings.
   ============================================================ */

#cc-main {
  --cc-font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  --cc-bg: var(--surface, #ffffff);
  --cc-primary-color: var(--text, #111113);
  --cc-secondary-color: var(--text-muted, #6f6b60);

  /* Primary button — volt background, ink text */
  --cc-btn-primary-bg: var(--volt, #ccff00);
  --cc-btn-primary-color: var(--ink, #111113);
  --cc-btn-primary-border-color: var(--ink, #111113);
  --cc-btn-primary-hover-bg: var(--volt-600, #b7e600);
  --cc-btn-primary-hover-color: var(--ink, #111113);
  --cc-btn-primary-hover-border-color: var(--ink, #111113);

  /* Secondary button — transparent, ink border */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--text, #111113);
  --cc-btn-secondary-border-color: var(--ink, #111113);
  --cc-btn-secondary-hover-bg: rgba(17, 17, 19, 0.06);
  --cc-btn-secondary-hover-color: var(--ink, #111113);
  --cc-btn-secondary-hover-border-color: var(--ink, #111113);

  /* Category section cards */
  --cc-cookie-category-block-bg: var(--bg, #f4f2ea);
  --cc-cookie-category-block-border: var(--line, rgba(17, 17, 19, 0.14));
  --cc-cookie-category-block-hover-bg: var(--bg-alt, #eae7dc);
  --cc-cookie-category-block-hover-border: var(--line-2, rgba(17, 17, 19, 0.28));

  /* Toggle — volt track, ink knob */
  --cc-toggle-on-bg: var(--volt, #ccff00);
  --cc-toggle-on-knob-bg: var(--ink, #111113);
  --cc-toggle-off-bg: rgba(17, 17, 19, 0.22);
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: rgba(17, 17, 19, 0.12);
  --cc-toggle-readonly-knob-bg: rgba(17, 17, 19, 0.32);

  /* Modal & button radius — sharp NOISEWEAR style */
  --cc-modal-border-radius: var(--r-sm, 4px);
  --cc-btn-border-radius: var(--r-sm, 4px);

  /* Footer */
  --cc-footer-bg: var(--bg, #f4f2ea);
  --cc-footer-color: var(--text-muted, #6f6b60);
  --cc-footer-border-color: var(--line, rgba(17, 17, 19, 0.14));
  --cc-separator-border-color: var(--line, rgba(17, 17, 19, 0.14));
}

/* ---- NW monogram logo ----------------------------------------- */
/* Volt square with 'NW' in Space Mono — brand-consistent mark.    */
/* Rendered as plain text injected by cmp.js, styled here.         */
#cc-main .nw-cmp__logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--volt, #ccff00);
  border: 1.5px solid var(--ink, #111113);
  font-family: var(--font-mono, 'Space Mono', monospace) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #111113) !important;
  line-height: 1 !important;
  text-align: center;
  user-select: none;
}

#cc-main .nw-cmp__logo--modal {
  width: 34px;
  height: 34px;
  font-size: 0.68rem !important;
}

/* ---- Accent + soft spans in the banner title ------------------- */
#cc-main .nw-cmp__accent {
  background: var(--volt, #ccff00);
  color: var(--ink, #111113);
  display: inline;
  font: inherit;
  font-weight: 800 !important;
  padding: 0.05em 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#cc-main .nw-cmp__soft {
  color: var(--text-muted, #6f6b60);
  display: block;
  font: inherit;
  font-weight: 500;
  font-size: 0.875em;
}

/* ================================================================
   Consent banner (bottom-center card)
   ================================================================ */
#cc-main .cm {
  border: 1.5px solid var(--ink, #111113);
  box-shadow: 3px 3px 0 var(--ink, #111113);
  border-radius: var(--r-sm, 4px);
  padding: 0.9rem 1.25rem;
}
#cc-main .cm--box {
  max-width: min(960px, calc(100vw - 2rem));
  width: 100%;
}
#cc-main .cm__body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
  padding: 0;
}
#cc-main .nw-cmp__media {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
#cc-main .cm__texts {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
#cc-main .cm__title {
  font-family: var(--font-display, 'Archivo', system-ui, sans-serif) !important;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#cc-main .cm__desc {
  font-size: 0.9rem;
  color: var(--text-muted, #6f6b60);
  line-height: 1.5;
  margin-bottom: 0;
}
#cc-main .cm__desc:empty { display: none; }

/* Buttons group — horizontal row */
#cc-main .cm__btns {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0;
  padding: 0 !important;
  border-top: 0 !important;
}
#cc-main .cm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem;
  margin: 0 !important;
}
#cc-main .cm__btn {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  border-radius: var(--r-sm, 4px) !important;
  letter-spacing: 0;
}
/* "Einstellungen" — subtle text-link style */
#cc-main .cm__btn[data-role="show"] {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted, #6f6b60);
  font-weight: 600;
}
#cc-main .cm__btn[data-role="show"]:hover {
  color: var(--text, #111113);
  background: transparent;
  border-color: transparent;
}
#cc-main .cm__btn[data-role="show"]::after {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.35rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
}

/* Banner footer — hidden (links moved into texts column by JS) */
#cc-main .cm__footer {
  background: transparent !important;
  border-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#cc-main .cm__links {
  padding: 0.4rem 0 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100%;
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 0.78rem;
}
/* Links injected under the subtitle in the texts column */
#cc-main .cm__texts .nw-cmp__cm-links {
  display: flex;
  gap: 1.25rem;
  margin: 0.35rem 0 0 0 !important;
  padding: 0 !important;
  font-size: 0.78rem;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
}
#cc-main .cm__texts .nw-cmp__cm-links a {
  color: var(--text-muted, #6f6b60);
  text-decoration: none;
  display: inline;
  font-weight: 500;
}
#cc-main .cm__texts .nw-cmp__cm-links a:hover {
  color: var(--text, #111113);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .cm__footer a,
#cc-main .cm__links a {
  color: var(--text-muted, #6f6b60);
  text-decoration: none;
}
#cc-main .cm__footer a:hover,
#cc-main .cm__links a:hover {
  color: var(--text, #111113);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  #cc-main .cm__body { gap: 0.85rem; }
  #cc-main .cm__btns { width: 100%; flex-wrap: wrap; }
  #cc-main .cm__btn { flex: 1 1 auto; }
}

/* ================================================================
   Preferences modal
   ================================================================ */
#cc-main .pm {
  border: 1.5px solid var(--ink, #111113);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(17, 17, 19, 0.32));
  border-radius: var(--r-sm, 4px);
  overflow: hidden;
}
#cc-main .pm--box {
  max-width: min(56em, calc(100vw - 2rem));
  height: auto !important;
  max-height: min(85vh, 48em);
}
#cc-main .pm__body {
  overflow-y: auto;
}
#cc-main .pm__header {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 1rem;
  padding: 1.5rem 1.75rem 0.75rem !important;
  border-bottom: 0 !important;
}
#cc-main .pm__header .nw-cmp__logo {
  margin-top: 0.1rem;
  order: 1;
}
#cc-main .pm__title {
  font-family: var(--font-display, 'Archivo', system-ui, sans-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  flex: 1 1 auto !important;
  margin-right: 0 !important;
  order: 2;
}
#cc-main .pm__close-btn {
  order: 3;
  flex: 0 0 auto;
  border-radius: var(--r-sm, 4px) !important;
  border-color: var(--line, rgba(17, 17, 19, 0.14)) !important;
}
#cc-main .nw-cmp__subtitle {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0 calc(34px + 1rem);
  color: var(--text-muted, #6f6b60);
  font-size: 0.9rem;
  line-height: 1.5;
  order: 4;
  display: block;
}
#cc-main .pm__body {
  padding: 1rem 1.75rem 1.25rem;
}

/* Category cards */
#cc-main .pm__section,
#cc-main .pm__section--toggle {
  background: var(--bg, #f4f2ea);
  border: 1px solid var(--line, rgba(17, 17, 19, 0.14));
  border-radius: var(--r-sm, 4px);
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}
#cc-main .pm__section-title-wrapper,
#cc-main .pm__section-title-container {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Category icon — volt-tinted circle */
#cc-main .nw-cmp__cat-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(204, 255, 0, 0.22);
  color: var(--ink, #111113);
  border: 1px solid rgba(17, 17, 19, 0.14);
  box-sizing: border-box;
}
#cc-main .nw-cmp__cat-icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
/* Analytics icon — slightly different tint */
#cc-main .pm__section--toggle[data-nw-category="analytics"] .nw-cmp__cat-icon {
  background: rgba(17, 17, 19, 0.07);
}

#cc-main .pm__section-title {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.95rem;
  font-weight: 700 !important;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  position: static !important;
  width: auto !important;
  justify-content: flex-start !important;
  cursor: pointer;
}
#cc-main .pm__section-title:hover {
  background: transparent !important;
  border-color: transparent !important;
}
#cc-main .pm__section-desc {
  margin-top: 0;
  color: var(--text-muted, #6f6b60);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Hide vendor's service counter badge */
#cc-main .pm__badge.pm__service-counter { display: none; }

/* "Immer aktiv" badge — Space Mono, editorial style */
#cc-main .nw-cmp__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  font-family: var(--font-mono, 'Space Mono', monospace) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink, #111113);
  color: var(--paper, #f4f2ea) !important;
  border-radius: 2px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Order in title row: icon | title [spacer] | toggle | chevron */
#cc-main .nw-cmp__cat-icon { order: 0; }
#cc-main .pm__section-title { order: 1; flex: 1 1 auto; text-align: left; }
#cc-main .pm__section-title-wrapper > .section__toggle-wrapper {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  position: static !important;
  right: unset !important;
  left: unset !important;
  transform: none !important;
  width: 50px;
  height: 23px;
}
/* Hide the bare checkbox and label text; keep the visual toggle icon */
#cc-main .pm__section-title-wrapper > .section__toggle-wrapper > input.section__toggle,
#cc-main .pm__section-title-wrapper > .section__toggle-wrapper > .toggle__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
  opacity: 0;
}
#cc-main .pm__section-arrow {
  order: 3;
  flex: 0 0 auto;
  margin-left: 0.85rem;
  position: static !important;
  left: unset !important;
  right: unset !important;
  width: 20px;
  height: 20px;
}

/* Expanded detail area */
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  display: none;
  margin: 0.55rem 0 0 !important;
  padding: 0.85rem 1rem;
  background: var(--surface, #ffffff);
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--line, rgba(17, 17, 19, 0.14));
}
#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: flex-start;
}
#cc-main .pm__section-desc-wrapper > :not(:last-child) {
  border-bottom: 0 !important;
}
/* Analytics/single-category: full-width description */
#cc-main .pm__section--toggle[data-nw-category="analytics"].is-expanded .pm__section-desc-wrapper {
  flex-direction: column;
}
#cc-main .pm__section--toggle[data-nw-category="analytics"] .pm__section-desc-wrapper .pm__section-desc {
  flex: 1 1 100%;
}

/* Services list */
#cc-main .pm__section--toggle .pm__section-services {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
#cc-main .pm__section--toggle .pm__section-desc-wrapper .pm__section-desc {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted, #6f6b60);
}
#cc-main .pm__service {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.2rem 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
#cc-main .pm__service::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink, #111113);
  flex: 0 0 auto;
  display: inline-block;
}
#cc-main .pm__service-icon,
#cc-main .pm__service-header .pm__service-icon { display: none; }
#cc-main .pm__service .section__toggle-wrapper,
#cc-main .pm__service .toggle-service { display: none; }
#cc-main .pm__service-header { display: flex; align-items: center; gap: 0.4rem; }
#cc-main .pm__service-title,
#cc-main .pm__service .pm__service-title {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text, #111113);
}

/* Footer — links left, buttons right */
#cc-main .pm__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.75rem 1.1rem;
  border-top: 1px solid var(--line, rgba(17, 17, 19, 0.14));
  background: var(--bg, #f4f2ea);
  flex-wrap: wrap;
}
#cc-main .pm__btn-group,
#cc-main .pm__footer .btns,
#cc-main .pm__footer > div:not(.nw-cmp__links) {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}
/* Injected footer links */
#cc-main .nw-cmp__links {
  display: flex;
  gap: 1rem;
  font-size: 0.825rem;
}
#cc-main .nw-cmp__links a {
  color: var(--text-muted, #6f6b60);
  text-decoration: none;
  font-weight: 500;
  display: inline;
}
#cc-main .nw-cmp__links a:hover {
  color: var(--text, #111113);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .pm__btn {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--r-sm, 4px) !important;
  letter-spacing: 0;
}
#cc-main .pm__close-btn {
  border-radius: var(--r-sm, 4px) !important;
}

/* Section links */
#cc-main .pm__section--toggle a {
  color: var(--text, #111113);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .pm__section--toggle a:hover {
  text-decoration: none;
}

/* ================================================================
   Responsive — tablet (≤720px)
   ================================================================ */
@media (max-width: 720px) {
  #cc-main .pm__header { padding: 1.25rem 1.25rem 0.5rem !important; }
  #cc-main .pm__body { padding: 0.85rem 1.25rem 1rem; }
  #cc-main .pm__footer { padding: 0.85rem 1.25rem 1rem; }
  #cc-main .nw-cmp__subtitle { margin-left: 0 !important; }
}

/* ================================================================
   Responsive — mobile (≤640px): full-screen modal, stacked banner
   ================================================================ */
@media (max-width: 640px) {
  /* Banner */
  #cc-main .cm--box {
    max-width: calc(100vw - 1rem);
    width: auto;
  }
  #cc-main .cm__body {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0 !important;
  }
  #cc-main .nw-cmp__media { flex: 0 0 auto; }
  #cc-main .nw-cmp__logo { width: 34px; height: 34px; font-size: 0.68rem !important; }
  #cc-main .cm__texts { flex: 1 1 0 !important; min-width: 0; }
  #cc-main .cm__title { font-size: 0.95rem !important; line-height: 1.3; }
  #cc-main .nw-cmp__soft { display: block; }
  #cc-main .cm__btns {
    flex: 1 1 100% !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    align-items: stretch !important;
  }
  #cc-main .cm__btn-group {
    flex-direction: column !important;
    width: 100%;
    gap: 0.4rem !important;
  }
  #cc-main .cm__btn { width: 100% !important; flex: 1 1 auto !important; }
  #cc-main .cm__btn[data-role="show"] {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-muted, #6f6b60) !important;
    min-height: 2.25rem !important;
  }
  #cc-main .cm__btn[data-role="show"]:hover {
    color: var(--text, #111113) !important;
  }

  /* Preferences modal — full screen sheet */
  #cc-main .pm__header {
    padding: 1.1rem 1rem 0.65rem !important;
    align-items: center !important;
    gap: 0.5rem 0.85rem !important;
  }
  #cc-main .nw-cmp__logo--modal { width: 30px; height: 30px; font-size: 0.62rem !important; }
  #cc-main .pm__title { font-size: 1.15rem !important; flex: 1 1 0 !important; }
  #cc-main .nw-cmp__subtitle {
    font-size: 0.85rem !important;
    margin: 0.2rem 0 0 0 !important;
    line-height: 1.45;
  }
  #cc-main .pm__close-btn { width: 36px !important; height: 36px !important; flex: 0 0 auto; }
  #cc-main .pm__body { padding: 0.5rem 1rem 0.85rem !important; }
  #cc-main .pm__section,
  #cc-main .pm__section--toggle { padding: 0.75rem 0.85rem !important; }
  #cc-main .nw-cmp__cat-icon { width: 2rem; height: 2rem; }
  #cc-main .pm__section-title { font-size: 0.9rem !important; }
  #cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }
  #cc-main .pm__section--toggle .pm__section-services,
  #cc-main .pm__section--toggle .pm__section-desc-wrapper .pm__section-desc {
    flex: 0 0 auto !important;
  }
  /* Footer: links centered + buttons stacked */
  #cc-main .pm__footer {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.85rem 1rem 1rem !important;
    gap: 0.5rem !important;
  }
  #cc-main .nw-cmp__links {
    justify-content: center !important;
    margin: 0 !important;
    order: 2;
  }
  #cc-main .pm__btn-group,
  #cc-main .pm__footer .btns,
  #cc-main .pm__footer > div:not(.nw-cmp__links) {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0.4rem !important;
    order: 1;
  }
  #cc-main .pm__btn { width: 100% !important; flex: 1 1 auto !important; }
}