/**
 * WG Comments - GeneratePress Theme Fix
 * Entfernt ALLE unerwünschten Rahmen und Borders
 *
 * @package WG_Comments
 * @version 1.0.0
 * @priority CRITICAL - Muss als letztes geladen werden!
 */

/* ===========================
   NUCLEAR OPTION - Entfernt ALLE Borders
   =========================== */

/* Haupt-Container: NUR äußerer Gradient-Border */
body .wgc-comment-form-wrapper,
body #respond .wgc-comment-form-wrapper,
body .comment-respond .wgc-comment-form-wrapper,
.site-content .wgc-comment-form-wrapper,
.entry-content .wgc-comment-form-wrapper,
#content .wgc-comment-form-wrapper,
#primary .wgc-comment-form-wrapper,
.wgc-comment-form-wrapper {
    /* Border nur hier - Gradient */
    border: 3px solid transparent !important;
    box-sizing: border-box !important;
}

/* ALLE Kind-Elemente: KEINE Borders (AUSSER Spoiler!) */
.wgc-comment-form-wrapper *:not(.wgc-spoiler):not(.wgc-spoiler *),
.wgc-comment-form-wrapper *::before:not(.wgc-spoiler::before),
.wgc-comment-form-wrapper *::after:not(.wgc-spoiler::after),
.wgc-comment-form *:not(.wgc-spoiler):not(.wgc-spoiler *),
.wgc-comment-form *::before:not(.wgc-spoiler::before),
.wgc-comment-form *::after:not(.wgc-spoiler::after),
body .wgc-comment-form *:not(.wgc-spoiler):not(.wgc-spoiler *),
body #respond *:not(.wgc-spoiler):not(.wgc-spoiler *),
body .comment-respond *:not(.wgc-spoiler):not(.wgc-spoiler *) {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Spezifische Quill-Elemente */
.ql-toolbar,
.ql-toolbar.ql-snow,
.ql-container,
.ql-container.ql-snow,
.ql-editor,
.wgc-editor-wrapper,
#wgc-editor,
#wgc-editor-wrapper,
body .ql-toolbar,
body .ql-container,
body .ql-editor {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Wrapper-Elemente */
.wgc-author-fields,
.wgc-notification-wrapper,
.wgc-submit-wrapper,
.wgc-editor-footer,
body .wgc-author-fields,
body .wgc-notification-wrapper,
body .wgc-submit-wrapper {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Input-Felder: Eigene Borders erlaubt */
.wgc-field input,
.wgc-notification-checkbox {
    border: 1px solid #ced4da !important; /* Diese behalten Border */
}

.wgc-field input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* Toolbar Buttons: Eigene Borders erlaubt */
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label,
.wgc-spoiler-btn {
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Diese behalten Border */
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.wgc-spoiler-btn:hover {
    border-color: #8b5cf6 !important;
}

/* Character Counter */
.wgc-char-counter {
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Diese behalten Border */
}

/* Submit Button: KEIN Border */
.wgc-submit-btn,
.wgc-login-button {
    border: none !important;
}

/* ===========================
   SPOILER - MUSS sichtbar sein!
   =========================== */

/* Spoiler im Editor UND in angezeigten Kommentaren - MAXIMUM SPECIFICITY */
body .ql-editor span.wgc-spoiler,
body .ql-container span.wgc-spoiler,
body .wgc-comment-form-wrapper span.wgc-spoiler,
body .wgc-comment-form span.wgc-spoiler,
.ql-editor span.wgc-spoiler,
.ql-container span.wgc-spoiler,
.wgc-comment-form-wrapper span.wgc-spoiler,
.wgc-comment-form span.wgc-spoiler,
span.wgc-spoiler,
.wgc-spoiler,
body .ql-editor span[data-spoiler="true"],
body .ql-container span[data-spoiler="true"],
span[data-spoiler="true"] {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 2px solid #7f1d1d !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
    font-weight: 700 !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

body .ql-editor span.wgc-spoiler::before,
body .ql-container span.wgc-spoiler::before,
span.wgc-spoiler::before,
.wgc-spoiler::before,
span[data-spoiler="true"]::before {
    content: '' !important;
    display: none !important;
}

/* Revealed State */
body .ql-editor span.wgc-spoiler.revealed,
body .ql-container span.wgc-spoiler.revealed,
span.wgc-spoiler.revealed,
.wgc-spoiler.revealed,
span[data-spoiler="true"].revealed {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #065f46 !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

body .ql-editor span.wgc-spoiler.revealed::before,
body .ql-container span.wgc-spoiler.revealed::before,
span.wgc-spoiler.revealed::before,
.wgc-spoiler.revealed::before,
span[data-spoiler="true"].revealed::before {
    content: '' !important;
    display: none !important;
}

/* Hover State */
body .ql-editor span.wgc-spoiler:hover,
body .ql-container span.wgc-spoiler:hover,
span.wgc-spoiler:hover,
.wgc-spoiler:hover,
span[data-spoiler="true"]:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* ===========================
   Box-Sizing Fix
   =========================== */

.wgc-comment-form-wrapper,
.wgc-comment-form-wrapper *,
.wgc-comment-form,
.wgc-comment-form * {
    box-sizing: border-box !important;
}

/* ===========================
   Margin/Padding Reset für Problem-Elemente
   =========================== */

/* GeneratePress fügt manchmal Margin zu Respond hinzu */
body #respond,
body .comment-respond,
.site-content #respond,
.entry-content #respond {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ===========================
   Z-Index Hierarchie
   =========================== */

.wgc-comment-form-wrapper {
    z-index: 1 !important;
    position: relative !important;
}

.wgc-comment-form {
    z-index: 2 !important;
    position: relative !important;
}

.ql-toolbar {
    z-index: 3 !important;
    position: relative !important;
}

/* ===========================
   Overflow Fix
   =========================== */

.wgc-comment-form-wrapper {
    overflow: visible !important; /* Für Category-Badges */
}

.wgc-comment-form {
    overflow: visible !important;
}

/* Nur Editor scrollbar */
.ql-editor {
    overflow-y: auto !important;
}

/* ===========================
   Mobile Responsive
   =========================== */

@media (max-width: 768px) {
    .wgc-comment-form-wrapper {
        margin: 24px 12px !important;
    }
}

@media (max-width: 480px) {
    .wgc-comment-form-wrapper {
        margin: 16px 8px !important;
    }
}

/* ===========================
   Debug-Helper (auskommentiert)
   =========================== */

/*
.wgc-comment-form-wrapper {
    outline: 3px solid red !important;
}

.wgc-comment-form {
    outline: 2px solid blue !important;
}

.ql-toolbar {
    outline: 1px solid green !important;
}

.ql-container {
    outline: 1px solid yellow !important;
}
*/

/**
 * Dateiname: wgc-generatepress-fix.css
 * Pfad: /wp-content/plugins/wg-comments/assets/css/wgc-generatepress-fix.css
 *
 * WICHTIG: Diese Datei MUSS als LETZTES geladen werden!
 * In der Plugin-Registrierung sicherstellen, dass diese CSS höchste Priorität hat.
 *
 * Löst folgende Probleme:
 * ✅ Mehrfache Borders (3 Rahmen übereinander)
 * ✅ Box-Sizing Konflikte
 * ✅ Margin/Padding von GeneratePress
 * ✅ Z-Index Layer-Probleme
 * ✅ Overflow Clipping
 *
 * Basierend auf: GeneratePress Best Practices (GENERATEPRESS-COMPATIBILITY.md)
 */

/* ===========================
   LISTS STYLING - GeneratePress Override
   =========================== */

/* Reset ALL list styles in comments */
.site-content ol,
.site-content ul,
.entry-content ol,
.entry-content ul,
#content ol,
#content ul,
article ol,
article ul,
.comment-content ol,
.comment-content ul,
.wgc-comment-content ol,
.wgc-comment-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 8px 0 !important;
}

/* ORDERED LISTS - BLUE with Numbers */
.site-content ol,
.entry-content ol,
#content ol,
article ol,
.comment-content ol,
.wgc-comment-content ol {
    counter-reset: wgc-list !important;
}

.site-content ol > li,
.entry-content ol > li,
#content ol > li,
article ol > li,
.comment-content ol > li,
.wgc-comment-content ol > li {
    counter-increment: wgc-list !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 10px 16px 10px 50px !important;
    margin: 6px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    list-style: none !important;
    position: relative !important;
}

.site-content ol > li::before,
.entry-content ol > li::before,
#content ol > li::before,
article ol > li::before,
.comment-content ol > li::before,
.wgc-comment-content ol > li::before {
    content: counter(wgc-list) '. ' !important;
    color: #3b82f6 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    position: absolute !important;
    left: 16px !important;
    top: 10px !important;
}

/* BULLET LISTS - GREEN with Bullets (NUR für bullet, NICHT ordered!) */
.site-content ul > li,
.entry-content ul > li,
#content ul > li,
article ul > li,
.comment-content ul > li,
.wgc-comment-content ul > li,
.site-content li[data-list="bullet"],
.entry-content li[data-list="bullet"],
#content li[data-list="bullet"],
article li[data-list="bullet"],
.comment-content li[data-list="bullet"],
.wgc-comment-content li[data-list="bullet"],
li[data-list="bullet"] {
    background: rgba(34, 197, 94, 0.08) !important;
    border-left: 4px solid #22c55e !important;
    padding: 10px 16px 10px 50px !important;
    margin: 6px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    counter-increment: none !important;
}

.site-content ul > li::before,
.entry-content ul > li::before,
#content ul > li::before,
article ul > li::before,
.comment-content ul > li::before,
.wgc-comment-content ul > li::before,
.site-content li[data-list="bullet"]::before,
.entry-content li[data-list="bullet"]::before,
#content li[data-list="bullet"]::before,
article li[data-list="bullet"]::before,
.comment-content li[data-list="bullet"]::before,
.wgc-comment-content li[data-list="bullet"]::before,
li[data-list="bullet"]::before {
    content: '●' !important;
    counter-increment: none !important;
    color: #22c55e !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    position: absolute !important;
    left: 20px !important;
    top: 8px !important;
    line-height: 1 !important;
}

/* WICHTIG: Bullet-Listen dürfen NIEMALS Zahlen zeigen */
li[data-list="bullet"]::before {
    content: '●' !important;
}

/* Hide Quill .ql-ui spans */
.site-content .ql-ui,
.entry-content .ql-ui,
#content .ql-ui,
article .ql-ui,
.comment-content .ql-ui,
.wgc-comment-content .ql-ui,
li .ql-ui,
span.ql-ui {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}