/**
 * Kai Leeshulp Widget — Toegankelijke leeshulp UI
 * Brand: Kai Leeshulp (#1594C8 cyan / #23304C navy)
 * Lettertype: Atkinson Hyperlegible (toegankelijkheidsfont)
 */

/* ══════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════ */
#basistaal-root,
.bt-toolbar,
.bt-word-tooltip,
.bt-feedback-modal,
.bt-instruction-banner {
    --bt-primary: #1594C8;
    --bt-primary-light: #4FB3DB;
    --bt-primary-hover: #117AA6;
    --bt-primary-soft: rgba(21, 148, 200, 0.08);
    --bt-primary-ring: rgba(21, 148, 200, 0.25);
    --bt-accent: #23304C;
    --bt-accent-light: #3B4D75;
    --bt-accent-hover: #1A243A;
    --bt-accent-soft: rgba(35, 48, 76, 0.1);
    --bt-warning: #FFBC7D;
    --bt-warning-soft: rgba(255, 188, 125, 0.25);
    --bt-text: #131313;
    --bt-text-light: #4A5568;
    --bt-text-muted: #8A94A6;
    --bt-bg: #FFFFFF;
    --bt-bg-hover: #F4F9FC;
    --bt-bg-subtle: #EAF4FA;
    --bt-border: #D6E4EC;
    --bt-border-light: #EAF4FA;
    --bt-radius: 14px;
    --bt-radius-sm: 10px;
    --bt-radius-xs: 6px;
    --bt-radius-pill: 999px;
    --bt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --bt-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --bt-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --bt-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    --bt-font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --bt-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--bt-font);
    line-height: 1.5;
    box-sizing: border-box;
    z-index: 99990;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#basistaal-root *, #basistaal-root *::before, #basistaal-root *::after,
.bt-toolbar *, .bt-toolbar *::before, .bt-toolbar *::after {
    box-sizing: border-box;
}

/* Enforce Atkinson Hyperlegible across the widget (override host-theme fonts) */
#basistaal-root, #basistaal-root *,
.bt-toolbar, .bt-toolbar *,
.bt-panel, .bt-panel *,
.bt-word-tooltip, .bt-word-tooltip *,
.bt-instruction-banner, .bt-instruction-banner *,
.bt-feedback-modal, .bt-feedback-modal *,
.bt-floating-btn {
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

body.bt-dyslexia-on #basistaal-root, body.bt-dyslexia-on #basistaal-root *,
body.bt-dyslexia-on .bt-toolbar, body.bt-dyslexia-on .bt-toolbar *,
body.bt-dyslexia-on .bt-panel, body.bt-dyslexia-on .bt-panel *,
body.bt-dyslexia-on .bt-word-tooltip, body.bt-dyslexia-on .bt-word-tooltip *,
body.bt-dyslexia-on .bt-instruction-banner, body.bt-dyslexia-on .bt-instruction-banner *,
body.bt-dyslexia-on .bt-feedback-modal, body.bt-dyslexia-on .bt-feedback-modal *,
body.bt-dyslexia-on .bt-floating-btn {
    font-family: 'OpenDyslexic', "Atkinson Hyperlegible", sans-serif !important;
}

/* ══════════════════════════════════════════
   TOOLBAR — Frosted floating bar
   ══════════════════════════════════════════ */
.bt-toolbar--buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bt-bg);
    border: 1px solid var(--bt-border-light);
    border-radius: var(--bt-radius-pill);
    box-shadow: 0 2px 8px rgba(35, 48, 76, 0.05), 0 1px 2px rgba(35, 48, 76, 0.04);
    padding: 8px 12px;
    width: fit-content;
    max-width: 100%;
    margin: 20px auto;
    flex-wrap: wrap;
}

.bt-toolbar--align-center { margin-left: auto; margin-right: auto; }
.bt-toolbar--align-left   { margin-left: 0; margin-right: auto; }
.bt-toolbar--align-right  { margin-left: auto; margin-right: 0; }

.bt-toolbar-wrapper {
    width: 100%;
    min-width: 500px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.bt-toolbar--single {
    display: flex;
    justify-content: center;
    margin: 16px auto;
}

/* ══════════════════════════════════════════
   BUTTONS — Pill-shaped, soft
   ══════════════════════════════════════════ */
.bt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-radius-pill);
    background: var(--bt-bg);
    color: var(--bt-text);
    font-family: var(--bt-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bt-transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.3;
    min-height: 35px;
    letter-spacing: -0.01em;
}

.bt-btn:hover {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    color: #fff;
}

.bt-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring);
    outline-offset: 2px;
}

.bt-btn:active {
    transform: scale(0.97);
    background: var(--bt-primary);
    color: #fff;
    border-color: var(--bt-primary);
}

.bt-btn--circle {
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: var(--bt-primary);
    color: #fff;
    border-color: var(--bt-primary);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 12px var(--bt-primary-ring);
}

.bt-btn--circle:hover {
    background: var(--bt-primary-hover);
    border-color: var(--bt-primary-hover);
    box-shadow: 0 4px 20px var(--bt-primary-ring);
    transform: scale(1.05);
}

.bt-btn--secondary {
    background: var(--bt-bg-subtle);
    border-color: transparent;
    color: var(--bt-text-light);
}

.bt-btn--secondary:hover {
    background: var(--bt-primary-soft);
    color: var(--bt-primary);
}

.bt-btn--small {
    padding: 7px 14px;
    font-size: 13px;
    margin-top: 10px;
    min-height: 36px;
}

.bt-btn--tiny {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    background: var(--bt-bg-subtle);
    cursor: pointer;
    margin-left: 6px;
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bt-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bt-primary);
    transition: color var(--bt-transition);
}

.bt-btn__icon svg {
    height: 18px;
    width: auto;
    max-width: 24px;
    display: block;
}

