/**
 * 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;
    height: auto !important;
    max-height: 50px !important; /* QUAN TRỌNG: Giới hạn chiều cao container */
    overflow: visible !important; /* Cho phép dropdown hiển thị ra ngoài */
}

/* ===================================
   CRITICAL HEADER EXPANSION FIX
   =================================== */

/* Đảm bảo header không bị expand bởi GTranslate */
.site-header {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    contain: layout !important; /* CSS containment để tránh layout shift */
}

.header-content,
.header-row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Fix dropdown container để không ảnh hưởng header height */
.header-gtranslate,
.header-gtranslate * {
    box-sizing: border-box !important;
}

.gt_selector,
.gtranslate_wrapper {
    height: auto !important;
    max-height: 50px !important; /* Giới hạn chiều cao button */
    position: relative !important;
    contain: layout !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 ===== */

/* CRITICAL: Dropdown MUST be positioned absolutely outside header flow */
.gt_option,
.gt_selector .gt_option,
.gtranslate_wrapper .gt_option,
.gt_switcher .gt_option {
    position: absolute !important;
    top: calc(100% + 5px) !important; /* Xuống dưới button */
    left: 0 !important;
    right: auto !important;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
    z-index: 999999 !important; /* Z-index cực cao */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 160px !important;
    max-width: 250px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* QUAN TRỌNG: Không được ảnh hưởng layout cha */
    contain: layout size style !important;
    will-change: transform, opacity !important;
    pointer-events: none !important; /* Tắt pointer events khi ẩn */
}

/* 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;
    pointer-events: auto !important; /* Bật lại pointer events khi hiển thị */
}

/* 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;
}

/* Override GTranslate Plugin CSS */
.gt_float_switcher .gt-selected .gt-current-lang {
    padding: 8px 12px !important;  /* Giảm padding để fit header */
    color: var(--text-primary) !important;  /* Dùng CSS variable */
    font-weight: 500 !important;
    line-height: 1.2 !important;
    /* Fix để không expand header */
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    max-height: 40px !important;
}