/*
 * Arabic / RTL layer — loaded last in every layout.
 * ------------------------------------------------------------------
 * Covers what the Bootstrap RTL build and rtlcss cannot:
 *   1. Arabic typography
 *   2. Third-party widgets (DataTables, Select2, Flatpickr,
 *      Tempus Dominus) whose CSS ships LTR-only
 *   3. Directional icon mirroring
 */

/* ------------------------------------------------------------------
 * 1. Typography
 * ------------------------------------------------------------------
 * Cairo is loaded in the layout <head>. Latin faces stay as fallback
 * so digits, emails, and any embedded English still render well.
 */
:root {
    --font-arabic: "Cairo", "Open Sans", "Segoe UI", Tahoma, sans-serif;
}

body,
input,
select,
textarea,
button,
.btn,
.navbar,
.dropdown-menu,
.modal,
table,
/* The admin template's Bootstrap build gives headings Roboto, which has
   no Arabic glyphs: every heading fell back to whatever Arabic font the
   device had, so they matched neither the body text nor each other
   across phones. Same face as the body, for all six levels and the
   .h1–.h6 utility classes. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-arabic);
}

/* The public theme drives type through these variables — override
   them so headings and body copy both pick up Cairo. */
:root {
    --font-1: var(--font-arabic);
    --font-2: var(--font-arabic);
    --font-3: var(--font-arabic);

    /* The theme ships --multiplier: 1, giving 24px body text and 34px
       spacing units — an editorial scale that reads as oversized on a
       booking form. 0.75 brings that to 18px / 25.5px while keeping every
       proportion the theme defines, since all its sizes derive from these
       two values.

       Set here rather than in styles.rtl.css because that file is
       regenerated from styles.css by `npm run rtl`. */
    --multiplier: 0.75;
}

/* The theme's own small-screen step assumes --multiplier: 1, so it would
   otherwise scale phones back up. Keep the reduction proportional. */
@media screen and (max-width: 600px) {
    :root {
        --multiplier: 0.706;
    }
}

/* Arabic glyphs sit taller than Latin; a little extra leading keeps
   diacritics from colliding with the line above. */
body {
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
}

/* Keep Western digits and Latin-only strings rendering LTR inside
   otherwise-RTL text. Apply to any element wrapping a number,
   email, time, or reservation code. */
.ltr,
code,
kbd,
samp,
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
.verification-code {
    direction: ltr;
    unicode-bidi: embed;
    text-align: start;
}

/* ------------------------------------------------------------------
 * 2. Base RTL alignment
 * ------------------------------------------------------------------
 * dir="rtl" on <html> already gives every block the correct default
 * alignment, and the Bootstrap RTL build already flips its own logical
 * utilities (ms-*/me-*, text-sm-start/end, start-50). So do NOT set
 * text-align on body or on bare th/td — that overrides those utilities
 * and breaks centred and end-aligned content.
 *
 * Only the theme's own hardcoded physical classes need flipping.
 */

/* The public theme hardcodes these two; dir="rtl" cannot reach them. */
.text-left {
    text-align: right;
}

.text-right {
    text-align: left;
}

ol,
ul {
    margin-left: 0;
    margin-right: 1.6rem;
}

blockquote {
    border-left: none;
    border-right: 2px solid var(--color-text-dark, currentColor);
}

.u-pull-left {
    float: right;
}

.u-pull-right {
    float: left;
}

/* ------------------------------------------------------------------
 * 3. DataTables
 * ------------------------------------------------------------------ */
/* DataTables 2.x renamed every wrapper class: dataTables_filter became
   dt-search, dataTables_length became dt-length, and so on. The 1.x names
   are kept alongside so this layer survives either version. */
div.dataTables_wrapper,
div.dt-container {
    direction: rtl;
}

div.dt-container div.dt-search,
div.dt-container div.dt-paging,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_paginate {
    text-align: left;
}

div.dt-container div.dt-length,
div.dt-container div.dt-info,
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_info {
    text-align: right;
}

/* The label and the input sit on one line; without this the long Arabic
   placeholder is squeezed into whatever the label leaves over. */
div.dt-container div.dt-search label {
    margin-inline-end: 0.5em;
    white-space: nowrap;
}

div.dt-container div.dt-search input,
div.dataTables_wrapper div.dataTables_filter input {
    margin-right: 0.5em;
    margin-left: 0;
    /* The default search box is about 20 characters wide, which clips a
       descriptive Arabic placeholder. Widen it, but let it shrink on
       narrow screens rather than overflowing the toolbar. */
    min-inline-size: 26rem;
    max-inline-size: 100%;
    padding-inline: 0.6rem;
}

@media (max-width: 575.98px) {
    div.dt-container div.dt-search input,
    div.dataTables_wrapper div.dataTables_filter input {
        min-inline-size: 0;
        inline-size: 100%;
    }

    div.dt-container div.dt-search label,
    div.dataTables_wrapper div.dataTables_filter label {
        display: block;
    }
}

table.dataTable thead th,
table.dataTable thead td {
    text-align: right;
}

/* 2.x puts the sort arrows in a pseudo-element pinned to the right edge,
   which overlaps right-aligned Arabic headers. */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
    padding-inline-start: 1.8rem;
}

