/**
 * GTranslate Override CSS - Simplified
 * CSS đơn giản để fix hiển thị GTranslate
 */

/* ===== CONTAINER STYLES ===== */
.header-gtranslate {
    display: flex !important;
    align-items: center !important;
    margin-right: 15px !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* ===== PLUGIN OVERRIDE STYLES ===== */

/* Main GTranslate wrapper */
.gt_selector,
.gtranslate_wrapper,
.gt_switcher_wrapper,
.gt_switcher {
    display: inline-block !important;
    position: relative !important;
    font-family: inherit !important;
}

/* GTranslate button/dropdown trigger */
.gt_selector a,
.gtranslate_wrapper .gt_selector a,
.gt_switcher a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    color: #495057 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    min-width: 80px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.gt_selector a:hover,
.gtranslate_wrapper .gt_selector a:hover,
.gt_switcher a:hover {
    background: rgba(229, 62, 62, 0.1) !important;
    border-color: #e53e3e !important;
    color: #e53e3e !important;
    transform: translateY(-1px) !important;
}

/* Flag images */
.gt_selector img,
.gtranslate_wrapper img,
.gt_flag {
    width: 18px !important;
    height: 13px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Language text */
.gt_text,
.gt_selector .gt_text {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: inherit !important;
    font-family: inherit !important;
}

/* ===== DROPDOWN STYLES ===== */

/* Dropdown container */
.gt_option,
.gt_selector .gt_option,
.gtranslate_wrapper .gt_option,
.gt_switcher .gt_option {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    margin-top: 5px !important;
    min-width: 160px !important;
    overflow: hidden !important;
}

/* Show dropdown on hover */
.gt_selector:hover .gt_option,
.gtranslate_wrapper .gt_selector:hover .gt_option,
.gt_switcher:hover .gt_option {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Dropdown items */
.gt_option a,
.gt_switcher .gt_option a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 15px !important;
    color: #495057 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    border-bottom: 1px solid #f8f9fa !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gt_option a:last-child {
    border-bottom: none !important;
}

.gt_option a:hover,
.gt_switcher .gt_option a:hover {
    background: #f8f9fa !important;
    color: #e53e3e !important;
}

/* ===== FALLBACK STYLES ===== */

.gtranslate-fallback {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    color: #495057 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gtranslate-fallback:hover {
    background: rgba(229, 62, 62, 0.1) !important;
    border-color: #e53e3e !important;
    color: #e53e3e !important;
}

.gtranslate-icon {
    font-size: 16px !important;
}

/* ===== WORKING CONTAINER STYLES ===== */

.gtranslate-working-container {
    display: flex !important;
    align-items: center !important;
}

.gtranslate-working-container .gt_selector a {
    display: flex !important;
    align-items: center !important;
}

/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 768px) {
    .header-gtranslate {
        margin-right: 10px !important;
    }
    
    .gt_selector a,
    .gtranslate_wrapper .gt_selector a,
    .gtranslate-fallback {
        padding: 6px 8px !important;
        min-width: 60px !important;
        font-size: 0.8rem !important;
    }
    
    .gt_text {
        display: none !important;
    }
    
    .gt_option {
        right: 0 !important;
        left: auto !important;
        min-width: 140px !important;
    }
}

@media (max-width: 480px) {
    .header-gtranslate {
        margin-right: 5px !important;
    }
    
    .gt_selector a,
    .gtranslate-fallback {
        padding: 5px 6px !important;
        min-width: auto !important;
    }
    
    .gt_selector:after {
        display: none !important;
    }
}

/* ===== DEBUG STYLES ===== */

.gtranslate-debug-links {
    opacity: 0.7;
}

.gtranslate-debug-links:hover {
    opacity: 1;
}

/* ===== FORCE VISIBILITY ===== */

/* Remove any display:none that might be applied */
.header-gtranslate,
.header-gtranslate *,
.gt_selector,
.gt_selector *,
.gtranslate_wrapper,
.gtranslate_wrapper * {
    visibility: visible !important;
    opacity: inherit !important;
}

/* But maintain dropdown hiding until hover */
.gt_option {
    visibility: hidden !important;
    opacity: 0 !important;
}

.gt_selector:hover .gt_option,
.gtranslate_wrapper .gt_selector:hover .gt_option {
    visibility: visible !important;
    opacity: 1 !important;
}