/*
 * Thoka KI-Content Kennzeichnung
 * Alle Gestaltungswerte kommen als CSS-Variablen aus den Plugin-Einstellungen.
 * Die Werte hinter dem Komma sind nur Rückfallwerte.
 */

/* Außenabstand oben über dem Button, unten unter dem gesamten Block (Button bzw. geöffnete Hinweisbox). */
.ai-disclosure-container {
    margin: 0 0 var(--ai-disclosure-button-margin, 20px) !important;
}

.ai-disclosure-container .ai-disclosure-button-wrapper {
    text-align: var(--ai-disclosure-button-alignment, left) !important;
    margin: var(--ai-disclosure-button-margin, 20px) 0 0 !important;
}

.ai-disclosure-container .ai-disclosure-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--ai-disclosure-icon-gap, 8px) !important;
    background-color: var(--ai-disclosure-button-background-color, #ffffff) !important;
    border: var(--ai-disclosure-button-border-width, 1px) solid var(--ai-disclosure-button-border-color, #d1d1d1) !important;
    border-radius: var(--ai-disclosure-button-border-radius, 24px) !important;
    padding: var(--ai-disclosure-button-padding-vertical, 4px) var(--ai-disclosure-button-padding-horizontal, 12px) !important;
    cursor: pointer !important;
    transition: background-color var(--ai-disclosure-button-transition-duration, 300ms) ease, color var(--ai-disclosure-button-transition-duration, 300ms) ease, border-color var(--ai-disclosure-button-transition-duration, 300ms) ease !important;
    font-size: var(--ai-disclosure-button-font-size, 12px) !important;
    font-weight: var(--ai-disclosure-button-font-weight, 400) !important;
    color: var(--ai-disclosure-button-text-color, #333333) !important;
    box-shadow: var(--ai-disclosure-button-shadow, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    min-height: 0 !important;
    width: auto !important;
}

.ai-disclosure-container .ai-disclosure-button:hover,
.ai-disclosure-container .ai-disclosure-button:focus-visible {
    background-color: var(--ai-disclosure-button-hover-background-color, #f5f5f5) !important;
    color: var(--ai-disclosure-button-hover-text-color, #333333) !important;
    border-color: var(--ai-disclosure-button-hover-border-color, #999999) !important;
}

.ai-disclosure-container .ai-disclosure-button.active {
    background-color: var(--ai-disclosure-button-active-background-color, #333333) !important;
    color: var(--ai-disclosure-button-active-text-color, #ffffff) !important;
    border-color: var(--ai-disclosure-button-active-border-color, #333333) !important;
}

.ai-disclosure-container .ai-disclosure-icon {
    width: var(--ai-disclosure-icon-size, 8px) !important;
    height: var(--ai-disclosure-icon-size, 8px) !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ai-disclosure-icon-color, #999999) !important;
    font-size: var(--ai-disclosure-icon-size, 8px) !important;
    line-height: 1 !important;
}

.ai-disclosure-container .ai-disclosure-icon--dot {
    background-color: currentColor !important;
    border-radius: 50% !important;
}

.ai-disclosure-container .ai-disclosure-icon--star::before {
    content: "★";
}

.ai-disclosure-container .ai-disclosure-icon--check::before {
    content: "✓";
}

.ai-disclosure-container .ai-disclosure-icon--info {
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
}

.ai-disclosure-container .ai-disclosure-icon--info::before {
    content: "i";
}

.ai-disclosure-container .ai-disclosure-content {
    display: block !important;
    margin-top: var(--ai-disclosure-content-margin-top, 12px) !important;
    margin-bottom: 0 !important;
    margin-left: var(--ai-disclosure-content-margin-left, 0) !important;
    margin-right: var(--ai-disclosure-content-margin-right, auto) !important;
    padding: var(--ai-disclosure-content-padding, 15px) !important;
    background-color: var(--ai-disclosure-content-background-color, #f9f9f9) !important;
    border: 0 !important;
    border-left: var(--ai-disclosure-content-border-width, 3px) solid var(--ai-disclosure-content-border-color, #333333) !important;
    border-radius: var(--ai-disclosure-content-border-radius, 4px) !important;
    font-size: var(--ai-disclosure-content-font-size, 12px) !important;
    font-weight: var(--ai-disclosure-content-font-weight, 300) !important;
    line-height: var(--ai-disclosure-content-line-height, 1.6) !important;
    text-align: var(--ai-disclosure-button-alignment, left) !important;
    color: var(--ai-disclosure-content-text-color, #444444) !important;
    max-width: var(--ai-disclosure-content-max-width, 600px) !important;
    box-sizing: border-box !important;
    animation: var(--ai-disclosure-content-animation, ai-disclosure-fade-in 400ms ease) !important;
}

.ai-disclosure-container .ai-disclosure-content[hidden] {
    display: none !important;
}

.ai-disclosure-container .ai-disclosure-content p {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: 0 0 0.75em !important;
}

.ai-disclosure-container .ai-disclosure-content p:last-child {
    margin-bottom: 0 !important;
}

@keyframes ai-disclosure-fade-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-disclosure-container .ai-disclosure-button,
    .ai-disclosure-container .ai-disclosure-content {
        transition: none !important;
        animation: none !important;
    }
}