/* ------------------------------------------------------------------
 * 4. Select2
 * ------------------------------------------------------------------ */
.select2-container {
    direction: rtl;
    text-align: right;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 3px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px;
    text-align: right;
}

.select2-search--dropdown .select2-search__field {
    direction: rtl;
    text-align: right;
}

/* ------------------------------------------------------------------
 * 5. Native date and time inputs
 * ------------------------------------------------------------------
 * Chrome puts the calendar button at the right edge of the control and
 * keeps it there under dir="rtl". Only that sliver opens the picker, so
 * most of the field is dead space and the control feels broken.
 *
 * Stretching the indicator across the whole field makes a click
 * anywhere open the calendar, which is what people expect.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    position: relative;
    cursor: pointer;
    /* Browsers paint their own white box on these controls, which stood out
       against the theme's transparent, bottom-bordered fields. Inherit the
       surrounding surface so a date sits alongside the other inputs. */
    background-color: transparent;
    color: inherit;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
    /* Transparent rather than hidden: display:none would remove the
       button from the accessibility tree and stop keyboard activation. */
    opacity: 0;
}

/* The native indicator is now invisible, so draw a calendar glyph on the
   leading edge — where it belongs in RTL — as the visual cue. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    /* A neutral mid-grey: legible on the admin panel's dark fields and on the
       public theme's light ground, without needing a per-layout override.
       (A CSS variable cannot be interpolated into a data URI, so the colour
       is baked into the SVG.) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a827c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.6rem;
    background-position: left 1rem center;
    padding-left: 3.4rem;
}

/* Flatpickr calendars stay LTR: weekday columns read the same in both
   directions, and mirroring them confuses more than it helps. */
.flatpickr-calendar {
    direction: ltr;
    text-align: center;
}

/* ------------------------------------------------------------------
 * 5b. Home "our story" section
 * ------------------------------------------------------------------
 * The theme pairs a half-width column of text with a stacked pair of
 * images. The main image is 750x900 — portrait — so at half the grid
 * width it renders far taller than the copy beside it, and the smaller
 * image is absolutely positioned to hang below it as well. The grid row
 * takes its height from that stack, leaving a large empty band beside
 * the text.
 *
 * Capping the image height keeps the overlap the design intends while
 * bringing the two columns back to a comparable height.
 */
@media screen and (min-width: 1025px) {
    .s-about__media-big {
        max-block-size: 38rem;
        inline-size: 100%;
        object-fit: cover;
    }

    .s-about__content-media .s-about__media-small {
        max-block-size: 20rem;
        object-fit: cover;
        /* Less overhang, so the row does not extend past the text. */
        bottom: calc(var(--vspace-0_75) * -1);
    }

    /* Sit the copy alongside the images rather than floating it centred
       in a row whose height the images dictate. */
    .s-about__content-main {
        align-self: start;
        margin-top: 0;
    }

    /* The theme sets padding-bottom: 0 here and lets the overhanging image
       provide the gap to the next section. With a smaller overhang that gap
       has to be stated. */
    .s-about {
        padding-bottom: var(--vspace-2);
    }
}

/* ------------------------------------------------------------------
 * 5c. Back-to-top widget
 * ------------------------------------------------------------------
 * The theme rotates this whole widget so its label reads vertically up
 * the side of the footer, and draws the arrow pointing right so that the
 * rotation lands it pointing up.
 *
 * rtlcss flips that rotation when it generates the RTL build:
 *
 *     LTR source   rotate(-90deg)  transform-origin: left bottom
 *     RTL build    rotate(90deg)   transform-origin: right bottom
 *
 * Mirroring is right for the widget's position, but it also turns the
 * arrow from up to down. Rotating the glyph back by 180 degrees restores
 * it without touching the widget's placement.
 */
.ss-go-top svg {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------------
 * 5d. GLightbox navigation
 * ------------------------------------------------------------------
 * rtlcss swaps where the previous/next buttons sit — prev to the right,
 * next to the left — which is correct. But the arrow glyphs come from
 * GLightbox's own JavaScript, so they still point the LTR way: "next"
 * ends up on the left showing a right-pointing arrow.
 *
 * Mirroring just the glyphs lines them up with their new positions. The
 * buttons themselves are left where rtlcss put them.
 */
.glightbox-container .gnext svg,
.glightbox-container .gprev svg {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------------
 * 6. Icon mirroring
 * ------------------------------------------------------------------
 * Directional arrows must point the other way in RTL. Vertical
 * arrows, spinners, and non-directional glyphs are left alone.
 */
.fa-arrow-left,
.fa-arrow-right,
.fa-angle-left,
.fa-angle-right,
.fa-chevron-left,
.fa-chevron-right,
.fa-long-arrow-alt-left,
.fa-long-arrow-alt-right,
.bi-arrow-left,
.bi-arrow-right,
.bi-chevron-left,
.bi-chevron-right,
.bi-caret-left-fill,
.bi-caret-right-fill {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------------
 * 7. Forms
 * ------------------------------------------------------------------
 * Bootstrap's RTL build already handles .form-check, .input-group and
 * validation feedback alignment. Nothing to override here — adding
 * rules would only fight it.
 *
 * The floating labels the admin forms use (.form-floating) are also
 * already RTL-aware in the Bootstrap RTL build.
 */