.bt-btn:hover .bt-btn__icon,
.bt-btn:active .bt-btn__icon,
.bt-btn--active .bt-btn__icon {
    color: #fff;
}

.bt-btn--circle .bt-btn__icon {
    color: #fff;
}

.bt-btn--circle .bt-btn__icon svg {
    height: 20px;
    max-width: 22px;
}

.bt-btn--active {
    background: var(--bt-primary);
    color: #fff;
    border-color: var(--bt-primary);
}

/* ══════════════════════════════════════════
   INSTRUCTION BANNER — Compact bottom bar
   ══════════════════════════════════════════ */
.bt-instruction-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06);
    z-index: 99993;
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    color: #131313;
    animation: bt-slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bt-instruction-banner__content { flex: 1; min-width: 0; }
.bt-instruction-banner__message { display: block; font-weight: 600; margin-bottom: 2px; }

.bt-instruction-banner__readtext {
    display: block;
    font-size: 13px;
    color: var(--bt-text-light);
    font-weight: 400;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    padding: 8px 12px;
    background: var(--bt-bg-subtle);
    border-radius: var(--bt-radius-xs);
    border-left: 3px solid var(--bt-primary);
}

@keyframes bt-slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.bt-instruction-banner__close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-pill);
    background: var(--bt-bg);
    color: var(--bt-text-light);
    font-family: var(--bt-font);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--bt-transition);
    min-height: 44px;
    min-width: 44px;
}

.bt-instruction-banner__close:hover { background: var(--bt-bg-subtle); color: var(--bt-text); }

/* ══════════════════════════════════════════
   TTS CONTROLS — Speed, sentence display
   ══════════════════════════════════════════ */
/* TTS Player row - centered play controls */
.bt-tts-player-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* TTS Settings row - speed, voice, gear below player */
.bt-tts-settings-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.bt-tts-settings-row select {
    padding: 8px 12px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 13px;
    background: var(--bt-bg);
    cursor: pointer;
    appearance: auto;
    min-height: 36px;
    color: var(--bt-text);
}

.bt-tts-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    background: var(--bt-bg);
    cursor: pointer;
    color: var(--bt-text-light);
    transition: all var(--bt-transition);
    padding: 0;
}

.bt-tts-settings-btn:hover {
    background: var(--bt-bg-subtle);
    color: var(--bt-text);
    border-color: var(--bt-primary-light);
}

.bt-tts-settings-btn svg {
    width: 18px;
    height: 18px;
}

/* Legacy speed class (keep for backwards compat) */
.bt-tts-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bt-text-light);
}

.bt-tts-speed select {
    padding: 8px 12px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 13px;
    background: var(--bt-bg);
    cursor: pointer;
    appearance: auto;
    min-height: 36px;
}

.bt-tts-sentence {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bt-text-light);
    text-align: center;
    padding: 16px 24px;
    background: var(--bt-bg-subtle);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    min-height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bt-tts-sentence:empty { display: none; }

/* ══════════════════════════════════════════
   SIMPLIFY CONTENT
   ══════════════════════════════════════════ */
.bt-simplify-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bt-simplify-content ul { list-style: disc; padding-left: 20px; margin: 0; }
.bt-simplify-content li { margin-bottom: 10px; font-size: inherit; line-height: 1.7; }
.bt-simplify-content p { font-size: inherit; margin: 0 0 10px 0; }

/* ══════════════════════════════════════════
   SINGLE BUTTON
   ══════════════════════════════════════════ */
.bt-single-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-radius-pill);
    background: var(--bt-bg);
    color: var(--bt-primary);
    font-family: var(--bt-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bt-transition);
    box-shadow: var(--bt-shadow-xs);
}

.bt-single-btn:hover {
    background: var(--bt-primary-soft);
    border-color: var(--bt-primary-light);
    box-shadow: var(--bt-shadow);
}

/* ══════════════════════════════════════════
   FLOATING BUTTON — Pulsing glow
   ══════════════════════════════════════════ */
.bt-floating-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    /* --bt-floating-bg wordt gezet vanuit JS wanneer floating_color in
       admin is ingesteld; anders erft hij de primaire kleur. */
    background: var(--bt-floating-bg, var(--bt-primary));
    color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99991;
    box-shadow: 0 4px 20px var(--bt-primary-ring), 0 0 0 0 var(--bt-primary-ring);
    animation: bt-pulse 3s ease-in-out infinite;
    font-family: inherit;
}

.bt-floating-btn--circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
}

.bt-floating-btn--pill {
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.bt-floating-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bt-floating-btn__label {
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Corner positioning — overrides the default bottom/right above */
.bt-floating-btn--bottom-right { bottom: 28px; right: 28px; top: auto; left: auto; }
.bt-floating-btn--bottom-left  { bottom: 28px; left: 28px; top: auto; right: auto; }
.bt-floating-btn--top-right    { top: 28px; right: 28px; bottom: auto; left: auto; }
.bt-floating-btn--top-left     { top: 28px; left: 28px; bottom: auto; right: auto; }

@keyframes bt-pulse {
    0%, 100% { box-shadow: 0 4px 20px var(--bt-primary-ring), 0 0 0 0 var(--bt-primary-ring); }
    50% { box-shadow: 0 4px 20px var(--bt-primary-ring), 0 0 0 8px rgba(21, 148, 200, 0); }
}

.bt-floating-btn:hover {
    transform: scale(1.08);
    background: var(--bt-primary-hover);
    box-shadow: 0 8px 32px var(--bt-primary-ring);
    animation: none;
}

.bt-floating-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring);
    outline-offset: 4px;
}

.bt-floating-btn svg { width: 22px; height: 22px; }
.bt-floating-btn--circle svg { width: 26px; height: 26px; }

/* Inline placeholder (shortcode) */
.bt-inline-placeholder { width: 100%; margin: 20px 0; }
.bt-inline-placeholder .bt-toolbar { margin: 0 auto; }

