/**
 * RTL (Right-to-Left) Support for Julia Center
 * Comprehensive RTL styling for Arabic language support
 * Automatically applied when language is set to Arabic
 */

/* ==========================================================================
   RTL BASE STYLES
   ========================================================================== */

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

html[dir="rtl"] body {
    direction: rtl;
    font-family: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    text-align: right;
    line-height: 1.7; /* Optimized for Arabic text */
}

/* Arabic Typography */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    font-weight: 600;
    line-height: 1.4; /* Better for Arabic headers */
}

/* Preserve centered text */
html[dir="rtl"] .text-center,
html[dir="rtl"] [style*="text-align: center"],
html[dir="rtl"] .section-heading,
html[dir="rtl"] .hero-content {
    text-align: center !important;
}

/* ==========================================================================
   BOOTSTRAP RTL OVERRIDES
   ========================================================================== */

/* Spacing Utilities RTL */
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }

html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }

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; }

/* Padding Utilities RTL */
html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

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

/* ==========================================================================
   NAVIGATION RTL SUPPORT
   ========================================================================== */

/* Navbar RTL */
html[dir="rtl"] .navbar-brand {
    margin-right: 0 !important;
    margin-left: 2rem !important;
}

body{
    max-width: 100vw;
    overflow-x: hidden;
}

html[dir="rtl"] .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Dropdown RTL - Fixed positioning for header dropdowns */
html[dir="rtl"] .dropdown-menu {
    /* Override Bootstrap's RTL positioning to prevent dropdowns from being pushed off-screen */
    left: 0 !important;
    right: auto !important;
    text-align: right;
}

/* Fix dropdown-menu-end positioning in RTL mode */
html[dir="rtl"] .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
}

/* Fix notification dropdown positioning in RTL mode */
html[dir="rtl"] .notification-dropdown {
    left: 0 !important;
    right: auto !important;
}

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

html[dir="rtl"] .dropdown-item i {
    margin-right: 0;
    margin-left: 0.5rem;
}



/* ==========================================================================
   FORMS RTL SUPPORT
   ========================================================================== */

/* Form Controls */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select {
    text-align: right;
    direction: rtl;
}

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

html[dir="rtl"] .form-floating > .form-control {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

html[dir="rtl"] .form-floating > label {
    right: 0;
    left: auto;
    transform-origin: 100% 0;
}

/* Input Groups */
html[dir="rtl"] .input-group .form-control:not(:last-child) {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] .input-group .form-control:not(:first-child) {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   BUTTONS RTL SUPPORT
   ========================================================================== */

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

html[dir="rtl"] .btn i.fas:last-child,
html[dir="rtl"] .btn i.far:last-child {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] .btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   CARDS RTL SUPPORT
   ========================================================================== */

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

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

/* ==========================================================================
   TABLES RTL SUPPORT
   ========================================================================== */

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

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

html[dir="rtl"] .table th:first-child,
html[dir="rtl"] .table td:first-child {
    padding-right: 0.75rem;
}

html[dir="rtl"] .table th:last-child,
html[dir="rtl"] .table td:last-child {
    padding-left: 0.75rem;
}

/* ==========================================================================
   MODALS RTL SUPPORT
   ========================================================================== */

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

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

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

html[dir="rtl"] .modal-footer .btn + .btn {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* ==========================================================================
   ALERTS RTL SUPPORT
   ========================================================================== */

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

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

/* ==========================================================================
   BREADCRUMBS RTL SUPPORT
   ========================================================================== */

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

/* ==========================================================================
   PAGINATION RTL SUPPORT
   ========================================================================== */

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

html[dir="rtl"] .pagination .page-item:first-child .page-link {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] .pagination .page-item:last-child .page-link {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   LIST GROUPS RTL SUPPORT
   ========================================================================== */

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

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

/* ==========================================================================
   CUSTOM COMPONENT RTL SUPPORT
   ========================================================================== */

/* Service Cards */
html[dir="rtl"] .service-card-body ul li {
    padding-right: 30px;
    padding-left: 0;
}

html[dir="rtl"] .service-card-body ul li::before {
    right: 0;
    left: auto;
}

/* Testimonials */
html[dir="rtl"] .testimonial-author img {
    margin-left: 1rem;
    margin-right: 0;
}

/* Offer Cards */
html[dir="rtl"] .offer-badge {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .offer-features li {
    padding-right: 35px;
    padding-left: 0;
}

html[dir="rtl"] .offer-features li::before {
    right: 0;
    left: auto;
}

/* Price Display (Keep LTR for numbers but RTL for layout) */
html[dir="rtl"] .price {
    direction: rtl;
    justify-content: center;
}

html[dir="rtl"] .price .currency {
    order: 1;
}

html[dir="rtl"] .price .amount {
    order: 2;
}

html[dir="rtl"] .price .period {
    order: 3;
}

/* ==========================================================================
   ICONS RTL SUPPORT
   ========================================================================== */

/* Flip directional icons for RTL */
html[dir="rtl"] .fa-chevron-left::before {
    content: "\f054"; /* chevron-right */
}

html[dir="rtl"] .fa-chevron-right::before {
    content: "\f053"; /* chevron-left */
}

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

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

/* ==========================================================================
   ANIMATION RTL SUPPORT
   ========================================================================== */

/* Section headings underline */
html[dir="rtl"] .section-heading h2::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Slideshow animations */
html[dir="rtl"] .testimonial-slide {
    text-align: center; /* Keep testimonials centered */
}

/* ==========================================================================
   RESPONSIVE RTL SUPPORT
   ========================================================================== */

@media (max-width: 768px) {
    html[dir="rtl"] .container,
    html[dir="rtl"] .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

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

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

@media (max-width: 576px) {
    html[dir="rtl"] .btn-toolbar .btn,
    html[dir="rtl"] .btn-group .btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center;
    }

    html[dir="rtl"] .table-responsive td:before {
        left: auto;
        right: 6px;
        text-align: right;
    }

    html[dir="rtl"] .table-responsive td {
        padding-right: 50% !important;
        padding-left: 0.5rem !important;
        text-align: right;
    }
}

/* ==========================================================================
   PRINT RTL SUPPORT
   ========================================================================== */

@media print {
    html[dir="rtl"] .container,
    html[dir="rtl"] .container-fluid {
        direction: rtl;
        text-align: right;
    }
}

/* ==========================================================================
   MIXED CONTENT SUPPORT
   ========================================================================== */

/* Numbers and English text in Arabic context */
html[dir="rtl"] .number,
html[dir="rtl"] .price-amount,
html[dir="rtl"] .english-text {
    direction: ltr;
    display: inline-block;
}

/* Email addresses and URLs */
html[dir="rtl"] .email,
html[dir="rtl"] .url,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: left;
}

/* Code blocks and technical content */
html[dir="rtl"] pre,
html[dir="rtl"] code,
html[dir="rtl"] .code {
    direction: ltr;
    text-align: left;
}