/**
 * AnchorKit Block Editor Styles
 * 
 * Styles for the Gutenberg block editor interface
 */

/* Block preview container */
.anchorkit-block-preview-wrapper,
.anchorkit-block-preview-shell {
    pointer-events: auto;
}

.anchorkit-block-preview-wrapper {
    opacity: 0.97;
}

/* Notice styles for block messages */
.anchorkit-block-notice {
    padding: 16px;
    margin: 16px 0;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}

.anchorkit-block-notice p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.anchorkit-block-notice p:last-child {
    margin-bottom: 0;
}

.anchorkit-block-notice strong {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

/* Placeholder styles when TOC is disabled */
.components-placeholder.is-large .components-placeholder__label {
    font-size: 15px;
    font-weight: 600;
}

.components-placeholder.is-large .components-placeholder__instructions {
    margin-bottom: 16px;
}

/* Inspector controls styling */
.block-editor-block-inspector .components-panel__body p {
    line-height: 1.6;
}

/* Increase spacing between warning notice and controls in block inspector */
.block-editor-block-inspector .components-panel__body .components-notice {
    margin-bottom: 32px !important;
}

/* Specific spacing for AnchorKit block settings notice */
.block-editor-block-inspector .components-panel__body .anchorkit-block-settings-notice {
    margin-bottom: 32px !important;
}

/* Alignment support */
.wp-block-anchorkit-table-of-contents.alignleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    max-width: 50%;
}

.wp-block-anchorkit-table-of-contents.alignright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
    max-width: 50%;
}

.wp-block-anchorkit-table-of-contents.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.wp-block-anchorkit-table-of-contents.alignwide,
.wp-block-anchorkit-table-of-contents.alignfull {
    max-width: 100%;
}

/* Make sure TOC looks good in the editor */
.editor-styles-wrapper .anchorkit-toc-container {
    margin: 20px 0;
    line-height: var(--anchorkit-toc-line-height, 1.6);
}

/* Fix bullet point wrapping in editor preview */
.editor-styles-wrapper .anchorkit-toc-item,
.block-editor-block-preview__content .anchorkit-toc-item {
    display: flex !important;
    align-items: baseline !important;
}

.editor-styles-wrapper .anchorkit-toc-link,
.block-editor-block-preview__content .anchorkit-toc-link {
    display: inline-flex !important;
    align-items: baseline !important;
    line-height: var(--anchorkit-toc-line-height, 1.4) !important;
    letter-spacing: var(--anchorkit-toc-letter-spacing, 0) !important;
    text-transform: var(--anchorkit-toc-text-transform, none) !important;
}

.editor-styles-wrapper .anchorkit-toc-item-text,
.block-editor-block-preview__content .anchorkit-toc-item-text {
    display: inline !important;
}

/* Block icon in the inserter */
.block-editor-block-types-list__item-icon svg {
    fill: currentColor;
}

