/* =============================================
    Livo Bank - RTL (Right-to-Left) Support
   ============================================= */

/* ---- Arabic Font Family ---- */
[dir="rtl"] body {
    font-family: 'Noto Kufi Arabic', 'Inter', sans-serif;
}

/* ---- Core RTL Direction ---- */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ---- Text Alignment ---- */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .text-center { text-align: center !important; }

/* ---- Margins (flip left/right) ---- */
[dir="rtl"] .ml-0, [dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-0, [dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ml-auto, [dir="rtl"] .ms-auto { margin-left: auto !important; margin-right: 0 !important; }
[dir="rtl"] .mr-auto, [dir="rtl"] .me-auto { margin-right: auto !important; margin-left: 0 !important; }
[dir="rtl"] .mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ---- Padding (flip left/right) ---- */
[dir="rtl"] .pl-0, [dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: auto !important; }
[dir="rtl"] .pr-0, [dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: auto !important; }

/* ---- Float ---- */
[dir="rtl"] .float-left, [dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-right, [dir="rtl"] .float-end { float: left !important; }

/* ---- Border Radius (flip) ---- */
[dir="rtl"] .rounded-start { border-top-left-radius: 0 !important; border-top-right-radius: var(--radius-md, 0.375rem) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: var(--radius-md, 0.375rem) !important; }
[dir="rtl"] .rounded-end { border-top-right-radius: 0 !important; border-top-left-radius: var(--radius-md, 0.375rem) !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: var(--radius-md, 0.375rem) !important; }

/* =============================================
   HEADER & NAVIGATION
   ============================================= */
[dir="rtl"] .utility-bar .utility-left,
[dir="rtl"] .utility-bar .utility-right {
    flex-direction: row-reverse;
}

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

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

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

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

[dir="rtl"] .mega-dropdown {
    right: auto;
    left: 0;
}

[dir="rtl"] .nav-item.has-dropdown:hover .mega-dropdown {
    transform: translateX(0);
}

/* ---- Hamburger / Mobile Nav ---- */
[dir="rtl"] .hamburger span:nth-child(1) { transform-origin: right; }
[dir="rtl"] .hamburger span:nth-child(3) { transform-origin: right; }
[dir="rtl"] .hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
[dir="rtl"] .hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

/* =============================================
   FORMS & INPUTS
   ============================================= */
[dir="rtl"] .form-input {
    text-align: right;
}

[dir="rtl"] .input-group .form-input {
    padding-left: 16px;
    padding-right: 44px;
}

[dir="rtl"] .input-icon {
    left: auto;
    right: 14px;
}

[dir="rtl"] .input-group .input-icon {
    right: 14px;
    left: auto;
}

/* Password visibility toggle */
[dir="rtl"] .input-group .fa-eye,
[dir="rtl"] .input-group .fa-eye-slash {
    right: auto;
    left: 14px;
}

/* ---- Login Page ---- */
[dir="rtl"] .login-left {
    direction: rtl;
}

[dir="rtl"] .login-brand {
    text-align: right;
}

[dir="rtl"] .login-feature {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .login-right {
    direction: rtl;
}

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

[dir="rtl"] .form-check {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

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

[dir="rtl"] .login-footer {
    text-align: center;
}

/* ---- Arrow in login button ---- */
[dir="rtl"] .login-btn .fa-arrow-right::before {
    content: "\f060"; /* fa-arrow-left */
}

[dir="rtl"] .login-btn i[style*="margin-left"] {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* =============================================
   DASHBOARD
   ============================================= */
[dir="rtl"] #dashboardView header > div {
    flex-direction: row-reverse;
}

[dir="rtl"] #dashboardView header > div > div:first-child {
    flex-direction: row-reverse;
}

[dir="rtl"] #dashboardView header > div > div:last-child {
    flex-direction: row-reverse;
}

/* ---- Quick Actions ---- */
[dir="rtl"] .quick-grid {
    direction: rtl;
}

/* ---- Summary Cards ---- */
[dir="rtl"] .summary-cards,
[dir="rtl"] [style*="grid-template-columns:repeat(auto-fit"] {
    direction: rtl;
}

/* ---- Accounts & Transactions ---- */
[dir="rtl"] #dashAccountsList > div,
[dir="rtl"] #dashTransactionsList > div {
    flex-direction: row-reverse;
}

[dir="rtl"] #dashAccountsList > div > div:last-child,
[dir="rtl"] #dashTransactionsList > div > div:last-child {
    text-align: left;
}

/* ---- Cards ---- */
[dir="rtl"] #dashCardsList [style*="justify-content:space-between"] {
    flex-direction: row-reverse;
}

