/**
 * GTranslate Extended Features - RTL Layout Stylesheet
 * Handles RTL transformations for Arabic, Hebrew, Persian, etc.
 */

/* ============================================
   Global RTL Layout Adjustments
   ============================================ */

html[dir="rtl"],
html.rtl-layout {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body,
html.rtl-layout body {
    direction: rtl;
}

/* Text direction for RTL */
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html.rtl-layout p,
html.rtl-layout span,
html.rtl-layout div,
html.rtl-layout h1,
html.rtl-layout h2,
html.rtl-layout h3,
html.rtl-layout h4,
html.rtl-layout h5,
html.rtl-layout h6 {
    text-align: right;
}

/* Flexbox direction reversal */
html[dir="rtl"] .flex,
html[dir="rtl"] [style*="display:flex"],
html.rtl-layout .flex,
html.rtl-layout [style*="display:flex"] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .flex-column,
html[dir="rtl"] [style*="flex-direction:column"],
html.rtl-layout .flex-column,
html.rtl-layout [style*="flex-direction:column"] {
    flex-direction: column;
}

/* Margin and padding adjustments */
html[dir="rtl"] [style*="margin-left"],
html.rtl-layout [style*="margin-left"] {
    /* Margins need manual adjustment via CSS */
}

html[dir="rtl"] [style*="margin-right"],
html.rtl-layout [style*="margin-right"] {
    /* Margins need manual adjustment via CSS */
}

/* ============================================
   Services Showcase Specific RTL Styles
   ============================================ */

/* Services showcase container */
html[dir="rtl"] .sfp-ss-container,
html.rtl-layout .sfp-ss-container {
    direction: rtl;
}

/* Services showcase wheel */
html[dir="rtl"] .sfp-ss-wheel,
html.rtl-layout .sfp-ss-wheel {
    direction: rtl;
}

/* Wheel rotation in RTL - reverse the rotation direction */
html[dir="rtl"] .sfp-ss-wheel svg,
html.rtl-layout .sfp-ss-wheel svg {
    transform: scaleX(-1);
}

/* Service items - adjust for RTL layout */
html[dir="rtl"] .sfp-ss-item,
html.rtl-layout .sfp-ss-item {
    direction: rtl;
    text-align: right;
}

/* Service item text content */
html[dir="rtl"] .sfp-ss-title,
html[dir="rtl"] .sfp-ss-excerpt,
html[dir="rtl"] .sfp-ss-cta,
html.rtl-layout .sfp-ss-title,
html.rtl-layout .sfp-ss-excerpt,
html.rtl-layout .sfp-ss-cta {
    text-align: inherit;
}

/* Drawer positioning - open from right in RTL */
html[dir="rtl"] .sfp-ss-drawer,
html.rtl-layout .sfp-ss-drawer {
    right: 0;
    left: auto;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .sfp-ss-drawer.open,
html.rtl-layout .sfp-ss-drawer.open {
    right: 0;
    left: auto;
}

/* Drawer content alignment */
html[dir="rtl"] .sfp-ss-drawer-content,
html.rtl-layout .sfp-ss-drawer-content {
    direction: rtl;
    text-align: right;
}

/* Drawer close button positioning */
html[dir="rtl"] .sfp-ss-drawer-close,
html.rtl-layout .sfp-ss-drawer-close {
    left: 20px;
    right: auto;
}

/* Drawer animation - slide in from right in RTL */
html[dir="rtl"] .sfp-ss-drawer[style*="transform"],
html.rtl-layout .sfp-ss-drawer[style*="transform"] {
    /* Animation will be handled by GSAP with direction awareness */
}

/* Sub-services accordion */
html[dir="rtl"] .sfp-ss-sub-services,
html.rtl-layout .sfp-ss-sub-services {
    direction: rtl;
}

html[dir="rtl"] .sfp-ss-sub-item,
html.rtl-layout .sfp-ss-sub-item {
    direction: rtl;
    text-align: right;
}

/* Works portfolio in drawer */
html[dir="rtl"] .sfp-ss-works-grid,
html.rtl-layout .sfp-ss-works-grid {
    direction: rtl;
}

html[dir="rtl"] .sfp-ss-work-card,
html.rtl-layout .sfp-ss-work-card {
    direction: rtl;
}

/* Buttons and CTAs */
html[dir="rtl"] .sfp-ss-cta,
html[dir="rtl"] button.sfp-ss-cta,
html[dir="rtl"] a.sfp-ss-cta,
html.rtl-layout .sfp-ss-cta,
html.rtl-layout button.sfp-ss-cta,
html.rtl-layout a.sfp-ss-cta {
    text-align: center;
    direction: rtl;
}

/* Icon positioning in buttons */
html[dir="rtl"] .sfp-ss-cta svg,
html[dir="rtl"] .sfp-ss-cta i,
html.rtl-layout .sfp-ss-cta svg,
html.rtl-layout .sfp-ss-cta i {
    margin-right: 0;
    margin-left: 8px;
}

/* ============================================
   Navigation and Menu RTL Adjustments
   ============================================ */

html[dir="rtl"] nav,
html[dir="rtl"] .menu,
html.rtl-layout nav,
html.rtl-layout .menu {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] nav ul,
html[dir="rtl"] .menu ul,
html.rtl-layout nav ul,
html.rtl-layout .menu ul {
    flex-direction: row-reverse;
}

html[dir="rtl"] nav li,
html[dir="rtl"] .menu li,
html.rtl-layout nav li,
html.rtl-layout .menu li {
    text-align: right;
}

/* ============================================
   Form Elements RTL Adjustments
   ============================================ */

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

html[dir="rtl"] label,
html.rtl-layout label {
    text-align: right;
}

/* ============================================
   Utility Classes for RTL
   ============================================ */

.rtl-only {
    display: none;
}

html[dir="rtl"] .rtl-only,
html.rtl-layout .rtl-only {
    display: block;
}

.ltr-only {
    display: block;
}

html[dir="rtl"] .ltr-only,
html.rtl-layout .ltr-only {
    display: none;
}

/* ============================================
   Animation Adjustments for RTL
   ============================================ */

/* Ensure transform-origin is adjusted for RTL animations */
html[dir="rtl"] [class*="animation"],
html.rtl-layout [class*="animation"] {
    transform-origin: right center;
}

html[dir="rtl"] .sfp-ss-item [class*="animation"],
html.rtl-layout .sfp-ss-item [class*="animation"] {
    transform-origin: right center;
}

/* ============================================
   Print Styles RTL
   ============================================ */

@media print {
    html[dir="rtl"],
    html.rtl-layout {
        direction: rtl;
        text-align: right;
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    html[dir="rtl"] .sfp-ss-drawer,
    html.rtl-layout .sfp-ss-drawer {
        right: 0;
        left: auto;
        width: 90%;
        max-width: 350px;
    }
    
    html[dir="rtl"] .sfp-ss-wheel,
    html.rtl-layout .sfp-ss-wheel {
        direction: rtl;
    }
}