/**
 * template-header.css - Premium Tourism Header Complete Version
 * Nilan Travels - Navy Top Bar + Silver Glass Navbar
 * Version: 8.1.0 - Complete & Corrected Edition
 * Uses centralized colors from main.css with local overrides
 */

/* ==================== PREMIUM TOP BAR - NAVY BLUE ==================== */
.premium-top-bar {
    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%) !important;
    color: var(--text-white) !important;
    padding: var(--spacing-2) 0 !important;
    position: relative;
    z-index: 1002;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(13, 71, 161, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.premium-top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

.topbar-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--spacing-6) !important;
    min-height: 40px;
    position: relative;
    z-index: 2;
}

/* ===== CONTACT INFORMATION ===== */
.contact-info {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-6) !important;
    flex: 1 !important;
}

.contact-item {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.contact-link {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    transition: all 0.3s ease !important;
    padding: var(--spacing-1) var(--spacing-2) !important;
    border-radius: var(--radius-sm) !important;
}

.contact-link:hover {
    color: #FFD600 !important;
    text-decoration: none !important;
    background: rgba(255, 214, 0, 0.1) !important;
}

.contact-icon {
    font-size: var(--text-sm) !important;
    opacity: 0.8 !important;
}

/* ===== TOP UTILITIES ===== */
.top-utilities {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-4) !important;
    flex-shrink: 0 !important;
}

/* Language Selector - FIXED */
.language-selector {
    position: relative;
    min-width: 120px;
}

.language-selector,
.language-selector select,
#languageSelect {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
}

.language-select,
#languageSelect {
    /* Reset and base styles */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* Visibility and positioning */
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    
    /* Sizing */
    width: 100% !important;
    min-width: 110px !important;
    height: 32px !important;
    padding: 4px 24px 4px 8px !important;
    
    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: left !important;
    
    /* Background and borders */
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    
    /* Effects */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    
    /* Transitions */
    transition: all 0.3s ease !important;
    
    /* Cursor */
    cursor: pointer !important;
    
    /* Remove default outline */
    outline: none !important;
    
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 8px 10px !important;
}

/* Hover and focus states */
.language-select:hover,
.language-select:focus,
#languageSelect:hover,
#languageSelect:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #FFD600 !important;
    box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.3) !important;
    outline: none !important;
    color: white !important;
}

/* Active state */
.language-select:active,
#languageSelect:active {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(1px) !important;
}

/* Option styling */
.language-select option,
#languageSelect option {
    background: #0D47A1 !important;
    color: white !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: none !important;
}

.language-select option:hover,
.language-select option:checked,
#languageSelect option:hover,
#languageSelect option:checked {
    background: #1565C0 !important;
    color: #FFD600 !important;
}

/* Social Links */
.social-links {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-2) !important;
}

.social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: var(--radius-full) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.social-link:hover {
    background: #FFD600 !important;
    color: #0D47A1 !important;
    text-decoration: none !important;
    transform: translateY(-2px) scale(1.05) !important;
    border-color: #FFD600 !important;
}

/* ==================== EMERGENCY NAVBAR FIX - HIGH SPECIFICITY ==================== */

