/* Language Stability and Preservation Styles */

/* Force stable language display */
[data-translate] {
    transition: opacity 0.1s ease;
}

/* Prevent flash of untranslated content */
.lang-loading [data-translate] {
    opacity: 0.7;
}

/* Ensure language stability during dynamic updates */
[data-translate]:not([data-lang-stable]) {
    position: relative;
}

[data-translate]:not([data-lang-stable])::after {
    content: attr(data-lang-backup);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Language preservation indicator */
.language-preserved {
    position: relative;
}

.language-preserved::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 4px;
    height: 4px;
    background: #10b981;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 1;
}

/* Emergency language override */
.force-language-preserve * {
    font-family: inherit !important;
    direction: inherit !important;
}

/* Stable input placeholders */
input[data-translate]::placeholder {
    opacity: 0.7;
    transition: opacity 0.1s ease;
}

input[data-translate]:focus::placeholder {
    opacity: 0.5;
}

/* RTL/LTR stability */
[dir="rtl"] [data-translate] {
    text-align: right;
}

[dir="ltr"] [data-translate] {
    text-align: left;
}

/* Prevent content jumping during language changes */
[data-translate] {
    min-height: 1em;
    word-wrap: break-word;
}

/* Form stability during validation */
.form-group [data-translate] {
    transition: all 0.2s ease;
}

.form-group.has-error [data-translate] {
    color: inherit;
}

/* Modal content stability */
.modal-container [data-translate] {
    animation: none;
    transition: opacity 0.1s ease;
}

/* Loading state improvements */
.lang-loading .modal-container [data-translate] {
    opacity: 0.8;
}

/* Button text stability */
button [data-translate],
.auth-btn [data-translate] {
    display: inline-block;
    transition: none;
}

/* Livewire component stability */
[wire\:loading] [data-translate] {
    opacity: 0.7 !important;
}

[wire\:loading] [data-translate]::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    border: 1px solid currentColor;
    border-top: 1px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Alpine.js compatibility */
[x-data] [data-translate] {
    transition: opacity 0.1s ease;
}

/* Force language preservation on forms */
form [data-translate] {
    position: relative;
    z-index: 1;
}

/* Error message stability */
.text-red-400[data-translate] {
    color: #f87171 !important;
}

/* Success message stability */
.text-green-400[data-translate] {
    color: #4ade80 !important;
}

/* Navigation stability */
nav [data-translate],
.nav [data-translate] {
    display: inline-block;
    white-space: nowrap;
}

/* Responsive text stability */
@media (max-width: 768px) {
    [data-translate] {
        word-break: break-word;
    }
}

/* High contrast mode stability */
@media (prefers-contrast: high) {
    [data-translate] {
        outline: none;
        text-shadow: none;
    }
}

/* Reduced motion stability */
@media (prefers-reduced-motion: reduce) {
    [data-translate] {
        transition: none !important;
        animation: none !important;
    }
}