/* Google Translate Custom Styles - Floating Widget */

/* CSS to hide Google Translate top bar and branding */
body { top: 0 !important; }

.goog-te-banner-frame.skiptranslate { display: none !important; } 
body > .skiptranslate { display: none !important; }
.goog-te-gadget-icon { display: none !important; }
.goog-te-gadget-simple { background-color: transparent !important; border: none !important; }
.goog-te-gadget-simple .goog-te-menu-value span { color: #fff !important; }

/* Hide "Powered by Google" */
.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
}

.goog-te-gadget > span {
    display: none !important;
}

/* Tooltip hiding */
.goog-tooltip, .goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* CUSTOM DROPDOWN VISIBILITY FIX */
.dropdown-menu,
#gt_languages {
    background-color: #ffffff !important; /* Force White Background */
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.dropdown-item,
#gt_languages a {
    color: #000000 !important; /* Force Black Text */
    background-color: #ffffff !important;
}

.dropdown-item:hover,
#gt_languages a:hover {
    background-color: #f8f9fa !important;
    color: #0e5d6a !important; /* Teal on hover */
}

/* Floating Widget Container */
#gtranslate_wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Outfit', sans-serif;
}

/* The Toggler Button */
#gt_toggler {
    background-color: #0e5d6a; /* Deep Teal */
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
#gt_toggler:hover {
    transform: scale(1.1);
    background-color: #0b4a55;
}

/* The Popup List */
#gt_languages {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 200px; /* Slightly wider for longer names */
    max-height: 400px; /* Scrollable if too many */
    overflow-y: auto;
    display: none; /* Hidden by default */
    flex-direction: column;
    animation: fadeInUp 0.3s ease;
}
#gt_languages.show {
    display: flex;
}

/* List Items */
#gt_languages a {
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}
#gt_languages a:last-child {
    border-bottom: none;
}
#gt_languages a:hover {
    background-color: #f8f9fa;
    color: #0e5d6a;
}
#gt_languages a.active {
    background-color: #e3f2f4;
    font-weight: bold;
}

/* Flags */
.flag-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 10px;
    flex-shrink: 0;
}
/* Original 6 */
.flag-icon-us { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/us.svg'); }
.flag-icon-th { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/th.svg'); }
.flag-icon-cn { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/cn.svg'); }
.flag-icon-it { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/it.svg'); }
.flag-icon-fr { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/fr.svg'); }
.flag-icon-sa { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/sa.svg'); }

/* New 12 */
.flag-icon-jp { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/jp.svg'); }
.flag-icon-ru { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/ru.svg'); }
.flag-icon-es { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/es.svg'); }
.flag-icon-de { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/de.svg'); }
.flag-icon-pt { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/pt.svg'); }
.flag-icon-vn { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/vn.svg'); }
.flag-icon-kr { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/kr.svg'); }
.flag-icon-ua { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/ua.svg'); }
.flag-icon-pl { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/pl.svg'); }
.flag-icon-cz { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/cz.svg'); }
.flag-icon-ir { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/ir.svg'); } /* Farsi/Iran */
.flag-icon-in { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/in.svg'); } /* Malayalam/India */
.flag-icon-nl { background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/flags/4x3/nl.svg'); } /* Dutch/Netherlands */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FORCE VISIBILITY for Language Names in All Lists */
#gt_languages a,
.top-bar .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    color: #333 !important; /* Dark text */
    font-size: 14px !important;
/* FORCE VISIBILITY for Language Names in All Lists */
#gt_languages a,
.top-bar .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    color: #000000 !important; /* Pure Black */
    background-color: #ffffff !important;
    font-size: 14px !important; /* Ensure text is not 0px */
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    padding: 8px 15px !important;
    white-space: nowrap !important; /* Prevent wrapping */
}

/* Ensure spacing between flag and text */
.flag-icon {
    margin-right: 10px !important;
    display: inline-block !important;
}

/* Mobile Friendly Top Bar Tweaks */
@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column !important;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .top-bar-left, .top-bar-right {
        margin-bottom: 5px;
        width: 100%;
        justify-content: center;
    }
    .top-bar-left a {
        display: block; /* Stack phone/email */
        margin-bottom: 2px;
    }
    /* Ensure dropdown doesn't get cut off on mobile */
    .dropdown-menu {
        max-width: 90vw;
    }
}