/* Force silver background navbar with maximum specificity */
body nav.main-navbar,
body .main-navbar,
html nav.main-navbar,
html .main-navbar {
    background: linear-gradient(135deg, 
        rgba(220, 225, 230, 0.98) 0%, 
        rgba(235, 240, 245, 0.96) 25%,
        rgba(225, 230, 235, 0.98) 50%,
        rgba(240, 245, 250, 0.96) 75%,
        rgba(220, 225, 230, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 2px solid #FFD600 !important; /* Gold bottom line */
    box-shadow: 0 2px 20px rgba(13, 71, 161, 0.08) !important;
    min-height: 42px !important; /* Further reduced from 48px */
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
}

/* Add metallic silver texture overlay */
body nav.main-navbar::after,
body .main-navbar::after,
html nav.main-navbar::after,
html .main-navbar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(circle at 20% 20%, rgba(200, 210, 220, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(180, 190, 200, 0.3) 0%, transparent 40%),
        linear-gradient(45deg, transparent 30%, rgba(210, 220, 230, 0.2) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(190, 200, 210, 0.15) 50%, transparent 70%) !important;
    background-size: 100px 100px, 80px 80px, 60px 60px, 40px 40px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Override any conflicting background styles */
body nav.main-navbar::before,
body .main-navbar::before,
html nav.main-navbar::before,
html .main-navbar::before {
    display: none !important;
}

/* Force silver background on scrolled state - darker silver */
body nav.main-navbar.scrolled,
body .main-navbar.scrolled,
html nav.main-navbar.scrolled,
html .main-navbar.scrolled {
    background: linear-gradient(135deg, 
        rgba(210, 215, 220, 0.99) 0%, 
        rgba(225, 230, 235, 0.97) 25%,
        rgba(215, 220, 225, 0.99) 50%,
        rgba(230, 235, 240, 0.97) 75%,
        rgba(210, 215, 220, 0.99) 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    box-shadow: 0 4px 25px rgba(13, 71, 161, 0.12) !important;
    min-height: 40px !important; /* Reduced from 45px */
    border-bottom: 2px solid #FFC107 !important; /* Slightly darker gold when scrolled */
}

/* Force proper navbar content sizing */
body .main-navbar .navbar-content,
html .main-navbar .navbar-content {
    min-height: 36px !important; /* Reduced from 40px */
    padding: 4px 0 !important; /* Reduced from 6px */
}

/* Force dark text for navigation with maximum specificity */
body .main-navbar .nav-link,
body .nav-list .nav-link,
body nav .nav-link,
html .main-navbar .nav-link,
html .nav-list .nav-link,
html nav .nav-link {
    color: #2C5282 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 10px !important; /* Reduced padding for smaller height */
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    min-height: 32px !important; /* Fixed height for consistency */
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* Force proper hover states */
body .main-navbar .nav-link:hover,
body .nav-list .nav-link:hover,
body nav .nav-link:hover,
html .main-navbar .nav-link:hover,
html .nav-list .nav-link:hover,
html nav .nav-link:hover {
    color: #1A365D !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

/* Add underline hover effect */
body .main-navbar .nav-link::after,
html .main-navbar .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #FFD600, #FFC107) !important;
    transition: all 0.25s ease !important;
    transform: translateX(-50%) !important;
}

body .main-navbar .nav-link:hover::after,
html .main-navbar .nav-link:hover::after {
    width: 80% !important;
}

/* Force proper active states */
body .main-navbar .nav-link.active,
body .nav-list .nav-link.active,
body nav .nav-link.active,
html .main-navbar .nav-link.active,
html .nav-list .nav-link.active,
html nav .nav-link.active {
    color: #1A365D !important;
    background: transparent !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body .main-navbar .nav-link.active::after,
html .main-navbar .nav-link.active::after {
    width: 100% !important;
    background: linear-gradient(90deg, #0D47A1, #1565C0) !important;
}

/* FIX DROPDOWN HOVER/CLICK HEIGHT INCONSISTENCY */
body .dropdown-menu,
html .dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(13, 71, 161, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(13, 71, 161, 0.1) !important;
    padding: 8px 0 !important;
    margin-top: 4px !important;
    min-width: 200px !important;
    max-height: none !important; /* Remove any height restrictions */
    overflow: visible !important; /* Ensure all items are visible */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.2s ease !important; /* Faster transition */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) !important;
    z-index: 1050 !important;
}

/* Show dropdown on hover - CONSISTENT HEIGHT */
body .nav-item.has-dropdown:hover .dropdown-menu,
html .nav-item.has-dropdown:hover .dropdown-menu,
body .nav-item:hover .dropdown-menu,
html .nav-item:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    display: block !important;
    max-height: 400px !important; /* Consistent max height */
    overflow-y: auto !important; /* Allow scrolling if needed */
}

/* Force proper dropdown links - CONSISTENT SIZING */
body .dropdown-link,
html .dropdown-link {
    color: #2C5282 !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 8px 15px !important; /* Consistent padding */
    border-radius: 0 !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    min-height: 32px !important; /* Fixed height for all dropdown items */
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

body .dropdown-link:hover,
html .dropdown-link:hover {
    color: #1A365D !important;
    background: rgba(13, 71, 161, 0.05) !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Force proper brand logo visibility */
body .brand-logo,
html .brand-logo {
    height: 40px !important; /* Reduced for smaller navbar */
    filter: none !important;
    transition: all 0.3s ease !important;
}

/* Force proper CTA button - smaller for compact navbar */
body .nav-cta,
html .nav-cta,
body .btn.btn-primary.nav-cta,
html .btn.btn-primary.nav-cta {
    background: linear-gradient(135deg, #FFD600 0%, #FFC107 100%) !important;
    color: #1A365D !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important; /* Smaller padding */
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255, 214, 0, 0.2) !important;
    height: 32px !important; /* Smaller height */
    min-width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body .nav-cta:hover,
html .nav-cta:hover,
body .btn.btn-primary.nav-cta:hover,
html .btn.btn-primary.nav-cta:hover {
    color: #1A365D !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(255, 214, 0, 0.3) !important;
}

/* Mobile menu toggle - smaller for compact navbar */
body .mobile-menu-toggle,
html .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(44, 82, 130, 0.3) !important;
    background: transparent !important;
    padding: 6px !important;
}

body .hamburger-line,
html .hamburger-line {
    width: 16px !important;
    height: 2px !important;
    background: #2C5282 !important;
}

/* Dropdown arrow styling */
body .dropdown-arrow,
html .dropdown-arrow {
    font-size: 8px !important;
    margin-left: 4px !important;
    color: #2C5282 !important;
    opacity: 0.6 !important;
    transition: transform 0.2s ease !important;
}

body .nav-item:hover .dropdown-arrow,
html .nav-item:hover .dropdown-arrow {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}

/* ==================== MAIN NAVBAR - RICH SILVER TEXTURE ==================== */
.main-navbar {
    background: linear-gradient(135deg, 
        rgba(240, 242, 245, 0.98) 0%, 
        rgba(248, 250, 252, 0.95) 25%,
        rgba(245, 247, 250, 0.98) 50%,
        rgba(252, 253, 255, 0.95) 75%,
        rgba(240, 242, 245, 0.98) 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: none !important;
    border-bottom: 1px solid rgba(13, 71, 161, 0.06) !important;
    box-shadow: 
        0 1px 20px rgba(13, 71, 161, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    min-height: 55px !important; /* Reduced from 70px */
}

/* Rich texture overlay */
.main-navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(240, 245, 250, 0.6) 0%, transparent 50%),
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    background-size: 120px 120px, 80px 80px, 40px 40px;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}

.main-navbar.scrolled {
    background: linear-gradient(135deg, 
        rgba(245, 247, 250, 0.99) 0%, 
        rgba(252, 253, 255, 0.97) 25%,
        rgba(248, 250, 252, 0.99) 50%,
        rgba(255, 255, 255, 0.97) 75%,
        rgba(245, 247, 250, 0.99) 100%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 
        0 2px 25px rgba(13, 71, 161, 0.08),
        0 1px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(13, 71, 161, 0.08) !important;
    min-height: 50px !important; /* Even more compact when scrolled */
}

.navbar-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--spacing-2) 0 !important; /* Reduced from spacing-3 */
    gap: var(--spacing-6) !important;
    min-height: 45px !important; /* Reduced from 60px */
    position: relative;
    z-index: 2;
}

/* ===== BRAND SECTION ===== */
.brand-section {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.brand-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.brand-logo {
    height: 50px !important;
    width: auto !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(13, 71, 161, 0.15)) !important;
}

.brand-link:hover .brand-logo {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 4px 8px rgba(13, 71, 161, 0.25)) !important;
}

.brand-text-fallback {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0D47A1 !important;
    display: none !important;
}

/* ===== NAVIGATION MENU ===== */
.nav-menu {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.nav-list {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-2) !important;
    color: #1565C0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
}

.nav-link:hover {
    color: #0D47A1 !important;
    background: rgba(13, 71, 161, 0.06) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.nav-link.active {
    color: #0D47A1 !important;
    background: rgba(13, 71, 161, 0.08) !important;
    box-shadow: 0 2px 4px rgba(13, 71, 161, 0.15) !important;
}

.dropdown-arrow {
    font-size: 10px !important;
    margin-left: 6px !important;
    transition: transform 0.3s ease !important;
    opacity: 0.7 !important;
}

.nav-item:hover .dropdown-arrow {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 249, 250, 0.92) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(13, 71, 161, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 8px 32px rgba(13, 71, 161, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 8px !important;
    margin-top: 8px !important;
    min-width: 220px !important;
    list-style: none !important;
}

.dropdown-link {
    color: #1565C0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: block !important;
}

.dropdown-link:hover {
    color: #0D47A1 !important;
    background: rgba(13, 71, 161, 0.08) !important;
    text-decoration: none !important;
    transform: translateX(4px) !important;
}

.dropdown-divider {
    height: 1px !important;
    background: rgba(13, 71, 161, 0.1) !important;
    margin: 6px 0 !important;
    border: none !important;
}

/* ===== NAVIGATION ACTIONS ===== */
.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-4) !important;
    flex-shrink: 0 !important;
}

/* Book Now CTA Button */
.nav-cta,
.btn.btn-primary.nav-cta {
    background: linear-gradient(135deg, #FFD600 0%, #FFC107 100%) !important;
    color: #0D47A1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3) !important;
    border: none !important;
    letter-spacing: 0.02em !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nav-cta:hover,
.btn.btn-primary.nav-cta:hover {
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%) !important;
    color: #0D47A1 !important;
    text-decoration: none !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(255, 214, 0, 0.4) !important;
}

.nav-cta i {
    font-size: 14px !important;
}

/* ===== MOBILE MENU TOGGLE ===== */
.mobile-menu-toggle {
    display: none !important;
    background: transparent !important;
    border: 2px solid #1565C0 !important;
    padding: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    width: 44px !important;
    height: 44px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
}

.mobile-menu-toggle:hover {
    background: rgba(13, 71, 161, 0.08) !important;
    border-color: #0D47A1 !important;
}

.hamburger-line {
    width: 20px !important;
    height: 2px !important;
    background: #1565C0 !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px) !important;
}

/* ==================== MOBILE NAVIGATION ==================== */
.mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(13, 71, 161, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease !important;
}

.mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-nav-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 249, 250, 0.92) 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    width: 320px !important;
    height: 100% !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.4s ease !important;
    overflow-y: auto !important;
}

.mobile-nav-overlay.active .mobile-nav-content {
    transform: translateX(0) !important;
}

.mobile-nav-header {
    padding: 20px !important;
    border-bottom: 1px solid rgba(13, 71, 161, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%) !important;
    color: white !important;
}

.mobile-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.mobile-logo {
    height: 32px !important;
}

.mobile-brand-name {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: white !important;
}

.mobile-nav-close {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    font-size: 20px !important;
    color: white !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #FFD600 !important;
    color: #FFD600 !important;
}

.mobile-nav-body {
    padding: 20px 0 !important;
}

.mobile-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-nav-item {
    margin-bottom: 2px !important;
}

.mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    color: #1565C0 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.mobile-nav-link:hover {
    background: rgba(13, 71, 161, 0.08) !important;
    color: #0D47A1 !important;
    text-decoration: none !important;
}

.mobile-nav-link i {
    width: 20px !important;
    font-size: 16px !important;
    color: #FFD600 !important;
}

/* Mobile Submenu */
.submenu-toggle {
    position: relative !important;
}

.submenu-arrow {
    margin-left: auto !important;
    transition: transform 0.3s ease !important;
    font-size: 14px !important;
    color: #999 !important;
}

.mobile-nav-item.active .submenu-arrow {
    transform: rotate(180deg) !important;
    color: #0D47A1 !important;
}

.mobile-submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease !important;
    background: rgba(13, 71, 161, 0.05) !important;
}

.mobile-nav-item.active .mobile-submenu {
    max-height: 1000px !important;
    padding: 8px 0 !important;
}

.mobile-submenu-link {
    display: block !important;
    padding: 8px 20px 8px 50px !important;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.mobile-submenu-link:hover {
    background: rgba(13, 71, 161, 0.08) !important;
    color: #0D47A1 !important;
    text-decoration: none !important;
}

/* Mobile Nav Footer */
.mobile-nav-footer {
    padding: 20px !important;
    border-top: 1px solid rgba(13, 71, 161, 0.1) !important;
    background: rgba(248, 249, 250, 0.5) !important;
}

.mobile-cta {
    width: 100% !important;
    text-align: center !important;
    background: linear-gradient(135deg, #FFD600 0%, #FFC107 100%) !important;
    color: #0D47A1 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3) !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.mobile-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 214, 0, 0.4) !important;
    color: #0D47A1 !important;
    text-decoration: none !important;
}

/* Mobile Contact Info */
.mobile-contact-info {
    margin-bottom: 20px !important;
}

.mobile-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    color: #666 !important;
    font-size: 14px !important;
}

.mobile-contact-item a,
.mobile-contact-link {
    color: inherit !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

.mobile-contact-item a:hover,
.mobile-contact-link:hover {
    color: #0D47A1 !important;
    text-decoration: none !important;
}

.mobile-contact-item i {
    width: 16px !important;
    font-size: 14px !important;
    color: #FFD600 !important;
}

/* Mobile Social Links */
.mobile-social-links {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

.mobile-social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(13, 71, 161, 0.08) !important;
    color: #1565C0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
}

.mobile-social-link:hover {
    background: #FFD600 !important;
    color: #0D47A1 !important;
    text-decoration: none !important;
    transform: translateY(-2px) scale(1.05) !important;
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media (max-width: 991.98px) {
    .nav-menu {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .brand-logo {
        height: 45px !important;
    }
    
    .nav-cta {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 767.98px) {
    .premium-top-bar {
        padding: 6px 0 !important;
    }
    
    .topbar-content {
        gap: var(--spacing-4) !important;
    }
    
    .contact-info .contact-item:first-child {
        display: none !important;
    }
    
    .main-navbar {
        min-height: 65px !important;
    }
    
    .navbar-content {
        padding: var(--spacing-2) 0 !important;
    }
    
    .brand-logo {
        height: 42px !important;
    }
    
    .nav-cta {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hamburger-line {
        width: 18px !important;
    }
    
    .language-selector {
        min-width: 100px;
    }
    
    .language-select,
    #languageSelect {
        min-width: 90px !important;
        height: 28px !important;
        font-size: 11px !important;
        padding: 3px 20px 3px 6px !important;
    }
}

@media (max-width: 575.98px) {
    .premium-top-bar .contact-info {
        gap: var(--spacing-3) !important;
    }
    
    .premium-top-bar .top-utilities {
        gap: var(--spacing-2) !important;
    }
    
    .language-select {
        min-width: 80px !important;
        font-size: 11px !important;
    }
    
    .social-link {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }
    
    .mobile-nav-content {
        width: 100% !important;
    }
    
    .language-selector {
        min-width: 85px;
    }
    
    .language-select,
    #languageSelect {
        min-width: 80px !important;
        font-size: 10px !important;
        padding: 2px 18px 2px 5px !important;
    }
}

/* ==================== ACCESSIBILITY ==================== */
.nav-link:focus-visible,
.dropdown-link:focus-visible,
.mobile-nav-link:focus-visible,
.nav-cta:focus-visible,
.language-select:focus-visible {
    outline: 2px solid #FFD600 !important;
    outline-offset: 2px !important;
}

.language-select:focus-visible,
#languageSelect:focus-visible {
    outline: 2px solid #FFD600 !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .language-select,
    #languageSelect {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .main-navbar {
        background: #ffffff !important;
        border-bottom: 2px solid #0D47A1 !important;
    }
    
    .nav-link,
    .dropdown-link {
        border: 1px solid currentColor !important;
    }
    
    .language-select,
    #languageSelect {
        border: 2px solid white !important;
        background: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
    }
    
    .language-select:hover,
    .language-select:focus,
    #languageSelect:hover,
    #languageSelect:focus {
        border-color: #FFD600 !important;
        background: rgba(0, 0, 0, 0.9) !important;
    }
    
    .premium-top-bar {
        background: #0D47A1 !important;
        border-bottom: 2px solid white !important;
    }
    
    .contact-link,
    .social-link {
        border: 1px solid currentColor !important;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .premium-top-bar,
    .nav-actions,
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .main-navbar {
        background: white !important;
        box-shadow: none !important;
    }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
.main-navbar,
.dropdown-menu,
.mobile-nav-overlay,
.mobile-nav-content,
.brand-logo {
    will-change: transform !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

.brand-logo,
.mobile-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==================== SAFARI COMPATIBILITY ==================== */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .navbar-content {
            -webkit-backface-visibility: hidden;
        }
        
        .dropdown-menu,
        .mobile-nav-overlay {
            -webkit-backdrop-filter: blur(20px);
        }
        
        .main-navbar {
            -webkit-backdrop-filter: blur(20px);
        }
        
        .premium-top-bar {
            -webkit-backdrop-filter: blur(10px);
        }
    }
}

/* ==================== TOUCH IMPROVEMENTS ==================== */
@media (max-width: 768px) {
    .mobile-menu-toggle,
    .nav-cta,
    .mobile-nav-link,
    .mobile-contact-item,
    .language-select {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* ==================== SAFE AREA SUPPORT ==================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .navbar-content {
            padding-left: max(var(--spacing-4), env(safe-area-inset-left));
            padding-right: max(var(--spacing-4), env(safe-area-inset-right));
        }
        
        .topbar-content {
            padding-left: max(var(--spacing-4), env(safe-area-inset-left));
            padding-right: max(var(--spacing-4), env(safe-area-inset-right));
        }
    }
}

/* ==================== CUSTOM SCROLLBAR ==================== */
.mobile-nav-body::-webkit-scrollbar {
    width: 4px !important;
}

.mobile-nav-body::-webkit-scrollbar-track {
    background: rgba(13, 71, 161, 0.1) !important;
}

.mobile-nav-body::-webkit-scrollbar-thumb {
    background: rgba(13, 71, 161, 0.3) !important;
    border-radius: 2px !important;
}

.mobile-nav-body::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 71, 161, 0.5) !important;
}

/* ==================== JAVASCRIPT INTEGRATION FIXES ==================== */
/* Ensure language selector is properly styled and accessible */
.language-selector select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 8px !important;
    padding-right: 24px !important;
}

