/* ZDSR × Chain|HUB widget skin: host-page variables and modal integration.
 * Original design basis: ZDSR/assets/css/styles.css, supplied 15.10.2026.
 * This file only styles the ZDSR host; iframe UI uses its own stylesheet.
 * Only activate after widget release gates, domain verification and CSP review.
 */

#seiteninhalt .zdsr-widget-mount {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

/* Values inherited from ZDSR's actual existing :root variables.
 * The Chain|HUB loader reads computed --ch-widget-* variables on the
 * .chainhub-calendar element and sends only allowlisted values to the iframe.
 */
#seiteninhalt .chainhub-calendar[data-skin="zdsr"] {
  --ch-widget-bg: #050505;
  --ch-widget-surface: #14110c;
  --ch-widget-text: #eee8dc;
  --ch-widget-muted: #aaa093;
  --ch-widget-accent: #e5c77e;
  --ch-widget-link: #e5c77e;
  --ch-widget-border: rgba(205,169,90,.30);
  --ch-widget-radius: 0px;
  --ch-widget-font: Arial, Helvetica, sans-serif;
  --ch-widget-heading-font: Georgia, "Times New Roman", serif;

  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--ivory);
  border: 0;
  box-shadow: none;
}

#seiteninhalt .chainhub-calendar[data-skin="zdsr"] iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* The loader's localized error message is hosted OUTSIDE the iframe. */
#seiteninhalt .chainhub-calendar[data-skin="zdsr"] [role="alert"] {
  margin: 0;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--panel-warm);
  color: var(--ivory);
  font-size: 14px;
  line-height: 1.65;
}

/* The widget loader appends a modal overlay directly to <body>.
 * Keep ZDSR modal styling scoped to the loader's named overlay.
 */
body .chainhub-widget-overlay {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body .chainhub-widget-overlay > iframe {
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
}

@media (max-width: 640px) {
  #seiteninhalt .chainhub-calendar[data-skin="zdsr"] {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .chainhub-widget-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}