/* ==========================================================================
   RTL (Right-to-Left) Stylesheet — Arabic Language Support
   Applied dynamically when Arabic language is selected via Google Translate.
   This file mirrors the LTR layout for full RTL compatibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE DIRECTION & TEXT ALIGNMENT
   -------------------------------------------------------------------------- */
html[dir="rtl"] body {
    text-align: right;
}

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

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

/* --------------------------------------------------------------------------
   2. NAVBAR / HEADER — Mirror header layout
   -------------------------------------------------------------------------- */
html[dir="rtl"] .main-header .header-container {
    flex-direction: row-reverse;
}

html[dir="rtl"] .main-header .nav-menu {
    flex-direction: row-reverse;
}

html[dir="rtl"] .main-header .nav-menu a::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .main-header .header-actions {
    flex-direction: row-reverse;
}

/* Mobile sidebar slides from the left in RTL */
html[dir="rtl"] .main-header .mobile-sidebar {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--border-light);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
}

html[dir="rtl"] body.mobile-sidebar-open .main-header .mobile-sidebar {
    transform: translateX(0);
}

html[dir="rtl"] .main-header .mobile-sidebar-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .main-header .mobile-sidebar-nav a {
    text-align: right;
}

html[dir="rtl"] .main-header .mobile-sidebar-actions {
    text-align: center;
}

/* --------------------------------------------------------------------------
   3. BUTTONS — Reverse icon+text flow
   -------------------------------------------------------------------------- */
html[dir="rtl"] .btn-main,
html[dir="rtl"] .btn,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-activate {
    direction: rtl;
}

html[dir="rtl"] .hero .hero-buttons {
    flex-direction: row-reverse;
}

html[dir="rtl"] .action-buttons {
    flex-direction: row-reverse;
}

html[dir="rtl"] .btn i,
html[dir="rtl"] .btn svg {
    margin-left: 0;
    margin-right: 0;
}

/* --------------------------------------------------------------------------
   4. CARDS — Adjust card content alignment
   -------------------------------------------------------------------------- */
html[dir="rtl"] .card {
    text-align: right;
}

html[dir="rtl"] .profile-card {
    text-align: right;
}

html[dir="rtl"] .profile-top {
    flex-direction: row-reverse;
}

html[dir="rtl"] .profile-meta {
    margin-left: 0;
    margin-right: 1rem;
    text-align: right;
}

html[dir="rtl"] .profile-actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .profile-details {
    justify-content: flex-end;
}

html[dir="rtl"] .detail-chip {
    flex-direction: row-reverse;
}

/* Feature cards */
html[dir="rtl"] .etisalme-feature-card {
    text-align: right;
}

html[dir="rtl"] .etisalme-feature-card .icon-wrap {
    margin-left: auto;
    margin-right: 0;
}

/* Step cards */
html[dir="rtl"] .etisalme-step-card {
    text-align: right;
}

/* --------------------------------------------------------------------------
   5. FORMS — Flip form field alignment
   -------------------------------------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}

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

html[dir="rtl"] .form-group {
    text-align: right;
}

html[dir="rtl"] .error-msg {
    text-align: right;
}

/* intl-tel-input RTL adjustments */
html[dir="rtl"] .iti {
    direction: ltr;
}

html[dir="rtl"] .iti__selected-dial-code {
    direction: ltr;
}

/* OTP inputs stay centered */
html[dir="rtl"] .otp-inputs {
    direction: ltr;
}

/* --------------------------------------------------------------------------
   6. TABLES — Flip table text alignment
   -------------------------------------------------------------------------- */
html[dir="rtl"] table {
    direction: rtl;
}

html[dir="rtl"] table th,
html[dir="rtl"] table td {
    text-align: right;
}

html[dir="rtl"] table th:last-child,
html[dir="rtl"] table td:last-child {
    text-align: left;
}

/* --------------------------------------------------------------------------
   7. BREADCRUMBS — Reverse breadcrumb direction
   -------------------------------------------------------------------------- */
html[dir="rtl"] .etisalme-breadcrumb-nav {
    direction: rtl;
}

html[dir="rtl"] .etisalme-breadcrumb-nav a::after {
    content: "\\";
    margin: 0 8px;
}

