/* =============================================================
   rtl.css — Comprehensive Right-to-Left overrides for Arabic
   Loaded only when lang=ar is active.
   Mirrors all float/padding/margin/text-align properties
   from the original car-repair template for RTL reading order.
   ============================================================= */

/* ── Global direction & font ─────────────────────────────────── */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Helvetica Neue', sans-serif;
    letter-spacing: 0;
}

/* ── Header logo — float right ───────────────────────────────── */
html[dir="rtl"] h1 {
    float: right !important;
}

html[dir="rtl"] h1 a::before {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* ── Contact info block — float left in RTL ──────────────────── */
html[dir="rtl"] .fright {
    float: left !important;
}

html[dir="rtl"] .indent {
    padding-right: 0 !important;
    padding-left: 20px !important;
}

html[dir="rtl"] .indent-left {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

/* ── Navigation menu — float right ──────────────────────────── */
html[dir="rtl"] .menu {
    float: right !important;
    direction: rtl;
}

html[dir="rtl"] .menu li {
    float: right !important;
    border-left: none !important;
    border-right: 1px solid #333 !important;
}

html[dir="rtl"] .menu > li:first-child {
    border-right: none !important;
}

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

/* Sub-menus open to the left in RTL */
html[dir="rtl"] .menu li ul {
    left: auto !important;
    right: 0 !important;
    text-align: right;
}

/* ── Content wrapper ─────────────────────────────────────────── */
html[dir="rtl"] .wrapper {
    direction: rtl;
}

/* ── Float helpers ───────────────────────────────────────────── */
html[dir="rtl"] .fleft  { float: right !important; }
html[dir="rtl"] .fright { float: left  !important; }

/* ── Grid columns (float-based) — mirror floats ─────────────── */
html[dir="rtl"] [style*="float:left"],
html[dir="rtl"] [style*="float: left"] {
    float: right !important;
}
html[dir="rtl"] [style*="float:right"],
html[dir="rtl"] [style*="float: right"] {
    float: left !important;
}

/* Inline style overrides for sidebar layout */
html[dir="rtl"] .cr-sidebar-main {
    float: right !important;
    padding-right: 0 !important;
    padding-left: 30px !important;
}

html[dir="rtl"] .cr-sidebar-aside {
    float: left !important;
}

/* ── List bullets ────────────────────────────────────────────── */
html[dir="rtl"] .list-1 li,
html[dir="rtl"] .list-2 li {
    padding-left: 0 !important;
    padding-right: 18px !important;
}

html[dir="rtl"] .list-1 li::before,
html[dir="rtl"] .list-2 li::before {
    left: auto !important;
    right: 2px !important;
    content: "‹" !important;
}

/* ── Link arrows ─────────────────────────────────────────────── */
html[dir="rtl"] .link-1::before {
    content: "‹ " !important;
}

/* ── border-bot spacing ──────────────────────────────────────── */
html[dir="rtl"] .border-bot {
    padding-bottom: 24px !important;
}

/* ── Admin bar (staff top bar) ───────────────────────────────── */
html[dir="rtl"] .admin-bar .ab-inner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .admin-bar .ab-brand {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

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

/* ── Language strip ──────────────────────────────────────────── */
html[dir="rtl"] .lang-strip span {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* ── Hero section ────────────────────────────────────────────── */
html[dir="rtl"] .cr-hero-wrap {
    direction: rtl;
}

html[dir="rtl"] .cr-hero-inner {
    text-align: center; /* keep centered for hero */
}

html[dir="rtl"] .cr-hero-btns {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Section titles ──────────────────────────────────────────── */
html[dir="rtl"] .cr-section-title,
html[dir="rtl"] .cr-section-sub {
    text-align: right;
}

html[dir="rtl"] .cr-divider {
    margin-right: 0;
    margin-left: auto;
}

/* ── Service cards grid ──────────────────────────────────────── */
html[dir="rtl"] .svc-grid {
    direction: rtl;
}

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

html[dir="rtl"] .svc-card .svc-icon {
    display: block;
    text-align: right;
}

/* ── Stats strip ─────────────────────────────────────────────── */
html[dir="rtl"] .cr-stats {
    direction: rtl;
}

html[dir="rtl"] .cr-stat-cell {
    text-align: center; /* keep centered */
}

/* ── CTA band ────────────────────────────────────────────────── */
html[dir="rtl"] .cr-cta-band {
    direction: rtl;
}

/* ── Info boxes ──────────────────────────────────────────────── */
html[dir="rtl"] .cr-info-box {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .cr-info-box td:last-child {
    text-align: left !important; /* times stay LTR-aligned */
}

html[dir="rtl"] .cr-info-grid {
    direction: rtl;
}

/* ── Image-text banner ───────────────────────────────────────── */
html[dir="rtl"] .cr-image-text-banner {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    align-items: flex-start;
}

html[dir="rtl"] .cr-it-text {
    text-align: right;
    flex: 1;
}

html[dir="rtl"] .cr-it-image {
    flex: 0 0 260px;
}

/* ── Footer ──────────────────────────────────────────────────── */
html[dir="rtl"] footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] footer a {
    margin: 0 6px;
}

/* ── Padding/margin inline-style corrections for Arabic ────────
   Some template elements use inline style="float:left;width:55%;padding-right:30px"
   We target by class where possible; inline styles require JS or class additions.
   ─────────────────────────────────────────────────────────────── */
html[dir="rtl"] .container {
    direction: rtl;
}

html[dir="rtl"] .container .wrapper > div[style*="float:left;width:55%"],
html[dir="rtl"] .container .wrapper > div[style*="float:left; width:55%"] {
    float: right !important;
    padding-right: 0 !important;
    padding-left: 30px !important;
}

html[dir="rtl"] .container .wrapper > div[style*="float:right;width:40%"],
html[dir="rtl"] .container .wrapper > div[style*="float:right; width:40%"] {
    float: left !important;
}

/* ── Phone numbers — always LTR regardless of page direction ── */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .phone,
html[dir="rtl"] .phone a {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block;
}

/* ── Form elements ───────────────────────────────────────────── */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* ── Bootstrap 5 overrides for RTL admin/forms ──────────────── */
html[dir="rtl"] .breadcrumb {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "‹" !important;
    float: right;
    padding-right: 0;
    padding-left: .5rem;
}

html[dir="rtl"] .me-1, html[dir="rtl"] .me-2, html[dir="rtl"] .me-3 { margin-right: 0 !important; }
html[dir="rtl"] .me-1 { margin-left: .25rem !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem  !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem   !important; }
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem  !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

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

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

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

/* Navbar collapse toggles / align helpers */
html[dir="rtl"] .navbar-nav { flex-direction: row-reverse; }
html[dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; }

html[dir="rtl"] .alert,
html[dir="rtl"] .card-body,
html[dir="rtl"] .card-header {
    text-align: right;
    direction: rtl;
}

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

html[dir="rtl"] .input-group > :not(:first-child) {
    border-radius: .375rem 0 0 .375rem !important;
}
html[dir="rtl"] .input-group > :first-child {
    border-radius: 0 .375rem .375rem 0 !important;
}

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

/* ── Sidebar flex RTL ─────────────────────────────────────────── */
html[dir="rtl"] .cr-sidebar-flex {
    flex-direction: row-reverse;
}

/* ── Hours table RTL — swap text alignment ────────────────────── */
html[dir="rtl"] .cr-hours-table td:first-child {
    text-align: right;
}
html[dir="rtl"] .cr-hours-val,
html[dir="rtl"] .cr-hours-closed {
    text-align: left !important;
}

/* ── Image-text banner RTL ────────────────────────────────────── */
html[dir="rtl"] .cr-image-text-banner {
    flex-direction: row-reverse;
}
html[dir="rtl"] .cr-it-text {
    text-align: right;
}

/* ── Info box RTL ─────────────────────────────────────────────── */
html[dir="rtl"] .cr-info-box {
    text-align: right;
}
html[dir="rtl"] .cr-info-box td:last-child {
    text-align: left !important;
}

/* ── Responsive RTL ──────────────────────────────────────────── */
@media (max-width: 760px) {
    html[dir="rtl"] .cr-sidebar-flex {
        flex-direction: column;
    }
    /* Header: override RTL floats so the flex-column stacking works */
    html[dir="rtl"] h1 {
        float: none !important;
        text-align: center;
    }
    html[dir="rtl"] .fright {
        float: none !important;
        text-align: center !important;
    }
    html[dir="rtl"] .address,
    html[dir="rtl"] .phone {
        text-align: center !important;
    }
    /* Navigation: row-reverse keeps Arabic reading order, flex removes floats */
    html[dir="rtl"] .menu {
        flex-direction: row-reverse !important;
        float: none !important;
    }
    html[dir="rtl"] .menu li {
        float: none !important;
        border-right: none !important;
        border-left: 1px solid #333 !important;
    }
    html[dir="rtl"] .menu > li:first-child {
        border-left: none !important;
    }
    /* Image-text banner */
    html[dir="rtl"] .cr-image-text-banner {
        flex-direction: column !important;
    }
    html[dir="rtl"] .cr-it-image {
        flex: 0 0 auto;
        width: 100%;
    }
    /* Legacy float sidebar */
    html[dir="rtl"] .cr-sidebar-main {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    html[dir="rtl"] .cr-sidebar-aside {
        float: none !important;
        width: 100% !important;
    }
}
@media (max-width: 480px) {
    html[dir="rtl"] .cr-hero-inner h2 {
        font-size: 1.5rem;
    }
    html[dir="rtl"] .menu {
        flex-direction: row-reverse !important;
    }
}