/* --- CSS to Hide Scrollbar Arrows and Horizontal Scrollbar --- */
/*
            NOTE: I have combined all your old, separate .dropdown-menu rules
            into the new section below. I am removing these originals
            to prevent conflicts.
        */

.live-search-wrapper {
    position: relative;
    width: 100%;
}
#live-search-input {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}
#live-search-results {
    position: absolute;
    top: 100%;
    right: 0; /* <-- This is the main fix (changed from left: 0) */
    /* width: 100%; <-- Removed this */
    min-width: 300px; /* <-- Increased width for better viewing */
    max-width: 400px; /* <-- Added for safety */
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;

}
#live-search-results h3 {
    align:center;
    font-size: 14px;
    color: #333;
    background-color: #f7f7f7;
    padding: 8px 12px;
    margin: 0;
    border-bottom: 1px solid #eee;
}
#live-search-results .results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}
#live-search-results .results-list li a {
    background-color: transparent !important;
    color: #555 !important;
    display: block;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid #f2f2f2;
    border-radius: 0;
    width: 100%;
}
#live-search-results .results-list li a:hover {
    background-color: #fec524 !important;
    color: #fff !important;
}
#live-search-results .no-results {
    padding: 15px;
    text-align: center;
    color: #888;
}

/* --- NEW NAVIGATION STYLES --- */
.navbar-nav .nav-item .nav-link {
    position: relative;
    padding-bottom: 8px;
    transition: color 0.3s ease;
    font-weight: 100;
}

.navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #fec524; /* Yellow color */
    transition: width 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item .nav-link.active::after {
    width: 100%; /* Underline expands on hover or active */
}

.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item .nav-link:hover {
    color:rgb(77, 7, 7); /* Dark blue for active/hover text */
}


/* --- NEW DROPDOWN STYLES (REPLACES ALL OLD DROPDOWN CSS) --- */

.dropdown-menu {
    background-color: #002d5c; /* Dark blue background */
    border: none;
    border-radius: 0;         /* Sharp corners */
    box-shadow: none;         /* No shadow */
    margin-top: 10px;         /* Space from nav link */
    padding: 0;               /* Remove default padding */
    
    /* Scrollbar rules from old CSS (kept for long lists) */
    max-height: 350px; 
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;    /* Firefox */
    scrollbar-color: #fec524 #002d5c; /* Yellow handle, blue track */
    width: auto; /* Let content decide width */
    -ms-overflow-style: none;  /* IE and Edge */
}

/* Webkit scrollbar styles for new design */
.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}
.dropdown-menu::-webkit-scrollbar-track {
    background: #002d5c; /* Blue track */
}
.dropdown-menu::-webkit-scrollbar-thumb {
    background: #fec524; /* Yellow handle */
    border-radius: 0;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #fdd868; /* Lighter yellow */
}
.dropdown-menu::-webkit-scrollbar-button {
    display: none;
}
.dropdown-menu::-webkit-scrollbar:horizontal {
    display: none;
}

.dropdown-item {
    padding: 12px 20px;
    color: #ffffff !important; /* White text */
    transition: all 0.3s ease;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px; /* Ensure readable font size */
}

.dropdown-item:hover {
    background-color: #002d5c !important; /* Stay blue on hover */
    color: #fec524 !important; /* Yellow text on hover */
}

.dropdown-divider {
    margin: 0;
    border-top: 1px solid #fec524; /* Yellow divider */
}

/* --- End of New Dropdown Styles --- */


/* --- CSS For Floating Navigation Button --- */
.nav-item-btn {
    margin-left: 25px; /* Adds space between the last link and the button */
    align-self: center; /* Vertically aligns the button in the middle of the navbar */
}