/* Language-Specific Helper Classes */
/* Use these classes to control text direction on specific elements */

/* Force LTR for English content in Arabic interface */
.ltr-content,
.en-text {
    direction: ltr !important;
    text-align: left !important;
}

/* Force RTL for Arabic content in English interface */
.rtl-content,
.ar-text {
    direction: rtl !important;
    text-align: right !important;
}

/* Mixed content containers */
.mixed-content {
    /* Container stays in page language direction */
    unicode-bidi: isolate;
}

/* Product names, technical terms that should stay in English */
.product-name,
.technical-term,
.brand-name {
    direction: ltr !important;
    display: inline-block;
    unicode-bidi: embed;
}

/* Prices and numbers - always LTR */
.price,
.number {
    direction: ltr !important;
    display: inline-block;
    unicode-bidi: embed;
}

/* Email addresses, URLs - always LTR */
.email,
.url,
.code {
    direction: ltr !important;
    font-family: 'Courier New', monospace;
}

/* Bilingual content side by side */
.bilingual-container {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.bilingual-container .ar-text {
    flex: 1;
    text-align: right;
    direction: rtl;
}

.bilingual-container .en-text {
    flex: 1;
    text-align: left;
    direction: ltr;
}

/* Smart quotes for mixed content */
html[lang="ar"] .quote-en {
    quotes: """ """ "'" "'";
    direction: ltr;
    display: inline-block;
}

html[lang="en"] .quote-ar {
    quotes: "«" "»" "‹" "›";
    direction: rtl;
    display: inline-block;
}

/* Inline language switches */
.lang-switch {
    display: inline-block;
    unicode-bidi: isolate;
}

/* Examples of usage:
   
   In Arabic interface with English product name:
   <p class="ar-text">
       اشتري <span class="product-name">PUBG Mobile UC</span> الآن
   </p>
   
   In English interface with Arabic translation:
   <p class="en-text">
       Buy now <span class="ar-text">(اشتري الآن)</span>
   </p>
   
   Mixed content paragraph:
   <div class="mixed-content">
       <p class="ar-text">سعر المنتج:</p>
       <p class="price">$29.99</p>
   </div>
*/

/* Responsive adjustments for RTL */
@media (max-width: 768px) {
    html[lang="ar"] .mobile-ltr {
        direction: ltr !important;
        text-align: left !important;
    }
    
    html[lang="en"] .mobile-rtl {
        direction: rtl !important;
        text-align: right !important;
    }
}

/* Special handling for forms with mixed content */
.form-mixed {
    /* Form layout stays consistent */
}

.form-mixed .ar-label {
    text-align: right;
    direction: rtl;
}

.form-mixed .en-input {
    text-align: left;
    direction: ltr;
}

/* Navigation with mixed languages */
.nav-bilingual {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nav-bilingual .ar-text {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Cards with bilingual headers */
.card-bilingual-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.card-bilingual-header .primary-lang {
    font-weight: 600;
}

.card-bilingual-header .secondary-lang {
    font-size: 0.85em;
    opacity: 0.7;
}

/* Tooltips for translations */
.translation-hint {
    position: relative;
    border-bottom: 1px dotted var(--color-gray-500);
    cursor: help;
}

.translation-hint:hover::after {
    content: attr(data-translation);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-900);
    color: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: 0.85em;
    white-space: nowrap;
    z-index: 1000;
}

/* Language flags inline */
.lang-flag-inline {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin: 0 0.25em;
}