/*============================================================================================*/
/* Right-to-left corrections                                                                  */
/*============================================================================================*/
/*
   Loaded only when the page is rendered in a right-to-left language — see
   `templates/includes/page_head.html`. The theme was bought as a left-to-right theme and
   ships no RTL stylesheet of its own.

   `dir="rtl"` on <html> already does most of the work: text runs the other way, and flexbox
   and floats mirror themselves. What it cannot touch is any rule that names a *physical*
   side. `left: -25%` stays on the left whatever the direction, so anything positioned that
   way ends up on the wrong side of its box — or off the edge of the page.

   So every rule here is a physical-side rule from `style.css` restated for the other side.
   Each one names the file and line it answers, because the only way to know this file is
   still needed is to be able to find what it is correcting.

   The long-term fix is logical properties — `inset-inline-start` instead of `left` — but
   those belong in the theme's own stylesheet, and this theme is one we bought and will be
   handed a new version of.
*/

/*-------- Hero search: the calendar icon ----------------------------------------------------
   style.css:1934 pins the icon to `right: 4px` inside a relatively positioned form group.
   In RTL the field's text starts on the right, so the icon sat on top of the placeholder —
   "Check in / Check out" with a calendar through it.
*/
.booking_form .form-group i {
	right: auto;
	left: 4px;
	padding-right: 0;
	padding-left: 15px;
}

/*-------- Header: the dropdown ---------------------------------------------------------------
   style.css:1344 opens a submenu at `left: 0` of its parent item and left-aligns its text.
   Mirrored, it opens from the item's right edge and reads right-to-left.
*/
.submenu_version .main-menu ul ul {
	left: auto;
	right: 0;
	text-align: right;
}

/*-------- About: the overlapping photograph --------------------------------------------------
   style.css:3877 hangs the front picture off the left of its wrapper with `left: -25%`. In
   RTL the wrapper is on the other side, so the picture hung off the page instead: 37px of
   horizontal overflow and a scrollbar along the bottom of every page that uses this band.
*/
.parallax_wrapper .img_over {
	left: auto;
	right: -25%;
}

@media (max-width: 991px) {
	.parallax_wrapper .img_over {
		right: 0;
	}
}

/*-------- Mixed-language text ----------------------------------------------------------------
   An Arabic page still carries English in it: a band nobody has translated yet, a brand name,
   a room type. In an RTL paragraph a run of Latin text is laid out right-to-left as a whole,
   so anything weakly-directional at its edges moves to the other end — the hero's
   "10 Minutes Walk to Al-Masjid an-Nabawi" rendered as "Minutes Walk to Al-Masjid an-Nabawi 10".

   `plaintext` makes each paragraph take its direction from its own first strong character,
   which is the rule `dir="auto"` applies. An Arabic paragraph stays right-to-left; an English
   one reads left-to-right, wherever it sits. Nothing is reordered that was not already wrong.
*/
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main small,
main li,
main figcaption,
main blockquote {
	unicode-bidi: plaintext;
}

/*-------- Header: the spacing between menu items -----------------------------------------
   style.css:668 spaces the nav with `margin-left: 25px` on every item and zero on the first.
   `margin-left` is the *leading* side only in a left-to-right page. Mirrored, all of it lands
   on the trailing side instead: the gap between the first two items collapsed to the 4px of
   collapsed whitespace between the tags, while 25px dangled off the end of the list.

   Measured before: gaps of 4, 29, 29, 29, 29, 29 against English's even 29 throughout.
*/
header nav ul li {
	margin-left: 0;
	margin-right: 25px;
}

header nav ul li:first-child {
	margin-right: 0;
}

/*-------- Header: where the menu sits in its column ---------------------------------------
   style.css:666 packs the nav with `text-align: right`, which in a left-to-right page means
   "away from the logo" — the logo at one end, the menu at the other, the slack in between.

   Mirrored, the column moves to the other side but `right` does not, so the menu packed
   *against* the logo and left all the slack at the outer edge. The two headers were not each
   other's reflection, which is what makes one of them look wrong without it being obvious why.
*/
header nav ul {
	text-align: left;
}

/*-------- Hero search: the fields' own padding ---------------------------------------------
   style.css:1955 puts `padding-left: 15px` on the booking form's inputs, over Bootstrap's own
   `.form-control { padding: .375rem .75rem }`. Left is the leading side only in a left-to-right
   page: mirrored, the text started 12px from the edge instead of 15px and the roomier 15px sat
   behind it, so the placeholder sat visibly tighter to the edge than its English counterpart.
*/
.booking_form input {
	/* Bootstrap's own value, back on the trailing side where it belongs. */
	padding-left: 0.75rem;
	padding-right: 15px;
}

/*-------- Hero search: the guest counters --------------------------------------------------
   style.css:1982 and 2013 place all three pieces by physical side — the label at `left: 15px`,
   the plus at `right: 15px`, the minus at `right: 55px`. None of them flips, so the whole
   control came out back to front: reading from the leading edge, English gives label, minus,
   plus, and Arabic gave plus, minus, label.
*/
.qty-buttons label {
	left: auto;
	right: 15px;
}

.qty-buttons input.qtyplus {
	right: auto;
	left: 15px;
}

.qty-buttons input.qtyminus {
	right: auto;
	left: 55px;
}

