/* ===================================================================
   Silktide Consent Manager – Corporate Build (Dominic)
   - Light/Dark an Corporate-Variablen gekoppelt
   - Eigenes Logo & Cookie-Icon
   - Original-Grundstyles + saubere Overrides
   Pfade:
   - Logo:  /wp-content/themes/ds_network/assets/icons/logo.svg
   - Icon:  /wp-content/themes/ds_network/assets/icons/cookie.svg
   =================================================================== */

/* === Corporate Design Tokens ======================================= */
/* Fallbacks, falls die Seite keine --ds-* Variablen liefert */
:root{
  --ds-surface:  #ffffff;
  --ds-text:     #0f172a;
  --ds-muted:    #64748b;
  --ds-primary:  #0ea5e9;   /* Primärfarbe */
  --ds-primary-2:#0284c7;   /* Hover/aktiv */
  --ds-accent:   #22c55e;   /* optional */
  --ds-font:     Helvetica Neue, Segoe UI, Arial, sans-serif;
}

/* Darkmode deiner Seite steuert via body:not(.is-light) */
body:not(.is-light){
  --ds-surface:  #0b1220;
  --ds-text:     #e5e7eb;
  --ds-muted:    #94a3b8;
  --ds-primary:  #22c55e;
  --ds-primary-2:#16a34a;
}

/* === Silktide Wrapper: Variablen an Corporate Tokens binden ========= */
#silktide-wrapper{
  --fontFamily: var(--ds-font);
  --primaryColor: var(--ds-primary);
  --backgroundColor: var(--ds-surface);
  --textColor: var(--ds-text);
  --backdropBackgroundColor: color-mix(in oklab, var(--ds-text) 30%, transparent);
  --backdropBackgroundBlur: 2px;

  /* Cookie-Icon-Farben (Kreis & SVG-Füllung) */
  --cookieIconColor: var(--ds-text);
  --cookieIconBackgroundColor: var(--ds-surface);

  /* Focus/Shadow */
  --focus: 0 0 0 2px var(--ds-surface), 0 0 0 6px color-mix(in oklab, var(--ds-primary) 60%, transparent);
  --boxShadow: 0 8px 24px rgba(0,0,0,.18);

  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===================================================================
   Grundstyles (Original-Struktur, behutsam angepasst)
   =================================================================== */

/* Backdrop (Global) */
#silktide-backdrop-global {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: auto;
  border: 0;
  display: none;
}

/* Links */
#silktide-wrapper a {
  all: unset;
  display: inline-block;
  color: var(--primaryColor);
  text-decoration: underline;
}
#silktide-wrapper a:hover {
  cursor: pointer;
  color: var(--textColor);
}

/* Focus Styles */
#silktide-wrapper a:focus,
#silktide-wrapper #silktide-banner button:focus,
#silktide-wrapper #silktide-modal button:focus,
#silktide-wrapper #silktide-cookie-icon:focus {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}
#silktide-wrapper #silktide-cookie-icon:focus { border-radius: 50%; }

/* Buttons */
#silktide-wrapper .st-button {
  color: var(--backgroundColor);
  background-color: var(--primaryColor);
  border: 2px solid var(--primaryColor);
  padding: 12px 18px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 600;
}
#silktide-wrapper .st-button--primary:hover {
  background-color: var(--ds-primary-2);
  border-color: var(--ds-primary-2);
  color: var(--backgroundColor);
}
#silktide-wrapper .st-button--secondary {
  background-color: color-mix(in oklab, var(--ds-surface) 75%, var(--ds-text));
  color: var(--ds-text);
  border: 1px solid color-mix(in oklab, var(--ds-text) 16%, transparent);
}
#silktide-wrapper .st-button--secondary:hover {
  background-color: color-mix(in oklab, var(--ds-surface) 60%, var(--ds-text));
}

