﻿/* =========================================================
   Alissa Classic Cars — RTL Styles
   ========================================================= */

html[dir="rtl"] {
    --font-display: var(--font-body-ar);
    --font-body: var(--font-body-ar);
}

html[dir="rtl"] body {
    font-family: var(--font-body);
}

/* ---------- Site Header RTL ---------- */

html[dir="rtl"] .site-header__nav {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .site-header__nav-link::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .site-header__cta {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .site-header__tools {
    margin-left: 0;
    margin-right: 28px;
}

@media (max-width: 1400px) {
    html[dir="rtl"] .site-header__tools {
        margin-right: 20px;
    }
}

@media (max-width: 1199.98px) {
    html[dir="rtl"] .site-header__tools {
        margin-right: 0;
    }
}

/* ---------- Hero Section RTL ---------- */

html[dir="rtl"] .hero-section__content {
    padding-right: 0;
    padding-left: 24px;
}

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

@media (max-width: 1199.98px) {
    html[dir="rtl"] .hero-section__content {
        padding-left: 0;
    }

    html[dir="rtl"] .hero-section__image {
        margin-right: auto;
    }
}

/* ---------- Services Hero Section RTL ---------- */

html[dir="rtl"] .services-hero__content {
    padding-right: clamp(24px, 4vw, 48px);
    padding-left: clamp(40px, 5vw, 70px);
}

html[dir="rtl"] .services-hero__image {
    object-position: 50% center;
}

@media (min-width: 992px) {
    html[dir="rtl"] .services-hero__media {
        width: 50vw;
        max-width: none;
        margin-right: 0;
        margin-left: calc(100% - 50vw);
    }
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .services-hero__content {
        padding-left: clamp(24px, 4vw, 48px);
        padding-right: clamp(24px, 4vw, 48px);
    }
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .services-hero__media {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

html[dir="rtl"] .services-packages-section__card-price-from {
    margin-right: 0;
    margin-left: 6px;
}

html[dir="rtl"] .car-grid-section__card-price-from {
    margin-right: 0;
    margin-left: 4px;
}

/* ---------- Car Single RTL ---------- */

html[dir="rtl"] .car-single-section__title,
html[dir="rtl"] .car-overview-section__title,
html[dir="rtl"] .car-enquiry-section__title,
html[dir="rtl"] .car-sale-listing__title,
html[dir="rtl"] .car-sale-listing__section-title {
    letter-spacing: 0;
}

html[dir="rtl"] .car-single-section__label,
html[dir="rtl"] .car-overview-section__eyebrow,
html[dir="rtl"] .car-enquiry-section__eyebrow,
html[dir="rtl"] .car-single-section__price-label,
html[dir="rtl"] .car-single-section__highlight-label,
html[dir="rtl"] .car-specs-section__item-label,
html[dir="rtl"] .car-grid-section__card-badge,
html[dir="rtl"] .car-single-section__gallery-badge,
html[dir="rtl"] .car-sale-listing__price-label,
html[dir="rtl"] .car-sale-listing__spec-label {
    letter-spacing: 0;
    text-transform: none;
}

html[dir="rtl"] .car-enquiry-section__select {
    background-position: left 20px center;
}

html[dir="rtl"] .services-cta-section__desc {
    max-width: none;
}

html[dir="rtl"] #about-cta-section .cta-section__desc {
    max-width: none;
}

html[dir="rtl"] #contact-cta-section .cta-section__desc {
    max-width: none;
}

html[dir="rtl"] #rentals-cta-section .cta-section__desc,
html[dir="rtl"] #marketplace-cta-section .cta-section__desc {
    max-width: none;
}

html[dir="rtl"] .marketplace-sell-section__btn {
    width: 100%;
}

@media (min-width: 992px) {
    html[dir="rtl"] .marketplace-sell-section .text-lg-end {
        text-align: left !important;
    }

    html[dir="rtl"] .marketplace-sell-section__btn {
        width: auto;
    }
}

/* ---------- Contact Section RTL ---------- */

html[dir="rtl"] .contact-form-section .wpcf7 input[type="tel"],
html[dir="rtl"] .contact-form-section #contact-phone {
    direction: rtl !important;
    text-align: right;
    unicode-bidi: isolate;
}

html[dir="rtl"] .contact-form-section__select-wrap::after {
    right: auto;
    left: 18px;
}

html[dir="rtl"] .contact-form-section__select {
    padding-right: 18px;
    padding-left: 44px;
}

html[dir="rtl"] .contact-form-section__hours-time {
    text-align: left;
}

@media (max-width: 767.98px) {
    html[dir="rtl"] .contact-form-section__hours-time {
        text-align: right;
    }
}