html[dir="rtl"] .etisalme-breadcrumb-list {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   8. MODALS — Mirror modal content
   -------------------------------------------------------------------------- */
html[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal-body {
    text-align: right;
}

html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal .btn-close {
    margin-left: 0;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   9. DROPDOWNS — Flip dropdown alignment
   -------------------------------------------------------------------------- */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
    left: auto;
    right: 0;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
}

/* --------------------------------------------------------------------------
  10. HERO / BANNER SECTION
   -------------------------------------------------------------------------- */
html[dir="rtl"] .hero .hero-container {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero .hero-badge {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
  11. FOOTER
   -------------------------------------------------------------------------- */
html[dir="rtl"] .etisalme-footer {
    text-align: right;
}

html[dir="rtl"] .etisalme-footer-links {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
  12. FLEX / GRID HELPERS — Generic RTL flex mirrors
   -------------------------------------------------------------------------- */
html[dir="rtl"] .d-flex {
    flex-direction: row-reverse;
}

html[dir="rtl"] .space-between {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
  13. MARGINS & PADDINGS — Swap left/right utilities
   -------------------------------------------------------------------------- */
html[dir="rtl"] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

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

html[dir="rtl"] .ps-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

html[dir="rtl"] .pe-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

/* --------------------------------------------------------------------------
  14. SELLER FORM SECTION — RTL adjustments
   -------------------------------------------------------------------------- */
html[dir="rtl"] .etisalme-seller-form .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .etisalme-seller-form label {
    text-align: right;
}

/* --------------------------------------------------------------------------
  15. MISSION / ABOUT SECTIONS — Adjust layout flow
   -------------------------------------------------------------------------- */
html[dir="rtl"] .etisalme-mission-card {
    text-align: right;
}

html[dir="rtl"] .etisalme-mission-card .icon-box {
    margin-left: auto;
    margin-right: 0;
}

html[dir="rtl"] .etisalme-about .row {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
  16. FAQ SECTION
   -------------------------------------------------------------------------- */
html[dir="rtl"] .etisalme-faq-question {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .etisalme-faq-answer {
    text-align: right;
}

/* --------------------------------------------------------------------------
  17. CTA SECTION
   -------------------------------------------------------------------------- */
html[dir="rtl"] .etisalme-cta {
    text-align: right;
}

html[dir="rtl"] .etisalme-cta .d-flex {
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
  18. STANDALONE PAGES — Profile show, register, OTP, activate
   -------------------------------------------------------------------------- */

/* Profile show page */
html[dir="rtl"] .profile-wrapper {
    text-align: right;
}

html[dir="rtl"] .profile-info {
    text-align: center;
}

html[dir="rtl"] .vehicle-badge {
    flex-direction: row-reverse;
}

html[dir="rtl"] .admin-actions {
    flex-direction: row-reverse;
}

/* Manage link */
html[dir="rtl"] .manage-link {
    flex-direction: row-reverse;
}

/* Register page */
html[dir="rtl"] .brand {
    text-align: center;
}

html[dir="rtl"] .batch-tag {
    flex-direction: row-reverse;
}

/* Phone badge */
html[dir="rtl"] .phone-badge {
    flex-direction: row-reverse;
}

/* Pin badge */
html[dir="rtl"] .pin-badge {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
  19. SCROLLBAR — Mirror scrollbar for RTL
   -------------------------------------------------------------------------- */
html[dir="rtl"] ::-webkit-scrollbar {
    direction: rtl;
}

/* --------------------------------------------------------------------------
  20. GOOGLE TRANSLATE WIDGET — RTL position adjustments
   -------------------------------------------------------------------------- */
html[dir="rtl"] .gt-lang-selector {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .gt-lang-selector .gt-current-lang {
    flex-direction: row-reverse;
}

html[dir="rtl"] .gt-lang-selector .gt-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .gt-lang-selector .gt-dropdown a {
    flex-direction: row-reverse;
    text-align: right;
}

/* --------------------------------------------------------------------------
  21. PRINT STYLES — Ensure RTL in print
   -------------------------------------------------------------------------- */
@media print {
    html[dir="rtl"] body {
        direction: rtl;
        text-align: right;
    }
}