/* Fix for Bootstrap dropdown functionality */
.dropdown-toggle::after {
    display: none !important;
}

.nav-item.has-dropdown:hover .dropdown-menu {
    display: block !important;
}

/* Mobile menu animation states */
.mobile-nav-overlay {
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.mobile-nav-content {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Loading states */
.main-navbar.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.main-navbar.loaded {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Language selector disabled state */
.language-select:disabled,
#languageSelect:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .language-select,
    #languageSelect {
        background-image: none !important;
        padding-right: 12px !important;
    }
    
    .language-select::after,
    #languageSelect::after {
        content: "▼" !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 10px !important;
        pointer-events: none !important;
    }
}

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .language-select,
    #languageSelect {
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .main-navbar {
        background: linear-gradient(135deg, 
            rgba(30, 30, 30, 0.95) 0%, 
            rgba(50, 50, 50, 0.92) 50%, 
            rgba(30, 30, 30, 0.95) 100%) !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .dropdown-menu {
        background: linear-gradient(135deg, 
            rgba(40, 40, 40, 0.95) 0%, 
            rgba(60, 60, 60, 0.92) 100%) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    .mobile-nav-content {
        background: linear-gradient(135deg, 
            rgba(30, 30, 30, 0.95) 0%, 
            rgba(50, 50, 50, 0.92) 100%) !important;
    }
    
    .nav-link,
    .dropdown-link,
    .mobile-nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .nav-link:hover,
    .dropdown-link:hover,
    .mobile-nav-link:hover {
        color: #FFD600 !important;
    }
    
    .language-select,
    #languageSelect {
        background: rgba(0, 0, 0, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }
    
    .language-select option,
    #languageSelect option {
        background: #1a1a1a !important;
        color: white !important;
    }
}

