/*
 * @source Brief 205 (Consent-Theme) — ScaleCommerce-Markendesign für orestbida/cookieconsent v3.1
 * (Brief 193). REIN OPTIK: keine Consent-Logik, kein Pixel-Gating, keine Texte angefasst — nur Theme.
 *
 * Lädt NACH vendor/cookieconsent/cookieconsent.css (base.html.twig) → gewinnt die Kaskade ohne
 * !important; liegt nach app.css → keine Tailwind-Preflight-Kollision. Alles unter #cc-main gescoped.
 *
 * Beide Layer: Banner (consentModal, .cm*) + Einstellungen (preferencesModal, .pm*) inkl. cookieTables.
 * Button-Hierarchie über data-role (v3: all/necessary/show/save) — beide Accept-Buttons teilen .cm__btn,
 * daher per data-role unterschieden (Accept=Pink-Primary, Nur-notwendige=neutrales Solid gleicher Größe,
 * Einstellungen=tertiärer Link).
 */

#cc-main {
    /* ── Typo ───────────────────────────────────────────────── */
    --cc-font-family: var(--font-body, 'Arial', sans-serif);

    /* ── Flächen / Text (dunkles Markendesign) ─────────────────── */
    --cc-bg: #1d1d1d;                 /* Banner-/Modal-BG */
    --cc-primary-color: #f4f4f5;      /* Überschrift / starker Text */
    --cc-secondary-color: #b4b4b4;    /* Body / Beschreibung — settle-grau */
    --cc-link-color: rgb(255, 86, 169);

    /* ── Radien (~11px) ────────────────────────────────────────── */
    --cc-modal-border-radius: 11px;
    --cc-btn-border-radius: 9px;
    --cc-pm-toggle-border-radius: 9px;

    /* ── Primary-Button = Pink (Alle akzeptieren / Speichern) ──── */
    --cc-btn-primary-bg: rgb(255, 86, 169);
    --cc-btn-primary-color: rgb(34, 17, 25);
    --cc-btn-primary-border-color: rgb(255, 86, 169);
    --cc-btn-primary-hover-bg: rgb(255, 116, 184);
    --cc-btn-primary-hover-color: rgb(34, 17, 25);
    --cc-btn-primary-hover-border-color: rgb(255, 116, 184);

    /* ── Secondary-Basis (Einstellungen/show wird unten zu Link) ─ */
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: #cfcfcf;
    --cc-btn-secondary-border-color: transparent;
    --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.06);
    --cc-btn-secondary-hover-color: #ffffff;
    --cc-btn-secondary-hover-border-color: transparent;

    /* ── Toggles (an = Pink) ───────────────────────────────────── */
    --cc-toggle-on-bg: rgb(255, 86, 169);
    --cc-toggle-off-bg: #585858;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #e6e6e6;
    --cc-toggle-enabled-icon-color: rgb(34, 17, 25);
    --cc-toggle-disabled-icon-color: #585858;
    --cc-toggle-readonly-bg: #3a3a3a;
    --cc-toggle-readonly-knob-bg: #9a9a9a;
    --cc-toggle-readonly-knob-icon-color: #3a3a3a;

    /* ── Kategorie-Blöcke / Trenner (zweiter Dunkelton #0e0e0e) ─ */
    --cc-cookie-category-block-bg: #0e0e0e;
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.10);
    --cc-cookie-category-block-hover-bg: #161616;
    --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.16);
    --cc-cookie-category-expanded-block-bg: #0b0b0b;
    --cc-cookie-category-expanded-block-hover-bg: #121212;
    --cc-section-category-border: rgba(255, 255, 255, 0.10);
    --cc-separator-border-color: rgba(255, 255, 255, 0.10);

    /* ── Footer (Datenschutz/Impressum) ───────────────────────── */
    --cc-footer-bg: #0e0e0e;
    --cc-footer-color: #b4b4b4;
    --cc-footer-border-color: rgba(255, 255, 255, 0.10);

    /* ── Overlay + Scrollbar ───────────────────────────────────── */
    --cc-overlay-bg: rgba(0, 0, 0, 0.65);
    --cc-webkit-scrollbar-bg: #3a3a3a;
    --cc-webkit-scrollbar-hover-bg: #4a4a4a;
}

/* ── Modal-Shells: dezenter Hairline-Border + Tiefe ───────────── */
#cc-main .cm,
#cc-main .pm {
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* ── ScaleCommerce-Logo oben im Banner ────────────────────────── */
#cc-main .cm__title::before {
    content: "";
    display: block;
    width: 132px;
    height: 34px;
    margin: 0 0 14px;
    background: url("/media/3/download/ScaleCommerce_Logo.svg") left center / contain no-repeat;
}

/* ── Display-Font für die Überschriften ─────────────────────────
   'Headlines' = Sofia Sans Extra Condensed, nur als 900-italic-Cut vorhanden
   (app.css @font-face) → font-style/weight explizit setzen (kein Faux-Style)
   und größer skalieren, damit der Display-Charakter trägt (vendor-Default 1.05em). */
#cc-main .cm__title,
#cc-main .pm__title {
    font-family: var(--font-headline, 'Arial', sans-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.7em;
    line-height: 1.08;
    letter-spacing: 0.01em;
}

/* ══ Button-Hierarchie ════════════════════════════════════════════
   Accept-all (data-role=all) + Speichern (save) erben das Pink-Primary.
   „Nur notwendige" (data-role=necessary) = solides neutrales Dunkel —
   GLEICHE Größe/Lesbarkeit wie Accept, KEIN blasser Ghost-Button. */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
    background: #343434;
    color: #f4f4f5;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
    background: #404040;
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* „Einstellungen" (data-role=show) = tertiär: Link-Style, tritt dezent zurück */
#cc-main .cm__btn[data-role="show"] {
    background: transparent;
    border: 0;
    color: #cfcfcf;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#cc-main .cm__btn[data-role="show"]:hover {
    background: transparent;
    color: #ffffff;
}

/* ── Footer-Links lesbar/markenkonform ────────────────────────── */
#cc-main .cm__footer a,
#cc-main .pm__footer a {
    color: rgb(255, 86, 169);
}

/* ── Footer-Separator „|" symmetrisch ─────────────────────────────
   Vendor: .cm__link-group ist flex + .cm__link-group>*+* { margin-left:1.3rem }
   greift NUR aufs 2. Element (Impressum); die Flex-Whitespaces des „ | "-Textknotens
   kollabieren am Itemrand → der „|" klebt an „Datenschutz". Fix: Link-Margins auf 0
   und gleichmäßigen Abstand via gap → der „|" sitzt gleich weit von beiden Links.
   `.cm__link-group a` (Spez. 1,1,1) schlägt die Vendor-Regel (1,1,0) → kein !important. */
#cc-main .cm__link-group {
    align-items: center;
    gap: 0.5em;
}
#cc-main .cm__link-group a {
    margin: 0;
}

/* ── cookieTables auf dunkel lesbar ───────────────────────────── */
#cc-main .pm__table-caption {
    color: #d8d8d8;
}
#cc-main .pm__table-th {
    color: #e2e2e2;
}
#cc-main .pm__table-td {
    color: #b4b4b4;
}
#cc-main .pm__section-table th,
#cc-main .pm__section-table td,
#cc-main .pm__table-th,
#cc-main .pm__table-td {
    border-color: rgba(255, 255, 255, 0.10);
}