/* Frontend Styles for Enhanced Menu Icons */

/* CSS Variables for easy theming */
:root {
    --rmdi-icon-size: 16px;
    --rmdi-icon-color: #333;
    --rmdi-h-spacing: 8px;
    --rmdi-v-spacing: 4px;
}

/* Menu item container */
.rmdi-menu-item.rmdi-has-icon {
    position: relative;
}

/* Link wrapper */
.rmdi-link,
.rmdi-has-icon > a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    gap: 0 !important;
}

/* Icon wrapper */
.rmdi-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* SVG icon and standard image styling */
.rmdi-icon-wrapper img.svg-icon,
.rmdi-icon-wrapper img.rmdi-img-icon,
.rmdi-icon-wrapper svg {
    width: 1em;
    height: 1em;
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* FIX: Force Font Awesome icons to display properly */
.rmdi-icon-wrapper span.rmdi-fa-icon {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
    font-size: inherit !important;
}

/* FIX: Explicit font-family for each icon style */
.rmdi-icon-wrapper span.rmdi-fa-icon.fa-solid,
.rmdi-icon-wrapper span.rmdi-fa-icon.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.rmdi-icon-wrapper span.rmdi-fa-icon.fa-regular,
.rmdi-icon-wrapper span.rmdi-fa-icon.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.rmdi-icon-wrapper span.rmdi-fa-icon.fa-brands,
.rmdi-icon-wrapper span.rmdi-fa-icon.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.rmdi-icon-wrapper span.rmdi-fa-icon.fa-light,
.rmdi-icon-wrapper span.rmdi-fa-icon.fal {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 300 !important;
}

.rmdi-icon-wrapper span.rmdi-fa-icon.fa-thin,
.rmdi-icon-wrapper span.rmdi-fa-icon.fat {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 100 !important;
}

.rmdi-icon-wrapper span.rmdi-fa-icon.fa-duotone,
.rmdi-icon-wrapper span.rmdi-fa-icon.fad {
    font-family: "Font Awesome 6 Duotone" !important;
    font-weight: 900 !important;
}

/* FIX: v5 compatibility */
.rmdi-icon-wrapper span.rmdi-fa-icon.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* Text wrapper */
.rmdi-text-wrapper {
    display: inline-flex !important;
    flex-direction: column !important;
    line-height: 1.3 !important;
}

/* Title */
.rmdi-title {
    display: block !important;
    font-weight: inherit !important;
}

/* Subtext */
.rmdi-subtext {
    display: block !important;
    font-size: 0.75em;
    opacity: 0.75;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

.rmdi-subtext:empty {
    display: none !important;
}

/* RTL Support */
.rtl .rmdi-icon-wrapper {
    margin-right: 0 !important;
    margin-left: var(--rmdi-h-spacing, 8px) !important;
}

.rtl .rmdi-text-wrapper {
    text-align: right !important;
}

/* Accessibility - Focus States */
.rmdi-link:focus-visible,
.rmdi-has-icon > a:focus-visible {
    outline: 2px solid #007cba !important;
    outline-offset: 2px !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .rmdi-subtext {
        font-size: 0.7em !important;
    }
}

/* Print Styles */
@media print {
    .rmdi-icon-wrapper {
        display: none !important;
    }
}