/* ══════════════════════════════════════════
   PANEL — Slide-up with soft edges
   ══════════════════════════════════════════ */
.bt-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: 590px;
    max-height: 85vh;
    background: var(--bt-bg);
    border: 1px solid var(--bt-border-light);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 60px rgba(15, 23, 42, 0.18), 0 -4px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99992;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.bt-panel--open { transform: translate(-50%, 0); }

/* OpenDyslexic glyphs are noticeably wider — give the panel more room
   so labels and grids don't wrap or clip. */
body.bt-dyslexia-on .bt-panel { max-width: 720px; }

/* Backdrop / scrim — solid darkening, no blur (better contrast & a11y) */
.bt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99991;
}
.bt-backdrop--visible { opacity: 1; pointer-events: auto; }

/* Panel header: back-chevron (or spacer) | centered title | close × */
.bt-panel__header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bt-border-light);
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 1;
    min-height: 64px;
}

.bt-panel__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bt-accent) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.bt-panel__spacer { display: block; width: 44px; height: 44px; }

.bt-panel__back,
.bt-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    font-family: var(--bt-font) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    color: var(--bt-text-light) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    font-weight: normal !important;
    font-size: 0 !important;
}

.bt-panel__back svg,
.bt-panel__close svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.bt-panel__back { color: var(--bt-primary) !important; justify-self: start; }
.bt-panel__close { justify-self: end; color: var(--bt-text-light) !important; }

.bt-panel__back:hover,
.bt-panel__back:focus-visible {
    background: var(--bt-primary-soft) !important;
    border-color: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}

.bt-panel__close:hover,
.bt-panel__close:focus-visible {
    background: var(--bt-bg-subtle) !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-accent) !important;
}

.bt-panel__body {
    padding: 20px 24px 28px;
    min-height: 120px;
}

/* ══════════════════════════════════════════
   MENU GRID — Card tiles with hover lift
   ══════════════════════════════════════════ */
.bt-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 4px;
}

@media (max-width: 820px) {
    .bt-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

.bt-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 26px 12px 20px;
    border: 1px solid var(--bt-border-light);
    border-radius: 18px;
    background: var(--bt-bg);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--bt-font);
    text-align: center;
    min-height: 128px;
    box-shadow: 0 1px 2px rgba(35, 48, 76, 0.04),
                0 2px 8px rgba(35, 48, 76, 0.05);
    color: var(--bt-accent);
}

.bt-menu-item:hover {
    border-color: var(--bt-primary-light);
    background: var(--bt-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(21, 148, 200, 0.14),
                0 2px 6px rgba(35, 48, 76, 0.06);
}

.bt-menu-item:focus-visible {
    outline: 3px solid var(--bt-primary-ring);
    outline-offset: 3px;
}

.bt-menu-item:active { transform: translateY(-1px) scale(0.98); }

.bt-menu-item[aria-pressed="true"] {
    background: var(--bt-primary-soft);
    border-color: var(--bt-primary);
    box-shadow: 0 4px 16px rgba(21, 148, 200, 0.2);
}

.bt-menu-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    color: var(--bt-primary);
    line-height: 1;
}

.bt-menu-item__icon svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 48px;
    display: block;
}

.bt-menu-item__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--bt-accent);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ══════════════════════════════════════════
   TTS PLAYER — Spotify-inspired
   ══════════════════════════════════════════ */
.bt-tts-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.bt-tts-player {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bt-tts-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--bt-border) !important;
    background: var(--bt-bg) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--bt-transition) !important;
    color: var(--bt-text-light) !important;
    padding: 0 !important;
}

.bt-tts-btn svg { width: 20px !important; height: 20px !important; fill: var(--bt-text-light) !important; }

.bt-tts-btn:hover {
    border-color: var(--bt-primary-light) !important;
    background: var(--bt-primary-soft) !important;
    color: var(--bt-primary) !important;
}

.bt-tts-btn:hover svg { fill: var(--bt-primary) !important; }

.bt-tts-btn:focus-visible { outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 2px !important; }

.bt-tts-btn--play {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
    font-size: 24px !important;
    box-shadow: 0 4px 16px var(--bt-accent-soft), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.bt-tts-btn--play svg { width: 28px !important; height: 28px !important; fill: #fff !important; }

.bt-tts-btn--play:hover {
    background: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 8px 24px var(--bt-accent-soft) !important;
}

.bt-tts-status {
    font-size: 13px;
    color: var(--bt-text-muted);
    min-height: 20px;
    text-align: center;
    font-weight: 500;
}

/* ══════════════════════════════════════════
   TTS PROGRESS BAR
   ══════════════════════════════════════════ */
.bt-tts-progress {
    width: 100%;
    height: 4px;
    background: var(--bt-bg-subtle);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.bt-tts-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bt-primary), var(--bt-primary-light));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ══════════════════════════════════════════
   LANGUAGE GRID
   ══════════════════════════════════════════ */
.bt-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.bt-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    background: var(--bt-bg);
    cursor: pointer;
    transition: all var(--bt-transition);
    font-family: var(--bt-font);
    text-align: left;
    min-height: 44px;
}

.bt-lang-btn:hover {
    border-color: var(--bt-primary-light);
    background: var(--bt-primary-soft);
}

.bt-lang-flag { font-size: 20px; }
.bt-lang-name strong { font-size: 13px; color: var(--bt-text); }
.bt-lang-name small { font-size: 11px; color: var(--bt-text-muted); }

/* ══════════════════════════════════════════
   FONT SIZE GRID
   ══════════════════════════════════════════ */
.bt-fontsize-grid { display: flex; gap: 12px; justify-content: center; }

