/**
 * RTL Base CSS Utilities
 * 
 * Reusable RTL layout utilities.
 * Extracted from Persian Elementor + Elessi Theme patterns.
 */

/* ===========================================
   Logical Properties (Modern Browsers)
   =========================================== */

.sc-margin-inline-start { margin-inline-start: var(--sc-space, 1rem); }
.sc-margin-inline-end { margin-inline-end: var(--sc-space, 1rem); }
.sc-margin-block-start { margin-block-start: var(--sc-space, 1rem); }
.sc-margin-block-end { margin-block-end: var(--sc-space, 1rem); }

.sc-padding-inline-start { padding-inline-start: var(--sc-space, 1rem); }
.sc-padding-inline-end { padding-inline-end: var(--sc-space, 1rem); }
.sc-padding-block-start { padding-block-start: var(--sc-space, 1rem); }
.sc-padding-block-end { padding-block-end: var(--sc-space, 1rem); }

.sc-border-inline-start { border-inline-start: 1px solid var(--sc-border-color, #ccc); }
.sc-border-inline-end { border-inline-end: 1px solid var(--sc-border-color, #ccc); }

/* ===========================================
   Fallback RTL Properties
   =========================================== */

/* Margin */
.sc-ms-1 { margin-left: 0.25rem; margin-right: auto; }
.sc-me-1 { margin-right: 0.25rem; margin-left: auto; }
.sc-ms-2 { margin-left: 0.5rem; margin-right: auto; }
.sc-me-2 { margin-right: 0.5rem; margin-left: auto; }
.sc-ms-4 { margin-left: 1rem; margin-right: auto; }
.sc-me-4 { margin-right: 1rem; margin-left: auto; }

[dir="rtl"] .sc-ms-1 { margin-left: auto; margin-right: 0.25rem; }
[dir="rtl"] .sc-me-1 { margin-right: auto; margin-left: 0.25rem; }
[dir="rtl"] .sc-ms-2 { margin-left: auto; margin-right: 0.5rem; }
[dir="rtl"] .sc-me-2 { margin-right: auto; margin-left: 0.5rem; }
[dir="rtl"] .sc-ms-4 { margin-left: auto; margin-right: 1rem; }
[dir="rtl"] .sc-me-4 { margin-right: auto; margin-left: 1rem; }

/* Padding */
.sc-ps-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.sc-pe-1 { padding-right: 0.25rem; padding-left: 0.25rem; }
.sc-ps-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.sc-pe-2 { padding-right: 0.5rem; padding-left: 0.5rem; }
.sc-ps-4 { padding-left: 1rem; padding-right: 1rem; }
.sc-pe-4 { padding-right: 1rem; padding-left: 1rem; }

/* Text Alignment */
.sc-text-start { text-align: left; }
.sc-text-end { text-align: right; }
.sc-text-center { text-align: center; }

[dir="rtl"] .sc-text-start { text-align: right; }
[dir="rtl"] .sc-text-end { text-align: left; }

/* Float */
.sc-float-start { float: left; }
.sc-float-end { float: right; }

[dir="rtl"] .sc-float-start { float: right; }
[dir="rtl"] .sc-float-end { float: left; }

/* ===========================================
   RTL Icon Flip
   =========================================== */

.sc-icon-flip {
    transform: scaleX(1);
    transition: transform 0.2s ease;
}

[dir="rtl"] .sc-icon-flip {
    transform: scaleX(-1);
}

/* ===========================================
   Bidirectional Flexbox
   =========================================== */

.sc-flex-row {
    display: flex;
    flex-direction: row;
}

.sc-flex-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.sc-flex-start {
    justify-content: flex-start;
}

.sc-flex-end {
    justify-content: flex-end;
}

[dir="rtl"] .sc-flex-start {
    justify-content: flex-end;
}

[dir="rtl"] .sc-flex-end {
    justify-content: flex-start;
}

/* ===========================================
   Bidirectional Grid
   =========================================== */

.sc-grid {
    display: grid;
    gap: var(--sc-gap, 1rem);
}

.sc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sc-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .sc-grid-2,
    .sc-grid-3,
    .sc-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   RTL-Aware Positioning
   =========================================== */

.sc-position-start-0 { left: 0; right: auto; }
.sc-position-end-0 { right: 0; left: auto; }

[dir="rtl"] .sc-position-start-0 { left: auto; right: 0; }
[dir="rtl"] .sc-position-end-0 { right: auto; left: 0; }

/* ===========================================
   Border Directions
   =========================================== */

.sc-border-s { border-left: 2px solid var(--sc-border-color, #ccc); }
.sc-border-e { border-right: 2px solid var(--sc-border-color, #ccc); }
.sc-border-t { border-top: 2px solid var(--sc-border-color, #ccc); }
.sc-border-b { border-bottom: 2px solid var(--sc-border-color, #ccc); }

[dir="rtl"] .sc-border-s { border-left: none; border-right: 2px solid var(--sc-border-color, #ccc); }
[dir="rtl"] .sc-border-e { border-right: none; border-left: 2px solid var(--sc-border-color, #ccc); }

/* ===========================================
   Shadow Directions
   =========================================== */

.sc-shadow-start {
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
}

.sc-shadow-end {
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .sc-shadow-start {
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .sc-shadow-end {
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   Arrow Directions
   =========================================== */

.sc-arrow-start::before {
    content: '←';
    margin-right: 0.5rem;
}

.sc-arrow-end::before {
    content: '→';
    margin-left: 0.5rem;
}

[dir="rtl"] .sc-arrow-start::before {
    content: '→';
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .sc-arrow-end::before {
    content: '←';
    margin-left: 0;
    margin-right: 0.5rem;
}