/* 1. Layout & Sticky Positioning */
.blu-header-section {
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    z-index: 999;
    position: sticky;
    top: 0;
}

.blu-header-nav {
    border-bottom: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #000000;
}

.blu-header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.blu-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    position: relative;
    z-index: 20;
    background: #fff;
}

/* 2. Desktop Left Side */
.blu-header-left {
    display: none; /* Mobile default: Hidden */
    align-items: center;
    gap: 32px;
}

.blu-header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.blu-header-logo-svg, .blu-header-logo-img {
    height: 32px;
    width: auto;
}

.blu-header-menu-desktop {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
}

/* --- MENU LINKS (STRICT FIX) --- */
.blu-header-link {
    font-size: 18px; 
    font-weight: 400; 
    line-height: 1.4;
    text-decoration: none !important;
    color: #000000; /* Default Black */
    
    padding-bottom: 4px; 
    
    /* Define the border slot but make it transparent initially */
    border-bottom: 2px solid transparent; 
    
    transition: all 0.2s ease-in-out;
}

/* Hover State: Force Blue & Border Color */
.blu-header-link:hover {
 color: #000000 !important;
    /* font-weight: 500; */
    border-bottom: 2px solid #000000 !important; 
}

.blu-header-link.active {
    color: #000000 !important;
    /* font-weight: 500; */
    border-bottom: 2px solid #000000 !important;
}

/* 3. Desktop Right Side */
.blu-header-right {
    display: none; /* Mobile default: Hidden */
    align-items: center;
    gap: 16px;
}

.blu-header-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #4b5563; 
    font-size: 16px;
    transition: color 0.2s;
}

.blu-header-lang:hover { color: #111827; }
.blu-header-lang-text { font-weight: 500; }

.blu-header-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blu-header-flag img {
    width: 100%; height: 100%; object-fit: cover;
}

/* --- BUTTON STYLES (Force White) --- */
.blu-gradient-btn-header {
    position: relative; overflow: hidden; display: inline-flex; align-items: center;
    gap: 12px; padding: 10px 24px; border-radius: 12px; border: 1px solid rgb(42, 127, 255);
    text-decoration: none; background: linear-gradient(256deg, rgb(6, 87, 208) 0%, rgb(31, 120, 255) 148%);
    color: #ffffff !important; /* Force White Default */
    font-weight: 500; font-size: 16px;
}

.blu-gradient-btn-header:hover,
.blu-gradient-btn-header:focus,
.blu-gradient-btn-header:active { 
    color: #ffffff !important; /* Force White on Hover */
}

.blu-gradient-btn-header .btn-text, .blu-gradient-btn-header .btn-icon-wrapper-header { 
    position: relative; z-index: 2; 
    color: #ffffff !important; /* Ensure children are white */
}

.blu-gradient-btn-header::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
    border-radius: 11px; background: linear-gradient(256deg, rgb(26, 107, 228) 0%, rgb(51, 140, 255) 100%);
    opacity: 0; transition: opacity 0.3s ease;
}
.blu-gradient-btn-header:hover::after { opacity: 1; }
.btn-icon-wrapper-header { width: 20px; height: 20px; overflow: hidden; }
.btn-icon-slider-header { display: flex; flex-direction: column; transform: translateY(0); transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1); }
/* Default Icon Rotation (English/LTR) -> Points Up-Right */
.btn-icon-slider-header svg { 
    flex-shrink: 0; 
    width: 20px; 
    height: 20px; 
    transform: rotate(-45deg); /* Points North-East */
    color: #ffffff !important; 
}
/* ARABIC FIX: Flip visual order so Icon is on the Right */
:lang(ar) .blu-gradient-btn-header {
    flex-direction: row-reverse;
}

/* Arabic Icon Rotation (RTL) -> Points Up-Left */
/* Currently it is 135deg which points South-East. We need -135deg or 225deg for North-West */
:lang(ar) .btn-icon-slider-header svg { 
    transform: rotate(-135deg); /* Points North-West (Up-Left) */
}
.blu-gradient-btn-header:hover .btn-icon-slider-header { transform: translateY(-50%); }

/* --- START OF FIXED CSS --- */

/* 4. Mobile Header Strip */
.blu-header-mobile-wrapper {
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* Pushes Logo to right, Hamburger to left (or vice versa) */
    width: 100%; 
    gap: 12px;
}

#blu-mobile-menu-btn {
    background: none; 
    border: none; 
    cursor: pointer; 
    color: #1570EF; 
    padding: 8px; 
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#blu-mobile-menu-btn svg {
    width: 32px; 
    height: 32px; 
    fill: none; 
    stroke: currentColor; 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin: round;
}

.blu-header-logo-link-mobile { 
    display: flex; 
    align-items: center; 
}

/* 5. Mobile Menu Dropdown (THE FIX) */
.blu-mobile-menu-wrapper {
    position: absolute; /* Take out of flex flow */
    top: 100%;          /* Position directly below the header row */
    left: 0;
    width: 100%;        /* Force full width */
    background: #ffffff; 
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    
    /* Animation States */
    max-height: 0; 
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 9999;      /* Ensure it sits on top of everything else */
}

.blu-mobile-menu-wrapper.open { 
    max-height: calc(100vh - 96px); /* Fill screen height minus header height */
    opacity: 1; 
    visibility: visible;
}

.blu-mobile-menu-inner { 
    padding: 32px 24px; 
    display: flex; 
    flex-direction: column; 
    gap: 32px; 
    height: 100%;
    overflow-y: auto; /* Allow scrolling if content is too tall */
}

.blu-mobile-links { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 24px; 
}

/* Mobile Link Styles */
.blu-mobile-link {
    font-size: 20px; /* Slightly larger for touch targets */
    color: #111827; 
    text-decoration: none; 
    border-bottom: 2px solid transparent; 
    padding-bottom: 4px;
    width: fit-content;
    font-weight: 500;
}

.blu-mobile-link:hover, .blu-mobile-link.active { 
    color: #1570EF !important; 
    border-bottom-color: #1570EF !important; 
}

.blu-mobile-actions {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 24px; 
    margin-top: 16px; 
    border-top: 1px solid #f3f4f6; 
    padding-top: 32px;
    width: 100%;
}

/* 6. RESPONSIVE (CRITICAL) */
@media (min-width: 1024px) {
    .blu-header-left { display: flex; }
    .blu-header-right { display: flex; }
    .blu-header-mobile-wrapper { display: none; }
    .blu-mobile-menu-wrapper { display: none !important; }
}

/* --- END OF FIXED CSS --- */