/**
 * Fanavar RTL Fixes — scoped overrides for Dari/Pashto dark-background readability,
 * line spacing, form placeholders, accordion icon position, and label direction.
 *
 * Loaded ONLY for RTL locales (ar, fa, ps) via master.blade.php.
 * Scoped to .fs-contact-page, #faq-page, and generic dark-section patterns
 * to avoid side-effects on LTR or other modules.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. BODY TEXT CONTRAST ON DARK BACKGROUNDS
   Persian/Arabic characters have fine connection strokes and diacritics
   that disappear at low opacity. Raise contrast for any RTL text on dark.
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .fs-contact-hero__subtitle,
html[dir="rtl"] .fs-section-desc,
html[dir="rtl"] .fs-map-card__desc,
html[dir="rtl"] .fs-info-item__note {
    color: rgba(255, 255, 255, 0.88);
}

html[dir="rtl"] .fs-info-item__label {
    color: rgba(255, 255, 255, 0.6);
}

html[dir="rtl"] .fs-contact-hero__label,
html[dir="rtl"] .fs-section-tag {
    color: rgba(252, 218, 3, 0.95);
}

html[dir="rtl"] #faq-page p,
html[dir="rtl"] #faq-page li,
html[dir="rtl"] #faq-page .faq-item-body,
html[dir="rtl"] #faq-page .faq-item-body p,
html[dir="rtl"] #faq-page .faq-item-body li {
    color: rgba(255, 255, 255, 0.88);
}

html[dir="rtl"] #faq-page .faq-category-desc {
    color: rgba(255, 255, 255, 0.78);
}

html[dir="rtl"] .powder-coating-hero .text-light.opacity-8,
html[dir="rtl"] .powder-coating-hero p.text-light {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Generic: any paragraph on a known dark background */
html[dir="rtl"] [style*="background-color: #1A1A18"] p,
html[dir="rtl"] [style*="background: #1A1A18"] p,
html[dir="rtl"] .fs-contact-page p,
html[dir="rtl"] #faq-page .faq-content-section p {
    color: rgba(255, 255, 255, 0.88);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. PARAGRAPH LINE SPACING — generous breathing room for Persian/Dari
   Persian descenders (ی، ج، چ، پ) + ascenders + dots crowd adjacent lines.
   line-height 1.9 (base set in dibaj-farsi-num.css); dark-bg sections need
   slightly more clearance for optical comfort.
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .faq-item-body,
html[dir="rtl"] .faq-item-body p,
html[dir="rtl"] .faq-item-body li {
    line-height: 1.95 !important;
}

html[dir="rtl"] .fs-contact-hero__subtitle,
html[dir="rtl"] .fs-section-desc,
html[dir="rtl"] .fs-map-card__desc,
html[dir="rtl"] .fs-info-item__note {
    line-height: 1.9;
}

/* Pashto: even more generous due to complex connected script */
html[lang="ps"] p,
html[lang="ps"] li,
html[lang="ps"] .faq-item-body p,
html[lang="ps"] .faq-item-body li {
    line-height: 2.0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. FORM PLACEHOLDERS — RTL text alignment
   Placeholder text must anchor to the right (natural start) edge in RTL.
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .fs-form-input,
html[dir="rtl"] .fs-form-textarea,
html[dir="rtl"] .fs-form-select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .fs-form-input::placeholder,
html[dir="rtl"] .fs-form-textarea::placeholder {
    text-align: right;
    direction: rtl;
}

/* Generic Bootstrap .form-control in RTL context */
html[dir="rtl"] .contact-form input::placeholder,
html[dir="rtl"] .contact-form textarea::placeholder,
html[dir="rtl"] form.fs-quote-form input::placeholder,
html[dir="rtl"] form.fs-quote-form textarea::placeholder {
    text-align: right;
    direction: rtl;
}

/* Select dropdown: text aligns to right in RTL */
html[dir="rtl"] .fs-form-select {
    padding-right: 1rem;
    padding-left: 2.5rem;
    background-position: left 1rem center;
}

/* Ensure the search input in FAQ also respects RTL */
html[dir="rtl"] .faq-search-input {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .faq-search-input::placeholder {
    text-align: right;
    direction: rtl;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. ACCORDION ICONS — move to START (right side) for RTL
   The toggle icon (caret-down) must sit at the right edge (reading start)
   so RTL readers see the interactive control first when scanning each row.
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .faq-item-header {
    display: flex;
    text-align: right;
}

html[dir="rtl"] .faq-item-toggle {
    order: -1;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
    margin-inline-end: 1rem;
}

html[dir="rtl"] .faq-item-question {
    text-align: right;
    flex: 1;
}

/* Bootstrap accordion (if used elsewhere in the template) */
html[dir="rtl"] .accordion-button {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
    margin-inline-start: 0;
    margin-inline-end: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. FORM LABELS & REQUIRED MARKERS — consistent RTL direction
   The asterisk (*) must visually attach to the label text in RTL flow.
   Using unicode-bidi: plaintext lets the first strong character (Persian)
   determine paragraph direction, so "نام *" renders as a cohesive unit
   with the asterisk at the correct (logical end) position.
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .fs-form-label,
html[dir="rtl"] .fs-contact-page label,
html[dir="rtl"] form.fs-quote-form label {
    display: block;
    text-align: right;
    direction: rtl;
    unicode-bidi: plaintext;
}

html[dir="rtl"] .contact-form label,
html[dir="rtl"] .form-label,
html[dir="rtl"] form label {
    display: block;
    text-align: right;
    direction: rtl;
    unicode-bidi: plaintext;
}

/* Validation messages flow RTL */
html[dir="rtl"] .fs-contact-page .invalid-feedback,
html[dir="rtl"] .fs-contact-page .contact-form-error,
html[dir="rtl"] .fs-contact-page .contact-form-success {
    text-align: right;
    direction: rtl;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. FOOTER RTL READABILITY — Dari/Pashto-calibrated spacing
   The footer uses inline PHP-generated font-size values (now calibrated per
   language in footer.blade.php), but letter-spacing and font-weight need
   CSS-level enforcement since inline styles don't set them.
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] #footer a,
html[dir="rtl"] #footer li,
html[dir="rtl"] #footer p,
html[dir="rtl"] #footer span {
    letter-spacing: 0.04em;
}

html[dir="rtl"] #footer h5 a,
html[dir="rtl"] #footer h4 {
    letter-spacing: 0.03em;
    font-weight: 700;
}

html[dir="rtl"] #footer .footer-copyright {
    letter-spacing: 0.03em;
}

/* Override opacity-85 on RTL footer links — Dibaj FaNum's thin strokes
   need full white to maintain contrast on #1B1D1F background */
html[dir="rtl"] #footer .opacity-85,
html[dir="rtl"] #footer a.opacity-85 {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}