/**
 * WG Comments - Border Fix + Critical Overrides
 * Removes inner border from Quill container
 * LOADS LAST - Overrides all other styles!
 *
 * @package WG_Comments
 * @version 1.1.0
 */

/* Remove ALL Quill default borders completely - NO EXCEPTIONS */
.ql-toolbar.ql-snow,
.ql-container.ql-snow,
.wgc-comment-form-wrapper .ql-toolbar.ql-snow,
.wgc-comment-form-wrapper .ql-container.ql-snow,
.wgc-comment-form-wrapper .wgc-editor-wrapper,
.wgc-comment-form-wrapper #wgc-editor,
.wgc-comment-form .ql-toolbar.ql-snow,
.wgc-comment-form .ql-container.ql-snow {
    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;
}

/* SPOILER BUTTON: Always show icon with fallback */
#wgc-spoiler-btn,
.ql-spoiler,
button.ql-spoiler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
    position: relative !important;
    font-size: 0 !important;
}

/* Always show Unicode icon as primary */
#wgc-spoiler-btn::after,
.ql-spoiler::after,
button.ql-spoiler::after {
    content: '👁️‍🗨️' !important;
    font-size: 20px !important;
    display: block !important;
    line-height: 1 !important;
}

/* Hide SVG if it exists (use emoji instead) */
#wgc-spoiler-btn svg,
.ql-spoiler svg,
button.ql-spoiler svg {
    display: none !important;
}

/* OPTIONS MENU BUTTON: Always show icon */
.wgc-comment-menu-btn {
    font-size: 0 !important;
}

.wgc-comment-menu-btn::after {
    content: '⋮' !important;
    font-size: 24px !important;
    font-weight: bold !important;
    display: block !important;
    line-height: 1 !important;
}

.wgc-comment-menu-btn svg {
    display: none !important;
}

/* ===========================
   CRITICAL FIXES - MAXIMUM PRIORITY
   =========================== */

/* SPOILER: Icon + "Spoiler" text - FINAL OVERRIDE */
body .ql-editor span.wgc-spoiler::before,
body .ql-container span.wgc-spoiler::before,
body span.wgc-spoiler::before,
body .wgc-spoiler::before,
html body span[data-spoiler="true"]::before,
.ql-editor span.wgc-spoiler::before,
.ql-container span.wgc-spoiler::before,
span.wgc-spoiler::before,
.wgc-spoiler::before,
span[data-spoiler="true"]::before {
    content: '⚠️ SPOILER ' !important;
    display: inline !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* SPOILER in published comments - MUCH BIGGER */
body .wgc-comment-content span.wgc-spoiler::before,
body .comment-content span.wgc-spoiler::before,
body .wgc-comment-text span.wgc-spoiler::before,
body .comment-text span.wgc-spoiler::before,
.wgc-comment-content span.wgc-spoiler::before,
.comment-content span.wgc-spoiler::before,
.wgc-comment-text span.wgc-spoiler::before,
.comment-text span.wgc-spoiler::before {
    content: '⚠️ SPOILER ' !important;
    display: inline !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    margin-right: 8px !important;
}

/* SPOILER box in published comments - BIGGER */
body .wgc-comment-content span.wgc-spoiler,
body .comment-content span.wgc-spoiler,
body .wgc-comment-text span.wgc-spoiler,
body .comment-text span.wgc-spoiler,
.wgc-comment-content span.wgc-spoiler,
.comment-content span.wgc-spoiler,
.wgc-comment-text span.wgc-spoiler,
.comment-text span.wgc-spoiler {
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    border: 3px solid #7f1d1d !important;
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.4) !important;
}

body .ql-editor span.wgc-spoiler.revealed::before,
body .ql-container span.wgc-spoiler.revealed::before,
body span.wgc-spoiler.revealed::before,
body .wgc-spoiler.revealed::before,
html body span[data-spoiler="true"].revealed::before,
.ql-editor span.wgc-spoiler.revealed::before,
.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: inline !important;
}

/* EMOJI PICKER STYLES WURDEN NACH wgc-emoji-giphy.css VERSCHOBEN */
/* Dort lädt es als letztes CSS und überschreibt alles korrekt */

/* ===========================
   FIX: Remove window shift effect
   =========================== */

/* Remove ALL transitions from editor and containers */
.ql-editor,
.ql-container,
.wgc-editor-wrapper,
#wgc-editor,
.wgc-comment-form-wrapper,
.wgc-comment-form,
body .ql-editor,
body .ql-container,
body .wgc-editor-wrapper {
    transition: none !important;
    transform: none !important;
}

/* ===========================
   FIX: Remove emoji button border on click
   =========================== */

/* Remove focus/active borders from emoji and custom buttons */
#wgc-emoji-btn:focus,
#wgc-emoji-btn:active,
#wgc-emoji-btn.active,
.wgc-custom-btn:focus,
.wgc-custom-btn:active,
.wgc-custom-btn.active,
body #wgc-emoji-btn:focus,
body #wgc-emoji-btn:active,
body .wgc-custom-btn:focus,
body .wgc-custom-btn:active {
    outline: none !important;
    border: 1px solid #e9ecef !important;
    box-shadow: none !important;
}

/* ===========================
   FIX: Bullet lists showing numbers
   =========================== */

/* FORCE: All list items to have NO default list-style */
.wgc-comment-content li,
.comment-content li,
.wgc-comment-text li,
.comment-text li,
body .wgc-comment-content li,
body .comment-content li,
html body .wgc-comment-content li,
html body .comment-content li,
div.wgc-comment-content li,
p + li {
    list-style-type: none !important;
    position: relative !important;
}

