/* Right-to-left overrides (Arabic). Loaded by the layout after every other stylesheet, and only
   on pages whose language has dir "rtl" (config moorava.locales), so left-to-right pages never
   see these rules. Margins, paddings, offsets, borders and text alignment are already logical
   properties in the main stylesheets (margin-inline-start etc.) and flip by themselves; what is
   left here is what logical properties cannot express: transforms, background positions,
   directional glyphs and third-party widgets. */

/* --- Directional arrows and icons point the reading way ------------------------------- */
[dir="rtl"] .dir-arrow,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .product-gallery-carousel-nav svg {
    display: inline-block;
    transform: scaleX(-1);
}

[dir="rtl"] .link-cta::after {
    content: "\2190"; /* left arrow */
}

/* hover nudges move toward the end of the line, which is now the left */
[dir="rtl"] .link-cta:hover::after {
    transform: translateX(-2px);
}

[dir="rtl"] .destination-link:hover {
    transform: translateX(-4px);
}

[dir="rtl"] .destination-card:hover .destination-link {
    transform: translateX(-5px);
}

[dir="rtl"] .best-of-card:hover .link-cta {
    transform: translateX(-3px);
}

[dir="rtl"] .door-card:hover .door-card__body .link-cta {
    transform: translateX(-4px);
}

/* --- Phone menu slides in from the left (the toggle sits on the right) --------------- */
@media (max-width: 768px) {
    [dir="rtl"] .mobile-nav {
        transform: translateX(-100%);
    }

    [dir="rtl"] .mobile-nav.mobile-open {
        transform: translateX(0);
    }
}

/* --- Select arrows on the start side ------------------------------------------------- */
[dir="rtl"] .currency-select {
    background-position: left 0.7rem center;
}

[dir="rtl"] .top-bar .currency-switcher .currency-select {
    background-position: left 0 center;
}

/* --- Booking form toggle (free transport): the knob travels to the left ---------------- */
[dir="rtl"] #free_transport:checked ~ .transport-toggle-slider,
[dir="rtl"] .detail-page .booking-widget .transport-toggle-input:checked + .transport-toggle-slider {
    transform: translateX(-25px);
}

/* --- Phone, e-mail and web addresses are written left to right ------------------------ */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* "1 / 9" on the photo reads 1 of 9 from the right; the phone numbers in the header, menu,
   footer and contact page carry dir="ltr" in the markup. */

/* intl-tel-input puts the flag on the right in rtl pages ([dir=rtl] rules of its own CSS and the
   logical properties in activity-detail.css); the number itself stays left to right, so its
   padding is set physically: room for the flag and dial code on the right. */
[dir="rtl"] .detail-page #phone {
    padding-left: 0.75rem !important;
    padding-right: 90px !important;
}

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

/* --- flatpickr: the month grid runs right to left (its CSS forces ltr), previous month on
   the right, next on the left, arrows mirrored ------------------------------------------ */
[dir="rtl"] .flatpickr-calendar {
    direction: rtl;
}

[dir="rtl"] .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
    left: auto;
    right: 0;
}

[dir="rtl"] .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right: auto;
    left: 0;
}

[dir="rtl"] .flatpickr-months .flatpickr-prev-month svg,
[dir="rtl"] .flatpickr-months .flatpickr-next-month svg {
    transform: scaleX(-1);
}

/* month and year fields of the calendar header: the site's 48px input shell clips them in the
   34px header (Arabic letters are taller than Latin ones); the select's text sits on the right */
[dir="rtl"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[dir="rtl"] .flatpickr-current-month input.cur-year {
    min-height: 0;
    height: auto;
    line-height: 1.4;
    padding-block: 0;
}

[dir="rtl"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    padding-inline: 0.5ch 0;
}