/* ================================
   File: /public_html/css/header/language-switcher.css
   Version: 1.9.1
   Last Updated: 2026-02-06

   LANGUAGE SWITCHER STYLES
   Desktop dropdown + Mobile full-screen overlay
   OWNS ALL .custom-language-switcher styling across ALL breakpoints

   Changelog v1.8.0:
   - Bumped .lang-text font-size from 13px to 14px (WAVE small text alert fix)

   Changelog v1.7:
   - Added dark mode support for mobile language overlay
   
   Changelog v1.6:
   - Compact format: Flag + 2-letter code (e.g., "EN" instead of "English")
   - Reduced min-width from 140px to 75px (~46% space savings)
   - Updated responsive breakpoints accordingly
   
   Changelog v1.5:
   - Removed ~50 lines of dead CSS for hidden mobile switcher
   Changelog v1.4:
   - Fixed: Removed conflicting display:flex that was overriding display:none
   - Cleaned up redundant mobile switcher styles (now hidden)
   Changelog v1.3:
   - Hide header language switcher on mobile (now inside hamburger menu)
   Changelog v1.2:
   - Changed mobile overlay to slide from right (matches hamburger menu)
   ================================ */

/* ============================
   DESKTOP STYLES (Base + Large screens)
   ============================ */

/* Language Switcher Container - Compact */
.custom-language-switcher {
    position: relative;
    min-width: 75px;
    flex-shrink: 0;
    display: flex;
}

/* Selected Option Button - Base Styles */
.selected-option {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    min-height: 20px;
    width: 100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.selected-option .flag-icon {
    width: 20px;
    height: 15px;
    margin-right: 6px;
    flex-shrink: 0;
}

.selected-option .lang-text {
    margin-right: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.selected-option .arrow {
    font-size: 10px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #666;
    display: inline-flex;
    align-items: center;
}

/* Rotate arrow when active */
.custom-language-switcher.active .selected-option .arrow {
    transform: rotate(180deg);
}

/* Desktop Dropdown Options */
.dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 160px;
}

.language-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.language-option:hover {
    background-color: #f5f5f5;
}

.language-option .flag-icon {
    width: 20px;
    height: 15px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Show dropdown on hover (desktop) or active class */
.custom-language-switcher:hover .dropdown-options,
.custom-language-switcher.active .dropdown-options {
    display: block;
}

/* ============================
   TABLET RESPONSIVE ADJUSTMENTS
   ============================ */

/* Large Desktop - no change needed, already compact */
@media (max-width: 1200px) {
    .custom-language-switcher {
        min-width: 75px;
    }
}

/* Tablet */
@media (max-width: 968px) {
    .custom-language-switcher {
        min-width: 70px;
    }
}

/* Medium screens */
@media (max-width: 900px) {
    .custom-language-switcher {
        min-width: 70px;
    }
}

/* ============================
   MOBILE OVERLAY - Desktop hidden (elements created by JS)
   ============================ */
.language-overlay,
.language-overlay-backdrop {
    display: none;
}

/* ============================
   MOBILE STYLES (768px and below)
   ============================ */
@media screen and (max-width: 768px) {
    /* Hide header language switcher on mobile - it's now inside hamburger menu */
    .custom-language-switcher {
        display: none;
    }

    /* Mobile Language Overlay - slides from RIGHT to match hamburger menu */
    .language-overlay {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: -webkit-fill-available; /* iOS Safari fix */
        background-color: #ffffff;
        z-index: 9999;
        transition: right 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        will-change: right;
    }
    
    .language-overlay.active {
        right: 0;
    }
    
    /* Language overlay header */
    .language-overlay-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        background-color: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .language-overlay-title {
        font-size: 18px;
        font-weight: 600;
        color: #2d3748;
        margin: 0;
    }
    
    .language-overlay-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 4px;
        color: #374151;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        touch-action: manipulation;
    }
    
    .language-overlay-close:active {
        background-color: #e5e7eb;
        color: #1f2937;
    }
    
    /* Language options in overlay */
    .language-overlay-content {
        padding: 0;
        padding-bottom: 100px; /* Extra scroll space for last item */
    }
    
    .language-overlay .language-option {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        font-size: 16px;
        color: #1f2937;
        border-bottom: 1px solid #e5e7eb;
        cursor: pointer;
        touch-action: manipulation;
        min-height: 60px;
        transition: background-color 0.2s ease;
    }
    
    .language-overlay .language-option:last-child {
        border-bottom: none;
    }
    
    .language-overlay .language-option:active {
        background-color: #f3f4f6;
    }
    
    .language-overlay .language-option.current {
        background-color: #e3f2fd;
        color: #1976d2;
        font-weight: 500;
    }
    
    .language-overlay .language-option .flag-icon {
        width: 28px;
        height: 21px;
        margin-right: 16px;
        flex-shrink: 0;
    }
    
    .language-overlay .language-option span {
        font-size: 16px;
    }
    
    /* Language overlay backdrop */
    .language-overlay-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .language-overlay-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Hide desktop dropdown completely on mobile */
    .dropdown-options {
        display: none;
    }
}

/* ============================
   SMALL MOBILE STYLES (480px and below)
   ============================ */
@media screen and (max-width: 480px) {
    /* Language overlay options - smaller screens */
    .language-overlay .language-option {
        font-size: 16px;
        padding: 16px 20px;
        color: #1f2937;
    }
    
    .language-overlay .language-option span {
        font-size: 16px;
        color: #1f2937;
    }
}

/* ============================
   DARK MODE STYLES
   ============================ */

/* Desktop dropdown dark mode */
[data-theme="dark"] .selected-option {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

[data-theme="dark"] .selected-option .lang-text {
    color: #f3f4f6;
}

[data-theme="dark"] .selected-option .arrow {
    color: #9ca3af;
}

[data-theme="dark"] .dropdown-options {
    background-color: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .language-option {
    color: #f3f4f6;
}

[data-theme="dark"] .language-option:hover {
    background-color: #374151;
}

/* Mobile Language Overlay dark mode */
[data-theme="dark"] .language-overlay {
    background-color: #1e293b;
}

[data-theme="dark"] .language-overlay-header {
    background-color: #0f172a;
    border-bottom-color: #334155;
}

[data-theme="dark"] .language-overlay-title {
    color: #f1f5f9;
}

[data-theme="dark"] .language-overlay-close {
    color: #94a3b8;
}

[data-theme="dark"] .language-overlay-close:active {
    background-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .language-overlay .language-option {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .language-overlay .language-option:active {
    background-color: #334155;
}

[data-theme="dark"] .language-overlay .language-option.current {
    background-color: #1e3a5f;
    color: #60a5fa;
}

[data-theme="dark"] .language-overlay .language-option span {
    color: inherit;
}

/* Dark mode backdrop - slightly lighter for dark theme */
[data-theme="dark"] .language-overlay-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}