/**
 * Cookie Consent — Wandgestaltung brand override
 *
 * Replaces the vendor's default grey neutral palette with the site's warm
 * ivory / espresso design language.  Only CSS custom properties and targeted
 * class overrides are used — vendor JS is untouched.
 *
 * Design system reference: static/css/style.css :root tokens
 *   --color-bg:          #f6f5f2  (warm off-white)
 *   --color-text:        #2c2b28  (near-black charcoal)
 *   --color-text-soft:   #5a5854  (soft brown-grey)
 *   --color-border:      #e4e1db  (taupe)
 *   --color-accent:      #5C2E2E  (deep burgundy)
 *   --color-accent-hover:#2E2E2E  (near-black)
 *   --radius:            0        (flat / square corners)
 *
 * All rule selectors use the official CC v3 class names so this file
 * survives a vendor JS update unchanged.
 */

/* ─── 1. Token layer ─────────────────────────────────────────────────────── */
#cc-main {
  /* Foundations */
  --cc-font-family:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cc-bg:                #f6f5f2;
  --cc-primary-color:     #2c2b28;
  --cc-secondary-color:   #5a5854;

  /* Border radius — flat to match the storefront's --radius: 0 */
  --cc-modal-border-radius:     0px;
  --cc-btn-border-radius:       0px;
  --cc-pm-toggle-border-radius: 2px;

  /* Overlay */
  --cc-overlay-bg: rgba(44, 43, 40, 0.55);

  /* Separator / section borders */
  --cc-separator-border-color:      #e4e1db;
  --cc-section-category-border:     #e4e1db;

  /* Footer bar (links row in consent modal) */
  --cc-footer-bg:           #eeeae4;
  --cc-footer-color:        #5a5854;
  --cc-footer-border-color: #d9d3cb;
  --cc-link-color:          #5C2E2E;

  /* Category block */
  --cc-cookie-category-block-bg:          #f0ede8;
  --cc-cookie-category-block-border:      #e4e1db;
  --cc-cookie-category-block-hover-bg:    #e8e3dc;
  --cc-cookie-category-block-hover-border:#d9d3cb;
  --cc-cookie-category-expanded-block-bg:        #faf9f7;
  --cc-cookie-category-expanded-block-hover-bg:  #f5f2ed;

  /* Primary button — "Alle akzeptieren" */
  --cc-btn-primary-bg:                #5C2E2E;
  --cc-btn-primary-color:             #fff;
  --cc-btn-primary-border-color:      #5C2E2E;
  --cc-btn-primary-hover-bg:          #2E2E2E;
  --cc-btn-primary-hover-color:       #fff;
  --cc-btn-primary-hover-border-color:#2E2E2E;

  /* Secondary button — "Nur notwendige Cookies" / "Einstellungen" */
  --cc-btn-secondary-bg:                #f6f5f2;
  --cc-btn-secondary-color:             #2c2b28;
  --cc-btn-secondary-border-color:      #c9c3bb;
  --cc-btn-secondary-hover-bg:          #eeeae4;
  --cc-btn-secondary-hover-color:       #2c2b28;
  --cc-btn-secondary-hover-border-color:#b5ada3;

  /* Toggle — on (accepted) */
  --cc-toggle-on-bg:              #5C2E2E;
  --cc-toggle-on-knob-bg:         #ffffff;
  --cc-toggle-enabled-icon-color: #ffffff;

  /* Toggle — off (rejected) */
  --cc-toggle-off-bg:             #c9c3bb;
  --cc-toggle-off-knob-bg:        #ffffff;
  --cc-toggle-disabled-icon-color:#ffffff;

  /* Toggle — read-only (necessary) */
  --cc-toggle-readonly-bg:            #d9d3cb;
  --cc-toggle-readonly-knob-bg:       #ffffff;
  --cc-toggle-readonly-knob-icon-color:#8c8984;

  /* Scrollbar */
  --cc-webkit-scrollbar-bg:       #e4e1db;
  --cc-webkit-scrollbar-hover-bg: #c9c3bb;

  /* Z-index */
  --cc-z-index: 9999;
}

