/* ==========================================================================
   Jnane Ayam Atlas - site customisations
   --------------------------------------------------------------------------
   Loaded LAST, after css/mobile.css, so everything in here wins.

   1. Solid gold call-to-action button (.btn-gold)
   2. Header language switcher (EN / FR / AR)
   3. Arabic language layer (html.lang-ar) - text-level RTL only
   ========================================================================== */


/* ==========================================================================
   1. Solid gold button
   ==========================================================================
   The theme's .btn-line is a transparent outline button, which disappears
   against the transparent header. .btn-gold fills it with the site's own
   --primary-color so it matches every other accent on the page rather than
   introducing a second, competing gold. */

.btn-gold,
a.btn-gold,
input.btn-gold {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-gold:hover,
a.btn-gold:hover,
input.btn-gold:hover {
    background: var(--brand-muted-teal) !important;
    border-color: var(--brand-muted-teal) !important;
    color: #ffffff !important;
}


/* ==========================================================================
   2. Language switcher
   ==========================================================================
   Sits inside .menu_side_area, after the Reservation button. The left margin
   is deliberate: the two controls must not visually touch. */

.lang-switch {
    display: inline-flex;
    align-items: center;
    margin-left: 22px;
    padding: 2px;
    border: solid 1px rgba(255, 255, 255, .35);
    border-radius: 3px;
    line-height: 1;
}

.lang-switch .lang-btn {
    display: inline-block;
    margin: 0;
    padding: 6px 9px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #ffffff;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.lang-switch .lang-btn:hover,
.lang-switch .lang-btn:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.lang-switch .lang-btn.active {
    background: var(--primary-color);
    color: #ffffff;
}

.lang-switch .lang-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* header turns solid --bg-dark-1 on scroll, so the white labels stay legible;
   the light header variant is the one case that needs dark labels */
header.header-light.smaller .lang-switch {
    border-color: rgba(0, 0, 0, .25);
}

header.header-light.smaller .lang-switch .lang-btn {
    color: var(--brand-dark-teal);
}

header.header-light.smaller .lang-switch .lang-btn.active {
    color: #ffffff;
}

@media only screen and (max-width: 992px) {

    .lang-switch {
        margin-left: 12px;
    }

    .lang-switch .lang-btn {
        padding: 6px 6px;
        font-size: 10px;
        letter-spacing: .5px;
    }
}

/* On a narrow phone the header bar is logo + Reservation + switcher + burger.
   Below 480px the boxed switcher no longer earns its 4px of chrome, so the
   border goes and only the active state stays visible. */
@media only screen and (max-width: 480px) {

    .lang-switch {
        margin-left: 8px;
        padding: 0;
        border: 0;
    }

    .lang-switch .lang-btn {
        padding: 6px 4px;
        font-size: 10px;
        letter-spacing: 0;
    }
}

@media only screen and (max-width: 380px) {

    .lang-switch {
        margin-left: 6px;
    }

    .lang-switch .lang-btn {
        padding: 6px 3px;
        font-size: 9px;
    }
}


/* ==========================================================================
   3. Arabic layer
   ==========================================================================
   IMPORTANT: there is deliberately no dir="rtl" on <html> or <body>, and no
   document-level `direction: rtl`. Flipping the document breaks the Swiper
   hero carousel, the jarallax backgrounds and every flex/grid row in the
   theme that is not RTL-aware - images end up mirrored or misplaced.

   Instead the direction change is applied only to the elements that actually
   carry translated text, i.e. [data-i18n] / [data-i18n-placeholder] /
   [data-i18n-value]. Their containers keep the LTR layout the theme was
   designed for. */

html.lang-ar body [data-i18n],
html.lang-ar body [data-i18n-placeholder],
html.lang-ar body [data-i18n-value] {
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
}

/* Anything the design centres stays centred - hero copy, section headings,
   breadcrumbs, buttons and the switcher itself. */
html.lang-ar body [data-i18n].text-center,
html.lang-ar body .text-center [data-i18n],
html.lang-ar body .text-center [data-i18n-placeholder],
html.lang-ar body .sw-text-wrapper [data-i18n],
html.lang-ar body .subfooter [data-i18n],
html.lang-ar body .lang-switch [data-i18n],
html.lang-ar body a.btn-main[data-i18n],
html.lang-ar body a.btn-line[data-i18n],
html.lang-ar body a.btn-gold[data-i18n],
html.lang-ar body input[data-i18n-value],
html.lang-ar body .d-tagline-s2 [data-i18n],
html.lang-ar body .de_count [data-i18n],
html.lang-ar body .icon-box [data-i18n] {
    text-align: center;
}

/* form fields: the placeholder and the value the guest types both read RTL */
html.lang-ar body input[data-i18n-placeholder],
html.lang-ar body textarea[data-i18n-placeholder],
html.lang-ar body select.room-type {
    direction: rtl;
    text-align: right;
}

/* Cairo reads far better than the Latin display faces the theme ships with.
   Scoped to the Arabic layer only, and to text elements only - the icon
   fonts (icofont / Font Awesome) are never touched. */
html.lang-ar body,
html.lang-ar body h1,
html.lang-ar body h2,
html.lang-ar body h3,
html.lang-ar body h4,
html.lang-ar body h5,
html.lang-ar body h6,
html.lang-ar body p,
html.lang-ar body a,
html.lang-ar body span,
html.lang-ar body li,
html.lang-ar body div,
html.lang-ar body label,
html.lang-ar body button,
html.lang-ar body input,
html.lang-ar body textarea,
html.lang-ar body select,
html.lang-ar body option,
html.lang-ar body .btn-main,
html.lang-ar body .btn-line,
html.lang-ar body .subtitle,
html.lang-ar body .slider-title,
html.lang-ar body .slider-teaser {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* The Cairo rules above deliberately never name <i>, so the icofont and
   Font Awesome <i> glyphs are untouched. Two theme widgets draw their icon
   from a :before on a non-<i> element, though, so restate their font. */
html.lang-ar body #back-to-top:before,
html.lang-ar body #menu-btn:before {
    font-family: FontAwesome;
}

/* Arabic headings sit tighter than the Latin ones at the theme's line-height */
html.lang-ar body h1[data-i18n],
html.lang-ar body h2[data-i18n],
html.lang-ar body h3[data-i18n] {
    line-height: 1.35;
}

/* The two floating widgets are independent position:fixed elements, not part
   of the text flow, so moving them to the other corner is safe. */
html.lang-ar .wa-float {
    right: auto;
    left: 20px;
}

html.lang-ar #back-to-top {
    right: auto;
    left: 20px;
}

/* stop the language buttons inheriting the RTL text rules above */
.lang-switch .lang-btn {
    direction: ltr !important;
}


/* ==========================================================================
   4. Inner-page hero - editorial treatment
   ==========================================================================
   Replaces the theme's default #subheader, which was a 140px/140px band with
   a flat rgba(0,0,0,.4) wash (muddy grey photo), a 60px heading carrying a
   full-width gold border-bottom, and a breadcrumb that repeated the heading.

   The copy now sits bottom-left over a bottom-weighted gradient, so the
   photograph is legible at the top and the text has contrast where it lands.

   The hero stays: header is position:absolute and transparent, so removing
   the band entirely would let the nav sit on top of the page content. */

#subheader {
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    padding: 150px 0 60px;
    text-align: left;
}

