/* ==========================================================================
   Right-to-left overrides (#2369)
   ==========================================================================

   Loaded only when the active locale is RTL — today that means Arabic. Both
   layouts also swap Bootstrap's LTR build for bootstrap.rtl.min.css, which
   already flips every `ms-*` / `ps-*` / `text-start` utility, so nothing here
   needs to repeat that work.

   What is left is this site's own bespoke chrome, most of which was written
   with physical `left` / `right` — a lot of it inline, hence the `!important`
   on rules that have to beat an inline style. Rules whose inline source could
   be converted to a logical property (`inset-inline-start`) were converted at
   the source instead and are absent here.

   Scoped on [dir="rtl"] rather than :lang(ar) so adding a second RTL locale
   needs no change to this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Typography

   Quicksand and Nunito Sans carry no Arabic glyphs. Cairo is loaded by the
   layouts for RTL locales only (config/locales.php `font`), and is put in
   front of every family the site names so Arabic text renders in one
   consistent face instead of whatever the device falls back to per element.
   The Latin faces stay in the stack for the brand words and prices that are
   deliberately left in Latin script.
   -------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] [style*="Quicksand"],
[dir="rtl"] [style*="Nunito Sans"] {
    font-family: 'Cairo', 'Quicksand', 'Nunito Sans', system-ui, sans-serif !important;
}

/* Arabic ascenders/descenders sit taller than Latin at the same size; a
   little extra leading keeps headings and pill labels from crowding. */
[dir="rtl"] {
    line-height: 1.7;
}

/* Prices, phone numbers and the MVR currency tag stay in Latin script and
   read left-to-right inside an RTL paragraph. `unicode-bidi: isolate` stops
   an adjacent Arabic word from dragging the digits to the wrong side. */
[dir="rtl"] .lzz-ds-text,
[dir="rtl"] .lzz-num,
[dir="rtl"] .lzz-tab-nums,
[dir="rtl"] .lzz-event-price,
[dir="rtl"] .hero-variants__price,
[dir="rtl"] .lz-phone,
[dir="rtl"] .lz-hours dd {
    direction: ltr;
    unicode-bidi: isolate;
}
/* …but the RTL row still wants them on the reading-start side. */
[dir="rtl"] .lz-hours dd {
    text-align: right;
}


/* ==========================================================================
   Marketing home — resources/views/layout/marketing.blade.php + main/
   ========================================================================== */

/* Floating hamburger + Make Reservation cluster, bottom-start corner. */
[dir="rtl"] .lz-bottombar {
    left: auto;
    right: calc(20px + env(safe-area-inset-right));
}

/* The drawer hangs off the hamburger, so it follows it across. */
[dir="rtl"] .lz-drawer-panel {
    left: auto;
    right: calc(20px + env(safe-area-inset-right));
    transform-origin: bottom right;
}

@media (max-width: 480px) {
    [dir="rtl"] .lz-bottombar {
        left: auto;
        right: calc(33px + env(safe-area-inset-right));
    }
    [dir="rtl"] .lz-drawer-panel {
        left: auto;
        right: calc(14px + env(safe-area-inset-right));
    }
}

/* Hero copy is start-aligned; align-items: flex-start already flips with
   direction, but the frosted High Tea panel is pinned with a physical left. */
[dir="rtl"] .hero-slide--tea .hero-slide__content {
    left: auto;
    right: max(5vw, 48px);
}
[dir="rtl"] .hero-eyebrow::after {
    left: auto;
    right: 0;
}

/* Map action buttons sit in the map's bottom-start corner. */
[dir="rtl"] .lz-contact__actions {
    left: auto;
    right: 14px;
}

/* Back-to-top button, bottom-end corner (main.css pins it right). */
[dir="rtl"] .scroll-top {
    right: auto;
    left: 15px;
}

/* Lightbox: prev/next swap sides, and their chevrons have to swap with them
   or "next" would point backwards. */
[dir="rtl"] .lz-lightbox__nav--prev { left: auto; right: 16px; }
[dir="rtl"] .lz-lightbox__nav--next { right: auto; left: 16px; }
[dir="rtl"] .lz-lightbox__nav iconify-icon { transform: scaleX(-1); }

@media (max-width: 767px) {
    [dir="rtl"] .lz-lightbox__nav--prev { left: auto; right: 8px; }
    [dir="rtl"] .lz-lightbox__nav--next { right: auto; left: 8px; }
}

/* Reviews carousel arrows, same reasoning as the lightbox. */
[dir="rtl"] .reviews-nav iconify-icon { transform: scaleX(-1); }

/* Forward-pointing arrows on calls to action. "Order now →" has to become
   "← اطلب الآن": the glyph means "onward", and onward is leftwards here. */
[dir="rtl"] .hero-cta iconify-icon,
[dir="rtl"] .reviews-cta iconify-icon,
[dir="rtl"] .lz-notice__cta iconify-icon { transform: scaleX(-1); }


/* ==========================================================================
   Language switcher
   ========================================================================== */

[dir="rtl"] .lz-lang-caret,
[dir="rtl"] .lzz-lang-caret {
    margin-left: 0;
    margin-right: auto;
}


/* ==========================================================================
   Menu app — resources/views/livewire/ + layout/app.blade.php
   ========================================================================== */