/* Focus management for keyboard navigation */
.nav-item.has-dropdown .dropdown-menu {
    display: none !important;
}

.nav-item.has-dropdown:focus-within .dropdown-menu,
.nav-item.has-dropdown .nav-link:focus + .dropdown-menu {
    display: block !important;
}

/* Ensure proper z-index layering */
.premium-top-bar {
    z-index: 1002 !important;
}

.main-navbar {
    z-index: 1001 !important;
}

.dropdown-menu {
    z-index: 1050 !important;
}

.mobile-nav-overlay {
    z-index: 9999 !important;
}

.language-selector {
    z-index: 10 !important;
}

/* Fix for potential conflicts with other styles */
.language-select,
#languageSelect {
    /* Override any conflicting styles */
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    display: block !important;
}

/* Loading state */
.language-select.loading,
#languageSelect.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
    cursor: wait !important;
}

/* Error state */
.language-select.error,
#languageSelect.error {
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.1) !important;
}

/* Success state for language change */
.language-select.success,
#languageSelect.success {
    border-color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.1) !important;
}

.language-select.success,
#languageSelect.success {
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* Ensure text is selectable and copyable */
.language-select,
#languageSelect {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .language-select,
    #languageSelect {
        -webkit-appearance: none !important;
        border-radius: 6px !important;
        background-clip: padding-box !important;
    }
}