#subheader > .container {
    width: 100%;
}

/* jarallax lifts the image into an absolutely positioned .jarallax-container,
   so it never joins the flex flow - restated here so a failed init cannot
   drop the photo into the layout. */
#subheader .jarallax-img,
#subheader [class*="jarallax-container"] {
    position: absolute;
}

#subheader h1 {
    display: block;
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: -1px;
    margin: 0;
    border-bottom: 0;
}

#subheader .sh-eyebrow {
    color: var(--primary-color);
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

#subheader .lead {
    max-width: 540px;
    margin: 18px 0 0;
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

/* Wash over the inner-page hero photographs (the homepage is untouched -
   its slides use .sw-overlay, not .de-overlay).

   A flat 50% of the theme's own dark grey, via --bg-dark-1-rgb so it can
   never drift from the palette. No extra gradient is needed for legibility:
   measured over the bottom-left region of all six covers, where the copy
   actually lands, white text clears 6.7:1 at worst - past the 4.5:1 the
   16.5px lead needs, let alone the 3:1 for the 54px heading. */
#subheader .de-overlay {
    background: rgba(var(--bg-dark-1-rgb), .5);
}

@media only screen and (max-width: 992px) {

    #subheader {
        min-height: 380px;
        padding: 128px 0 44px !important;
    }

    #subheader h1 {
        font-size: 34px !important;
        letter-spacing: -.5px;
    }

    #subheader .sh-eyebrow {
        font-size: 11px;
        letter-spacing: 3px;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 400px) {

    #subheader {
        min-height: 320px;
    }

    #subheader h1 {
        font-size: 29px !important;
    }
}


/* Arabic: the editorial hero is left-aligned, so it mirrors to the right.
   Two pieces do not follow on their own -
     - .sh-eyebrow is the brand name, deliberately untranslated, so it carries
       no [data-i18n] and would be left behind on the left;
     - .lead is width-capped, so right-aligning its text inside a box that is
       still pinned left looks broken. The box has to move too. */
