/* Custom Language Selector Styling - Brand Matched */
.language-selector-container {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    position: relative;
}

/* Ensure dropdown doesn't get translated */
.language-selector-container.notranslate,
.custom-language-dropdown.notranslate,
.custom-language-dropdown.notranslate option {
    translate: no !important;
}

/* Additional protection against translation */
.notranslate {
    translate: no !important;
}

.notranslate * {
    translate: no !important;
}

.custom-language-dropdown {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    outline: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.custom-language-dropdown:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.custom-language-dropdown:focus {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.custom-language-dropdown option {
    background: #ffffff !important;
    color: #374151 !important;
    padding: 8px !important;
    font-family: 'Inter', sans-serif !important;
    border: none !important;
}

.custom-language-dropdown option:hover,
.custom-language-dropdown option:focus {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.custom-language-dropdown option:checked {
    background: #3b82f6 !important;
    color: white !important;
}

/* Hide ALL Google Translate branding and frames */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Remove body margin/padding when Google Translate is active */
body {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.goog-te-compat-api {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Language selector wrapper */
.language-selector-wrapper {
    position: relative;
    display: inline-block;
}

/* Loading placeholder styling */
.language-placeholder {
    font-size: 14px !important;
    color: #9ca3af !important;
    background: white !important;
    font-family: 'Inter', sans-serif !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    cursor: default !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    font-weight: 400 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Style the main Google Translate element - remove wrapper styling */
#google_translate_element {
    font-family: 'Inter', sans-serif !important;
    display: none !important; /* Initially hidden */
    visibility: visible !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-size: 0 !important; /* Hide all text by default */
    padding: 0 !important;
    margin: 0 !important;
}

/* Show Google Translate element when loaded */
#google_translate_element.loaded {
    display: inline-block !important;
}

/* Force hide all text content in the widget EXCEPT dropdown */
#google_translate_element span,
#google_translate_element div:not(.goog-te-combo):not(:has(.goog-te-combo)),
#google_translate_element a:not(.goog-te-combo) {
    font-size: 0 !important;
    color: transparent !important;
    display: none !important;
}

/* Simple clean dropdown styling */
#google_translate_element .goog-te-combo {
    font-size: 14px !important;
    color: #374151 !important;
    display: inline-block !important;
    visibility: visible !important;
    background: white !important;
    font-family: 'Inter', sans-serif !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    font-weight: 400 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#google_translate_element .goog-te-combo:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#google_translate_element .goog-te-combo:focus {
    background: white !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#google_translate_element .goog-te-combo option {
    font-size: 14px !important;
    color: #374151 !important;
    background: white !important;
    font-family: 'Inter', sans-serif !important;
    padding: 8px !important;
}

#google_translate_element .goog-te-combo option:hover,
#google_translate_element .goog-te-combo option:focus {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

#google_translate_element .goog-te-combo option:checked {
    background: #3b82f6 !important;
    color: white !important;
}

/* Completely hide all Google branding and "Powered by" text */
.goog-logo-link,
.goog-te-gadget span:first-child,
.goog-te-gadget > span > a,
.goog-te-gadget-simple span:first-child,
.goog-te-gadget-simple > span > a,
span.goog-te-menu-value span:first-child,
.goog-te-gadget span:contains("Powered by"),
.goog-te-gadget-simple span:contains("Powered by"),
.goog-te-gadget span[id*="google_translate"],
.goog-te-gadget-simple span[id*="google_translate"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Hide any span with gray text (usually "Powered by") */
.goog-te-gadget span[style*="color: rgb(68, 68, 68)"],
.goog-te-gadget-simple span[style*="color: rgb(68, 68, 68)"],
.goog-te-gadget span[style*="color:#444"],
.goog-te-gadget-simple span[style*="color:#444"],
.goog-te-gadget span[style*="color: rgb(102, 102, 102)"],
.goog-te-gadget-simple span[style*="color: rgb(102, 102, 102)"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any text containing "Powered" */
.goog-te-gadget span,
.goog-te-gadget-simple span {
    font-size: 0 !important;
}

/* But show the language links */
.goog-te-gadget a,
.goog-te-gadget-simple a,
.goog-te-menu-value {
    font-size: 14px !important;
}

.goog-te-gadget {
    color: inherit !important;
    font-size: inherit !important;
}

.goog-te-gadget-simple {
    color: inherit !important;
    font-size: inherit !important;
}

/* Style language links in vertical layout */
.goog-te-gadget .goog-te-menu-value,
.goog-te-gadget-simple .goog-te-menu-value,
.goog-te-gadget a,
.goog-te-gadget-simple a {
    color: #374151 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    display: block !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 0.2s ease !important;
}

.goog-te-gadget a:hover,
.goog-te-gadget-simple a:hover {
    background: #f9fafb !important;
    color: #1f2937 !important;
}

.goog-te-gadget a:last-child,
.goog-te-gadget-simple a:last-child {
    border-bottom: none !important;
}

/* Clean styled dropdown (fallback for combo) */
.goog-te-gadget .goog-te-combo,
.goog-te-gadget-simple .goog-te-combo {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 120px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

/* Add globe icon */
.goog-te-gadget .goog-te-combo:before,
.goog-te-gadget-simple .goog-te-combo:before {
    content: "🌐 " !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* Hover effects */
.goog-te-gadget .goog-te-combo:hover,
.goog-te-gadget-simple .goog-te-combo:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Focus state */
.goog-te-gadget .goog-te-combo:focus,
.goog-te-gadget-simple .goog-te-combo:focus {
    outline: none !important;
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Dropdown options styling */
.goog-te-gadget .goog-te-combo option,
.goog-te-gadget-simple .goog-te-combo option {
    background: #ffffff !important;
    color: #374151 !important;
    padding: 8px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Active/selected option */
.goog-te-gadget .goog-te-combo option:checked,
.goog-te-gadget-simple .goog-te-combo option:checked {
    background: #3b82f6 !important;
    color: white !important;
}

/* Hide spinner and loading elements */
.goog-te-spinner-pos,
.goog-te-spinner {
    display: none !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .language-selector-container {
        margin-right: 0.5rem;
    }
    
    .custom-language-dropdown {
        min-width: 120px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .custom-language-dropdown {
        min-width: 120px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* Remove any Google Translate notification bars */
.goog-te-menu-value span[style] {
    color: white !important;
}

/* Custom animation for dropdown */
@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.goog-te-gadget .goog-te-combo,
.goog-te-gadget-simple .goog-te-combo {
    animation: fadeInDropdown 0.3s ease-out !important;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .goog-te-gadget .goog-te-combo option,
    .goog-te-gadget-simple .goog-te-combo option {
        background: #374151 !important;
        color: white !important;
    }
    
    .goog-te-gadget .goog-te-combo option:hover,
    .goog-te-gadget-simple .goog-te-combo option:hover {
        background: #4b5563 !important;
    }
}

/* Completely hide any remaining Google elements */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe,
.goog-te-menu-frame,
.goog-te-ftab,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-menu2,
.goog-te-menu2-item div,
.goog-te-menu2-item:link,
.goog-te-menu2-item:visited,
.goog-te-menu2-item:active,
.goog-te-menu2 .goog-te-menu2-colpad {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Prevent page layout shift */
html[translate] body,
body.translated-ltr,
body.translated-rtl {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force hide the top notification bar */
#\:0.targetLanguage,
#goog-gt-,
#goog-gt-tt,
div#goog-gt-,
#goog-gt-tt div,
.goog-te-spinner-pos div {
    display: none !important;
}

/* Override any inline styles Google might add */
body[style*="margin-top"] {
    margin-top: 0 !important;
}

/* Hide notification bar completely */
.goog-te-banner-frame {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Ensure dropdown appears above other elements */
.google-translate-widget {
    z-index: 1000;
}

.goog-te-gadget .goog-te-combo,
.goog-te-gadget-simple .goog-te-combo {
    z-index: 1001 !important;
}