.bt-fontsize-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 28px;
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    background: var(--bt-bg);
    cursor: pointer;
    font-family: var(--bt-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--bt-text);
    transition: all var(--bt-transition);
    min-height: 44px;
}

.bt-fontsize-btn--active {
    border-color: var(--bt-primary);
    background: var(--bt-primary-soft);
    color: var(--bt-primary);
}

.bt-fontsize-btn:hover { border-color: var(--bt-primary-light); background: var(--bt-primary-soft); }
.bt-fontsize-letter { font-weight: 700; color: var(--bt-text); }
.bt-fontsize-btn--active .bt-fontsize-letter { color: var(--bt-primary); }

/* ══════════════════════════════════════════
   WORD TOOLTIP — Floating card
   ══════════════════════════════════════════ */
.bt-word-tooltip {
    position: fixed;
    width: 360px;
    max-width: 90vw;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    z-index: 99999;
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    animation: bt-fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #131313;
    overflow: hidden;
}

@keyframes bt-fadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.bt-word-tooltip__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 17px;
    font-weight: 700;
    color: #1594C8;
    background: #EAF4FA;
}

.bt-word-tooltip__close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--bt-text-muted);
    padding: 4px 8px;
    border-radius: var(--bt-radius-xs);
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--bt-transition);
}

.bt-word-tooltip__close:hover { background: var(--bt-bg-hover); color: var(--bt-text); }

.bt-word-tooltip__body {
    padding: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bt-text);
}

/* ══════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════ */
.bt-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--bt-border-light);
    font-size: 15px;
    color: var(--bt-text);
    cursor: pointer;
}

.bt-setting-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--bt-primary);
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
}

.bt-setting-info { display: flex; flex-direction: column; gap: 3px; }
.bt-setting-label { font-weight: 600; font-size: 15px; }
.bt-setting-desc { font-size: 13px; color: var(--bt-text-muted); }

/* ══════════════════════════════════════════
   CONTENT STATES
   ══════════════════════════════════════════ */
.bt-loading { text-align: center; padding: 32px; color: var(--bt-text-muted); font-size: 15px; }
.bt-error { text-align: center; padding: 20px; color: #EF4444; font-size: 14px; font-weight: 500; }
.bt-success { text-align: center; padding: 20px; }
.bt-success p { margin-bottom: 12px; font-size: 15px; color: var(--bt-accent); font-weight: 600; }

.bt-disclaimer {
    margin-top: 16px;
    padding: 12px 16px;
    background: #FFFBEB;
    border-radius: var(--bt-radius-xs);
    font-size: 13px;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.bt-simplify-content { font-size: 16px; line-height: 1.8; color: var(--bt-text); }

/* ══════════════════════════════════════════
   READING HIGHLIGHTS
   ══════════════════════════════════════════ */
.bt-highlight-reading {
    background: var(--bt-primary-soft) !important;
    border-radius: 4px;
    outline: 2px solid var(--bt-primary-ring);
    outline-offset: 2px;
    transition: all 0.3s ease;
}

/* Choose-and-listen mode */
body.bt-choose-listen-mode p,
body.bt-choose-listen-mode li,
body.bt-choose-listen-mode h1, body.bt-choose-listen-mode h2,
body.bt-choose-listen-mode h3, body.bt-choose-listen-mode h4,
body.bt-choose-listen-mode h5, body.bt-choose-listen-mode h6,
body.bt-choose-listen-mode td, body.bt-choose-listen-mode th,
body.bt-choose-listen-mode blockquote,
body.bt-choose-listen-mode figcaption {
    cursor: pointer !important;
}

body.bt-choose-listen-mode p:hover,
body.bt-choose-listen-mode li:hover,
body.bt-choose-listen-mode h1:hover, body.bt-choose-listen-mode h2:hover,
body.bt-choose-listen-mode h3:hover, body.bt-choose-listen-mode h4:hover,
body.bt-choose-listen-mode h5:hover, body.bt-choose-listen-mode h6:hover,
body.bt-choose-listen-mode td:hover, body.bt-choose-listen-mode th:hover,
body.bt-choose-listen-mode blockquote:hover,
body.bt-choose-listen-mode figcaption:hover {
    background: var(--bt-primary-soft) !important;
    border-radius: 6px;
}

/* Word highlight in explain mode */
.bt-word-highlight {
    background: rgba(21, 148, 200, 0.15);
    border-radius: 3px;
    padding: 1px 3px;
    transition: background 0.2s ease;
}

/* Explain mode underlines */
.bt-explain-active p, .bt-explain-active li,
.bt-explain-active td, .bt-explain-active th,
.bt-explain-active h1, .bt-explain-active h2,
.bt-explain-active h3, .bt-explain-active h4,
.bt-explain-active h5, .bt-explain-active h6,
.bt-explain-active a {
    cursor: help !important;
}

body.bt-explain-mode .bt-explain-active *:not(button):not(.bt-btn):not(.bt-toolbar):not(.bt-panel) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--bt-primary-light);
    text-underline-offset: 4px;
}

body.bt-explain-mode .bt-explain-active a { pointer-events: auto; cursor: help !important; }
body.bt-no-underline .bt-explain-active * { text-decoration: none !important; }

/* ─── Grote letters: hele pagina vergroten met CSS `zoom` ───
   `zoom` schaalt tekst, regelhoogte, witruimte én afbeeldingen samen mee, dus
   de layout blijft heel en loopt niet over. De viewport verandert niet, dus
   responsive breakpoints klappen niet om (het desktopmenu blijft het
   desktopmenu). `zoom` stapelt multiplicatief, daarom worden de widget-UI en
   elke gemarkeerde site-header met 1/zoom terug-geschaald: de header zodat het
   menu in beeld blijft, de widget zodat de knoppen bruikbaar blijven. */
