/* ============================================================
   SiteBuilder V3 - RTL (Right-to-Left) Overrides
   ============================================================ */

/* --- Base Direction --- */
html[dir="rtl"],
body.rtl {
    direction: rtl;
    text-align: right;
}

/* --- Arabic Font Family --- */
body.rtl,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif;
}

body.rtl {
    --font-heading: 'Cairo', 'Tajawal', sans-serif;
    --font-body: 'Cairo', 'Tajawal', sans-serif;
}

/* ============================================================
   ARROW/ICON DIRECTION FLIPS
   ============================================================ */
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-long-arrow-alt-right {
    transform: scaleX(-1);
}

/* Footer arrow prefix */
[dir="rtl"] .site-footer ul li a::before {
    transform: scaleX(-1);
}

/* ============================================================
   TEXT ALIGNMENT FLIPS
   ============================================================ */
body.rtl .text-left { text-align: right !important; }
body.rtl .text-right { text-align: left !important; }

body.rtl .align-h-left {
    justify-content: flex-end;
}

body.rtl .align-h-right {
    justify-content: flex-start;
}

/* ============================================================
   TOP BAR
   ============================================================ */
body.rtl .top-bar .container {
    flex-direction: row-reverse;
}

body.rtl .top-bar-left,
body.rtl .top-bar-right {
    flex-direction: row-reverse;
}

body.rtl .language-switcher select {
    padding: 4px 10px 4px 28px;
    background-position: left 8px center;
}

/* ============================================================
   NAVBAR
   ============================================================ */
body.rtl .site-navbar .container {
    flex-direction: row-reverse;
}

body.rtl .navbar-nav {
    flex-direction: row-reverse;
}

body.rtl .navbar-actions {
    flex-direction: row-reverse;
}

body.rtl .navbar-dropdown {
    left: auto;
    right: 0;
}

/* Mobile nav */
@media (max-width: 992px) {
    body.rtl .navbar-nav {
        right: auto;
        left: -300px;
        flex-direction: column;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    }

    body.rtl .navbar-nav.open {
        left: 0;
    }

    body.rtl .navbar-dropdown {
        right: auto;
        left: auto;
    }
}

/* ============================================================
   BUTTONS
   ============================================================ */
body.rtl .btn {
    flex-direction: row-reverse;
}

