/*
 * Right-to-left reading (Arabic).
 * direction: rtl already turns every row, grid and list around. These rules turn around only what the main stylesheet
 * writes with a fixed left or right. Loaded only on pages in a right-to-left language.
 */

html[dir="rtl"] body {
    font-family: var(--font-sans), "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", Arial, sans-serif;
    letter-spacing: 0;
}

/* Arabic letters join: they are never spaced out, and never forced into capitals. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .cap, html[dir="rtl"] .eyebrow, html[dir="rtl"] .btn {
    letter-spacing: 0;
    text-transform: none;
}

/* header */
html[dir="rtl"] .skip { left: auto; right: 16px; }
html[dir="rtl"] .hd-r { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .dd-panel { right: auto; left: 0; }
html[dir="rtl"] .dd-item { text-align: right; }
html[dir="rtl"] .dd-item .ic { margin-left: 0; margin-right: auto; }
@media (width <= 760px) {
    html[dir="rtl"] .dd-panel { left: var(--gut); right: var(--gut); }
}

/* the search form */
html[dir="rtl"] .fld { text-align: right; }
html[dir="rtl"] .fld-x { margin-right: 0; margin-left: -12px; }
html[dir="rtl"] .dtp .fld-i::-webkit-date-and-time-value { text-align: right; }
html[dir="rtl"] .fld-err { padding-left: 0; padding-right: 2px; }
html[dir="rtl"] .pop { left: auto; right: 0; }
html[dir="rtl"] select.inp { background-position: left 14px center; padding-left: 44px; padding-right: 14px; }

/* the hero on the first page */
html[dir="rtl"] .hero-y { padding: 46px max(var(--gut), calc((100cqw - var(--wrap)) / 2)) 50px 40px; }
html[dir="rtl"] .hero-car { left: auto; right: 56%; transform: translate(29%); }
@media (width <= 1250px) {
    html[dir="rtl"] .hero-car { transform: translate(3%); }
}
@media (width <= 1060px) {
    html[dir="rtl"] .hero-y { padding: 20px max(var(--gut), calc((100cqw - var(--wrap)) / 2)) 104px var(--gut); }
    html[dir="rtl"] .hero-car { right: auto; left: 24px; transform: none; }
}
@media (width <= 760px) {
    html[dir="rtl"] .hero-y { padding: 20px 16px 84px; }
    html[dir="rtl"] .hero-car { left: 14px; right: auto; }
}

/* prices and totals sit at the end of their line */
html[dir="rtl"] .rt .price,
html[dir="rtl"] .sum dd,
html[dir="rtl"] .sum-total .price,
html[dir="rtl"] .sum-toggle .price,
html[dir="rtl"] .opt-p { text-align: left; }
html[dir="rtl"] .sum-toggle { text-align: right; }

/* questions and answers, text pages */
html[dir="rtl"] .qa-a { padding: 0 0 18px 40px; }
@media (width <= 760px) {
    html[dir="rtl"] .qa-a { padding-right: 0; padding-left: 8px; }
}
html[dir="rtl"] .prose ul { padding-left: 0; padding-right: 22px; }

/* the offer pop-up */
html[dir="rtl"] .offer { right: auto; left: 24px; }
html[dir="rtl"] .offer h2 { padding-right: 0; padding-left: 34px; }
html[dir="rtl"] .offer-x { right: auto; left: 6px; }
@media (width <= 760px) {
    html[dir="rtl"] .offer { left: var(--gut); right: var(--gut); }
    html[dir="rtl"] .offer h2 { padding-right: 0; padding-left: 40px; }
}

/* arrows and chevrons that point onward point the other way */
html[dir="rtl"] .btn .ic-arrow,
html[dir="rtl"] .link .ic-arrow,
html[dir="rtl"] .ic-chevron-right { transform: scaleX(-1); }

/* phone numbers, e-mail addresses, references and prices keep their own left-to-right order inside right-to-left text */
html[dir="rtl"] .num,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; }