body.bt-zoom-active {
    zoom: var(--bt-zoom, 1);
}
body.bt-zoom-active > #basistaal-root,
body.bt-zoom-active > .bt-toolbar,
body.bt-zoom-active > .bt-toolbar-wrapper,
body.bt-zoom-active > .bt-instruction-banner,
body.bt-zoom-active > .bt-word-tooltip,
body.bt-zoom-active > .bt-feedback-modal,
body.bt-zoom-active > .bt-skip-link,
body.bt-zoom-active .bt-keep-native-scale {
    zoom: calc(1 / var(--bt-zoom, 1)) !important;
}

/* Een horizontaal menu kan niet zowel groter worden als op één regel passen.
   Daarom klapt het bij vergroten in tot het hamburger-menu dat het thema zelf
   al heeft: de horizontale balk wordt verborgen en de toggle getoond. De
   header staat op normale grootte (.bt-keep-native-scale hierboven), dus de
   toggle + het uitklap-menu worden met var(--bt-zoom) terug naar het gekozen
   niveau geschaald zodat de menutekst wél meegroeit. Open/dicht regelt het
   thema zelf. */
body.bt-zoom-active .bt-collapse-menu {
    display: none !important;
}
body.bt-zoom-active .bt-show-toggle {
    display: block !important;
    zoom: var(--bt-zoom, 1) !important;
}

/* Dyslexia — high-specificity override to beat theme rules like
   `.entry-content p { font-family: ... !important }`. The class is
   repeated to raise specificity to (0,2,1) without needing `html`. */
body.bt-dyslexia-on.bt-dyslexia-on,
body.bt-dyslexia-on.bt-dyslexia-on *:not(.fa):not([class*="fa-"]):not(.dashicons):not([class*="dashicons-"]):not(i) {
    font-family: 'OpenDyslexic', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* ══════════════════════════════════════════
   TTS SENTENCE & WORD HIGHLIGHTING
   ══════════════════════════════════════════ */
.bt-tts-sentence-active {
    background: var(--bt-warning-soft) !important;
    border-radius: 6px;
    padding: 2px 4px !important;
    transition: background 0.2s ease;
}

.bt-tts-word-active {
    background: rgba(245, 158, 11, 0.35) !important;
    border-radius: 3px;
    padding: 1px 1px;
    transition: background 0.1s ease;
}

.bt-word-span { transition: background 0.15s ease; }

@keyframes bt-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bt-spin { animation: bt-spin 1s linear infinite; }

/* Bold border mode */
body.bt-bold-border .bt-highlight-reading {
    outline-width: 3px !important;
    outline-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 3px var(--bt-primary-ring) !important;
}

body.bt-bold-border .bt-tts-sentence-active {
    box-shadow: 0 0 0 2px var(--bt-warning) !important;
}

body.bt-bold-border .bt-tts-word-active {
    outline: 2px solid var(--bt-warning) !important;
}

/* ══════════════════════════════════════════
   CONTACT, TOOLTIPS ACTIONS, FEEDBACK
   ══════════════════════════════════════════ */
.bt-contact-list { display: flex; flex-direction: column; gap: 10px; }

.bt-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    color: var(--bt-primary);
    text-decoration: none;
    font-size: 15px;
    font-family: var(--bt-font);
    transition: all var(--bt-transition);
    cursor: pointer;
    font-weight: 500;
}

.bt-contact-item:hover {
    background: var(--bt-primary-soft);
    border-color: var(--bt-primary-light);
    text-decoration: underline;
}

.bt-contact-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--bt-primary);
}

.bt-contact-item__icon svg {
    height: 22px;
    width: auto;
    max-width: 24px;
    display: block;
}

.bt-tooltip-lang-select {
    padding: 6px 10px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 12px;
    background: var(--bt-bg);
    cursor: pointer;
}

.bt-word-tooltip__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bt-border-light);
}

.bt-word-tooltip__explanation { font-size: 15px; line-height: 1.7; }

.bt-feedback-links {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--bt-border-light);
    font-size: 12px;
    color: var(--bt-text-muted);
}

.bt-feedback-links a { color: var(--bt-primary); text-decoration: underline; cursor: pointer; }
.bt-feedback-links a:hover { color: var(--bt-primary-hover); }

/* ══════════════════════════════════════════
   FEEDBACK MODAL
   ══════════════════════════════════════════ */
.bt-feedback-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    animation: bt-fadeIn 0.2s ease;
}

.bt-feedback-modal__content {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.bt-feedback-modal__content h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--bt-text); }
.bt-feedback-modal__content p { font-size: 15px; line-height: 1.6; margin-bottom: 6px; color: var(--bt-text); }
.bt-feedback-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bt-feedback-options label { font-size: 14px; cursor: pointer; color: var(--bt-text); }

.bt-feedback-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 14px;
    resize: vertical;
    transition: border-color var(--bt-transition);
}

.bt-feedback-textarea:focus { border-color: var(--bt-primary); outline: 3px solid var(--bt-primary-ring); }

/* ══════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ══════════════════════════════════════════ */
.bt-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.bt-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100001;
    padding: 12px 24px;
    background: var(--bt-primary);
    color: #fff;
    font-family: var(--bt-font);
    font-size: 15px;
    font-weight: 600;
    border-radius: 0 0 var(--bt-radius-xs) var(--bt-radius-xs);
    text-decoration: none;
    transition: top 0.2s ease;
}

.bt-skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: -3px; }

/* High contrast */
body.bt-high-contrast #basistaal-root,
body.bt-high-contrast .bt-toolbar,
body.bt-high-contrast .bt-panel,
body.bt-high-contrast .bt-word-tooltip,
body.bt-high-contrast .bt-instruction-banner {
    --bt-primary: #0056b3;
    --bt-text: #000;
    --bt-text-light: #333;
    --bt-bg: #fff;
    --bt-bg-hover: #e6e6e6;
    --bt-border: #000;
}

