/**
 * RTL Enhanced Styles
 * Uses CSS Logical Properties for better bidirectional support
 */

/* ==========================================================================
   1. CSS Logical Properties - Base
   ========================================================================== */

/* Text alignment */
.text-start { text-align: start; }
.text-end { text-align: end; }

/* Margins using logical properties */
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.ms-0 { margin-inline-start: 0; }
.me-0 { margin-inline-end: 0; }
.ms-1 { margin-inline-start: 0.25rem; }
.me-1 { margin-inline-end: 0.25rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.me-2 { margin-inline-end: 0.5rem; }
.ms-3 { margin-inline-start: 1rem; }
.me-3 { margin-inline-end: 1rem; }
.ms-4 { margin-inline-start: 1.5rem; }
.me-4 { margin-inline-end: 1.5rem; }
.ms-5 { margin-inline-start: 3rem; }
.me-5 { margin-inline-end: 3rem; }

/* Padding using logical properties */
.ps-0 { padding-inline-start: 0; }
.pe-0 { padding-inline-end: 0; }
.ps-1 { padding-inline-start: 0.25rem; }
.pe-1 { padding-inline-end: 0.25rem; }
.ps-2 { padding-inline-start: 0.5rem; }
.pe-2 { padding-inline-end: 0.5rem; }
.ps-3 { padding-inline-start: 1rem; }
.pe-3 { padding-inline-end: 1rem; }
.ps-4 { padding-inline-start: 1.5rem; }
.pe-4 { padding-inline-end: 1.5rem; }
.ps-5 { padding-inline-start: 3rem; }
.pe-5 { padding-inline-end: 3rem; }

/* ==========================================================================
   2. RTL Mode Specific Overrides
   ========================================================================== */
html[dir="rtl"],
.rtl-mode {
    /* Font adjustments for Arabic */
    font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* Increase line height for Arabic readability */
    line-height: 1.8;
}

/* ==========================================================================
   3. Navigation RTL
   ========================================================================== */
html[dir="rtl"] .main-menu__list {
    flex-direction: row-reverse;
}

html[dir="rtl"] .main-menu__logo {
    margin-inline-end: auto;
    margin-inline-start: 0;
}

html[dir="rtl"] .main-menu__right {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Dropdown positioning */
html[dir="rtl"] .dropdown ul {
    left: auto;
    right: 0;
    text-align: right;
}

html[dir="rtl"] .dropdown ul ul {
    left: auto;
    right: 100%;
}

/* Dropdown arrow direction */
html[dir="rtl"] .dropdown > a::after {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

/* ==========================================================================
   4. Mobile Navigation RTL
   ========================================================================== */
html[dir="rtl"] .mobile-nav__wrapper {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mobile-nav__content {
    transform: translateX(100%);
    right: 0;
    left: auto;
}

html[dir="rtl"] .mobile-nav__wrapper.active .mobile-nav__content {
    transform: translateX(0);
}

html[dir="rtl"] .mobile-nav__close {
    left: auto;
    right: 1rem;
}

/* ==========================================================================
   5. Cards & Components RTL
   ========================================================================== */
html[dir="rtl"] .service-one__item,
html[dir="rtl"] .modern-card {
    text-align: right;
}

html[dir="rtl"] .service-one__icon {
    margin-inline-end: 0;
    margin-inline-start: 0;
}

/* Icon positioning */
html[dir="rtl"] .icon-caret-right::before {
    content: "\f0d9"; /* fa-caret-left */
}

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

/* List items with icons */
html[dir="rtl"] .main-footer__info-list li span,
html[dir="rtl"] .list-icon li::before {
    margin-inline-end: 0.75rem;
    margin-inline-start: 0;
}

/* ==========================================================================
   6. Forms RTL
   ========================================================================== */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
    /* Keep LTR for these input types */
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .form-check {
    padding-inline-start: 1.5rem;
    padding-inline-end: 0;
}

html[dir="rtl"] .form-check-input {
    float: right;
    margin-inline-start: 0;
    margin-inline-end: -1.5rem;
}

/* Radio buttons */
html[dir="rtl"] .radio-group label {
    padding-inline-start: 0;
    padding-inline-end: 2rem;
}

html[dir="rtl"] .radio-group label::before,
html[dir="rtl"] .radio-group label::after {
    left: auto;
    right: 0;
}

/* ==========================================================================
   7. Footer RTL
   ========================================================================== */
html[dir="rtl"] .main-footer {
    text-align: right;
}

html[dir="rtl"] .main-footer__social {
    justify-content: flex-start;
}

html[dir="rtl"] .main-footer__navmenu ul {
    padding-inline-start: 0;
}

/* ==========================================================================
   8. Hero/Banner RTL
   ========================================================================== */
html[dir="rtl"] .hero-banner__content,
html[dir="rtl"] .slider__content {
    text-align: right;
}

html[dir="rtl"] .hero-banner__buttons {
    justify-content: flex-start;
}

/* ==========================================================================
   9. Breadcrumbs RTL
   ========================================================================== */
html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
}

/* ==========================================================================
   10. Tables RTL
   ========================================================================== */
html[dir="rtl"] table {
    text-align: right;
}

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

/* ==========================================================================
   11. Alerts & Messages RTL
   ========================================================================== */
html[dir="rtl"] .alert {
    text-align: right;
}

html[dir="rtl"] .alert-dismissible {
    padding-inline-end: 3rem;
    padding-inline-start: 1rem;
}

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

/* ==========================================================================
   12. Pagination RTL
   ========================================================================== */
html[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

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

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

/* ==========================================================================
   13. Scroll to Top RTL
   ========================================================================== */
html[dir="rtl"] .scroll-top {
    left: 30px;
    right: auto;
}

/* ==========================================================================
   14. WhatsApp/Contact Button RTL
   ========================================================================== */
html[dir="rtl"] .about-one__thumb__box {
    left: auto;
    right: 30px;
    text-align: right;
}

/* ==========================================================================
   15. Search Popup RTL
   ========================================================================== */
html[dir="rtl"] .search-popup__form input {
    padding-inline-start: 1rem;
    padding-inline-end: 4rem;
}

html[dir="rtl"] .search-popup__form button {
    left: auto;
    right: 0;
}

/* ==========================================================================
   16. Carousel/Slider RTL
   ========================================================================== */
html[dir="rtl"] .owl-carousel {
    direction: ltr;
}

html[dir="rtl"] .owl-carousel .owl-item {
    direction: rtl;
}

html[dir="rtl"] .owl-nav .owl-prev {
    left: auto;
    right: 0;
}

html[dir="rtl"] .owl-nav .owl-next {
    right: auto;
    left: 0;
}

/* ==========================================================================
   17. Floating Labels RTL
   ========================================================================== */
html[dir="rtl"] .form-floating > label {
    left: auto;
    right: 0;
    padding-inline-start: 0;
    padding-inline-end: 0.75rem;
}

/* ==========================================================================
   18. Badges & Labels RTL
   ========================================================================== */
html[dir="rtl"] .badge {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* ==========================================================================
   19. Blockquotes RTL
   ========================================================================== */
html[dir="rtl"] blockquote {
    border-inline-start: 4px solid var(--primary-color, #ff5528);
    border-inline-end: 0;
    padding-inline-start: 1.5rem;
    padding-inline-end: 0;
}

/* ==========================================================================
   20. Print RTL
   ========================================================================== */
@media print {
    html[dir="rtl"] {
        direction: rtl;
    }
}