/* ===========================
   LISTS STYLING - CRITICAL OVERRIDE
   =========================== */

/* Counter Reset für Nummernlisten */
div.wgc-comment-content,
body div.wgc-comment-content,
.wgc-comment-content {
    counter-reset: ordered-list 0 !important;
}

/* Reset <ol> and <ul> default styles */
div.wgc-comment-content ol,
div.wgc-comment-content ul,
body div.wgc-comment-content ol,
body div.wgc-comment-content ul,
.wgc-comment-content ol,
.wgc-comment-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* BULLET LISTS - GREEN Background + Bullet Symbol */
div.wgc-comment-content ul > li,
body div.wgc-comment-content ul > li,
.wgc-comment-content ul > li,
.comment-content ul > li,
article ul > li,
#comments ul > li,
div.wgc-comment-content li[data-list="bullet"],
body div.wgc-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: 8px 12px 8px 2.5em !important;
    margin: 4px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    list-style: none !important;
    position: relative !important;
}

div.wgc-comment-content ul > li::before,
body div.wgc-comment-content ul > li::before,
.wgc-comment-content ul > li::before,
.comment-content ul > li::before,
article ul > li::before,
#comments ul > li::before,
div.wgc-comment-content li[data-list="bullet"]::before,
body div.wgc-comment-content li[data-list="bullet"]::before,
.wgc-comment-content li[data-list="bullet"]::before,
li[data-list="bullet"]::before {
    content: '● ' !important;
    color: #22c55e !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    position: absolute !important;
    left: 14px !important;
    top: 8px !important;
}

/* ORDERED LISTS - BLUE Background + Numbers */
div.wgc-comment-content ol,
body div.wgc-comment-content ol,
.wgc-comment-content ol,
.comment-content ol,
article ol,
#comments ol {
    counter-reset: ordered-list 0 !important;
}

div.wgc-comment-content ol > li,
body div.wgc-comment-content ol > li,
.wgc-comment-content ol > li,
.comment-content ol > li,
article ol > li,
#comments ol > li,
div.wgc-comment-content li[data-list="ordered"],
body div.wgc-comment-content li[data-list="ordered"],
.wgc-comment-content li[data-list="ordered"],
li[data-list="ordered"] {
    counter-increment: ordered-list !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 8px 12px 8px 2.5em !important;
    margin: 4px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    list-style: none !important;
    position: relative !important;
}

div.wgc-comment-content ol > li::before,
body div.wgc-comment-content ol > li::before,
.wgc-comment-content ol > li::before,
.comment-content ol > li::before,
article ol > li::before,
#comments ol > li::before,
div.wgc-comment-content li[data-list="ordered"]::before,
body div.wgc-comment-content li[data-list="ordered"]::before,
.wgc-comment-content li[data-list="ordered"]::before,
li[data-list="ordered"]::before {
    content: counter(ordered-list) '. ' !important;
    color: #3b82f6 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: absolute !important;
    left: 14px !important;
    top: 8px !important;
}

/* Hide Quill's .ql-ui span completely */
div.wgc-comment-content .ql-ui,
body div.wgc-comment-content .ql-ui,
.wgc-comment-content .ql-ui,
.ql-ui,
span.ql-ui,
li 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;
}

/* ===========================
   FIX: Beautiful Blockquotes in Published Comments
   =========================== */

.wgc-comment-content blockquote,
.comment-content blockquote,
.wgc-comment-text blockquote,
.comment-text blockquote,
body .wgc-comment-content blockquote,
body .comment-content blockquote,
html body .wgc-comment-content blockquote,
html body .comment-content blockquote {
    border-left: 5px solid #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.15) !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
    font-style: italic !important;
    color: #212529 !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
    position: relative !important;
}

/* Zitat-Symbol vor Blockquote */
.wgc-comment-content blockquote::before,
.comment-content blockquote::before,
.wgc-comment-text blockquote::before,
.comment-text blockquote::before,
body .wgc-comment-content blockquote::before,
body .comment-content blockquote::before,
html body .wgc-comment-content blockquote::before,
html body .comment-content blockquote::before {
    content: '"' !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #8b5cf6 !important;
    position: absolute !important;
    left: 8px !important;
    top: -8px !important;
    line-height: 1 !important;
    opacity: 0.3 !important;
}

/* ===========================
   FIX: Visual Styling for Lists in Published Comments
   =========================== */

/* Style bullet list items - GREEN background */
.wgc-comment-content li[data-list="bullet"],
.comment-content li[data-list="bullet"],
.wgc-comment-text li[data-list="bullet"],
.comment-text li[data-list="bullet"],
body .wgc-comment-content li[data-list="bullet"],
body .comment-content li[data-list="bullet"],
html body .wgc-comment-content li[data-list="bullet"],
html body .comment-content li[data-list="bullet"] {
    background: rgba(34, 197, 94, 0.08) !important;
    border-left: 4px solid #22c55e !important;
    padding: 8px 12px 8px 2em !important;
    margin: 4px 0 !important;
    border-radius: 0 6px 6px 0 !important;
}

/* Style ordered list items - BLUE background */
.wgc-comment-content li[data-list="ordered"],
.comment-content li[data-list="ordered"],
.wgc-comment-text li[data-list="ordered"],
.comment-text li[data-list="ordered"],
body .wgc-comment-content li[data-list="ordered"],
body .comment-content li[data-list="ordered"],
html body .wgc-comment-content li[data-list="ordered"],
html body .comment-content li[data-list="ordered"] {
    background: rgba(59, 130, 246, 0.08) !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 8px 12px 8px 2em !important;
    margin: 4px 0 !important;
    border-radius: 0 6px 6px 0 !important;
}