html.lang-ar body #subheader .sh-eyebrow {
    direction: rtl;
    text-align: right;
}

html.lang-ar body #subheader .lead {
    margin-left: auto;
    margin-right: 0;
}


/* ==========================================================================
   4b. Plain page title (reservation.html)
   ==========================================================================
   The booking page is a form, not somewhere to be sold, so it gets no photo
   hero - just the title, centred on white.

   Its <header> drops .transparent and paints solid --bg-dark-1, because the
   theme's logo and nav are white and would be invisible here. The header is
   still position:absolute, so the top padding below has to clear it (topbar
   ~42px + bar ~90px); the theme's default section padding of 140px would
   leave the title tucked under the nav. #topbar is hidden below 992px, hence
   the smaller value there. */

#page-title {
    background: var(--brand-ivory);
    padding: 190px 0 40px;
    text-align: center;
}

#page-title h1 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: 0;
    border-bottom: 0;
}

/* contact.html drops the title band entirely, so its first section carries
   the clearance instead. The theme's default section padding is 140px, which
   is barely more than the header (topbar ~42px + bar ~90px) and would leave
   the content touching the nav. */
.pt-header-clear {
    padding-top: 190px !important;
}

/* That page's opening heading is an <h1> for document structure - one per
   page, and it is what the page is actually about - but it must look exactly
   like the <h2> it replaced. These match the theme's h2 at every breakpoint. */
#contact-heading {
    font-size: 52px;
    line-height: 1.1em;
    margin: 0 0 20px;
    padding-bottom: 5px;
}

@media only screen and (max-width: 767px) {

    #contact-heading {
        font-size: 28px !important;
        line-height: 1.2em !important;
        letter-spacing: -.3px !important;
        margin-bottom: 14px;
    }
}

@media only screen and (max-width: 992px) {

    .pt-header-clear {
        padding-top: 140px !important;
    }
}

@media only screen and (max-width: 992px) {

    #page-title {
        padding: 140px 0 28px;
    }

    #page-title h1 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 400px) {

    #page-title h1 {
        font-size: 28px;
    }
}


/* ==========================================================================
   5. Payment result, shown inline on reservation.html
   ==========================================================================
   CMI redirects the guest's browser back to reservation.html rather than to a
   page of its own, so the result is rendered in place:

     ?payment=ok      -> #payment_success replaces the form
     ?payment=failed  -> #payment_failed sits above the form, which stays put
                         so the guest can retry without navigating anywhere

   Neither panel is proof of payment - payment/callback.php is the only thing
   that confirms money moved. These are receipts shown to a human. */

/* Success: a panel, because it replaces the form entirely. */
#payment_success {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 32px;
    border: solid 1px rgba(var(--brand-brown-rgb), .14);
    background: #ffffff;
}

#payment_success .result-icon {
    display: block;
    font-size: 58px;
    line-height: 1;
    margin-bottom: 20px;
}

#payment_success h2 {
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 16px;
}

#payment_success .lead {
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 12px;
}

/* Failure: a compact notice, NOT a panel. The booking form is still directly
   below and is itself the retry, so anything bigger just competes with it. */
#payment_failed {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 34px;
    padding: 20px 24px;
    text-align: left;
    background: rgba(253, 70, 69, .06);
    border: solid 1px rgba(253, 70, 69, .3);
    border-left: solid 3px var(--brand-error);
}

#payment_failed > i {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1.35;
    color: var(--brand-error);
}

#payment_failed h4 {
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 6px;
}

#payment_failed p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 4px;
}

#payment_failed .pf-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: underline;
}

/* Arabic: mirror the notice so the icon leads from the right */
html.lang-ar body #payment_failed {
    flex-direction: row-reverse;
    text-align: right;
    border-left: solid 1px rgba(253, 70, 69, .3);
    border-right: solid 3px var(--brand-error);
}

/* the reference CMI hands back, for the guest to quote */
#booking-ref {
    margin-top: 28px;
    padding: 18px 20px;
    background: var(--brand-sand);
    border: solid 1px rgba(0, 0, 0, .07);
}

#booking-ref #booking-ref-value {
    font-size: 22px;
    letter-spacing: 1px;
    word-break: break-all;
}

@media only screen and (max-width: 992px) {

    #payment_success {
        padding: 30px 22px;
    }

    #payment_success h2 {
        font-size: 26px;
    }

    #payment_success .lead {
        font-size: 16px;
    }

    #payment_failed {
        padding: 18px 18px;
        gap: 12px;
    }

    #payment_failed h4 {
        font-size: 17px;
    }
}