/* Banner */
#silktide-banner {
  font-family: var(--fontFamily);
  color: var(--textColor);
  background-color: var(--backgroundColor);
  box-sizing: border-box;
  padding: 32px;
  border-radius: 12px;
  pointer-events: auto;
  border: 1px solid color-mix(in oklab, var(--ds-text) 12%, transparent);
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 600px;
  overflow: auto;
  max-width: calc(100% - 32px);
  max-height: calc(100vh - 32px);
  transform: translate(0, -20px);
  opacity: 0;
  animation: silktide-slideInDown 350ms ease-out forwards;
  animation-delay: 0.3s;
  box-shadow: var(--boxShadow);
}
#silktide-banner:focus { border-radius: 12px; }
#silktide-banner.center {
  top: 50%; left: 50%; bottom: auto; right: auto;
  position: fixed;
  transform: translate(-50%, calc(-50% - 20px));
  animation: silktide-slideInDown-center 350ms ease-out forwards;
}
#silktide-banner.bottomLeft { bottom: 16px; left: 16px; position: fixed; }
#silktide-banner.bottomCenter {
  bottom: 16px; left: 50%; position: fixed;
  transform: translate(-50%, -20px);
  animation: silktide-slideInDown-bottomCenter 350ms ease-out forwards;
}
#silktide-banner p {
  font-size: 16px; line-height: 24px; margin: 0 0 15px;
}
#silktide-banner a {
  display: inline-block;
  color: var(--primaryColor);
  text-decoration: underline;
  background-color: var(--backgroundColor);
}
#silktide-banner a:hover { color: var(--textColor); }

/* Silktide-Logo im Banner (ausblenden) + eigenes Logo */
#silktide-banner a.silktide-logo { display: none !important; }
#silktide-banner a.brand-logo{
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  margin-left: auto;
}
#silktide-banner a.brand-logo img{
  width:100%; height:100%; object-fit:contain;
}

#silktide-banner .actions {
  display: flex; gap: 16px; flex-direction: column; margin-top: 24px;
}
@media (min-width: 600px) {
  #silktide-banner .actions { flex-direction: row; align-items: center; }
}
#silktide-banner .actions-row {
  display:flex; gap:16px; flex-direction:row; align-items:center; justify-content:space-between; flex-grow:1;
}

/* Preferences Link im Banner */
#silktide-banner .preferences {
  display:flex; gap:6px; border:none; padding:15px 0; background:transparent;
  color: var(--primaryColor); cursor:pointer; font-size:16px;
}
#silktide-banner .preferences span { display:block; white-space:nowrap; text-decoration:underline; }
#silktide-banner .preferences span:hover { color: var(--textColor); }
#silktide-banner .preferences:after { display:block; content:'>'; text-decoration:none; }

/* Modal */
#silktide-modal {
  display: none;
  pointer-events: auto;
  overflow: auto;
  width: 800px; max-width: 100%; max-height: 100%;
  border: 1px solid color-mix(in oklab, var(--ds-text) 12%, transparent);
  transform: translate(0, -20px);
  opacity: 0;
  animation: silktide-slideInUp-center 350ms ease-out forwards;
  box-shadow: var(--boxShadow);
  font-family: var(--fontFamily);
  color: var(--textColor);
  flex-direction: column;
  padding: 30px;
  background-color: var(--backgroundColor);
  border-radius: 12px;
  box-sizing: border-box;
}
#silktide-modal header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; gap: 16px;
}
#silktide-modal h1 {
  font-family: var(--fontFamily);
  color: var(--textColor);
  font-size: 24px; font-weight: 600; margin: 0;
}
#silktide-modal .modal-close {
  display: inline-flex; border: none; padding: 10px;
  cursor: pointer; background: var(--backgroundColor); color: var(--primaryColor);
  border-radius: 10px;
}
#silktide-modal .modal-close svg { fill: var(--primaryColor); }

#silktide-modal section { flex:1; margin-top:32px; }
#silktide-modal section::-webkit-scrollbar { display:block; width:5px; }
#silktide-modal section::-webkit-scrollbar-thumb {
  background-color: var(--textColor); border-radius:10px;
}
#silktide-modal p { font-size:16px; line-height:24px; color:var(--textColor); margin:0 0 15px; }
#silktide-modal p:last-of-type { margin:0; }
#silktide-modal fieldset { padding:0; border:none; margin:0 0 32px; }
#silktide-modal fieldset:last-of-type { margin:0; }
#silktide-modal legend {
  padding:0; margin:0 0 10px; font-weight:700; color:var(--textColor); font-size:16px;
}
#silktide-modal .cookie-type-content {
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
}

/* Switches */
#silktide-modal .switch {
  flex-shrink: 0; position: relative; display:inline-block;
  height:34px; width:74px; cursor:pointer;
}
#silktide-modal .switch:focus-within { box-shadow: var(--focus); border-radius:25px; outline:none; }
#silktide-modal .switch input { opacity:0; position:absolute; }