/* ---------- About Section RTL ---------- */

html[dir="rtl"] .about-story-section__media {
    padding: 12px 28px 28px 12px;
}

html[dir="rtl"] .about-story-section__media-accent {
    inset: 0 0 28px 28px;
}

html[dir="rtl"] .about-story-section__content {
    padding: 12px 24px 12px 0;
}

html[dir="rtl"] .about-mission-section__quote {
    padding: 36px 72px 36px 48px;
}

html[dir="rtl"] .about-mission-section__quote::before {
    left: auto;
    right: 24px;
}

html[dir="rtl"] .services-hero__title {
    max-width: 300px;
}

@media (max-width: 767.98px) {
    html[dir="rtl"] .about-story-section__content {
        padding: 0;
    }

    html[dir="rtl"] .about-mission-section__quote {
        padding: 28px 52px 28px 28px;
    }

    html[dir="rtl"] .about-mission-section__quote::before {
        right: 16px;
    }
}

html[dir="rtl"] .about-pillars-section__col:not(:last-child)::after {
    right: auto;
    left: 0;
}

/* ---------- Search Section RTL ---------- */

html[dir="rtl"] .search-section__select-wrap::after {
    right: auto;
    left: 18px;
}

html[dir="rtl"] .search-section__select {
    padding: 14px 18px 14px 44px;
}

@media (max-width: 575.98px) {
    html[dir="rtl"] .search-section__select {
        padding: 13px 16px 13px 40px;
    }
}

/* ---------- Section Filter RTL ---------- */

html[dir="rtl"] .section-filter__select-wrap::after {
    right: auto;
    left: 10px;
}

html[dir="rtl"] .section-filter__select {
    padding: 8px 10px 8px 28px;
}

@media (max-width: 575.98px) {
    html[dir="rtl"] .section-filter__select {
        padding: 10px 12px 10px 32px;
    }
}

/* ---------- Alessa Marketplace RTL ---------- */

html[dir="rtl"] .alessa-marketplace__select-wrap::after {
    right: auto;
    left: 12px;
}

html[dir="rtl"] .alessa-marketplace__select {
    padding: 10px 12px 10px 32px;
}

html[dir="rtl"] .alessa-marketplace__listing-side {
    align-items: flex-start;
    text-align: start;
}

html[dir="rtl"] .alessa-marketplace__listing-price {
    align-items: flex-start;
}

@media (max-width: 575.98px) {
    html[dir="rtl"] .alessa-marketplace__listing-side {
        align-items: center;
    }
}

/* ---------- Platform Section RTL ---------- */

html[dir="rtl"] .platform-section__col:not(:last-child)::after {
    right: auto;
    left: 0;
}

/* ---------- Explore Section RTL ---------- */

html[dir="rtl"] .explore-section__table-cell--occasion {
    justify-content: flex-start;
    text-align: right;
}

html[dir="rtl"] .explore-section__table-head-col:not(:last-child) {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

html[dir="rtl"] .explore-section__table-cell:not(:last-child) {
    border-right: none;
    border-left: 1px solid #d4e4e4;
}

/* The column separators use logical border properties, so they already
   follow the writing direction and need no RTL override here. */

/* ---------- Why Section RTL ---------- */

html[dir="rtl"] .why-section__col:not(:last-child)::after {
    right: auto;
    left: 0;
}

/* ---------- Works Section RTL ---------- */

/* The arrow glyph points one way, so it needs an explicit flip. Flex rows
   already reverse under dir="rtl" and must not be reversed again. */
html[dir="rtl"] .works-section__arrow {
    transform: scaleX(-1);
}

/* ---------- FAQ Section RTL ---------- */

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

/* ---------- CTA Section RTL ---------- */

html[dir="rtl"] .cta-section__desc {
    max-width: none;
}

/* ---------- Site Footer RTL ---------- */

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

/* ---------- Account pages RTL ---------- */

/* The radio is absolutely positioned, so its side has to follow the direction
   rather than relying on the flow. */
html[dir="rtl"] .auth-page__type input {
    right: 16px;
    left: auto;
}

html[dir="rtl"] .auth-page__type-title,
html[dir="rtl"] .auth-page__type-desc {
    padding-right: 26px;
    padding-left: 0;
}

/* ---------- Dashboard RTL ---------- */

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

html[dir="rtl"] .site-header__account-menu {
    right: -100px;
    left: auto;
}

html[dir="rtl"] .site-header__account-toggle {
    padding: 6px 6px 6px 14px;
}

html[dir="rtl"] .seller-form__select {
    background-position: left 14px center;
}

/* ---------- WooCommerce RTL ---------- */

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