/* Fix Bootstrap Icon Picker styling issues in WordPress admin */

/* Icon picker popover container */
.iconpicker-popover.popover {
    position: absolute !important;
    display: block !important;
    max-width: 600px !important;
    width: 600px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    z-index: 100000 !important;
    padding: 0 !important;
}

/* Popover arrow */
.iconpicker-popover.popover .arrow {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-color: transparent !important;
    position: absolute !important;
}

.iconpicker-popover.popover.bottom .arrow {
    top: -11px !important;
    left: 50% !important;
    margin-left: -11px !important;
    border-width: 0 11px 11px !important;
    border-bottom-color: #ddd !important;
}

.iconpicker-popover.popover.bottom .arrow:after {
    content: "" !important;
    position: absolute !important;
    top: 1px !important;
    left: -10px !important;
    border-style: solid !important;
    border-width: 0 10px 10px !important;
    border-color: transparent !important;
    border-bottom-color: #fff !important;
}

/* Popover content */
.iconpicker-popover .popover-content {
    padding: 15px !important;
    background: #fff !important;
}

/* Icon picker container */
.iconpicker {
    display: block !important;
    width: 100% !important;
}

/* Search input */
.iconpicker .iconpicker-search {
    width: 100% !important;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Icons container */
.iconpicker .iconpicker-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Individual icon item */
.iconpicker .iconpicker-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 18px !important;
    color: #333 !important;
}

.iconpicker .iconpicker-item:hover {
    background: #f0f0f0 !important;
    border-color: #999 !important;
    transform: scale(1.1) !important;
}

.iconpicker .iconpicker-item.active,
.iconpicker .iconpicker-item.iconpicker-selected {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: #fff !important;
}

/* Icon inside item */
.iconpicker .iconpicker-item i {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Pagination */
.iconpicker .iconpicker-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #ddd !important;
}

.iconpicker .iconpicker-pagination button {
    padding: 5px 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.iconpicker .iconpicker-pagination button:hover {
    background: #f0f0f0 !important;
}

.iconpicker .iconpicker-pagination button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Counter text */
.iconpicker .iconpicker-pagination span {
    font-size: 12px !important;
    color: #666 !important;
}

/* Fix for Tailwind CSS conflicts */
.iconpicker * {
    box-sizing: border-box !important;
}

/* Ensure proper positioning */
.iconpicker-popover {
    margin-top: 10px !important;
}

/* Scrollbar styling for icon container */
.iconpicker .iconpicker-items::-webkit-scrollbar {
    width: 8px !important;
}

.iconpicker .iconpicker-items::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

.iconpicker .iconpicker-items::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
}

.iconpicker .iconpicker-items::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}