/*
 * J&G Group — About Page RTL Overrides (Arabic)
 * Ensures proper right-to-left layout, text alignment,
 * icon positioning, and responsive behavior.
 * Author: Antigravity
 */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL RTL DIRECTION
   ═══════════════════════════════════════════════════════════════ */

/* Force RTL text direction on Arabic pages */
html[lang="ar"] .elementor-widget-heading .elementor-heading-title,
html[lang="ar"] .elementor-widget-text-editor {
    direction: rtl;
    unicode-bidi: embed;
}

/* ═══════════════════════════════════════════════════════════════
   ICON BOX — RTL LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Icon box: position icon on the right, text on the left */
html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-wrapper {
    direction: rtl;
}

html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-wrapper.elementor-position-right {
    flex-direction: row-reverse;
}

html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-content {
    text-align: right;
}

html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-title {
    text-align: right;
}

html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-description {
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   ICON LIST — RTL LAYOUT
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .elementor-widget-icon-list .elementor-icon-list-items {
    direction: rtl;
}

html[lang="ar"] .elementor-widget-icon-list .elementor-icon-list-item {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .elementor-widget-icon-list .elementor-icon-list-icon {
    order: 2;
    margin-left: 0;
    margin-right: 0;
}

html[lang="ar"] .elementor-widget-icon-list .elementor-icon-list-text {
    order: 1;
    padding-right: 0;
    padding-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SPACIAZ BUTTON — RTL
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .elementor-widget-spaciaz-button .elementor-widget-container {
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   SLIDE SCROLLING TEXT — RTL
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .elementor-widget-spaciaz-slide-scrolling {
    direction: rtl;
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB — RTL
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .breadcrumbs,
html[lang="ar"] nav[aria-label="Breadcrumb"] {
    direction: rtl;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDER — RTL (flip alignment)
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .elementor-widget-divider .elementor-divider {
    direction: rtl;
}

html[lang="ar"] .elementor-widget-divider .elementor-divider-separator {
    margin-left: auto;
    margin-right: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — RTL COLUMN STACKING
   ═══════════════════════════════════════════════════════════════ */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    html[lang="ar"] .elementor-container {
        direction: rtl;
    }

    /* Ensure reversed rows stack normally on tablet */
    html[lang="ar"] .e-con[style*="row-reverse"] {
        flex-direction: column !important;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    html[lang="ar"] .elementor-widget-heading .elementor-heading-title {
        text-align: right !important;
    }

    html[lang="ar"] .elementor-widget-text-editor {
        text-align: right !important;
    }

    html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-content {
        text-align: right !important;
    }

    /* Center headings stay centered on mobile */
    html[lang="ar"] .elementor-widget-heading .elementor-heading-title[style*="text-align: center"],
    html[lang="ar"] .elementor-align-center .elementor-heading-title {
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM 7 — RTL LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Global form direction */
html[lang="ar"] .wpcf7 {
    direction: rtl;
    text-align: right;
}

/* Input/textarea alignment */
html[lang="ar"] .wpcf7 input[type="text"],
html[lang="ar"] .wpcf7 input[type="email"],
html[lang="ar"] .wpcf7 input[type="tel"],
html[lang="ar"] .wpcf7 input[type="url"],
html[lang="ar"] .wpcf7 textarea,
html[lang="ar"] .wpcf7 select {
    direction: rtl;
    text-align: right;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

/* Placeholder alignment */
html[lang="ar"] .wpcf7 input::placeholder,
html[lang="ar"] .wpcf7 textarea::placeholder {
    text-align: right;
}

/* Select dropdown */
html[lang="ar"] .wpcf7 select {
    direction: rtl;
    text-align: right;
}

/* Submit button alignment */
html[lang="ar"] .wpcf7 .wpcf7-button,
html[lang="ar"] .wpcf7-button-outline {
    text-align: right;
}

html[lang="ar"] .wpcf7 .submit-btn {
    display: flex;
    justify-content: flex-end;
}

/* Flip the arrow icon for RTL */
html[lang="ar"] .wpcf7 .elementor-button-icon {
    order: -1;
    transform: scaleX(-1);
}

/* Label alignment */
html[lang="ar"] .wpcf7 label {
    text-align: right;
    display: block;
}

/* Validation messages */
html[lang="ar"] .wpcf7-response-output,
html[lang="ar"] .wpcf7-not-valid-tip {
    text-align: right;
    direction: rtl;
}

/* Row layout — keep grid but RTL */
html[lang="ar"] .wpcf7 .row {
    direction: rtl;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — CARD LAYOUT RTL
   ═══════════════════════════════════════════════════════════════ */

/* Contact info cards (Support email, Phone, Location) */
html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-wrapper {
    text-align: right;
}

/* Ensure icon-box icon stays visually balanced in RTL */
html[lang="ar"] .elementor-icon-box-icon {
    margin-left: 15px;
    margin-right: 0;
}

/* ═══════════════════════════════════════════════════════════════
   GOOGLE MAPS — RTL
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .elementor-widget-google_maps {
    direction: ltr; /* Maps should stay LTR */
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TITLE — RTL
   ═══════════════════════════════════════════════════════════════ */

html[lang="ar"] .elementor-widget-page-title {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .page-title-content {
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — CONTACT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: contact form + map stack */
@media (max-width: 1024px) {
    html[lang="ar"] .wpcf7 .row .column-50 {
        width: 100%;
        float: none;
    }
}

/* Mobile: full-width cards */
@media (max-width: 767px) {
    html[lang="ar"] .wpcf7 input[type="text"],
    html[lang="ar"] .wpcf7 input[type="email"],
    html[lang="ar"] .wpcf7 textarea {
        width: 100%;
    }

    html[lang="ar"] .wpcf7 .submit-btn {
        justify-content: center;
    }
}