/* =============================================
   NOTIFICATION PANEL
   ============================================= */
[dir="rtl"] .notif-panel {
    right: auto;
    left: -400px;
    direction: rtl;
}

[dir="rtl"] .notif-panel.open {
    left: 0;
    right: auto;
}

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

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

[dir="rtl"] .notif-item {
    flex-direction: row-reverse;
}

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

[dir="rtl"] .notif-item.unread::before {
    left: auto;
    right: 8px;
}

/* =============================================
   INSIGHTS SECTION
   ============================================= */
[dir="rtl"] #insightsSection [style*="justify-content:space-between"] {
    flex-direction: row-reverse;
}

/* =============================================
   FOOTER
   ============================================= */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

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

[dir="rtl"] .footer-contact-info p {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .footer-contact-info i {
    margin-right: 0;
    margin-left: 8px;
}

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

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

[dir="rtl"] .footer-social {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* =============================================
   BUTTONS
   ============================================= */
[dir="rtl"] .btn i.fas.fa-arrow-right::before {
    content: "\f060"; /* fa-arrow-left */
}

[dir="rtl"] .btn i.fas.fa-arrow-left::before {
    content: "\f061"; /* fa-arrow-right */
}

/* =============================================
   TABLES
   ============================================= */
[dir="rtl"] th {
    text-align: right;
}

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

/* =============================================
   MODALS
   ============================================= */
[dir="rtl"] .modal-overlay > div {
    direction: rtl;
    text-align: right;
}

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

/* =============================================
   TICKER
   ============================================= */
[dir="rtl"] .ticker-inner {
    flex-direction: row-reverse;
}

[dir="rtl"] .ticker-label {
    flex-direction: row-reverse;
}

[dir="rtl"] .ticker-price {
    flex-direction: row-reverse;
}

/* =============================================
   PROMO / CAROUSEL
   ============================================= */
[dir="rtl"] .promo-nav.prev {
    left: auto;
    right: 12px;
}

[dir="rtl"] .promo-nav.next {
    right: auto;
    left: 12px;
}

[dir="rtl"] .promo-nav.prev i::before {
    content: "\f054"; /* fa-chevron-right */
}

[dir="rtl"] .promo-nav.next i::before {
    content: "\f053"; /* fa-chevron-left */
}

/* =============================================
   PRODUCT TABS
   ============================================= */
[dir="rtl"] .product-tabs {
    flex-direction: row-reverse;
}

/* =============================================
   NEWS & TESTIMONIALS
   ============================================= */
[dir="rtl"] .news-card-body a i,
[dir="rtl"] .testimonial-card a i {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .news-card-body a i::before,
[dir="rtl"] .testimonial-card a i::before {
    content: "\f060"; /* arrow-left */
}

/* =============================================
   SAR AMOUNT DISPLAY (keep LTR within RTL)
   ============================================= */
[dir="rtl"] .sar-amount,
[dir="rtl"] [style*="font-family:monospace"],
[dir="rtl"] [style*="font-weight:700"][style*="color"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

[dir="rtl"] .price,
[dir="rtl"] .stat-number {
    direction: ltr;
    unicode-bidi: isolate;
}

/* =============================================
   ICON MIRRORING
   ============================================= */
[dir="rtl"] .fa-arrow-right::before { content: "\f060"; }
[dir="rtl"] .fa-arrow-left::before { content: "\f061"; }
[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }
[dir="rtl"] .fa-chevron-left::before { content: "\f054"; }
[dir="rtl"] .fa-angle-right::before { content: "\f104"; }
[dir="rtl"] .fa-angle-left::before { content: "\f105"; }
[dir="rtl"] .fa-share::before { content: "\f064"; }
[dir="rtl"] .fa-reply::before { content: "\f3e5"; }
[dir="rtl"] .fa-sign-out-alt::before { content: "\f2f5"; }
[dir="rtl"] .fa-sign-in-alt::before { content: "\f2f6"; }
[dir="rtl"] .fa-external-link-alt::before { content: "\f35d"; }
[dir="rtl"] .fa-indent::before { content: "\f3be"; }
[dir="rtl"] .fa-dedent::before { content: "\f3be"; }
[dir="rtl"] .fa-list-alt::before { content: "\f022"; }

/* Do NOT mirror directional-meaning icons */
[dir="rtl"] .fa-fingerprint::before,
[dir="rtl"] .fa-lock::before,
[dir="rtl"] .fa-unlock::before,
[dir="rtl"] .fa-shield-alt::before,
[dir="rtl"] .fa-bell::before,
[dir="rtl"] .fa-home::before,
[dir="rtl"] .fa-wallet::before,
[dir="rtl"] .fa-credit-card::before,
[dir="rtl"] .fa-piggy-bank::before,
[dir="rtl"] .fa-car::before,
[dir="rtl"] .fa-bolt::before,
[dir="rtl"] .fa-clock::before,
[dir="rtl"] .fa-check::before,
[dir="rtl"] .fa-check-circle::before,
[dir="rtl"] .fa-times::before,
[dir="rtl"] .fa-times-circle::before,
[dir="rtl"] .fa-exclamation::before,
[dir="rtl"] .fa-exclamation-triangle::before,
[dir="rtl"] .fa-info-circle::before,
[dir="rtl"] .fa-chart-line::before,
[dir="rtl"] .fa-chart-bar::before,
[dir="rtl"] .fa-chart-pie::before,
[dir="rtl"] .fa-star::before,
[dir="rtl"] .fa-user::before,
[dir="rtl"] .fa-users::before,
[dir="rtl"] .fa-building::before,
[dir="rtl"] .fa-university::before,
[dir="rtl"] .fa-globe::before,
[dir="rtl"] .fa-envelope::before,
[dir="rtl"] .fa-phone::before,
[dir="rtl"] .fa-mobile-alt::before,
[dir="rtl"] .fa-map-marker-alt::before,
[dir="rtl"] .fa-headset::before,
[dir="rtl"] .fa-download::before,
[dir="rtl"] .fa-upload::before,
[dir="rtl"] .fa-print::before,
[dir="rtl"] .fa-cog::before,
[dir="rtl"] .fa-plus::before,
[dir="rtl"] .fa-minus::before,
[dir="rtl"] .fa-search::before {
    /* Keep original - no mirroring */
}

/* =============================================
   ADMIN DASHBOARD (admin/index.html)
   ============================================= */
[dir="rtl"] #adminApp .sidebar,
[dir="rtl"] .admin-sidebar {
    right: 0;
    left: auto;
}

[dir="rtl"] #adminApp .sidebar-nav a,
[dir="rtl"] .admin-sidebar a {
    text-align: right;
    flex-direction: row-reverse;
}

[dir="rtl"] #adminApp .main-content,
[dir="rtl"] .admin-main {
    margin-right: 0;
    margin-left: 260px;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 768px) {
    [dir="rtl"] .login-page {
        flex-direction: column-reverse;
    }

    [dir="rtl"] .login-left {
        padding: 40px 24px;
    }

    [dir="rtl"] .login-right {
        padding: 0 24px 40px;
    }

    [dir="rtl"] .utility-bar .utility-left,
    [dir="rtl"] .utility-bar .utility-right {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .footer-grid {
        text-align: center;
    }

    [dir="rtl"] .footer-contact-info p {
        justify-content: center;
    }

    [dir="rtl"] .notif-panel {
        width: 100vw;
        left: 0;
        right: auto;
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .header-inner {
        flex-wrap: wrap;
    }
}

/* =============================================
   ANIMATION & TRANSITIONS
   ============================================= */
[dir="rtl"] .animate-in {
    transform: translateX(30px);
}

[dir="rtl"] .animate-in.visible {
    transform: translateX(0);
}

/* =============================================
   PRINT STYLES (always LTR for SAR amounts)
   ============================================= */
@media print {
    [dir="rtl"] body {
        direction: ltr;
    }

    [dir="rtl"] .sar-amount,
    [dir="rtl"] [style*="font-weight:700"] {
        direction: ltr;
        unicode-bidi: isolate;
    }
}