/* WP Barrierefrei – Frontend Styles */

.wpbf-root {
    --wpbf-accent-bg: #111;
    --wpbf-accent-fg: #fff;
    --wpbf-panel-bg: #fff;
    --wpbf-panel-fg: #111;
    position: fixed;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    line-height: 1.4;
}

/* ----- Positions ----- */
.wpbf-pos-top-left     { top: 16px;    left: 0;  }
.wpbf-pos-top-right    { top: 16px;    right: 0; }
.wpbf-pos-mid-left     { top: 50%;     left: 0;  transform: translateY(-50%); }
.wpbf-pos-mid-right    { top: 50%;     right: 0; transform: translateY(-50%); }
.wpbf-pos-bottom-left  { bottom: 16px; left: 0;  }
.wpbf-pos-bottom-right { bottom: 16px; right: 0; }

/* Floating toggle button */
.wpbf-toggle {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--wpbf-panel-bg);
    color: var(--wpbf-panel-fg);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpbf-toggle:hover,
.wpbf-toggle:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    outline: 2px solid var(--wpbf-accent-bg);
    outline-offset: 2px;
}

/* Panel */
.wpbf-panel {
    position: absolute;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--wpbf-panel-bg);
    color: var(--wpbf-panel-fg);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.wpbf-panel[hidden] { display: none; }

/* Horizontal anchor: panel opens to the side opposite the button edge */
.wpbf-pos-top-left     .wpbf-panel,
.wpbf-pos-mid-left     .wpbf-panel,
.wpbf-pos-bottom-left  .wpbf-panel { left: 56px;  right: auto; }
.wpbf-pos-top-right    .wpbf-panel,
.wpbf-pos-mid-right    .wpbf-panel,
.wpbf-pos-bottom-right .wpbf-panel { right: 56px; left: auto;  }

/* Vertical anchor: top → expand down, mid → centered, bottom → expand up */
.wpbf-pos-top-left     .wpbf-panel,
.wpbf-pos-top-right    .wpbf-panel { top: 0; bottom: auto; }
.wpbf-pos-mid-left     .wpbf-panel,
.wpbf-pos-mid-right    .wpbf-panel { top: 50%; bottom: auto; transform: translateY(-50%); }
.wpbf-pos-bottom-left  .wpbf-panel,
.wpbf-pos-bottom-right .wpbf-panel { bottom: 0; top: auto; }

/* Header */
.wpbf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--wpbf-accent-bg);
    color: var(--wpbf-accent-fg);
    padding: 14px 16px;
}
.wpbf-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--wpbf-accent-fg);
}
.wpbf-close {
    background: transparent;
    border: none;
    color: var(--wpbf-accent-fg);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wpbf-close:hover,
.wpbf-close:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

/* Body */
.wpbf-body {
    padding: 12px 16px 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.wpbf-section { margin: 10px 0; }
.wpbf-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpbf-panel-fg);
}
.wpbf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wpbf-sep {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 12px 0;
}

/* Pills (option buttons) */
.wpbf-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wpbf-pill {
    appearance: none;
    border: 1.5px solid var(--wpbf-panel-fg);
    background: var(--wpbf-panel-bg);
    color: var(--wpbf-panel-fg);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wpbf-pill:hover,
.wpbf-pill:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}
.wpbf-pill.is-active {
    background: var(--wpbf-accent-bg);
    color: var(--wpbf-accent-fg);
    border-color: var(--wpbf-accent-bg);
}

/* ----- Effects on host page ----- */

/* Font size scaling is applied via JS (DOM walk + inline font-size),
   because many themes (e.g. Avada) set font-size explicitly in px on
   descendants, which would override a html-level rem scale. */

/* High contrast */
html.wpbf-contrast-high body,
html.wpbf-contrast-high body * {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
html.wpbf-contrast-high body a,
html.wpbf-contrast-high body a * {
    color: #ffd400 !important;
    text-decoration: underline !important;
}
html.wpbf-contrast-high body img,
html.wpbf-contrast-high body video {
    filter: grayscale(1) contrast(1.2);
}
/* Keep our own widget readable in high-contrast mode */
html.wpbf-contrast-high .wpbf-root,
html.wpbf-contrast-high .wpbf-root * {
    background: revert !important;
    color: revert !important;
    border-color: revert !important;
}
html.wpbf-contrast-high .wpbf-header,
html.wpbf-contrast-high .wpbf-header * {
    background: var(--wpbf-accent-bg) !important;
    color: var(--wpbf-accent-fg) !important;
}

/* Hide images */
html.wpbf-hide-images body img,
html.wpbf-hide-images body picture,
html.wpbf-hide-images body video,
html.wpbf-hide-images body svg:not(.wpbf-root svg):not(.wpbf-root *) {
    visibility: hidden !important;
}
html.wpbf-hide-images .wpbf-root,
html.wpbf-hide-images .wpbf-root * {
    visibility: visible !important;
}

/* TTS active highlight */
.wpbf-tts-highlight {
    background: #fff59d !important;
    color: #111 !important;
    box-shadow: 0 0 0 2px #fbc02d;
}

/* Mobile */
@media (max-width: 600px) {
    .wpbf-toggle { width: 52px; height: 52px; margin: 0 6px; }
    .wpbf-panel  { width: calc(100vw - 16px); max-width: 380px; }
    .wpbf-body   { max-height: 60vh; }
    .wpbf-pill   { padding: 10px 18px; font-size: 15px; }

    /* Push the panel away from the button so it doesn't sit on top of it */
    .wpbf-pos-top-left     .wpbf-panel,
    .wpbf-pos-mid-left     .wpbf-panel,
    .wpbf-pos-bottom-left  .wpbf-panel { left: 60px;  right: auto; }
    .wpbf-pos-top-right    .wpbf-panel,
    .wpbf-pos-mid-right    .wpbf-panel,
    .wpbf-pos-bottom-right .wpbf-panel { right: 60px; left: auto;  }
}

/* Very small screens: panel uses the full width below/above the button */
@media (max-width: 420px) {
    .wpbf-panel { width: calc(100vw - 16px); max-width: none; }

    .wpbf-pos-top-left     .wpbf-panel,
    .wpbf-pos-top-right    .wpbf-panel,
    .wpbf-pos-mid-left     .wpbf-panel,
    .wpbf-pos-mid-right    .wpbf-panel {
        left: 8px; right: 8px; top: 64px; bottom: auto; transform: none;
    }
    .wpbf-pos-bottom-left  .wpbf-panel,
    .wpbf-pos-bottom-right .wpbf-panel {
        left: 8px; right: 8px; bottom: 64px; top: auto;
    }
}