body.rtl .hero-buttons {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    body.rtl .hero-buttons {
        flex-direction: column-reverse;
    }
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
body.rtl .section-header {
    text-align: center;
}

/* ============================================================
   FEATURES
   ============================================================ */
body.rtl .feature-card {
    text-align: center;
}

/* ============================================================
   CONTENT SECTION
   ============================================================ */
body.rtl .section-content .content-grid {
    direction: rtl;
}

body.rtl .content-text ul li {
    flex-direction: row-reverse;
    text-align: right;
}

body.rtl .content-text ul li i {
    margin-left: 0;
}

/* ============================================================
   GALLERY
   ============================================================ */
body.rtl .gallery-filters {
    flex-direction: row-reverse;
}

body.rtl .gallery-item-overlay {
    direction: ltr;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
body.rtl .testimonial-card::before {
    left: auto;
    right: 20px;
}

body.rtl .testimonial-author {
    flex-direction: row-reverse;
    text-align: right;
}

/* ============================================================
   TEAM
   ============================================================ */
body.rtl .team-card {
    text-align: center;
}

body.rtl .team-card-social {
    flex-direction: row-reverse;
}

/* ============================================================
   PRICING
   ============================================================ */
body.rtl .pricing-features li {
    flex-direction: row-reverse;
    text-align: right;
}

/* ============================================================
   FAQ
   ============================================================ */
body.rtl .faq-question {
    flex-direction: row-reverse;
    text-align: right;
}

body.rtl .faq-answer-inner {
    text-align: right;
}

/* ============================================================
   CONTACT
   ============================================================ */
body.rtl .contact-info-item {
    flex-direction: row-reverse;
    text-align: right;
}

body.rtl .contact-form .form-group label {
    text-align: right;
}

body.rtl .contact-form .form-control {
    text-align: right;
}

body.rtl .contact-form .form-row {
    direction: rtl;
}

/* ============================================================
   STATS
   ============================================================ */
body.rtl .stat-item {
    text-align: center;
}

/* ============================================================
   NEWS
   ============================================================ */
body.rtl .news-card-category {
    left: auto;
    right: 12px;
}

body.rtl .news-card-meta {
    flex-direction: row-reverse;
}

body.rtl .news-card-meta i {
    margin-right: 0;
    margin-left: 4px;
}

body.rtl .news-read-more {
    flex-direction: row-reverse;
}

/* ============================================================
   EVENTS
   ============================================================ */
body.rtl .event-card {
    flex-direction: row-reverse;
}

body.rtl .event-card:hover {
    transform: translateX(-4px);
}

body.rtl .event-info {
    text-align: right;
}

body.rtl .event-meta {
    flex-direction: row-reverse;
}

body.rtl .event-meta i {
    margin-right: 0;
    margin-left: 4px;
}

/* ============================================================
   TABLE
   ============================================================ */
body.rtl .section-table thead th {
    text-align: right;
}

body.rtl .section-table tbody td {
    text-align: right;
}

/* ============================================================
   TIMELINE - Items Flip Sides
   ============================================================ */
body.rtl .timeline::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

body.rtl .timeline-item:nth-child(odd) {
    padding-right: 0;
    padding-left: 40px;
    justify-content: flex-start;
}

body.rtl .timeline-item:nth-child(even) {
    margin-left: 0;
    margin-right: 50%;
    padding-left: 0;
    padding-right: 40px;
}

body.rtl .timeline-item:nth-child(odd)::before {
    right: auto;
    left: -8px;
}

body.rtl .timeline-item:nth-child(even)::before {
    left: auto;
    right: -8px;
}

body.rtl .timeline-content {
    text-align: right;
}

@media (max-width: 992px) {
    body.rtl .timeline::before {
        left: auto;
        right: 20px;
        transform: none;
    }

    body.rtl .timeline-item,
    body.rtl .timeline-item:nth-child(odd),
    body.rtl .timeline-item:nth-child(even) {
        padding-left: 0;
        padding-right: 52px;
        margin-left: 0;
        margin-right: 0;
    }

    body.rtl .timeline-item::before,
    body.rtl .timeline-item:nth-child(odd)::before,
    body.rtl .timeline-item:nth-child(even)::before {
        left: auto;
        right: 12px;
    }
}

/* ============================================================
   TABS
   ============================================================ */
body.rtl .section-tabs .tabs-nav {
    flex-direction: row-reverse;
}

/* ============================================================
   FORMS - General RTL
   ============================================================ */
body.rtl input,
body.rtl textarea,
body.rtl select {
    text-align: right;
}

body.rtl select.form-control {
    background-position: left 12px center;
    padding-right: 12px;
    padding-left: 32px;
}

body.rtl label {
    text-align: right;
}

body.rtl .form-check {
    flex-direction: row-reverse;
}

body.rtl .form-hint,
body.rtl .form-error-text {
    text-align: right;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
body.rtl .cookie-banner {
    flex-direction: row-reverse;
    text-align: right;
}

body.rtl .cookie-banner-actions {
    flex-direction: row-reverse;
}

/* ============================================================
   POPUP
   ============================================================ */
body.rtl .popup-close {
    right: auto;
    left: 12px;
}

body.rtl .popup-body {
    text-align: right;
}

/* ============================================================
   WHATSAPP FLOAT BUTTON
   ============================================================ */
body.rtl .whatsapp-float {
    right: auto;
    left: 24px;
}

body.rtl .whatsapp-float .whatsapp-tooltip {
    right: auto;
    left: 68px;
}

/* ============================================================
   SOCIAL SHARE BAR
   ============================================================ */
body.rtl .social-share-bar {
    left: auto;
    right: 0;
}

body.rtl .social-share-bar a:hover {
    width: 52px;
}

@media (max-width: 992px) {
    body.rtl .social-share-bar {
        right: 0;
        left: 0;
        flex-direction: row-reverse;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
body.rtl .footer-grid {
    direction: rtl;
}

body.rtl .footer-links li a:hover {
    padding-left: 0;
    padding-right: 4px;
}

body.rtl .footer-social {
    flex-direction: row-reverse;
}

body.rtl .footer-newsletter {
    flex-direction: row-reverse;
}

body.rtl .footer-newsletter input {
    text-align: right;
}

body.rtl .footer-bottom {
    flex-direction: row-reverse;
}

body.rtl .footer-bottom-links {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    body.rtl .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================
   MARGIN / PADDING REVERSALS
   ============================================================ */
body.rtl .ml-auto { margin-left: 0; margin-right: auto; }
body.rtl .mr-auto { margin-right: 0; margin-left: auto; }

body.rtl .pl-0 { padding-left: initial; padding-right: 0; }
body.rtl .pr-0 { padding-right: initial; padding-left: 0; }

body.rtl .ml-4 { margin-left: 0; margin-right: 4px; }
body.rtl .mr-4 { margin-right: 0; margin-left: 4px; }
body.rtl .ml-8 { margin-left: 0; margin-right: 8px; }
body.rtl .mr-8 { margin-right: 0; margin-left: 8px; }
body.rtl .ml-12 { margin-left: 0; margin-right: 12px; }
body.rtl .mr-12 { margin-right: 0; margin-left: 12px; }
body.rtl .ml-16 { margin-left: 0; margin-right: 16px; }
body.rtl .mr-16 { margin-right: 0; margin-left: 16px; }

body.rtl .pl-4 { padding-left: 0; padding-right: 4px; }
body.rtl .pr-4 { padding-right: 0; padding-left: 4px; }
body.rtl .pl-8 { padding-left: 0; padding-right: 8px; }
body.rtl .pr-8 { padding-right: 0; padding-left: 8px; }
body.rtl .pl-16 { padding-left: 0; padding-right: 16px; }
body.rtl .pr-16 { padding-right: 0; padding-left: 16px; }

/* ============================================================
   ANIMATION DIRECTION FLIPS
   ============================================================ */
body.rtl [data-animate="slideLeft"] {
    transform: translateX(-40px);
}

body.rtl [data-animate="slideRight"] {
    transform: translateX(40px);
}

body.rtl .animate-slideLeft {
    animation-name: rtlSlideLeft;
}

body.rtl .animate-slideRight {
    animation-name: rtlSlideRight;
}

@keyframes rtlSlideLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

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

/* ============================================================
   ADMIN PANEL RTL (if admin uses RTL)
   ============================================================ */
body.rtl.admin-body .admin-sidebar {
    left: auto;
    right: 0;
}

body.rtl.admin-body .admin-main {
    margin-left: 0;
    margin-right: var(--admin-sidebar-width);
}

body.rtl.admin-body .admin-topbar {
    left: 0;
    right: var(--admin-sidebar-width);
}

body.rtl.admin-body .sidebar-nav-item {
    border-left: none;
    border-right: 3px solid transparent;
}

body.rtl.admin-body .sidebar-nav-item.active {
    border-right-color: var(--admin-primary);
}

body.rtl.admin-body .sidebar-submenu .sidebar-nav-item {
    padding-left: 20px;
    padding-right: 56px;
    border-right: none;
}

body.rtl.admin-body.sidebar-collapsed .admin-sidebar {
    width: 68px;
}

body.rtl.admin-body.sidebar-collapsed .admin-main {
    margin-right: 68px;
}

body.rtl.admin-body.sidebar-collapsed .admin-topbar {
    right: 68px;
}

body.rtl.admin-body .topbar-right {
    margin-left: 0;
    margin-right: auto;
}

body.rtl.admin-body .topbar-search i {
    left: auto;
    right: 12px;
}

body.rtl.admin-body .topbar-search input {
    padding: 8px 36px 8px 12px;
}

body.rtl.admin-body .toast-container {
    right: auto;
    left: 20px;
}

body.rtl.admin-body .toast {
    border-left: none;
    border-right: 4px solid var(--admin-primary);
    animation-name: rtlToastSlideIn;
}

body.rtl.admin-body .toast.removing {
    animation-name: rtlToastSlideOut;
}

@keyframes rtlToastSlideIn {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes rtlToastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-60px); }
}

body.rtl.admin-body .admin-dropdown-menu {
    right: auto;
    left: 0;
}

@media (max-width: 992px) {
    body.rtl.admin-body .admin-sidebar {
        transform: translateX(100%);
    }

    body.rtl.admin-body .admin-sidebar.mobile-open {
        transform: translateX(0);
    }

    body.rtl.admin-body .admin-main {
        margin-right: 0;
    }

    body.rtl.admin-body .admin-topbar {
        right: 0;
    }
}
