/**
 * Orphit Cookie Consent – strukturelle Styles für den Shortcode
 * [orphit-consent-settings] (Kategorien-Panel + Links) im Bricks-Popup.
 *
 * Seit 1.1.4 ist der Consent-Banner ein natives Bricks-Popup: Overlay,
 * Karte, Titel, Message und die Buttons (Einverstanden/Ablehnen/Einstellungen)
 * sind native Bricks-Elemente und werden über die Design-Tokens der Palette
 * „Orphit26" (--surface, --surface2, --text, --textmuted, --cta, --bg, --link)
 * im Bricks-Builder gestylt. Dieses Stylesheet deckt nur den dynamischen Teil
 * ab (Kategorien, Save-Button, Richtlinien-Links, „Zustimmung verwalten").
 * em (nicht rem): Bricks setzt die Root-Font-Size auf 10px.
 */

/* ── Zustand (strukturell) ─────────────────────────────────────────── */
[hidden] {
  display: none !important;
}

/* ── Einstellungen-Panel (nur über „Einstellungen"-Button) ─────────── */
.orphit-consent-banner__settings {
  margin-top: 1.25em;
  padding-top: 1.25em;
  border-top: 1px solid var(--surface2);
}

.orphit-consent-categories {
  display: grid;
  gap: 1em;
}

.orphit-consent-category {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75em;
  row-gap: 0.15em;
  align-items: start;
}

.orphit-consent-category__input {
  grid-column: 1;
  grid-row: 1;
  accent-color: var(--cta);
}

.orphit-consent-category__label {
  grid-column: 2;
  grid-row: 1;
}

.orphit-consent-category__name {
  font-weight: 600;
}

.orphit-consent-category__status {
  color: var(--textmuted);
}

.orphit-consent-category__description {
  grid-column: 2;
  grid-row: 2;
  color: var(--textmuted);
  margin: 0;
}

.orphit-consent-btn {
  font: inherit;
  color: var(--text);
  text-align: center;
  background: transparent;
  border: 1px solid var(--surface2);
  border-radius: 0.4em;
  padding: 0.6em 1.2em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.orphit-consent-btn--save {
  margin-top: 1.25em;
  width: 100%;
}

/* ── Tap-Targets (seit 1.4.10): min. 44×44 px Trefferfläche ──────────── */
/* Close „✕" ist ein Bricks-span (25×28 px) – Kasten auf 44×44 vergrößern,
   das X bleibt via Flex zentriert. */
.orphit-consent-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Richtlinien-Links: 34 px → ≥44 px Trefferfläche (Text bleibt zentriert). */
.orphit-consent-banner__links a.orphit-consent-link {
  display: inline-block;
  padding: 10px 4px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* ── Links im Banner (zentriert) ────────────────────────────────────── */
.orphit-consent-banner__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25em;
  margin-top: 1.25em;
}

.orphit-consent-link {
  color: var(--link);
}

/* ── „Zustimmung verwalten" (Reopen-Button, nur bei geschlossenem Popup) ──
   Desktop: unten links angedockte runde Pill, leicht angehoben, Text in
   --textmuted; Hover hebt sie grafisch hervor.
   Mobile: schmaler runder Balken (70vw, --bg, kleiner Border), ohne Text,
   unten zentriert.
   Nach dem Schließen blitzt der Rahmen kurz auf (--flash). */
.orphit-consent-manage {
  position: fixed;
  left: 1em;
  transform: none;
  bottom: 1em;
  z-index: 99998;
  font: inherit;
  color: var(--textmuted);
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: 999px;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.orphit-consent-manage:hover,
.orphit-consent-manage:focus-visible {
  background: var(--surface2);
  color: var(--text);
}

/* Kurzes, dezentes „Aufleuchten" des Rahmens direkt nach dem Schließen. */
.orphit-consent-manage--flash {
  animation: orphit-consent-flash 1.4s ease-out;
}

@keyframes orphit-consent-flash {
  0% {
    border-color: var(--link);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 0%, transparent);
  }

  30% {
    border-color: var(--link);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--link) 18%, transparent);
  }

  100% {
    border-color: var(--surface2);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 0%, transparent);
  }
}

/* ── Cookie-Inventar-Tabelle (Cookie-Richtlinie) ───────────────────── */
.orphit-consent-cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.orphit-consent-cookie-table th,
.orphit-consent-cookie-table td {
  padding: 0.65em 0.8em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--surface2);
}

.orphit-consent-cookie-table thead th {
  background: var(--surface2);
  font-weight: 600;
}

.orphit-consent-cookie-table tbody tr:nth-child(even) td {
  background: var(--surface);
}

/* Mobile (≤ 767px, Bricks mobile_landscape): gestapelte Karten.
   Die data-label-Attribute werden per td::before als Label gerendert;
   TranslatePress übersetzt sie automatisch mit. */
@media (max-width: 767px) {
  .orphit-consent-cookie-table thead {
    display: none;
  }

  .orphit-consent-cookie-table,
  .orphit-consent-cookie-table tbody,
  .orphit-consent-cookie-table tr,
  .orphit-consent-cookie-table td {
    display: block;
    width: 100%;
  }

  .orphit-consent-cookie-table tr {
    border: 1px solid var(--surface2);
    border-radius: 0.75em;
    margin-bottom: 1em;
    padding: 0.25em 1em;
  }

  .orphit-consent-cookie-table td {
    border-bottom: 0;
    padding: 0.45em 0;
  }

  .orphit-consent-cookie-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--textmuted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15em;
  }

  .orphit-consent-cookie-table tbody tr:nth-child(even) td {
    background: transparent;
  }
}

/* ── Mobile (≤ 480px): kompakter ───────────────────────────────────── */
@media (max-width: 480px) {
  .orphit-consent-banner__settings {
    margin-top: 1em;
    padding-top: 1em;
  }

  .orphit-consent-categories {
    gap: 0.8em;
  }

  .orphit-consent-btn--save {
    margin-top: 1em;
  }

  .orphit-consent-banner__links {
    gap: 0.9em 1.25em;
    margin-top: 0.9em;
  }

  /* Reopen-Button: halb abgeschnittene Pill (70vw), unten zentriert — die
     untere Hälfte liegt unterhalb des Viewports, nur die obere Hälfte ist
     sichtbar und wirkt „um halbe Höhe nach oben gezogen". Kein Text. */
  .orphit-consent-manage {
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    height: 30px;
    width: 70vw;
    padding: 0;
    min-height: 0;
    min-width: 0;
    font-size: 0;
    color: transparent;
    background: var(--bg);
    border: 1px solid var(--surface2);
    border-radius: 999px;
    white-space: normal;
  }

  .orphit-consent-manage:hover,
  .orphit-consent-manage:focus-visible {
    bottom: 1em;
  }
}