/* ==========================================================================
   RTL (Right-to-Left) Styles for Arabic Language
   The Box Concept Theme
   ========================================================================== */

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

/* ==========================================================================
   Header RTL
   ========================================================================== */
[dir="rtl"] .header__inner {
    flex-direction: row-reverse;
}

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

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

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

[dir="rtl"] .nav__chevron {
    margin-right: 6px;
    margin-left: 0;
}

[dir="rtl"] .nav__dropdown {
    left: auto;
    right: 50%;
    transform: translateX(50%) translateY(10px);
}

[dir="rtl"] .nav__item--has-dropdown:hover .nav__dropdown,
[dir="rtl"] .nav__dropdown:focus-within {
    transform: translateX(50%) translateY(0);
}

[dir="rtl"] .nav__dropdown-link:hover {
    padding-left: var(--space-4);
    padding-right: calc(var(--space-4) + 4px);
}

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

/* ==========================================================================
   Mobile Menu RTL
   ========================================================================== */
[dir="rtl"] .mobile-menu__panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

[dir="rtl"] .mobile-menu.is-active .mobile-menu__panel {
    transform: translateX(0);
}

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

[dir="rtl"] .mobile-menu__toggle svg {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .mobile-menu__submenu {
    padding-right: var(--space-4);
    padding-left: 0;
}

/* ==========================================================================
   Command Bar RTL
   ========================================================================== */
[dir="rtl"] .command-bar {
    flex-direction: row-reverse;
            justify-content: space-evenly;
}

/* ==========================================================================
   Typography RTL
   ========================================================================== */
[dir="rtl"] body {
    font-family: 'Noto Kufi Arabic', 'Cairo', system-ui, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Noto Kufi Arabic', 'Cairo', system-ui, sans-serif;
}

/* ==========================================================================
   Hero RTL
   ========================================================================== */
[dir="rtl"] .hero__content {
    text-align: right;
}

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

/* ==========================================================================
   Cards & Grid RTL
   ========================================================================== */
[dir="rtl"] .card__icon {
    margin-left: var(--space-4);
    margin-right: 0;
}

[dir="rtl"] .card__arrow {
    transform: rotate(180deg);
}

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

/* ==========================================================================
   Buttons RTL
   ========================================================================== */
[dir="rtl"] .btn svg {
    margin-right: var(--space-2);
    margin-left: 0;
}

[dir="rtl"] .btn--icon-right svg {
    margin-right: 0;
    margin-left: var(--space-2);
}

/* ==========================================================================
   Forms RTL
   ========================================================================== */
[dir="rtl"] .form-group label {
    text-align: right;
}

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

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

/* ==========================================================================
   Footer RTL
   ========================================================================== */
[dir="rtl"] .footer__grid {
    direction: rtl;
}

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

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

/* ==========================================================================
   Lists RTL
   ========================================================================== */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: var(--space-4);
    padding-left: 0;
}

[dir="rtl"] .check-list li::before {
    right: 0;
    left: auto;
}

/* ==========================================================================
   Misc RTL
   ========================================================================== */
[dir="rtl"] .breadcrumb__separator {
    transform: rotate(180deg);
}

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

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

/* Arrows and Icons that need flipping */
[dir="rtl"] .icon-arrow-right {
    transform: scaleX(-1);
}

[dir="rtl"] .nav__dropdown-cta::after {
    content: '←';
}

/* FAQ Accordion RTL */
[dir="rtl"] .faq__question {
    flex-direction: row-reverse;
}

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