/**
 * CORRECTED COMPLETE HEADER CSS - FINAL VERSION
 * 
 * ✅ FIXED ISSUES:
 * ✅ Navy blue top bar (#0D47A1) with proper gradients
 * ✅ Silver glass navbar with backdrop blur
 * ✅ Complete mobile submenu functionality
 * ✅ All mobile contact info sections styled
 * ✅ Language selector properly visible and functional
 * ✅ All original components preserved and enhanced
 * ✅ Responsive design for all breakpoints
 * ✅ Accessibility improvements
 * ✅ Performance optimizations
 * ✅ Safari and touch device compatibility
 * 
 * 🎨 COLOR IMPLEMENTATION:
 * ✅ Top bar: Navy gradient (#0D47A1 to #1565C0)
 * ✅ Navbar: Silver glass (#F8F9FA with transparency)
 * ✅ Logo: Enhanced visibility with proper contrast
 * ✅ Hover states: Golden yellow (#FFD600)
 * ✅ Active states: Deeper navy (#0D47A1)
 * 
 * 📱 MOBILE EXPERIENCE:
 * ✅ Complete mobile navigation overlay
 * ✅ All submenu animations working
 * ✅ Touch-friendly 44px targets
 * ✅ Proper contact info display
 * ✅ Social links integration
 * 
 * 🔧 JAVASCRIPT COMPATIBILITY:
 * ✅ Language selector properly styled
 * ✅ Bootstrap dropdown compatibility
 * ✅ Mobile menu toggle functionality
 * ✅ Hover and focus states
 * 
 * This version preserves ALL functionality from your original
 * file while implementing the requested color changes.
 * Your logo will now be clearly visible against the silver
 * glass navbar background.
 */