/**
 * AnchorKit Elementor Editor Styles
 * 
 * Styles for the Elementor editor panel and widget preview
 */

/**
 * Color Controls Layout
 * =====================
 * 
 * All light and dark mode color controls are shown together with clear headings.
 * This ensures both values are always visible and editable, avoiding confusion
 * about which field is being edited.
 * 
 * The design_editor_mode toggle controls which theme is shown in the PREVIEW only,
 * not which controls are visible.
 */

/* Widget icon in Elementor panel */
.elementor-element .icon .eicon-bullet-list {
    color: #0073aa;
}

/* Pro badge styling */
.elementor-control-field-description {
    font-style: italic;
    color: #f59e0b;
    font-weight: 600;
}

/* Preview notice */
.elementor-widget-preview {
    position: relative;
}

.elementor-widget-preview em {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    background: #f0f0f1;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
}

/* TOC Preview Message */
.anchorkit-toc-preview .anchorkit-toc-container {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.anchorkit-toc-preview .toc-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.anchorkit-toc-preview ul {
    list-style: none;
    padding-left: 0;
}

.anchorkit-toc-preview li {
    margin-bottom: 5px;
}

.anchorkit-toc-preview li[data-indent="1"] {
    padding-left: 20px;
}

.anchorkit-toc-preview p {
    margin-top: 15px;
    font-size: 12px;
    color: #666;
}

/* Widget category icon */
.elementor-element[data-element_type="anchorkit-toc.default"] .elementor-widget-icon {
    background-color: #0073aa;
    color: white;
}

/* Custom Elementor widget icon */
.anchorkit-elementor-icon::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_907_19)'%3e%3cpath d='M0 1.44C0 0.64471 0.64471 0 1.44 0H12V12H0V1.44Z' fill='%23BBD0FF'/%3e%3cpath d='M12 0H22.56C23.3553 0 24 0.64471 24 1.44V12H12V0Z' fill='%23E7C6FF'/%3e%3cpath d='M12 12H24V22.56C24 23.3553 23.3553 24 22.56 24H12V12Z' fill='%23B8C0FF'/%3e%3cpath d='M0 12H12V24H1.44C0.64471 24 0 23.3553 0 22.56V12Z' fill='%23C8B6FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_907_19'%3e%3crect width='24' height='24' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.elementor-control-design_editor_mode .elementor-choices {
    display: flex;
    gap: 0;
}