/* Add-to-cart toast. Inline-styled, so every property it sets has to be
   beaten here: it is anchored to the cart button, which is now on the left.

   Matched on .lzz-toast, not #toast: the event order form calls its own
   (viewport-centred) toast id="toast" too, and it loads this same stylesheet —
   an id selector here dragged that one off the left edge of the screen. */
[dir="rtl"] .lzz-toast {
    right: auto !important;
    left: 68px !important;
    transform-origin: center left !important;
}
/* The enter/exit transform is written by showToast(); the JS reads
   --lzz-toast-off so the resting-to-hidden slide runs toward the cart. */
[dir="rtl"] { --lzz-toast-off: -40px; }

/* Cart-count badge on the round cart buttons. */
[dir="rtl"] .lzz-cart-count {
    right: auto !important;
    left: -5px !important;
}

/* Sticky header back arrow — the grid column already moved to the right, so
   the glyph has to turn round with it. */
[dir="rtl"] #stickyHeader .fa-arrow-left { transform: scaleX(-1); }

/* Menu item cards: the whole card is a flex row, which flips on its own, but
   the text column's alignment is inline. */
[dir="rtl"] .menu-btn-cls {
    text-align: right !important;
}

/* Detail modal's previous / next footer. The grid columns reverse with the
   direction, so Previous lands on the right — its inner alignment and its
   chevron have to follow. */
[dir="rtl"] #prevItem { text-align: right !important; align-items: flex-end !important; }
[dir="rtl"] #nextItem { text-align: left !important;  align-items: flex-start !important; }
[dir="rtl"] .lzz-detail-nav-caps .fa-chevron-left,
[dir="rtl"] .lzz-detail-nav-caps .fa-chevron-right { transform: scaleX(-1); }

/* Jump-to-summary FAB — pinned to the sheet's end edge. */
[dir="rtl"] .lzz-jump-fab {
    right: auto;
    left: max(16px, calc(50% - 234px));
}

/* Dine In / Takeaway segmented control. The sliding pill is an absolutely
   positioned element with a physical `left`, and its Alpine transform is
   direction-aware via window.lzzRtl (see menu-slider.blade.php). */
[dir="rtl"] .lzz-ot-indicator {
    left: auto !important;
    right: 4px !important;
}

/* The category / subcategory pill rails keep their own indicator anchored to
   the content box's left edge in both directions — the JS positions it in
   content coordinates, which are direction-agnostic. Nothing to flip there.

   The white-text overlay does need help. It is an overflow:hidden window
   sized to the indicator, with a duplicate pill row inside that counter-
   translates to stay registered with the real row underneath. That row is a
   normal in-flow flex child of a zero-width box: in LTR it overflows to the
   right and the counter-translate lands it correctly, but in RTL it overflows
   to the *left*, so the window shows a different slice of it and the active
   pill renders blank. Taking it out of flow and pinning it to the window's
   left edge at its natural width makes the geometry identical in both
   directions, which is what the counter-translate already assumes. */
[dir="rtl"] .category-overlay-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
}

/* ==========================================================================
   Event order form — /setmenu (layout/setmenuorder.blade.php)
   ========================================================================== */

/* Stepper connector. The two offsets are a matched pair spanning the gap
   between circles, so they swap together rather than individually. */
[dir="rtl"] .step-item:not(:last-child)::after {
    left: calc(-50% + 20px);
    right: calc(50% + 20px);
}

/* Card headings clear their icon on the reading-start side. */
[dir="rtl"] .card-sub {
    padding-left: 0;
    padding-right: 42px;
}

/* Corner-pinned controls: prefill (details card), badge and tick (plan card),
   the tab error dot and the item-detail close button. */
[dir="rtl"] .lz-prefill-btn { right: auto; left: 16px; }
[dir="rtl"] .plan-badge     { right: auto; left: 14px; }
[dir="rtl"] .lz-tab.is-errored::after { right: auto; left: 4px; }
[dir="rtl"] .lz-modal-close { right: auto; left: 14px; }

/* The plan card's radio sits in a gutter the card's own padding reserves, so
   the two have to move together — flipping only the radio parks it on top of
   the price. */
[dir="rtl"] .plan-card  { padding: 18px 46px 18px 18px; }
[dir="rtl"] .plan-check { left: auto; right: 14px; }

/* Summary rows: label starts, value ends. */
[dir="rtl"] .summary-row .value { text-align: left; }

/* Thumbnail gutter in the High Tea "what's included" list, and the photo
   toggle that floats to the end of its header row. */
[dir="rtl"] .lz-show-images .lz-inc-thumb { margin-right: 0; margin-left: 14px; }
[dir="rtl"] .lz-img-toggle { margin-left: 0; margin-right: auto; }

/* Course nav chevrons point the way you travel, which is now the other way. */
[dir="rtl"] .lz-nav-prev svg,
[dir="rtl"] .lz-nav-next svg,
[dir="rtl"] .btn svg,
[dir="rtl"] .plan-group-chevron ~ svg { transform: scaleX(-1); }
/* …except the accordion chevron, which points down in both directions. */
[dir="rtl"] .plan-group-chevron { transform: none; }
[dir="rtl"] .plan-group.is-open .plan-group-chevron { transform: rotate(180deg); }

/* Dish names and their descriptions stay in the source language where a
   translation is missing, so they carry dir="auto" and set their own
   direction; the row around them still reads right-to-left. */
[dir="rtl"] .lz-item-body,
[dir="rtl"] .lz-inc-item { text-align: right; }