/* ==========================================================================
   dalelalmosafer.com — Phase 1 stylesheet
   --------------------------------------------------------------------------
   Loaded after app.css and rtl.css, so it wins without any !important.

   Kept as plain CSS rather than SCSS on purpose: the theme's build pipeline
   (gulp + vite) is not part of the deploy, so a change that required a
   recompile would sit undeployed. Everything here is hand-written and ships
   as-is.

   Contents
     1. Brand tokens
     2. Typography — Dubai, self-hosted
     3. Trust signals bar
     4. Arabic / RTL corrections
   ========================================================================== */


/* 1. Brand tokens ========================================================= */
/*
   Straight from the brand guidelines (Dalel Elmosafer — GUIDELINES BRAND,
   section 02): four colours, each with a stated meaning.

     #0d4d63  trust        — the deep teal that carries the identity
     #3cc9c9  infinity     — the bright teal accent
     #ffc933  energy       — the yellow highlight
     #f2353e  power        — the red, used only for genuine urgency
*/
:root {
    --dm-trust:      #0d4d63;
    --dm-trust-dark: #093a4c;
    --dm-infinity:   #3cc9c9;
    --dm-energy:     #ffc933;
    --dm-power:      #f2353e;

    --dm-ink:        #10242c;
    --dm-ink-soft:   #4a6069;
    --dm-hairline:   rgba(13, 77, 99, .14);
    --dm-surface:    #f4f9fa;

    --dm-radius:     10px;
}


/* 2. Typography =========================================================== */
/*
   The theme was loading Poppins from Google Fonts — a Latin-only family with
   no Arabic coverage at all, on a platform whose interface is Arabic. Every
   Arabic glyph was therefore falling through to whatever the operating system
   happened to provide, which is why the type looked different on every device
   and matched the brand on none of them.

   Dubai is the family specified in the brand guidelines (section 03). Served
   from this origin as woff2, four weights, ~57 KB each — less than the Poppins
   request it replaces, and no third-party connection.
*/
@font-face {
    font-family: 'Dubai';
    src: url('../../../fonts/dubai/dubai-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Dubai';
    src: url('../../../fonts/dubai/dubai-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Dubai';
    src: url('../../../fonts/dubai/dubai-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Dubai';
    src: url('../../../fonts/dubai/dubai-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body,
.bravo_wrap,
button,
input,
select,
textarea {
    font-family: 'Dubai', 'Segoe UI', 'Noto Naskh Arabic', 'Tahoma', system-ui, sans-serif;
}

/*
   Arabic script is cursive: the letters of a word are joined. Tracking pulls
   those joins apart and makes the word harder to read, not easier — so no
   letter-spacing anywhere the interface is Arabic. Line height goes up instead,
   because Arabic ascenders and descenders need more vertical room than Latin.
*/
html[lang^="ar"] body,
.is-rtl body,
.is-rtl .bravo_wrap {
    letter-spacing: normal;
    line-height: 1.85;
}

.is-rtl h1, .is-rtl h2, .is-rtl h3,
.is-rtl h4, .is-rtl h5, .is-rtl h6 {
    letter-spacing: normal;
    line-height: 1.45;
}


/* 3. Trust signals bar ==================================================== */
/*
   Sits directly under the search bar, which is where a first-time visitor
   looks after typing a destination and before deciding whether to trust the
   result. Four items maximum; each one disappears when its setting is empty.
*/
.dm-trust-bar {
    background: var(--dm-surface);
    border-block: 1px solid var(--dm-hairline);
    padding-block: 18px;
}

.dm-trust-bar__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-trust-bar__item {
    margin: 0;
}

.dm-trust-bar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--dm-ink);
    text-decoration: none;
    transition: color .18s ease;
}

a.dm-trust-bar__link:hover,
a.dm-trust-bar__link:focus-visible {
    color: var(--dm-trust);
    text-decoration: none;
}

.dm-trust-bar__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--dm-radius);
    background: #fff;
    color: var(--dm-trust);
    border: 1px solid var(--dm-hairline);
}

/* The icons are drawn stroke-only, so they read the same on either side of
   the RTL flip without needing a transform. */
.dm-trust-bar__icon svg {
    display: block;
}

.dm-trust-bar__body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.dm-trust-bar__title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dm-trust);
}

.dm-trust-bar__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--dm-ink-soft);
    overflow-wrap: anywhere;
}

/* A licence number is Latin digits inside an Arabic sentence; without an
   explicit direction the browser reorders it. */
.dm-trust-bar__text bdi,
.dm-trust-bar__text [dir="ltr"] {
    unicode-bidi: isolate;
}

@media (max-width: 575.98px) {
    .dm-trust-bar {
        padding-block: 14px;
    }
    .dm-trust-bar__list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* 3b. Top-bar contact links =============================================== */
/*
   The phone number used to be a fragment of raw HTML inside a settings field.
   It is now a real tel: link, so it needs to look like one.
*/
.topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-end: 18px;
    color: inherit;
    font-size: 13px;
    white-space: nowrap;
}

.topbar-contact:hover,
.topbar-contact:focus-visible {
    color: var(--dm-infinity);
    text-decoration: none;
}

.topbar-contact bdi {
    unicode-bidi: isolate;
    direction: ltr;
}


/* 4. Arabic / RTL corrections ============================================= */
/*
   Note on the two lazy-loading rules in app.scss — `img:not([src])
   {visibility:hidden}` and `img.lazy{opacity:0}`. They are deliberately left
   alone.

   get_image_tag() now emits a real `src` and drops the `.lazy` class, so
   neither rule has anything left to match on any image this application
   renders. Overriding them here would only change behaviour for an image that
   genuinely has no src — and for that image, hidden is the correct outcome and
   a broken-image icon is not.
*/

/* Prices are Latin numerals inside Arabic text. Isolating them stops the
   currency symbol jumping to the wrong end of the number. */
.is-rtl .booking-item-price .price,
.is-rtl .price-block .text-price,
.is-rtl .item-price {
    unicode-bidi: isolate;
}