/* Immediate Locale Switching Styles */

/* Loading state for language switcher */
.switcher-language .switcher-option a.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.switcher-language .switcher-option a .fa-spinner {
    margin-right: 5px;
}

/* RTL Loading state */
html[dir="rtl"] .switcher-language .switcher-option a .fa-spinner {
    margin-right: 0;
    margin-left: 5px;
}

/* Locale toast notification */
.locale-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
    font-family: 'Cairo', Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

html[dir="rtl"] .locale-toast {
    right: auto;
    left: 20px;
}

.locale-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Force immediate RTL/LTR application */
html[data-locale="ar"] {
    direction: rtl !important;
    text-align: right !important;
}

html[data-locale="en"] {
    direction: ltr !important;
    text-align: left !important;
}

/* Immediate body class application */
html[data-locale="ar"] body {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

html[data-locale="en"] body {
    direction: ltr !important;
    text-align: left !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Immediate header direction */
html[data-locale="ar"] .site-header {
    direction: rtl !important;
}

html[data-locale="en"] .site-header {
    direction: ltr !important;
}

/* Immediate footer direction */
html[data-locale="ar"] .site-footer {
    direction: rtl !important;
}

html[data-locale="en"] .site-footer {
    direction: ltr !important;
}

/* Immediate navigation direction */
html[data-locale="ar"] .nav-left {
    float: right !important;
}

html[data-locale="ar"] .nav-right {
    float: left !important;
}

html[data-locale="en"] .nav-left {
    float: left !important;
}

html[data-locale="en"] .nav-right {
    float: right !important;
}

/* Immediate form control direction */
html[data-locale="ar"] .form-control {
    direction: rtl !important;
    text-align: right !important;
}

html[data-locale="en"] .form-control {
    direction: ltr !important;
    text-align: left !important;
}

/* Immediate dropdown direction */
html[data-locale="ar"] .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    text-align: right !important;
}

html[data-locale="en"] .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    text-align: left !important;
}

/* Page transition loading overlay */
.locale-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.locale-loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.locale-loading-overlay .loading-content {
    text-align: center;
    font-family: 'Cairo', Arial, sans-serif;
}

.locale-loading-overlay .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #01A0BE;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.locale-loading-overlay .loading-text {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Prevent layout shift during locale change */
.locale-switching {
    overflow: hidden !important;
}

.locale-switching * {
    pointer-events: none !important;
}

/* Smooth transition for direction change */
.locale-transition {
    transition: all 0.3s ease !important;
}

.locale-transition * {
    transition: all 0.3s ease !important;
}

/* Critical CSS for immediate application */
@media screen {
    /* Ensure RTL styles are applied immediately */
    html[data-locale="ar"][dir="rtl"] .rtl-header .nav-right-rtl {
        float: right !important;
    }
    
    html[data-locale="ar"][dir="rtl"] .rtl-header .nav-left-rtl {
        float: left !important;
    }
    
    html[data-locale="ar"][dir="rtl"] .rtl-footer .column-right-rtl {
        float: right !important;
    }
    
    html[data-locale="ar"][dir="rtl"] .rtl-footer .column-left-rtl {
        float: left !important;
    }
    
    /* Ensure LTR styles are applied immediately */
    html[data-locale="en"][dir="ltr"] .nav-left {
        float: left !important;
    }
    
    html[data-locale="en"][dir="ltr"] .nav-right {
        float: right !important;
    }
}

/* High priority styles to override any cached styles */
html[data-locale="ar"] .switcher-language .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

html[data-locale="en"] .switcher-language .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Force text alignment */
html[data-locale="ar"] .text-left {
    text-align: right !important;
}

html[data-locale="ar"] .text-right {
    text-align: left !important;
}

html[data-locale="en"] .text-left {
    text-align: left !important;
}

html[data-locale="en"] .text-right {
    text-align: right !important;
}

/* Force margin/padding direction */
html[data-locale="ar"] .ml-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[data-locale="ar"] .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[data-locale="ar"] .ml-3 { margin-right: 1rem !important; margin-left: 0 !important; }

html[data-locale="ar"] .mr-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[data-locale="ar"] .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[data-locale="ar"] .mr-3 { margin-left: 1rem !important; margin-right: 0 !important; }

html[data-locale="en"] .ml-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[data-locale="en"] .ml-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[data-locale="en"] .ml-3 { margin-left: 1rem !important; margin-right: 0 !important; }

html[data-locale="en"] .mr-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[data-locale="en"] .mr-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[data-locale="en"] .mr-3 { margin-right: 1rem !important; margin-left: 0 !important; }