/* ─── 2. Consent modal (banner) ──────────────────────────────────────────── */
#cc-main .cm {
  border: 1px solid #d9d3cb;
  box-shadow: 0 8px 32px rgba(44, 43, 40, 0.12), 0 2px 8px rgba(44, 43, 40, 0.07);
}

/* Title */
#cc-main .cm__title {
  font-family: 'Urbanist', 'Georgia', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2c2b28;
  line-height: 1.3;
}

/* Description */
#cc-main .cm__desc {
  font-size: 0.875rem;
  color: #5a5854;
  line-height: 1.65;
}

/* Footer links area */
#cc-main .cm__footer {
  border-top: 1px solid #d9d3cb;
}

#cc-main .cm__footer a {
  color: #5a5854;
  text-decoration-color: rgba(90, 88, 84, 0.4);
  font-size: 0.8125rem;
  transition: color 0.15s ease;
}

#cc-main .cm__footer a:hover {
  color: #5C2E2E;
  text-decoration-color: rgba(92, 46, 46, 0.5);
}

/* ─── 3. Buttons ─────────────────────────────────────────────────────────── */

/* All consent-modal buttons — tighten padding + typographic polish */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.625rem 1.375rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Focus ring — visible and brand-aligned */
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible {
  outline: 2px solid #5C2E2E;
  outline-offset: 2px;
}

/* ─── 4. Preferences modal ───────────────────────────────────────────────── */
#cc-main .pm {
  border: 1px solid #d9d3cb;
  box-shadow: 0 8px 32px rgba(44, 43, 40, 0.12);
}

/* Modal header */
#cc-main .pm__header {
  border-bottom: 1px solid #e4e1db;
  background-color: #f6f5f2;
}

#cc-main .pm__title {
  font-family: 'Urbanist', 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2c2b28;
}

/* Close button */
#cc-main .pm__close-btn {
  color: #8c8984;
  transition: color 0.15s ease;
}

#cc-main .pm__close-btn:hover {
  color: #2c2b28;
}

/* Modal body scrollable */
#cc-main .pm__body {
  background-color: #f6f5f2;
}

/* Section title (plain text labels, e.g. "Notwendig") */
#cc-main .section__title {
  font-family: 'Urbanist', 'Georgia', serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2c2b28;
  letter-spacing: 0.01em;
}

/* Section description (category explanatory text) */
#cc-main .section__desc,
#cc-main .section-desc {
  font-size: 0.8375rem;
  color: #5a5854;
  line-height: 1.65;
  margin-top: 0.25rem;
  padding-bottom: 0.375rem;
}

/* Category toggle block */
#cc-main .section--toggle .section__header {
  padding: 0.75rem 1rem;
}

/* Separator between sections */
#cc-main .pm__section + .pm__section {
  border-top: 1px solid #e4e1db;
}

/* ─── 5. Toggle switch ───────────────────────────────────────────────────── */

/* Wider pill for a more premium feel */
#cc-main .section__toggle {
  width: 44px;
  height: 24px;
}

#cc-main .section__toggle-knob,
#cc-main .toggle__icon {
  width: 20px;
  height: 20px;
}

/* Smooth transition on the toggle */
#cc-main .section__toggle-knob {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Necessary category row: muted/locked look */
#cc-main .section--toggle.is-readonly .section__title {
  color: #8c8984;
}

/* ─── 6. Preferences modal footer ────────────────────────────────────────── */
#cc-main .pm__footer {
  border-top: 1px solid #e4e1db;
  background-color: #eeeae4;
  gap: 0.625rem;
}

/* ─── 7. Responsive adjustments ─────────────────────────────────────────── */
@media (max-width: 640px) {
  #cc-main .cm {
    margin: 0.75rem;
  }

  #cc-main .cm__btn,
  #cc-main .pm__btn {
    font-size: 0.75rem;
    padding: 0.5625rem 1rem;
  }

  #cc-main .cm__title {
    font-size: 1rem;
  }
}