.elementor-control-design_editor_mode .elementor-choices-label i[class*="anchorkit-mode-icon"] {
    font-style: normal;
    font-size: 16px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.elementor-control-design_editor_mode .elementor-choices-label i[class*="anchorkit-mode-icon"]::before {
    display: inline-block;
    line-height: 1;
}

.elementor-control-design_editor_mode .elementor-choices-label i.anchorkit-mode-icon--light::before {
    content: "🌞";
}

.elementor-control-design_editor_mode .elementor-choices-label i.anchorkit-mode-icon--dark::before {
    content: "🌛";
}

/* Reset button controls */
.anchorkit-el-reset-control {
    margin: 8px 0 18px;
}

.anchorkit-el-reset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.anchorkit-el-reset-button {
    border: 1px solid #d4d7dc;
    background: #fff;
    color: #1d2327;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    font-weight: 500;
}

.anchorkit-el-reset-button:hover,
.anchorkit-el-reset-button:focus {
    border-color: #2271b1;
    color: #2271b1;
    outline: none;
}

.anchorkit-el-reset-button--global {
    background: #d63638;
    color: #fff;
    border-color: #d63638;
}

.anchorkit-el-reset-button--global:hover,
.anchorkit-el-reset-button--global:focus {
    background: #b32d2e;
    border-color: #b32d2e;
    color: #fff;
}

.anchorkit-el-reset-button:disabled,
.anchorkit-el-reset-button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* =========================================================
 * Light/Dark Mode Section Visual Differentiation
 * Makes it clear which mode you're editing
 * ========================================================= */

/* Light Mode Colors Heading */
.elementor-control-design_colors_light_heading {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 4px solid #f59e0b !important;
    margin-left: -15px;
    padding-left: 19px !important;
    margin-right: -15px;
    padding-right: 15px !important;
    border-radius: 0;
}

.elementor-control-design_colors_light_heading .elementor-control-title {
    color: #000 !important;
    font-weight: 600;
}

.elementor-control-design_colors_light_heading .elementor-control-title::before {
    content: "☀️ ";
}

/* Light Mode Color Controls */
.elementor-control-design_bg_color_light,
.elementor-control-design_text_color_light,
.elementor-control-design_link_color_light,
.elementor-control-design_link_hover_color_light,
.elementor-control-design_border_color_light,
.elementor-control-design_bullet_color_light,
.elementor-control-design_active_link_color_light {
    border-left: 4px solid #63584D;
    margin-left: -15px;
    padding-left: 19px !important;
    background: #63584D;
}

.elementor-control-design_bg_color_light .elementor-control-title,
.elementor-control-design_text_color_light .elementor-control-title,
.elementor-control-design_link_color_light .elementor-control-title,
.elementor-control-design_link_hover_color_light .elementor-control-title,
.elementor-control-design_border_color_light .elementor-control-title,
.elementor-control-design_bullet_color_light .elementor-control-title,
.elementor-control-design_active_link_color_light .elementor-control-title {
    color: #fff !important;
}

/* Light Mode Shadow Heading */
.elementor-control-design_shadow_heading_light {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 4px solid #f59e0b !important;
    margin-left: -15px;
    padding-left: 19px !important;
    margin-right: -15px;
    padding-right: 15px !important;
    border-radius: 0;
}

.elementor-control-design_shadow_heading_light .elementor-control-title {
    color: #000 !important;
    font-weight: 600;
}

.elementor-control-design_shadow_heading_light .elementor-control-title::before {
    content: "☀️ ";
}

/* Light Mode Shadow Controls */
.elementor-control-design_shadow_h_offset_light,
.elementor-control-design_shadow_v_offset_light,
.elementor-control-design_shadow_blur_light,
.elementor-control-design_shadow_spread_light,
.elementor-control-design_shadow_color_light,
.elementor-control-design_shadow_opacity_light {
    border-left: 4px solid #63584D;
    margin-left: -15px;
    padding-left: 19px !important;
    background: #63584D;
}

.elementor-control-design_shadow_h_offset_light .elementor-control-title,
.elementor-control-design_shadow_v_offset_light .elementor-control-title,
.elementor-control-design_shadow_blur_light .elementor-control-title,
.elementor-control-design_shadow_spread_light .elementor-control-title,
.elementor-control-design_shadow_color_light .elementor-control-title,
.elementor-control-design_shadow_opacity_light .elementor-control-title {
    color: #fff !important;
}

/* Dark Mode Colors Heading */
.elementor-control-design_colors_dark_heading {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    border-left: 4px solid #6366f1 !important;
    margin-left: -15px;
    padding-left: 19px !important;
    margin-right: -15px;
    padding-right: 15px !important;
    border-radius: 0;
}

.elementor-control-design_colors_dark_heading .elementor-control-title {
    color: #e0e7ff !important;
    font-weight: 600;
}

.elementor-control-design_colors_dark_heading .elementor-control-title::before {
    content: "🌙 ";
}

/* Dark Mode Color Controls */
.elementor-control-design_bg_color_dark,
.elementor-control-design_text_color_dark,
.elementor-control-design_link_color_dark,
.elementor-control-design_link_hover_color_dark,
.elementor-control-design_border_color_dark,
.elementor-control-design_bullet_color_dark,
.elementor-control-design_active_link_color_dark {
    border-left: 4px solid #818cf8;
    margin-left: -15px;
    padding-left: 19px !important;
    background: rgba(99, 102, 241, 0.1);
}

/* Dark Mode Shadow Heading */
.elementor-control-design_shadow_heading_dark {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    border-left: 4px solid #6366f1 !important;
    margin-left: -15px;
    padding-left: 19px !important;
    margin-right: -15px;
    padding-right: 15px !important;
    border-radius: 0;
}

.elementor-control-design_shadow_heading_dark .elementor-control-title {
    color: #e0e7ff !important;
    font-weight: 600;
}

.elementor-control-design_shadow_heading_dark .elementor-control-title::before {
    content: "🌙 ";
}

/* Dark Mode Shadow Controls */
.elementor-control-design_shadow_h_offset_dark,
.elementor-control-design_shadow_v_offset_dark,
.elementor-control-design_shadow_blur_dark,
.elementor-control-design_shadow_spread_dark,
.elementor-control-design_shadow_color_dark,
.elementor-control-design_shadow_opacity_dark {
    border-left: 4px solid #818cf8;
    margin-left: -15px;
    padding-left: 19px !important;
    background: rgba(99, 102, 241, 0.1);
}