/**
 * GTranslate Header Integration CSS
 * Styling for GTranslate plugin in header
 */

/* ===== HEADER GTRANSLATE STYLES ===== */

.header-gtranslate,
.header-gtranslate-hook {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

/* GTranslate Widget Container */
.gtranslate-widget,
.gtranslate-shortcode,
.gtranslate-direct,
.gtranslate-hook {
    position: relative;
    z-index: 1000;
}

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

/* Main wrapper */
.gt_selector,
.gtranslate_wrapper {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Dropdown button */
.gt_selector a,
.gtranslate_wrapper .gt_selector a,
.gt_switcher a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: #495057 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    min-width: 80px !important;
    justify-content: center !important;
}

.gt_selector a:hover,
.gtranslate_wrapper .gt_selector 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;
}

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

/* Dropdown arrow */
.gt_selector:after,
.gt_switcher:after {
    content: "▾" !important;
    margin-left: 4px !important;
    font-size: 0.7rem !important;
    opacity: 0.7 !important;
}

/* ===== DROPDOWN MENU ===== */

/* Dropdown container */
.gt_selector .gt_option,
.gtranslate_wrapper .gt_option,
.gt_switcher .gt_option {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 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;
    overflow: hidden !important;
    margin-top: 5px !important;
    min-width: 180px !important;
}

.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;
    border-bottom: 1px solid #f8f9fa !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !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;
}

.gt_option img {
    width: 18px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
}

/* ===== FLOATING STYLE (Alternative) ===== */

.gt_float_wrapper {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

.gt_float_switcher {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    padding: 8px !important;
}

/* ===== GLOBE ICON STYLE ===== */

.gtranslate-globe {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.gtranslate-globe:before {
    content: "🌐" !important;
    font-size: 18px !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

.gtranslate-globe:hover:before {
    transform: scale(1.1) !important;
}

/* ===== INTEGRATION WITH HEADER ===== */

.header-actions .header-gtranslate {
    order: 1; /* Show before search and CTA */
}

.header-actions .search-toggle {
    order: 2;
}

.header-actions .header-cta-button {
    order: 3;
}

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

@media (max-width: 768px) {
    .header-gtranslate {
        margin-right: 10px;
    }
    
    .gt_selector a,
    .gtranslate_wrapper .gt_selector a {
        padding: 6px 8px !important;
        min-width: 60px !important;
        font-size: 0.8rem !important;
    }
    
    .gt_selector img,
    .gtranslate_wrapper img {
        width: 16px !important;
        height: 12px !important;
    }
    
    .gt_option {
        min-width: 150px !important;
        right: 0 !important;
        left: auto !important;
    }
    
    /* Hide text on mobile, show only flags */
    .gt_text {
        display: none !important;
    }
}

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

/* ===== PLUGIN SPECIFIC OVERRIDES ===== */

/* GTranslate Free version */
.gt_switcher_wrapper {
    font-family: inherit !important;
}

.gt_switcher_wrapper .gt_switcher {
    background: transparent !important;
    border: none !important;
}

/* GTranslate Pro version */
.gtranslate_wrapper .gt_selector {
    font-family: inherit !important;
    background: none !important;
}

/* Override any inline styles */
.gtranslate_wrapper * {
    box-sizing: border-box !important;
}

/* Fix z-index issues */
.header-gtranslate * {
    z-index: inherit !important;
}

.gt_option {
    z-index: 99999 !important;
}

/* ===== LOADING STATE ===== */

.gtranslate-loading {
    opacity: 0.7;
    pointer-events: none;
}

.gtranslate-loading:after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #e53e3e !important;
    border-top: 2px solid transparent !important;
    border-radius: 50% !important;
    animation: gtranslate-spin 1s linear infinite !important;
    transform: translate(-50%, -50%) !important;
}

@keyframes gtranslate-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== ACCESSIBILITY ===== */

.gt_selector:focus,
.gt_option a:focus {
    outline: 2px solid #e53e3e !important;
    outline-offset: 2px !important;
}

/* Screen reader text */
.gtranslate-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    .gt_selector a {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .gt_option {
        background: #2d3748 !important;
        border-color: #4a5568 !important;
    }
    
    .gt_option a {
        color: rgba(255, 255, 255, 0.9) !important;
        border-color: #4a5568 !important;
    }
    
    .gt_option a:hover {
        background: #4a5568 !important;
    }
}