/*-------- Hero search: the number in the guest counters -------------------------------------
   style.css:1992 reserves the label's room with `padding-left: 80px` and pins the number with
   `text-align: left`. Both name the leading side of a left-to-right page. Mirrored, the 80px
   gap opened on the side the label had just left, and the number sat against the far edge with
   the label on top of it.
*/
.qty-buttons input.qty {
	text-align: right;
	/* Bootstrap's own value, back on the trailing side. */
	padding-left: 0.75rem;
	padding-right: 80px;
}

/*-------- The booking form's counters --------------------------------------------------------
   style.css:2024-2034. The room page's form is the same control under `.version_2`: no label,
   a placeholder inside the field, and the buttons closer in. It restates all three positions
   with one more class than the base rules, so it outranks the corrections above whatever the
   file order — without these it would have kept `right: 5px` *and* picked up `left: 15px`,
   which is worse than leaving it alone.
*/
.qty-buttons.version_2 input.qty {
	padding-left: 0.75rem;
	padding-right: 15px;
}

.qty-buttons.version_2 input.qtyplus {
	right: auto;
	left: 5px;
}

.qty-buttons.version_2 input.qtyminus {
	right: auto;
	left: 40px;
}

/*-------- Hero search: the divider beside a focused field ------------------------------------
   style.css:1916 marks the field you are in by drawing the rule that separates it from the
   *next* one — `border-right`, because the next field is to the right. Mirrored, the next field
   is to the left, so the line was drawn on the outside of the one before it instead. The mobile
   layout stacks the fields and has no divider at all, so that override is mirrored too.
*/
.booking_form input:focus {
	border-right: 0;
	border-left: 1px solid #d9e1e6;
}

@media (max-width: 991px) {
	.booking_form input:focus {
		border-left: none;
	}
}

/*-------- Hero search: the Search button -----------------------------------------------------
   style.css:1963 gives the button `width: 100%` and `margin-right: 5px`. In English that margin
   does nothing at all: the button already fills its column, and the 5px hangs off the end of the
   last one where there is nothing to push. The gap you see between the button and the edge of
   the widget is the form's own `padding: 5px` (style.css:1883), not this.

   Mirrored, `margin-right` becomes the *start* side of the inline box, so the 5px stopped being
   slack at the end and started pushing: the button moved 5px out of its column and sat exactly
   on the widget's padding, flush against the white edge with no gap left at all.

   Restated for the other side it is inert again, exactly as it is in English, and the padding
   shows through on both.
*/
.booking_form input[type=submit] {
	margin-right: 0;
	margin-left: 5px;
}

/*-------- Footer: the newsletter's send button -----------------------------------------------
   style.css:1838 pins the button right; mirrored to the left, with the plane flipped.
*/
#newsletter button[type=submit] {
	right: auto;
	left: 5px;
}

#newsletter button[type=submit] i {
	display: inline-block;
	transform: scaleX(-1);
}

#newsletter input[type=email] {
	padding-left: 45px;
	padding-right: 15px;
}

/*-------- Text alignment: Bootstrap's start and end ---------------------------------------
   The theme loads Bootstrap's LTR build, where `text-end` is always `right`. Mirrored as
   Bootstrap's RTL build does (e.g. the restaurant's opening hours).
*/
.text-end {
	text-align: left !important;
}

.text-start {
	text-align: right !important;
}

/*-------- Phone numbers: the icon's gap -------------------------------------------------------
   style.css:1011 spaces the phone icon with `margin-right`; in RTL the text is on its left.
*/
.phone_element a i {
	margin-right: 0;
	margin-left: 15px;
}

/*-------- Carousels: Owl's own right-to-left rules -----------------------------------------
   Owl 2.3.4's stock RTL rules, missing from the theme's vendors.min.css. See js/rtl.js.
*/
.owl-carousel.owl-rtl {
	direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
	float: right;
}

/*============================================================================================*/
/* The Arabic typeface                                                                        */
/*============================================================================================*/
/*
   Not a physical-side correction like everything above it, but here for the same reason: the
   theme was bought for a language it is no longer only serving.

   Montserrat carries no Arabic at all, so every Arabic page was drawn in whatever the browser
   fell back to — a different face on every machine, none of them the theme's, and the weights
   synthesised rather than real. IBM Plex Sans Arabic is loaded in `page_head.html`, on the same
   `is_rtl()` test that loads this file.

   It covers Latin as well, which matters: an Arabic page still carries English in it — a band
   nobody has translated, a brand name, a room type — and one font across both keeps that from
   looking like two pages stitched together.

   The theme's own fallbacks stay behind it, so a page still renders as it used to if the font
   does not arrive.

   Three declarations in `style.css` have to be named, because a `font-family` set on an element
   is not reached by one set on `body`:

     115   body            "Montserrat"   — everything else inherits from here
     2037  .intro em       "Caveat"       — a handwriting face with no Arabic either
     3223  .banner .wrapper p
     3271  .menu_item p    "Lora"         — and this one is never even loaded

   What is deliberately *not* listed: `bootstrap-icons`. Every use of it in the theme is on a
   `::before` or `::after`, and bootstrap-icons.css sets it on `[class^="bi-"]::before`, so
   naming real elements here cannot reach it. A blanket `*` would turn every icon into a box.
*/
body,
input,
select,
textarea,
button,
.intro em,
.banner .wrapper p,
.menu_item p {
	font-family: "IBM Plex Sans Arabic", "Montserrat", Helvetica, sans-serif;
}