/* ===================================
   Tickra.ai - RTL Stylesheet
   Arabic Language Support
   =================================== */

/* Apply RTL styles only when dir="rtl" */
body[dir="rtl"] {
    text-align: right;
}

/* Navigation RTL */
body[dir="rtl"] .navbar-nav {
    margin-left: 0;
    margin-right: auto;
}

/* Hero Stats RTL */
body[dir="rtl"] .hero-stats {
    flex-direction: row-reverse;
}

/* Button Icons RTL - Don't flip navigation arrows in RTL */
body[dir="rtl"] .btn-cta i.fa-arrow-left,
body[dir="rtl"] .btn-cta i.fa-arrow-right {
    transform: scaleX(-1);
}

body[dir="rtl"] .btn-cta i {
    margin-right: 0;
    margin-left: 8px;
}

/* Feature Cards RTL */
body[dir="rtl"] .feature-card,
body[dir="rtl"] .step-card {
    text-align: right;
}

/* Form RTL */
body[dir="rtl"] .form-label {
    text-align: right;
}

body[dir="rtl"] .form-control,
body[dir="rtl"] .form-select {
    text-align: right;
}

/* Password Toggle RTL - Already handled in main CSS */

/* Progress Bar RTL */
body[dir="rtl"] .progress-bar::after {
    left: 0;
    right: auto;
}

/* Navigation Buttons RTL */
body[dir="rtl"] .navigation-buttons {
    flex-direction: row;
}

body[dir="rtl"] .navigation-buttons .btn i.fa-arrow-left {
    margin-right: 0;
    margin-left: 8px;
}

body[dir="rtl"] .navigation-buttons .btn i.fa-arrow-right {
    margin-left: 0;
    margin-right: 8px;
}

/* Toast RTL */
body[dir="rtl"] .toast-container {
    left: 0;
    right: auto;
}

/* Social Links RTL */
body[dir="rtl"] .social-links {
    flex-direction: row-reverse;
}

/* Footer RTL */
body[dir="rtl"] .footer .col-md-6:first-child {
    text-align: right;
}

body[dir="rtl"] .footer .col-md-6:last-child {
    text-align: left;
}

/* Modal RTL */
body[dir="rtl"] .modal-body {
    text-align: right;
}

/* Floating Cards RTL */
body[dir="rtl"] .floating-card {
    flex-direction: row-reverse;
}

/* Animations RTL */
body[dir="rtl"] .question-wrapper {
    animation: fadeInLeft 0.4s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================================
   LTR Override (English)
   =================================== */
body[dir="ltr"] {
    text-align: left;
}

body[dir="ltr"] .navbar-nav {
    margin-left: auto;
    margin-right: 0;
}

body[dir="ltr"] .hero-stats {
    flex-direction: row;
}

body[dir="ltr"] .btn-cta i {
    margin-left: 8px;
    margin-right: 0;
}

body[dir="ltr"] .feature-card,
body[dir="ltr"] .step-card {
    text-align: center;
}

body[dir="ltr"] .form-label,
body[dir="ltr"] .form-control,
body[dir="ltr"] .form-select {
    text-align: left;
}

body[dir="ltr"] .progress-bar::after {
    right: 0;
    left: auto;
}

body[dir="ltr"] .toast-container {
    right: 0;
    left: auto;
}

body[dir="ltr"] .footer .col-md-6:first-child {
    text-align: left;
}

body[dir="ltr"] .footer .col-md-6:last-child {
    text-align: right;
}

body[dir="ltr"] .modal-body {
    text-align: left;
}

body[dir="ltr"] .question-wrapper {
    animation: fadeInRight 0.4s ease-out;
}

/* Flip navigation arrows in LTR */
body[dir="ltr"] #prevBtn i.fa-arrow-right,
body[dir="ltr"] #nextBtn i.fa-arrow-left {
    transform: scaleX(-1);
}

/* ===================================
   RTL Typography Adjustments
   =================================== */
body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3,
body[dir="rtl"] h4,
body[dir="rtl"] h5,
body[dir="rtl"] h6 {
    font-family: var(--font-arabic);
}

body[dir="ltr"] h1,
body[dir="ltr"] h2,
body[dir="ltr"] h3,
body[dir="ltr"] h4,
body[dir="ltr"] h5,
body[dir="ltr"] h6 {
    font-family: var(--font-english);
}

/* ===================================
   Bootstrap RTL Overrides
   =================================== */
body[dir="rtl"] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body[dir="rtl"] .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

body[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

body[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Responsive RTL Adjustments */
@media (max-width: 767.98px) {
    body[dir="rtl"] .text-md-start,
    body[dir="rtl"] .text-md-end {
        text-align: center !important;
    }
}