/* Google Translate Language Dropdown Styles */

/* Language dropdown container */
.language_block {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    position: fixed;
    bottom: 3rem;
    left: 3rem;
    z-index: 1000;
}

/* Language dropdown button */
.language_dropdown {
    border: 2px solid var(--color--gold);
    background-color: var(--color--blue);
    color: var(--color--white);
    cursor: pointer;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    display: flex;
    box-shadow: 0 0 10px #ffffff4d;
    position: relative;
}

/* Language icon */
.language_icon {
    width: 35px;
    height: 35px;
    color: var(--color--white);
}

/* Selected language text */
.selected-language {
    display: none;
    color: var(--color--white);
    font-size: 14px;
    margin-left: 8px;
    font-weight: 500;
}

/* Language list dropdown */
.language_list {
    display: none;
    position: absolute;
    bottom: 60px;
    left: 5%;
    transform: translateX(0);
    white-space: nowrap;
    z-index: 1000;
    border: 2px solid var(--color--gold);
    background-color: var(--color--blue);
    border-radius: 20px;
    margin-bottom: 0.5rem;
    min-width: 100px;
}

/* Show language list when active */
.language_list.show {
    display: block !important;
}

/* Language list items */
.language-list-item {
    margin-bottom: 0.2rem;
}

.language-list-item.last {
    margin-bottom: 0;
}

/* Language selection links */
.lang-select {
    color: var(--color--white);
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    position: relative;
}

.lang-select:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.lang-select.active {
    background-color: var(--color--gold);
    color: var(--color--blue);
}

/* Checkmark for selected language (hidden by default) */
.lang-select.active::after {
    content: "✓";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    display: none;
}

/* Google Translate widget hiding */
.g-translate,
#google_translate_element {
    display: none !important;
}

/* Hide Google Translate banner */
.skiptranslate {
    display: none !important;
}

/* Ensure body doesn't get translated styling */
body {
    top: 0px !important;
}

/* Hide Google Translate tooltips */
#goog-gt-tt, 
.goog-te-balloon-frame {
    display: none !important;
}

/* Hide Google Translate highlights */
.goog-text-highlight { 
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .language_block {
        inset: auto auto 2rem 2rem;
    }
    
    .language_dropdown {
        width: 50px;
        height: 50px;
    }
    
    .language_icon {
        width: 25px;
        height: 25px;
    }
    
    .language_list {
        min-width: 140px;
        right: 0;
        padding: 0.2rem 0.4rem;
    }
    
    /* Mobile: Remove background color for active language */
    .lang-select.active {
        background-color: transparent;
        color: var(--color--gold);
    }
    
    /* Mobile: Show checkmark for selected language with reduced spacing */
    .lang-select.active::after {
        display: block;
        color: var(--color--gold);
        font-size: 16px;
        right: 5px;
    }
}