body.bt-high-contrast .bt-btn { border-width: 3px; font-weight: 700; }
body.bt-high-contrast .bt-btn:hover, body.bt-high-contrast .bt-btn:focus-visible { outline-width: 4px; outline-color: #000; }
body.bt-high-contrast .bt-menu-item { border-width: 3px; }
body.bt-high-contrast .bt-menu-item:hover, body.bt-high-contrast .bt-menu-item:focus-visible { border-color: #000; outline: 3px solid #000; }
body.bt-high-contrast .bt-panel__header { border-bottom-width: 3px; border-bottom-color: #000; }
body.bt-high-contrast .bt-word-tooltip { border-width: 3px; border-color: #000; }
body.bt-high-contrast .bt-error { color: #a00000; font-weight: 700; }

/* Focus ring for all interactive elements
   Reset theme :focus styles (outline + box-shadow) to prevent bleed-through,
   then apply our own ring on :focus-visible. */
#basistaal-root :focus,
.bt-toolbar :focus,
.bt-panel :focus,
.bt-word-tooltip :focus,
.bt-instruction-banner :focus,
.bt-feedback-modal :focus,
.bt-floating-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Theme's bare :focus (pink/brand) bleed through when focus returns to a
   trigger after closing a popup. Restore our base styles on non-keyboard,
   non-hovered focus (the :not(:hover) clause keeps hover styling intact). */
.bt-btn:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-bg) !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-text) !important;
}
.bt-btn--primary:focus:not(:focus-visible):not(:hover),
.bt-btn.bt-btn--active:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #fff !important;
}
.bt-icon-btn:focus:not(:focus-visible):not(:hover) {
    background: #FFFFFF !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-primary) !important;
}
.bt-icon-btn.bt-icon-btn--active:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #fff !important;
}
.bt-floating-btn:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-primary) !important;
    color: #fff !important;
}
#basistaal-root :focus-visible,
.bt-toolbar :focus-visible,
.bt-panel :focus-visible,
.bt-word-tooltip :focus-visible,
.bt-instruction-banner :focus-visible,
.bt-feedback-modal :focus-visible,
.bt-floating-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Neutralize theme button:focus/hover color overrides on plugin buttons.
   Themes often target bare `button:focus` / `button:hover` with their brand
   colors; we reclaim background/border/color for our own button states. */
.bt-btn:hover,
.bt-btn:focus-visible,
.bt-floating-btn:hover,
.bt-floating-btn:focus-visible,
.bt-icon-btn:hover,
.bt-icon-btn:focus-visible {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 600px) {
    .bt-toolbar--buttons { flex-wrap: wrap; justify-content: center; }
    .bt-btn__label { display: none; }
    .bt-btn { padding: 10px 12px; }
    .bt-panel { max-height: 85vh; border-radius: 16px 16px 0 0; }
    .bt-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .bt-lang-grid { grid-template-columns: repeat(2, 1fr); }
    .bt-fontsize-grid { flex-direction: column; align-items: stretch; }
    .bt-fontsize-btn { flex-direction: row; justify-content: center; }
    .bt-floating-btn--circle { width: 52px; height: 52px; }
    .bt-floating-btn--pill { padding: 12px 18px; font-size: 15px; }
    .bt-floating-btn--bottom-right { bottom: 18px; right: 18px; }
    .bt-floating-btn--bottom-left  { bottom: 18px; left: 18px; }
    .bt-floating-btn--top-right    { top: 18px; right: 18px; }
    .bt-floating-btn--top-left     { top: 18px; left: 18px; }
    .bt-panel__body { padding: 16px 16px 24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bt-panel { transition: none; }
    .bt-floating-btn { animation: none; }
    .bt-floating-btn:hover { transform: none; }
    @keyframes bt-fadeIn { from { opacity: 1; } to { opacity: 1; } }
}

/* Print */
@media print {
    #basistaal-root { display: none !important; }
}

/* ══════════════════════════════════════════
   PANEL BODY CONTENT PRIMITIVES (v1.9)
   ══════════════════════════════════════════ */
.bt-panel__body { padding: 22px 24px 32px !important; }
.bt-panel__intro {
    margin: 0 0 16px !important;
    color: var(--bt-text-light) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.bt-divider {
    height: 1px;
    background: var(--bt-border-light);
    margin: 22px 0 18px;
    border: 0;
}

.bt-section-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bt-text-muted) !important;
    margin: 20px 0 10px !important;
}

.bt-field-group { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; width: 100%; }
.bt-field-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--bt-accent) !important;
    margin: 0 !important;
}