/* Off */
#silktide-modal .switch__pill {
  position:relative; display:block; height:34px; width:74px;
  background: color-mix(in oklab, var(--ds-text) 80%, transparent);
  border-radius:25px;
}
#silktide-modal .switch__dot {
  position:absolute; top:2px; left:2px; display:block; height:30px; width:30px;
  background: var(--ds-surface);
  border-radius:50%;
  transition:left 150ms ease-out;
  border: 1px solid color-mix(in oklab, var(--ds-text) 20%, transparent);
}
#silktide-modal .switch__off,
#silktide-modal .switch__on {
  text-transform:uppercase; font-size:12px; font-weight:600; color:var(--backgroundColor);
  position:absolute; top:9px; right:8px;
  transition:right 150ms ease-out, opacity 150ms ease-out;
}
#silktide-modal .switch__off { opacity:1; }
#silktide-modal .switch__on { opacity:0; }

/* On */
#silktide-modal .switch input:checked + .switch__pill { background: var(--primaryColor); }
#silktide-modal .switch input:checked ~ .switch__dot { left: calc(100% - 32px); }
#silktide-modal .switch input:checked ~ .switch__off { right: calc(100% - 32px); opacity:0; }
#silktide-modal .switch input:checked ~ .switch__on { right: calc(100% - 34px); opacity:1; }
#silktide-modal .switch input:disabled + .switch__pill { opacity:.65; cursor:not-allowed; }

/* Modal Footer */
#silktide-modal footer {
  display:flex; flex-direction:column; gap:16px; margin-top:24px;
}
@media (min-width: 600px) {
  #silktide-modal footer { flex-direction:row; align-items:center; }
}
#silktide-modal footer a { margin-left:auto; padding:14px 0; }

/* Silktide Credit im Footer sicher verstecken (falls vorhanden) */
#silktide-modal footer a[href*="silktide.com"]{ display:none !important; }

/* Eigenes Logo auch im Modal erlaubt (falls in JS gesetzt) */
#silktide-modal a.brand-logo{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
}
#silktide-modal a.brand-logo img{ width:100%; height:100%; object-fit:contain; }

/* Cookie Icon (Button unten) */
#silktide-cookie-icon{
  display:none;
  position:fixed; bottom:10px; left:10px;
  justify-content:center; align-items:center;
  width:60px; height:60px; border-radius:50%;
  padding:0; border:none;
/* background-color: var(--cookieIconColor); */
  cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.2);
  pointer-events:auto; animation: silktide-fadeIn .3s ease-in-out forwards;

  /* Eigenes SVG als Hintergrund */
  background-image: url('/wp-content/themes/ds_network/assets/icons/cookie.svg');
  background-repeat:no-repeat; background-position:center; background-size:32px 32px;
}
#silktide-cookie-icon.bottomRight { left:auto; right:10px; }

/* eingebautes SVG ausblenden – wir nutzen das eigene Hintergrundbild */
#silktide-cookie-icon svg{ display:none !important; }

/* Backdrop */
#silktide-backdrop {
  display:none; position:absolute; top:0; left:0; width:100%; height:100%;
  background-color: var(--backdropBackgroundColor);
  backdrop-filter: blur(var(--backdropBackgroundBlur));
  pointer-events: all;
}

/* Animations */
@keyframes silktide-fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes silktide-slideInDown {
  from { opacity:0; transform: translateY(-20px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes silktide-slideInDown-center {
  from { opacity:0; transform: translate(-50%, calc(-50% - 20px)); }
  to   { opacity:1; transform: translate(-50%, -50%); }
}
@keyframes silktide-slideInDown-bottomCenter {
  from { opacity:0; transform: translate(-50%, -20px); }
  to   { opacity:1; transform: translate(-50%, 0); }
}
@keyframes silktide-slideInUp-center {
  from { opacity:0; transform: translate(0, 20px); }
  to   { opacity:1; transform: translate(0, 0); }
}

#silktide-banner .st-button--secondary { order: 1 !important; }
#silktide-banner .preferences          { order: 2 !important; }
#silktide-banner .st-button--primary   { order: 3 !important; }

@media (min-width: 600px){
  /* Wenn „Akzeptieren“ ganz rechts kleben soll */
  #silktide-banner .st-button--primary { margin-left: auto; }
}

/* Z-Index Safety */
#silktide-cookie-banner, #silktide-banner, #silktide-modal{ z-index: 999999 !important; }