/*
 * Custom Bullet Icons CSS
 * Applies icons using the ::before pseudo-element.
 * Version 1.4 - Added Cross Bullet
 */

/* =========================================================================
   Base Styles for LTR (Left-to-Right)
   ========================================================================= */

/* Ensure default list styles are completely removed */
.bi-starbullet,
.bi-heartbullet,
.bi-moonbullet,
.bi-checkbullet,
.bi-diamondbullet,
.bi-crossbullet { /* <-- ADDED HERE */
    list-style: none !important; /* Crucial: Remove all default list styling */
    list-style-type: none !important;
    list-style-image: none !important;
    padding-left: 20px !important; /* Base padding for LTR */
    margin-left: 0 !important; /* Ensure no default margin pushes it too far */
}

/* Style for the list items in LTR */
.bi-starbullet li,
.bi-heartbullet li,
.bi-moonbullet li,
.bi-checkbullet li,
.bi-diamondbullet li,
.bi-crossbullet li { /* <-- ADDED HERE */
    position: relative !important; /* Needed for absolute positioning of the icon */
    padding-left: 1.8em !important; /* Make space for the icon on the left */
    margin-bottom: 0.5em !important; /* Spacing between items */
    list-style: none !important; /* Ensure individual li also has no default styling */
    background: none !important; /* Remove any li background */
}

/* Common styles for all icons in LTR */
.bi-starbullet li::before,
.bi-heartbullet li::before,
.bi-moonbullet li::before,
.bi-checkbullet li::before,
.bi-diamondbullet li::before,
.bi-crossbullet li::before { /* <-- ADDED HERE */
    /* --- NEW: Remove theme background/box --- */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* --- End new rules --- */

    /* Use Font Awesome 6 Free Solid */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* This is crucial for solid icons */
    -webkit-font-smoothing: antialiased; /* Better rendering for icons */
    -moz-osx-font-smoothing: grayscale; /* Better rendering for icons */
    display: inline-block !important; /* Ensure it behaves as an inline block */

    /* Position the icon */
    position: absolute !important;
    left: 0 !important; /* Align to the left */
    top: 0.1em !important; /* Adjust vertical alignment if needed */
    
    /* Ensure it's above any other default bullet */
    z-index: 1 !important; 
    
    /* Align the icon */
    width: 1.5em !important; 
    text-align: left !important;
}

/* --- Specific Icons (LTR) --- */

.bi-starbullet li::before {
    content: "\f005" !important; /* FA "star" */
    color: #ffc107 !important; /* Example color: gold */
}

.bi-heartbullet li::before {
    content: "\f004" !important; /* FA "heart" */
    color: #dc3545 !important; /* Example color: red */
}

.bi-moonbullet li::before {
    content: "\f186" !important; /* FA "moon" */
    color: #6c757d !important; /* Example color: gray */
}

.bi-checkbullet li::before {
    content: "\f00c" !important; /* FA "check" */
    color: #28a745 !important; /* Example color: green */
}

.bi-diamondbullet li::before {
    content: "\f219" !important; /* FA "gem" (diamond) */
    color: #007bff !important; /* Example color: blue */
}

/* --- ADDED THIS ENTIRE BLOCK --- */
.bi-crossbullet li::before {
    content: "\f00d" !important; /* FA "xmark" (cross) */
    color: #dc3545 !important; /* Example color: red */
}


/* =========================================================================
   RTL (Right-to-Left) Support
   ========================================================================= */

[dir="rtl"] .bi-starbullet,
[dir="rtl"] .bi-heartbullet,
[dir="rtl"] .bi-moonbullet,
[dir="rtl"] .bi-checkbullet,
[dir="rtl"] .bi-diamondbullet,
[dir="rtl"] .bi-crossbullet { /* <-- ADDED HERE */
    padding-left: 0 !important; /* Reset LTR padding */
    padding-right: 20px !important; /* Add padding to the right */
    margin-left: 0 !important;
    margin-right: 0 !important; /* Ensure no default margin */
}

[dir="rtl"] .bi-starbullet li,
[dir="rtl"] .bi-heartbullet li,
[dir="rtl"] .bi-moonbullet li,
[dir="rtl"] .bi-checkbullet li,
[dir="rtl"] .bi-diamondbullet li,
[dir="rtl"] .bi-crossbullet li { /* <-- ADDED HERE */
    padding-left: 0 !important; /* Reset LTR padding */
    padding-right: 1.8em !important; /* Make space for the icon on the right */
    background: none !important; /* Remove any li background */
}

[dir="rtl"] .bi-starbullet li::before,
[dir="rtl"] .bi-heartbullet li::before,
[dir="rtl"] .bi-moonbullet li::before,
[dir="rtl"] .bi-checkbullet li::before,
[dir="rtl"] .bi-diamondbullet li::before,
[dir="rtl"] .bi-crossbullet li::before { /* <-- ADDED HERE */
    left: auto !important; /* Unset the left position */
    right: 0 !important; /* Position the icon on the right */
    text-align: right !important; /* Align the icon to the right */
}