/* Chip group (speed/popular) */
.bt-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bt-chip {
    appearance: none;
    background: var(--bt-bg) !important;
    background-image: none !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: var(--bt-radius-pill) !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bt-text) !important;
    cursor: pointer !important;
    min-height: 40px;
    line-height: 1.2;
    font-family: var(--bt-font) !important;
    transition: all var(--bt-transition);
    box-shadow: none !important;
    text-transform: none !important;
}
.bt-chip:hover { border-color: var(--bt-primary-light) !important; background: var(--bt-primary-soft) !important; color: var(--bt-primary) !important; }
.bt-chip--active { background: var(--bt-primary) !important; border-color: var(--bt-primary) !important; color: #fff !important; }
.bt-chip--active:hover { background: var(--bt-primary-hover) !important; border-color: var(--bt-primary-hover) !important; color: #fff !important; }

/* Native select, restyled */
.bt-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 10px !important;
    background: var(--bt-bg) !important;
    padding: 10px 40px 10px 14px !important;
    font-size: 15px !important;
    font-family: var(--bt-font) !important;
    color: var(--bt-text) !important;
    min-height: 44px;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
}
.bt-select:focus-visible { border-color: var(--bt-primary) !important; outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 1px; }

/* Link button (secondary textual action) */
.bt-link-btn {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 8px 12px !important;
    font-family: var(--bt-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bt-primary) !important;
    cursor: pointer !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--bt-radius-xs) !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.bt-link-btn:hover { background: var(--bt-primary-soft) !important; color: var(--bt-primary-hover) !important; }
.bt-link-btn svg { width: 16px; height: 16px; }

/* TTS: secondary row */
.bt-tts-secondary {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

/* TTS sentence card: idle hint + preview */
.bt-tts-sentence {
    padding: 18px 22px !important;
    text-align: left !important;
    flex-direction: column;
    gap: 6px !important;
    align-items: stretch !important;
}
.bt-tts-sentence__hint {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.bt-tts-sentence__preview {
    display: block;
    font-size: 16px;
    color: var(--bt-text);
    line-height: 1.5;
    font-weight: 500;
}

/* Toggle switch */
.bt-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 32px;
}
.bt-switch input { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; margin: 0; }
.bt-switch__track {
    display: block;
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: var(--bt-border);
    position: relative;
    transition: background 0.2s ease;
}
.bt-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: left 0.2s ease;
}
.bt-switch input:checked + .bt-switch__track { background: var(--bt-primary); }
.bt-switch input:checked + .bt-switch__track .bt-switch__thumb { left: 23px; }
.bt-switch input:focus-visible + .bt-switch__track { outline: 3px solid var(--bt-primary-ring); outline-offset: 3px; }

.bt-setting-row { gap: 16px; }
.bt-setting-row input[type="checkbox"]:not(.bt-switch input) { width: 22px; height: 22px; }

/* Radio card (font picker) */
.bt-radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bt-radio-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid var(--bt-border);
    border-radius: 12px;
    background: var(--bt-bg);
    cursor: pointer;
    transition: all var(--bt-transition);
    min-height: 64px;
}
.bt-radio-card:hover { border-color: var(--bt-primary-light); background: var(--bt-primary-soft); }
.bt-radio-card--active { border-color: var(--bt-primary); background: var(--bt-primary-soft); box-shadow: 0 0 0 3px var(--bt-primary-ring); }
.bt-radio-card input { accent-color: var(--bt-primary); width: 22px; height: 22px; flex-shrink: 0; }
.bt-radio-card__body { display: flex; flex-direction: column; gap: 2px; }
.bt-radio-card__label { font-size: 16px; font-weight: 700; color: var(--bt-accent); }
.bt-radio-card__desc { font-size: 13px; color: var(--bt-text-light); }

/* Settings sections */
.bt-settings-section { margin-top: 22px; margin-bottom: 4px; }
.bt-settings-section__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bt-accent) !important;
    margin: 0 0 2px !important;
    letter-spacing: -0.01em;
}
.bt-settings-section__desc {
    font-size: 13px !important;
    color: var(--bt-text-light) !important;
    margin: 0 0 12px !important;
    line-height: 1.5 !important;
}

/* Shortcut list */
.bt-shortcut-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 !important; padding: 0 !important; }
.bt-shortcut-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--bt-border-light); }
.bt-shortcut-row:last-child { border-bottom: 0; }
.bt-shortcut-row dt { margin: 0; flex-shrink: 0; min-width: 80px; }
.bt-shortcut-row dd { margin: 0; color: var(--bt-text); font-size: 14px; }
.bt-shortcut-list kbd {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bt-bg-subtle);
    border: 1px solid var(--bt-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: var(--bt-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-accent);
}

.bt-settings-footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bt-border-light); display: flex; justify-content: flex-start; }
.bt-btn--primary { background: var(--bt-primary) !important; color: #fff !important; border-color: var(--bt-primary) !important; }
.bt-btn--primary:hover { background: var(--bt-primary-hover) !important; border-color: var(--bt-primary-hover) !important; color: #fff !important; }

/* Search input */
.bt-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0 16px;
}
.bt-search__icon {
    position: absolute;
    left: 14px;
    color: var(--bt-text-muted);
    pointer-events: none;
    display: inline-flex;
}
.bt-search__input {
    width: 100%;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 10px !important;
    padding: 11px 14px 11px 44px !important;
    font-family: var(--bt-font) !important;
    font-size: 15px !important;
    color: var(--bt-text) !important;
    background: var(--bt-bg) !important;
    min-height: 44px;
}
.bt-search__input:focus-visible { border-color: var(--bt-primary) !important; outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 1px; }

/* Language buttons: more room, name+native stacked */
.bt-lang-grid { gap: 10px; }
.bt-lang-btn {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 56px;
    font-weight: 500;
}
.bt-lang-btn .bt-lang-flag { font-size: 22px; flex-shrink: 0; }
.bt-lang-btn .bt-lang-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.bt-lang-btn .bt-lang-name strong { font-size: 14px; color: var(--bt-accent); font-weight: 700; }
.bt-lang-btn .bt-lang-name small { font-size: 12px; color: var(--bt-text-muted); }

/* Active translated language (in popular grid) */
.bt-lang-btn--active { border-color: var(--bt-primary) !important; background: var(--bt-primary-soft) !important; }

/* Notice (translate restore etc.) */
.bt-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bt-bg-subtle);
    border: 1px solid var(--bt-border);
    border-left: 4px solid var(--bt-primary);
    border-radius: 10px;
    margin-bottom: 16px;
}
.bt-notice__text { flex: 1; font-size: 14px; color: var(--bt-accent); font-weight: 500; }

/* Success card */
.bt-success--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px 24px !important;
    text-align: center;
    background: var(--bt-primary-soft);
    border-radius: 16px;
    border: 1px solid var(--bt-primary-light);
}
.bt-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bt-primary);
    color: #fff;
    margin-bottom: 4px;
}
.bt-success__icon svg { width: 28px; height: 28px; }
.bt-success--card h3 { font-size: 20px !important; font-weight: 700 !important; color: var(--bt-accent) !important; margin: 0 !important; }
.bt-success--card p { font-size: 15px !important; color: var(--bt-text-light) !important; margin: 0 !important; }
.bt-success__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }

