/* Header Language Buttons Styles */
.header-lang-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    margin-left: 20px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 15px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.header-lang-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 2px 4px;
    letter-spacing: 0.5px;
}

.header-lang-btn:hover {
    color: #ffd700;
}

.header-lang-btn.active {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.lang-divider {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-weight: 300;
    user-select: none;
}

/* ============================================================
   GOOGLE TRANSLATE STYLE FIXES (Aggressive Overrides)
   ============================================================ */

/* 1. Force Body to Top (Prevents the 40px gap from the Google Bar) */
html, body {
    margin-top: 0 !important;
    top: 0 !important;
    position: static !important;
    overflow-x: hidden; /* Prevent horizontal scroll from hidden frames */
}

/* 2. Hide Google Translate Banner Frame and all its variations */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-banner,
#goog-gt-tt,
#goog-gt-tt.skiptranslate,
.goog-te-balloon-frame,
iframe.goog-te-banner-frame,
#google_translate_element + iframe,
.skiptranslate > iframe,
.goog-te-spinner-pos,
#goog-gt-mve,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Hide Google Branding and Dropdown Elements */
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-menu-value,
.goog-te-menu-frame,
#goog-gt-mve,
.skiptranslate:not(.header-lang-container) {
    display: none !important;
}

/* 5. Prevent Google from changing font-family */
* {
    font-family: inherit !important;
}

/* 6. Fix for layout issues */
[dir="rtl"] {
    text-align: right;
}
[dir="ltr"] {
    text-align: left;
}

/* 7. Mobile responsiveness */
.header-lang-dropdown-mobile {
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 768px) {
        nav div{
            margin-left: 30px !important; /* Add left margin to the overall nav tag */
        }
        .header-lang-container {
            position: absolute; /* Allow absolute positioning */
            top: 60px; /* Adjusted to be below the menu button. This value might need further adjustment based on the actual mobile menu button's position. */
            right: 10px; /* Position on the right side */
            margin: 0; /* Remove default margins */
            padding: 0 !important; /* Remove padding */
            background: none !important; /* Remove background */
            border: none !important; /* Remove border */
            border-radius: 0 !important; /* Remove border-radius */
            backdrop-filter: none !important; /* Remove backdrop filter */
            gap: 5px;
        }

    /* RTL adjustments for mobile */
    body[dir="rtl"] .header-lang-container,
    html[dir="rtl"] .header-lang-container {
        right: auto; /* Remove right positioning */
        left: 10px; /* Position on the left side */
    }
    .header-lang-btn {
        font-size: 11px;
    }

    /* Hide desktop buttons on mobile */
    .header-lang-buttons-desktop {
        display: none;
    }

    /* Show mobile dropdown on mobile */
    .header-lang-dropdown-mobile {
        display: block;
    }

    .header-lang-select {
        background: rgba(255, 255, 255, 0.15) !important; /* Add a subtle background */
        border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Add a subtle border */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important; /* Add a subtle shadow */
        color: #fff; /* Adjust text color for better visibility on various backgrounds */
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-appearance: none; /* Remove default dropdown arrow for custom styling */
        -moz-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%20197.2L159.7%2069.8c-3-3-7-4.7-11.3-4.7s-8.3%201.7-11.3%204.7L5.4%20197.2c-6.6%206.6-6.6%2017.4%200%2024%203.3%203.3%207.6%205%2012%205s8.7-1.7%2012-5l120.7-120.7%20120.7%20120.7c3.3%203.3%207.6%205%2012%205s8.7-1.7%2012-5c6.5-6.6%206.5-17.4-.1-24z%22%2F%3E%3C%2Fsvg%3E'); /* Custom dropdown arrow */
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 12px;
        padding-right: 30px; /* Make space for the custom arrow */
    }

    .header-lang-select:hover {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .header-lang-select option {
        background-color: #1a202c; /* Dark background for options */
        color: #fff; /* White text for options */
        padding: 5px 10px;
    }

    /* Mobile Logo Responsiveness */
    /* This targets the EXACT Celestia Capital logo element with inline styles */
    header {
        /* text-align: center; /* Remove centering to allow left margin */
        padding-left: 10px !important; /* Add padding to the header itself */
    }
    /* Generic header image fallback */
    header img, header div img {
        display: block !important; /* Ensure it behaves as a block element for centering */
        margin: 0 0 0 40px !important; /* Add even more left margin */
        width: 90px !important; /* Set an even smaller fixed width for better control */
        height: auto !important; /* Maintain aspect ratio */
        clip-path: none !important; /* Override inline clip-path */
        transform: none !important; /* Override inline transform */
    }
    /* PRECISE selector for the specific Celestia Capital logo (fixes inline style issues) */
    header img[src="/assets/Logo-Bavi0It2.png"][alt="Celestia Capital"][class="h-20 w-auto object-contain"] {
        clip-path: none !important; /* Fully neutralize inline cropping */
        transform: none !important; /* Fully neutralize inline excessive scaling */
        width: auto !important; /* Reset width to avoid conflict with fixed size */
        max-width: 120px !important; /* Set safe max width for mobile */
        height: 48px !important; /* Override h-20 (48px is smaller for mobile) */
        margin: 0 0 0 30px !important; /* Optimized left margin for visibility */
        object-fit: contain !important; /* Ensure full logo is displayed */
        padding: 5px 0 !important; /* Add vertical padding to prevent clipping */
        }
        header img[src="/assets/Logo-Bavi0It2.png"][alt="Celestia Capital"] {
            clip-path: none !important;
            transform: none !important;
            width: auto !important;
            max-width: 120px !important;
            height: 48px !important;
            margin: 0 0 0 30px !important;
            object-fit: contain !important;
            padding: 5px 0 !important;
        }

        video {
            border: 2px solid red !important; /* Temporary: to identify the video element */
        }

    /* Placeholder for Home Page Video Fix (to be implemented) */
    /* .home-video-container video {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
    .scrolling-image-element {
        display: none !important;
    } */
}