/*=====================================================
  MOBILE DROPDOWN STYLES - ELEGANT & COMPACT
=====================================================*/

/* Base dropdown reset */
.dropdown-menu {
    display: none;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

/* Show dropdown when class is added */
.dropdown-menu.show {
    display: block;
    opacity: 1;
}

/* Mobile specific styles */
@media (max-width: 991.98px) {
    /* Navbar Container Tweaks */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        padding-bottom: 10px !important;
    }

    /* Elegant Dropdown Container */
    .navbar-nav .dropdown-menu {
        position: static !important;
        width: 94% !important; /* Slightly smaller width */
        margin: 5px auto !important; /* Center it */
        padding: 5px !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
        background: rgba(246, 248, 250, 0.6) !important; /* Subtle contrast */
        backdrop-filter: blur(5px) !important;
    }
    
    /* Compact Dropdown Items */
    .navbar-nav .dropdown-item {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 15px !important; /* Compact padding */
        color: #5a6a7e !important;
        font-size: 14px !important; /* Sleeker font size */
        font-weight: 500 !important;
        background: transparent !important;
        border-bottom: none !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    
    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:active {
        background: rgba(19, 84, 122, 0.08) !important;
        color: #13547a !important;
        padding-left: 20px !important; /* Subtle movement */
        transform: translateX(2px);
    }
    
    /* Active State */
    .navbar-nav .dropdown-item.active {
        background: rgba(19, 84, 122, 0.12) !important;
        color: #13547a !important;
        font-weight: 600 !important;
    }

    /* Submenu Arrows */
    .navbar-nav .dropdown-item i {
        font-size: 1.1em;
        margin-right: 8px;
        opacity: 0.7;
    }
    
    /* Active Parent Toggle */
    .dropdown.show > .dropdown-toggle {
        color: #13547a !important;
        background: rgba(19, 84, 122, 0.05) !important;
        border-radius: 10px !important;
    }
}

/* Hard Overrides for Bootstrap/Template Conflicts */
.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    transform: none !important;
}

/* Smooth Fade Animation */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu.show {
    animation: slideDownFade 0.2s ease-out forwards;
}