/* Menu-item active state (toggle aan) */
.bt-menu-item--active {
    border-color: var(--bt-primary) !important;
    background: var(--bt-primary-soft) !important;
    box-shadow: 0 0 0 3px var(--bt-primary-ring), 0 4px 14px rgba(21, 148, 200, 0.15) !important;
    position: relative;
}
.bt-menu-item__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bt-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Font-choice helper classes on body */
body.bt-font-system, body.bt-font-system * { font-family: inherit !important; }
body.bt-high-contrast { background: #fff; }

/* Keep TTS progress bar styling but place above the player */
.bt-tts-progress { width: 100%; }

/* ── Icon button (for tooltip / simplify action bars) ──
   Specificity is doubled (.bt-icon-btn.bt-icon-btn) so host-theme button resets
   like `button { color: #fff }` can't override. */
.bt-icon-btn.bt-icon-btn,
.bt-word-tooltip .bt-icon-btn,
.bt-panel .bt-icon-btn,
#basistaal-root .bt-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    background-image: none !important;
    color: var(--bt-primary) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    box-shadow: none !important;
    font-family: var(--bt-font) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
    text-shadow: none !important;
    text-transform: none !important;
}
.bt-icon-btn svg,
.bt-word-tooltip .bt-icon-btn svg,
.bt-panel .bt-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
}
.bt-icon-btn:hover, .bt-icon-btn.bt-icon-btn:hover,
.bt-word-tooltip .bt-icon-btn:hover,
.bt-panel .bt-icon-btn:hover {
    background: var(--bt-primary-soft) !important;
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary-hover) !important;
}
.bt-icon-btn:active { transform: scale(0.96) !important; }
.bt-icon-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring) !important;
    outline-offset: 2px;
}
.bt-icon-btn.bt-icon-btn--active,
.bt-word-tooltip .bt-icon-btn--active,
.bt-panel .bt-icon-btn--active {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}
.bt-icon-btn.bt-icon-btn--active:hover,
.bt-word-tooltip .bt-icon-btn--active:hover {
    background: var(--bt-primary-hover) !important;
    border-color: var(--bt-primary-hover) !important;
    color: #FFFFFF !important;
}

/* ── Action card (TTS "of klik zelf een stuk tekst aan") ── */
.bt-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 14px !important;
    background: var(--bt-bg) !important;
    background-image: none !important;
    color: var(--bt-text) !important;
    cursor: pointer !important;
    text-align: left;
    font-family: var(--bt-font) !important;
    transition: all var(--bt-transition);
    box-shadow: none !important;
    text-transform: none !important;
}
.bt-action-card:hover {
    border-color: var(--bt-primary) !important;
    background: var(--bt-primary-soft) !important;
    transform: translateY(-1px);
}
.bt-action-card:focus-visible { outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 2px; }
.bt-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bt-primary-soft);
    color: var(--bt-primary);
    flex-shrink: 0;
}
.bt-action-card__icon svg { width: 22px; height: 22px; }
.bt-action-card:hover .bt-action-card__icon { background: var(--bt-primary); color: #fff; }
.bt-action-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-action-card__title { font-size: 15px; font-weight: 700; color: var(--bt-accent); }
.bt-action-card__desc { font-size: 13px; color: var(--bt-text-light); line-height: 1.4; }

/* Tooltip / simplify action bars */
.bt-word-tooltip__actions, .bt-simplify-actions {
    align-items: center;
    gap: 10px !important;
}

/* Tooltip language select restyle */
.bt-tooltip-lang-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 8px !important;
    padding: 8px 28px 8px 12px !important;
    font-size: 13px !important;
    background: var(--bt-bg) !important;
    color: var(--bt-text) !important;
    cursor: pointer !important;
    min-height: 40px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
    margin-left: auto;
}

/* ─── RTL support (Arabic / Hebrew sites) ─── */
#basistaal-root[dir="rtl"],
#basistaal-root.bt-rtl,
.bt-rtl,
.bt-panel[dir="rtl"],
.bt-toolbar[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.bt-rtl .bt-panel,
.bt-panel[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Flip auto margins so close-buttons / chevrons end up on the correct side */
.bt-rtl .bt-panel__close,
.bt-panel[dir="rtl"] .bt-panel__close { margin-left: 0; margin-right: auto; }
.bt-rtl .bt-panel__back,
.bt-panel[dir="rtl"] .bt-panel__back { margin-right: 0; margin-left: auto; transform: scaleX(-1); }

/* Floating button: mirror the default bottom-right corner to bottom-left
   for RTL sites so it doesn't sit under the scrollbar/edge users expect. */
#basistaal-root[dir="rtl"] .bt-floating-btn--bottom-right { right: auto; left: 28px; }
#basistaal-root[dir="rtl"] .bt-floating-btn--bottom-left  { left: auto; right: 28px; }
#basistaal-root[dir="rtl"] .bt-floating-btn--top-right    { right: auto; left: 28px; }
#basistaal-root[dir="rtl"] .bt-floating-btn--top-left     { left: auto; right: 28px; }

/* Background-position flip for the select chevron in RTL panels */
.bt-rtl select,
.bt-panel[dir="rtl"] select {
    background-position: left 8px center !important;
    padding-right: 12px !important;
    padding-left: 28px !important;
}

/* Margins in flex rows should mirror */
.bt-rtl [class*="margin-left"],
.bt-rtl .bt-icon--left { margin-left: 0; margin-right: 8px; }
.bt-rtl .bt-icon--right { margin-right: 0; margin-left: 8px; }

/* Arabic & Hebrew benefit from a slightly larger line-height for readability */
.bt-rtl,
#basistaal-root[dir="rtl"] { line-height: 1.7; }