/* IconPicker Control Styles */
.kirki-iconpicker-control {
    position: relative;

    .input-group {
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;

        .kirki-iconpicker-input {
            flex: 1;
            padding: 8px 12px;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }

        .kirki-iconpicker-input::placeholder {
            color: #999;
        }

        .kirki-iconpicker-preview {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-left: 1px solid #ddd;
            background: #f9f9f9;
        }

        .kirki-iconpicker-preview i {
            font-size: 16px;
            color: #333;
        }

        .kirki-iconpicker-preview i:empty {
            display: none;
        }

        .kirki-iconpicker-picker-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: none;
            border-left: 1px solid #ddd;
            background: #f9f9f9;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .kirki-iconpicker-picker-btn:hover {
            background: #e9e9e9;
        }

        .kirki-iconpicker-picker-btn .dashicons {
            font-size: 16px;
            color: #666;
        }
    }

    .kirki-iconpicker-picker-popover {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999999;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin-top: 4px;
        max-height: 400px;
        overflow: hidden;
        display: none;

        &.active {
            display: block;
        }

        .kirki-iconpicker-picker-header {
            padding: 12px;
            border-bottom: 1px solid #eee;

            .kirki-iconpicker-search {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                outline: none;

                &:focus {
                    border-color: #0073aa;
                    box-shadow: 0 0 0 1px #0073aa;
                }
            }
        }

        .kirki-iconpicker-picker-content {
            .kirki-iconpicker-picker-tabs {
                display: flex;
                border-bottom: 1px solid #eee;

                .kirki-iconpicker-tab {
                    flex: 1;
                    padding: 10px 16px;
                    border: none;
                    background: #f9f9f9;
                    cursor: pointer;
                    font-size: 14px;
                    transition: background-color 0.2s ease;

                    &:hover {
                        background: #e9e9e9;
                    }

                    &.active {
                        background: #0073aa;
                        color: #fff;
                    }
                }
            }

            .kirki-iconpicker-icons-container {
                max-height: 300px;
                overflow-y: auto;

                .kirki-iconpicker-icons-tab {
                    padding: 16px;
                    display: none;

                    &.active {
                        display: block;
                    }

                    i {
                        display: inline-block;
                        width: 32px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        margin: 4px;
                        cursor: pointer;
                        border: 1px solid transparent;
                        border-radius: 3px;
                        font-size: 14px;
                        transition: all 0.2s ease;

                        &:hover {
                            background: #f0f0f0;
                            border-color: #ddd;
                            transform: scale(1.1);
                        }

                        &:active {
                            background: #e0e0e0;
                            transform: scale(1.05);
                        }
                    }
                }
            }
        }
    }
}

/* Also support core repeater wrapper class */
.customize-control-repeater .kirki-iconpicker-control .kirki-iconpicker-picker-popover {
  z-index: 999999;
}

/* Common icons tab specific styling */
.kirki-iconpicker-icons-common {
    i {
        position: relative;

        &::after {
            content: attr(title);
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            font-style: normal;
            color: #666;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        &:hover::after {
            opacity: 1;
        }
    }
}

/* Repeater specific styles */
.customize-control-kirki-repeater {
    .kirki-iconpicker-control {
        .kirki-iconpicker-picker-popover {
            z-index: 999999;
        }
    }
}

/* Responsive adjustments */
@media (max-width: 782px) {
    .kirki-iconpicker-control {
        .kirki-iconpicker-picker-popover {
            .kirki-iconpicker-icons-container {
                max-height: 200px;

                .kirki-iconpicker-icons-tab {
                    padding: 12px;

                    i {
                        width: 28px;
                        height: 28px;
                        line-height: 28px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .kirki-iconpicker-control {
        .input-group {
            border-color: #555;
            background: #2c2c2c;

            .kirki-iconpicker-input {
                color: #fff;

                &::placeholder {
                    color: #aaa;
                }
            }

            .kirki-iconpicker-preview,
            .kirki-iconpicker-picker-btn {
                border-color: #555;
                background: #3c3c3c;

                i, .dashicons {
                    color: #fff;
                }
            }
        }

        .kirki-iconpicker-picker-popover {
            background: #2c2c2c;
            border-color: #555;

            .kirki-iconpicker-picker-header {
                border-color: #555;

                .kirki-iconpicker-search {
                    background: #3c3c3c;
                    border-color: #555;
                    color: #fff;

                    &::placeholder {
                        color: #aaa;
                    }
                }
            }

            .kirki-iconpicker-picker-content {
                .kirki-iconpicker-picker-tabs {
                    border-color: #555;

                    .kirki-iconpicker-tab {
                        background: #3c3c3c;
                        color: #fff;

                        &:hover {
                            background: #4c4c4c;
                        }

                        &.active {
                            background: #0073aa;
                        }
                    }
                }

                .kirki-iconpicker-icons-container {
                    .kirki-iconpicker-icons-tab {
                        i {
                            color: #fff;

                            &:hover {
                                background: #4c4c4c;
                                border-color: #666;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Ensure FontAwesome icons render properly */
.kirki-iconpicker-preview i,
.kirki-iconpicker-icons-container i {
    font-family: "Font Awesome 7 Free", "Font Awesome 7 Brands" !important;
}