/* Language Switcher Styles */

/* Dropdown button styling */
.nav-item .dropdown-toggle.border {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-color: rgba(108, 117, 125, 0.3) !important;
    width: 185px; /* Fixed width for the dropdown button - reduced from 200px to 185px */
    text-align: left; /* Align text to the left for better appearance */
    position: relative; /* For dropdown arrow positioning */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1.25rem; /* Give more space for the dropdown arrow */
}

.nav-item .dropdown-toggle.border:hover {
    border-color: #89bd55 !important;
}

/* Flag icon styling */
.fi {
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Dropdown menu styling */
.dropdown-menu {
    border-radius: 6px;
    border: 1px solid rgba(108, 117, 125, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    margin-top: 8px;
    transition: opacity 0.3s ease;
    width: 185px; /* Fixed width for the dropdown menu - reduced from 200px to 185px */
    max-height: 215px; /* Height to show exactly 5 items based on item height calculation */
    overflow-y: auto; /* Enable vertical scrolling when needed */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(137, 189, 85, 0.5) rgba(0, 0, 0, 0.05); /* For Firefox */
    scroll-behavior: smooth; /* Smooth scrolling effect */
}

/* Custom scrollbar styling for webkit browsers (Chrome, Safari, Edge) */
.dropdown-menu::-webkit-scrollbar {
    width: 4px; /* Thinner scrollbar */
}

.dropdown-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03); /* Lighter track */
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: rgba(137, 189, 85, 0.4); /* Lighter thumb color */
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(137, 189, 85, 0.7);
}

/* Dropdown item styling */
.dropdown-item {
    padding: 0.5rem 1.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
}

/* Adjust the flag position in dropdown items */
.dropdown-item .fi {
    margin-right: 5px !important; /* Override Bootstrap's me-2 class (which is 0.5rem) with a smaller margin */
}

.dropdown-item:hover {
    background-color: rgba(137, 189, 85, 0.1);
    color: #89bd55;
}

.dropdown-item.active {
    background-color: rgba(137, 189, 85, 0.15);
    color: #89bd55;
    font-weight: 600;
}

/* Animation for selected item */
@keyframes selectedPulse {
    0% { background-color: rgba(137, 189, 85, 0.15); }
    50% { background-color: rgba(137, 189, 85, 0.3); }
    100% { background-color: rgba(137, 189, 85, 0.15); }
}

.selected-animation {
    animation: selectedPulse 0.5s ease;
}

/* Responsive styles */
@media (max-width: 768px) {
    .nav-item .dropdown-toggle.border {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; /* Auto width on mobile */
        max-width: none; /* Remove max-width to make it fully responsive */
        margin-left: auto;
        margin-right: auto;
        /* Improve text rendering on iOS */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: 400; /* Prevent font from appearing too bold */
        letter-spacing: 0.01em; /* Slightly increase letter spacing */
    }
    
    .dropdown-menu {
        width: 100%; /* Auto width on mobile */
        max-width: none; /* Remove max-width to make it fully responsive */
        margin-left: auto;
        margin-right: auto;
        /* Fix iOS momentum scrolling issues */
        -webkit-overflow-scrolling: touch;
        /* Avoid "fat finger" touch issues near the edges */
        padding: 0.7rem 0;
    }
    
    .dropdown-item {
        text-align: center;
        justify-content: center;
        /* Improve text rendering on iOS */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: 400; /* Prevent font from appearing too bold */
        letter-spacing: 0.01em; /* Slightly increase letter spacing */
        padding: 0.6rem 1.5rem; /* Slightly increase vertical padding for better touch targets */
    }
    
    /* Specific iOS fixes */
    @supports (-webkit-touch-callout: none) {
        .dropdown-item, .nav-item .dropdown-toggle.border {
            /* iOS-specific font adjustments */
            text-size-adjust: 100%; /* Prevent iOS from auto-adjusting text size */
            font-weight: 300; /* Lighter weight specifically for iOS to combat "bold" appearance */
            font-size: 0.9375rem; /* More precise font size for iOS */
            transform: translateZ(0); /* Force GPU acceleration for smoother text rendering */
            font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Use iOS system fonts */
            /* Enhanced anti-aliasing settings */
            -webkit-font-smoothing: subpixel-antialiased;
            font-kerning: normal; /* Enable kerning for better character spacing */
            font-feature-settings: "kern" 1, "liga" 1; /* Enable ligatures and kerning */
            text-rendering: optimizeLegibility; /* Optimize for legibility over speed */
            /* Additional iOS text optimization */
            letter-spacing: 0.015em; /* Slightly more letter spacing */
            word-spacing: 0.01em; /* Improve word spacing */
        }
        
        /* Fix iOS text width issue */
        .dropdown-item span, .nav-item .dropdown-toggle.border span {
            /* Prevent text from appearing compressed */
            display: inline-block; /* Force width calculation */
            max-width: 100%; /* Ensure text doesn't overflow */
            /* Subtle shadow to improve readability */
            text-shadow: 0 0 0 transparent;
            /* Prevent horizontal compression */
            transform: scaleX(1.01); /* Very slight horizontal scaling to counteract compression */
        }
        
        /* Specific fix for iPhone Chrome */
        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            .dropdown-item, .nav-item .dropdown-toggle.border {
                /* Fix for high DPI screens */
                transform: translateY(0px); /* Sub-pixel rendering fix */
                font-smooth: always; /* Additional smoothing */
                /* Further enhanced text clarity for Retina displays */
                -webkit-font-smoothing: antialiased !important;
                font-weight: 280; /* Even lighter for Retina displays */
            }
        }
        
        /* Fix iOS touch delay */
        .dropdown-item {
            touch-action: manipulation;
            /* Improve tap highlight appearance */
            -webkit-tap-highlight-color: rgba(137, 189, 85, 0.1);
            /* Enhance touch area without changing visual size */
            position: relative;
        }
        
        /* Add subtle feedback on iOS touch */
        .dropdown-item:active {
            background-color: rgba(137, 189, 85, 0.2);
        }
        
        /* Fix for iOS Safari scrolling */
        .dropdown-menu {
            /* Prevent content shifting during scrolling */
            backface-visibility: hidden;
            /* Smoother scrolling */
            transform: translate3d(0, 0, 0);
        }
        
        /* Improve iOS keyboard navigation */
        .dropdown-item:focus {
            outline: none;
            box-shadow: inset 0 0 0 2px rgba(137, 189, 85, 0.3);
        }
    }
}