/* Ensure proper spacing in the editor */
.wp-block-anchorkit-table-of-contents {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Selected block state */
.wp-block-anchorkit-table-of-contents.is-selected .anchorkit-toc-container {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Hover state for better visibility */
.wp-block-anchorkit-table-of-contents:hover .anchorkit-toc-container {
    outline: 1px solid #ddd;
    outline-offset: 2px;
}

/* Dark mode support for block editor */
@media (prefers-color-scheme: dark) {
    .anchorkit-block-notice {
        background: #1e1e1e;
        border-left-color: #4f94d4;
    }

    .anchorkit-block-notice strong {
        color: #4f94d4;
    }
}

/* Responsive adjustments for editor */
@media (max-width: 782px) {
    .wp-block-anchorkit-table-of-contents.alignleft,
    .wp-block-anchorkit-table-of-contents.alignright {
        float: none;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

/* Disable sticky behavior in the editor - it's just a preview */
/* The editor's DOM structure (iframes, containers) breaks position:sticky/fixed */
/* Users will see the actual sticky behavior on the live page */
.editor-styles-wrapper .anchorkit-toc-sticky,
.block-editor-block-preview__content .anchorkit-toc-sticky,
.block-editor-writing-flow .anchorkit-toc-sticky {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

/* Show visual alignment for left/right sidebar positions in preview */
/* Keep position: relative but show which side it will be on */
.editor-styles-wrapper .anchorkit-toc-sticky-left,
.block-editor-block-preview__content .anchorkit-toc-sticky-left,
.block-editor-writing-flow .anchorkit-toc-sticky-left,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-sticky-left {
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 360px !important;
    display: block !important;
}

.editor-styles-wrapper .anchorkit-toc-sticky-right,
.block-editor-block-preview__content .anchorkit-toc-sticky-right,
.block-editor-writing-flow .anchorkit-toc-sticky-right,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-sticky-right {
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 360px !important;
    display: block !important;
}

/* Ensure block wrapper doesn't interfere with alignment */
.wp-block-anchorkit-table-of-contents:has(.anchorkit-toc-sticky-left) {
    text-align: left !important;
}

.wp-block-anchorkit-table-of-contents:has(.anchorkit-toc-sticky-right) {
    text-align: right !important;
}

/* Fallback for browsers without :has() support */
.wp-block-anchorkit-table-of-contents .anchorkit-toc-sticky-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.wp-block-anchorkit-table-of-contents .anchorkit-toc-sticky-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Sticky indicator removed - it was showing inside the TOC which looked bad */

/* Ensure Modern preset respects custom bullet colors in block preview */
.editor-styles-wrapper .anchorkit-toc-preset-modern .anchorkit-toc-item::before,
.block-editor-block-preview__content .anchorkit-toc-preset-modern .anchorkit-toc-item::before {
    color: var(--anchorkit-toc-bullet-color, var(--anchorkit-toc-link-color, #1a73e8)) !important;
}

/* Ensure numbering uses link color, not bullet color */
.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-numerals .anchorkit-toc-item-number,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-numerals .anchorkit-toc-item-number,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-numerals .anchorkit-toc-item-number {
    color: var(--anchorkit-toc-link-color, #1a73e8) !important;
}

/* Hierarchical View Indentation for Block Editor Preview */
/* Apply to all possible block editor contexts with high specificity */
.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-1,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-1,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-1 {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-2,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-2,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-2 {
    margin-left: 20px !important;
    padding-left: 0 !important;
}

.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-3,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-3,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-3 {
    margin-left: 40px !important;
    padding-left: 0 !important;
}

.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-4,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-4,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-4 {
    margin-left: 60px !important;
    padding-left: 0 !important;
}

.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-5,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-5,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-5 {
    margin-left: 80px !important;
    padding-left: 0 !important;
}

.editor-styles-wrapper .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-6,
.block-editor-block-preview__content .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-6,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container.anchorkit-toc-hierarchical .anchorkit-toc-item.anchorkit-toc-level-6 {
    margin-left: 100px !important;
    padding-left: 0 !important;
}

/* Ensure non-hierarchical view has no indentation in editor */
.editor-styles-wrapper .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-1,
.editor-styles-wrapper .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-2,
.editor-styles-wrapper .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-3,
.editor-styles-wrapper .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-4,
.editor-styles-wrapper .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-5,
.editor-styles-wrapper .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-6,
.block-editor-block-preview__content .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-1,
.block-editor-block-preview__content .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-2,
.block-editor-block-preview__content .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-3,
.block-editor-block-preview__content .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-4,
.block-editor-block-preview__content .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-5,
.block-editor-block-preview__content .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-6,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-1,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-2,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-3,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-4,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-5,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-container:not(.anchorkit-toc-hierarchical) .anchorkit-toc-item.anchorkit-toc-level-6 {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* --- Block inspector UX enhancements --- */
/* Sticky wrapper for EDIT MODE and all design override sections (until Box Shadow) */
.anchorkit-design-override-sticky-wrapper {
    position: relative;
}

.anchorkit-edit-mode-control.components-base-control {
    position: sticky;
    top: 46px;
    z-index: 10;
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.anchorkit-edit-mode-control .components-button.anchorkit-edit-mode-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 90px;
    justify-content: center;
}

.anchorkit-design-color-stack {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background: #ffffff;
}

.anchorkit-design-color-stack p {
    margin: 0 0 12px;
}

.anchorkit-design-color-stack--dark {
    background: #1f232a;
    border-color: #2f3441;
    color: #f5f5f5;
}

.anchorkit-design-color-stack--dark .components-base-control__label,
.anchorkit-design-color-stack--dark .components-base-control__field,
.anchorkit-design-color-stack--dark .components-dropdown button {
    color: #f5f5f5;
}

.anchorkit-design-color-stack .components-color-picker {
    margin-bottom: 0;
}

.anchorkit-design-color-stack .components-color-picker__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.anchorkit-design-color-stack .components-color-picker__inputs .components-dropdown {
    flex: 0 0 auto;
    min-width: 80px;
}

.anchorkit-design-color-stack .components-color-picker__inputs .components-input-control {
    flex: 1 1 auto;
}

.anchorkit-design-color-stack .components-color-picker__inputs .components-color-picker__inputs-copy {
    flex: 0 0 auto;
}

.anchorkit-design-color-stack .components-color-picker__inputs button.components-button {
    padding: 4px 6px;
    min-width: 32px;
}

.anchorkit-design-color-stack--dark .components-color-picker__inputs button.components-button {
    background: #2f3441;
    color: #f5f5f5;
    border-color: #3e4557;
}

.anchorkit-design-color-stack--dark .components-color-picker__inputs button.components-button:hover,
.anchorkit-design-color-stack--dark .components-color-picker__inputs button.components-button:focus {
    background: #3b4253;
    color: #ffffff;
}

.anchorkit-design-color-stack--dark button.components-button.is-compact.has-icon:not(.has-text) {
    color: #ffffff;
}

.anchorkit-design-color-stack:not(.anchorkit-design-color-stack--dark) button.components-button.is-compact.has-icon:not(.has-text) {
    color: inherit;
}

.anchorkit-design-color-stack .components-color-picker__input-field input {
    width: 100%;
}

.anchorkit-color-field.components-base-control {
    margin-bottom: 12px;
}

.anchorkit-box-shadow-panel.components-panel__body {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 12px;
    overflow: hidden;
}

.anchorkit-box-shadow-panel--dark.components-panel__body {
    background: #1f232a;
    border-color: #2f3441;
    color: #f5f5f5;
}

.anchorkit-box-shadow-panel--dark .components-base-control__label,
.anchorkit-box-shadow-panel--dark .components-base-control__help {
    color: #f5f5f5;
}

/* Style the PanelBody title button and arrow icon in dark mode */
.anchorkit-box-shadow-panel--dark .components-panel__body-title {
    color: #f5f5f5;
}

.anchorkit-box-shadow-panel--dark .components-panel__body-title:hover {
    color: #007CBA;
}

.anchorkit-box-shadow-panel--dark .components-panel__body-title .components-panel__arrow {
    color: #f5f5f5;
    fill: #f5f5f5;
}

.anchorkit-box-shadow-panel--dark .components-panel__body-title svg {
    color: #f5f5f5;
    fill: #f5f5f5;
}

.anchorkit-box-shadow-panel--dark .components-panel__body-title button {
    color: #f5f5f5;
}

.anchorkit-box-shadow-panel--dark .components-panel__body-title button svg {
    color: #f5f5f5;
    fill: #f5f5f5;
}

/* Fix arrow icon color on hover - matches text hover color */
.anchorkit-box-shadow-panel--dark .components-panel__body-title:hover .components-panel__arrow,
.anchorkit-box-shadow-panel--dark .components-panel__body-title:hover svg,
.anchorkit-box-shadow-panel--dark .components-panel__body-title:hover button svg {
    color: #007CBA;
    fill: #007CBA;
}

/* Apply consistent hover behavior to ALL PanelBody components for UI consistency */
.components-panel__body-title:hover .components-panel__arrow,
.components-panel__body-title:hover svg,
.components-panel__body-title:hover button svg {
    color: inherit;
    fill: inherit;
}

/* ===============================================
   MODERN PRESET - Block Editor Light Mode Styles
   The block editor doesn't have html.anchorkit-prefers-light class,
   so we need explicit rules for the modern preset system theme.
   Using direct selectors to ensure they apply regardless of wrapper.
   =============================================== */

/* Modern preset light mode in block editor - container */
/* Direct selector without wrapper requirement - high specificity */
.anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling):not(.anchorkit-toc-theme-dark),
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling),
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) {
    background: #f8f9fc !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    color: #1f1f1f !important;
    --anchorkit-toc-link-color: #1a73e8 !important;
    --anchorkit-toc-link-hover-color: #1557b0 !important;
    --anchorkit-toc-hover-bg: rgba(26, 115, 232, 0.08) !important;
    --anchorkit-toc-text-color: #1f1f1f !important;
    --anchorkit-toc-bullet-color: #1a73e8 !important;
    --anchorkit-toc-border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Modern preset light mode gradient pseudo-element */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling)::before,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 50%, #f0f4ff 100%) !important;
}

/* Modern preset light mode title */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-title,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-title {
    color: #1f1f1f !important;
}

/* Modern preset light mode links */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link {
    color: #1a73e8 !important;
}

/* Modern preset light mode link hover */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link:hover,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link:hover {
    color: #1557b0 !important;
    background: rgba(26, 115, 232, 0.08) !important;
}

/* Modern preset light mode toggle button */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-toggle-button,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-toggle-button {
    color: #1a73e8 !important;
}

/* Modern preset light mode View More button */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1a73e8 !important;
    background: rgba(26, 115, 232, 0.04) !important;
}

.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn:hover,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn:hover {
    background-color: rgba(26, 115, 232, 0.08) !important;
    border-color: #1557b0 !important;
}

/* Modern preset light mode numbering */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-1>a::before,
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-2>a::before,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-1>a::before,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-2>a::before {
    color: #1a73e8 !important;
}

/* Modern preset light mode back to top */
.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top a,
:is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top a {
    color: #1a73e8 !important;
}

/* ===============================================
   MODERN PRESET - Block Editor Dark Mode Styles (System Theme)
   When user selects "System" theme and their system is in dark mode,
   the preview should show dark mode styling. Since there's no JavaScript
   setting html.anchorkit-prefers-dark in the block editor, we use
   @media (prefers-color-scheme: dark) to detect it.
   =============================================== */

@media (prefers-color-scheme: dark) {
    /* Modern preset dark mode in block editor - container */
    .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling),
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling),
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) {
        background: #0d1117 !important;
        border: 1px solid rgba(240, 246, 252, 0.1) !important;
        border-radius: 16px !important;
        color: #f0f6fc !important;
        --anchorkit-toc-link-color: #58a6ff !important;
        --anchorkit-toc-link-hover-color: #79b8ff !important;
        --anchorkit-toc-hover-bg: rgba(88, 166, 255, 0.1) !important;
        --anchorkit-toc-text-color: #f0f6fc !important;
        --anchorkit-toc-bullet-color: #58a6ff !important;
        --anchorkit-toc-border-color: rgba(240, 246, 252, 0.1) !important;
    }

    /* Modern preset dark mode gradient pseudo-element */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling)::before,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 16px;
        background: linear-gradient(135deg, #161b22 0%, #0d1117 50%, #0d1117 100%) !important;
    }

    /* Modern preset dark mode title */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-title,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-title {
        color: #f0f6fc !important;
    }

    /* Modern preset dark mode links */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link {
        color: #58a6ff !important;
    }

    /* Modern preset dark mode link hover */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link:hover,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-link:hover {
        color: #79b8ff !important;
        background: rgba(88, 166, 255, 0.1) !important;
    }

    /* Modern preset dark mode toggle button */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-toggle-button,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-toggle-button {
        color: #58a6ff !important;
    }

    /* Modern preset dark mode View More button */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn {
        border-color: rgba(240, 246, 252, 0.2) !important;
        color: #58a6ff !important;
        background: rgba(88, 166, 255, 0.08) !important;
    }

    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn:hover,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-view-more-btn:hover {
        background-color: rgba(88, 166, 255, 0.15) !important;
        border-color: #58a6ff !important;
    }

    /* Modern preset dark mode numbering */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-1>a::before,
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-2>a::before,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-1>a::before,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-level-2>a::before {
        color: #58a6ff !important;
    }

    /* Modern preset dark mode back to top */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top {
        border-top-color: rgba(240, 246, 252, 0.1) !important;
    }

    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top a,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-back-to-top a {
        color: #58a6ff !important;
    }

    /* Modern preset dark mode item numbers */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-item-number,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-item-number {
        color: #58a6ff !important;
    }

    /* Modern preset dark mode bullets */
    .editor-styles-wrapper .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-item::before,
    :is(.anchorkit-block-preview-wrapper, .anchorkit-block-preview-shell) .anchorkit-toc-preset-modern.anchorkit-toc-container.anchorkit-toc-theme-system:not(.anchorkit-toc-custom-styling) .anchorkit-toc-item::before {
        color: #58a6ff !important;
    }
}

/* ========================================
   Pro Feature Panel Styling
   ======================================== */

/* Pro panel container with purple gradient background */
.anchorkit-pro-panel {
    border-left: 4px solid #7c3aed !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #fef8ff 100%) !important;
}

.anchorkit-pro-panel .components-panel__body-toggle {
    padding-right: 50px;
}

/* Inline badge for Pro panel titles */
.anchorkit-pro-badge-inline {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* Pro feature notice box */
.anchorkit-pro-notice {
    background: linear-gradient(135deg, #f0f6ff 0%, #fef0ff 100%);
    border: 2px dashed #9f7aea;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}

.anchorkit-pro-notice strong {
    display: block;
    color: #5b21b6;
    font-weight: 600;
    margin-bottom: 8px;
}

.anchorkit-pro-notice p {
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4c1d95;
}

.anchorkit-pro-notice ul {
    margin: 8px 0 12px 20px;
    list-style: disc;
}

.anchorkit-pro-notice li {
    font-size: 13px;
    line-height: 1.6;
    color: #6b21a8;
    margin-bottom: 4px;
}

/* Disabled preview controls for free users */
.anchorkit-pro-controls-preview {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(20%);
    position: relative;
}

.anchorkit-pro-controls-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.anchorkit-pro-controls-preview input,
.anchorkit-pro-controls-preview select,
.anchorkit-pro-controls-preview textarea,
.anchorkit-pro-controls-preview button {
    cursor: not-allowed !important;
}

/* Upgrade link button */
.anchorkit-upgrade-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white !important;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    margin-top: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.anchorkit-upgrade-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    color: white !important;
    text-decoration: none;
}

.anchorkit-upgrade-link:focus {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.anchorkit-upgrade-link svg {
    width: 16px;
    height: 16px;
}
