/* Brand palette taken from Anwar Al-Haramain's social artwork: charcoal,
   warm ivory and restrained antique gold. Loaded after the compiled assets
   so all Tailwind colour utilities inherit the new values at runtime. */
:root {
    --color-cream: #FBF7EF;
    --color-sand: #F0E5D0;
    --color-mahogany: #5B3A1D;
    --color-espresso: #26180F;
    --color-night: #101417;
    --color-gold: #B88A42;
    --color-gold-light: #D5AE69;
    --color-olive: #665236;
    --color-text: #2B231C;
    --color-text-muted: #857868;
    --color-hairline: #E4D7C2;
}
.hero-label { color: var(--color-gold-light); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
html[lang="ar"] .hero-label { letter-spacing: .04em; font-size: 1rem; }
/* Shared public section headings. Hero labels deliberately stay line-free. */
.eyebrow { display:flex; align-items:center; justify-content:center; gap:.85rem; width:100%; text-align:center; }
.eyebrow::before,
.eyebrow::after { content:""; flex:0 0 2.5rem; width:2.5rem; height:1px; }
.eyebrow::before { background:linear-gradient(to right, transparent, var(--color-gold)); }
.eyebrow::after { background:linear-gradient(to left, transparent, var(--color-gold)); }
.eyebrow + :is(h1, h2, h3) { margin-inline:auto; text-align:center; }
@media (max-width:480px) {
    .eyebrow { gap:.6rem; }
    .eyebrow::before,
    .eyebrow::after { flex-basis:1.75rem; width:1.75rem; }
}
.hotel-filter-pill { border: 1px solid var(--color-hairline); border-radius: 9999px; padding: .6rem 1.15rem; font-size: .9rem; color: var(--color-text-muted); background: #fff; transition: .2s ease; }
.hotel-filter-pill:hover, .hotel-filter-pill.is-active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-night); }
/* Beige editorial header inspired by the brand's social post artwork. These
   selectors intentionally own the complete component so a stale Tailwind
   build can never mix desktop and mobile navigation again. */
.brand-header {
    position:sticky;
    inset-block-start:0;
    z-index:60;
    color:#4A301D;
    background:
        radial-gradient(circle at 12% -50%, rgb(184 138 66 / .14), transparent 38%),
        #F3E8D6;
    border-bottom:1px solid rgb(91 58 29 / .14);
    box-shadow:0 8px 30px rgb(45 28 15 / .08);
}
.brand-header__inner {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    max-width:80rem;
    min-height:5.5rem;
    margin-inline:auto;
    padding-inline:2rem;
}
.brand-header__logo { display:flex; align-items:center; gap:.8rem; flex:none; color:#4A301D; text-decoration:none; }
.brand-header__logo img { width:3.75rem; height:3.75rem; object-fit:contain; filter:drop-shadow(0 5px 9px rgb(91 58 29 / .18)); }
.brand-header__wordmark { display:flex; flex-direction:column; line-height:1.15; }
.brand-header__wordmark strong { font-family:var(--font-ar-display); font-size:1.05rem; font-weight:600; white-space:nowrap; }
html[lang="en"] .brand-header__wordmark strong { font-family:var(--font-en-display); }
.brand-header__wordmark small { margin-top:.25rem; color:#A67A35; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; }
.brand-header__nav { display:flex; align-items:center; justify-content:center; gap:2.15rem; font-size:.94rem; }
.brand-header__nav > a,
.brand-booking > summary { position:relative; color:#4A301D; font-weight:500; white-space:nowrap; text-decoration:none; cursor:pointer; }
.brand-header__nav > a::after,
.brand-booking > summary::after { content:""; position:absolute; inset-inline:0; bottom:-.7rem; height:2px; background:#B88A42; transform:scaleX(0); transition:transform .2s ease; }
.brand-header__nav > a:hover::after,
.brand-booking > summary:hover::after,
.brand-booking[open] > summary::after { transform:scaleX(1); }
.brand-booking { position:relative; }
.brand-booking summary,
.brand-mobile-menu summary,
.brand-mobile-booking summary { list-style:none; }
.brand-booking summary::-webkit-details-marker,
.brand-mobile-menu summary::-webkit-details-marker,
.brand-mobile-booking summary::-webkit-details-marker { display:none; }
.brand-booking > summary { display:flex; align-items:center; gap:.4rem; }
.brand-booking > summary svg { width:1rem; height:1rem; color:#A67A35; transition:transform .2s ease; }
.brand-booking[open] > summary svg { transform:rotate(180deg); }
.brand-booking__panel {
    position:absolute;
    z-index:80;
    top:calc(100% + 1.6rem);
    /* Use the physical horizontal axis: logical inset + translateX is not
       symmetrical in RTL and moved this panel away from its trigger. */
    left:50%;
    right:auto;
    width:15.5rem;
    padding:.55rem;
    transform:translateX(-50%);
    border:1px solid rgb(91 58 29 / .14);
    border-radius:1.1rem;
    background:#FFF9EE;
    box-shadow:0 22px 45px rgb(45 28 15 / .18);
}
.brand-booking__panel a { display:block; padding:.8rem 1rem; border-radius:.75rem; color:#4A301D; text-decoration:none; }
.brand-booking__panel a:hover { color:#3A2416; background:#EAD7B9; }
.brand-header__controls { display:flex; align-items:center; gap:.65rem; flex:none; }
.brand-currency { display:flex; overflow:hidden; border:1px solid rgb(91 58 29 / .18); border-radius:999px; background:rgb(255 249 238 / .7); font-size:.7rem; font-weight:600; }
.brand-currency a { padding:.55rem .72rem; color:#72563A; text-decoration:none; }
.brand-currency a.is-active { color:#2A1A10; background:#C99A4B; }
.brand-language { padding:.58rem .92rem; border:1px solid rgb(91 58 29 / .2); border-radius:999px; color:#4A301D; font-size:.72rem; font-weight:600; text-decoration:none; }
.brand-language:hover { border-color:#B88A42; background:#FFF9EE; }
.brand-contact { padding:.7rem 1.15rem; border-radius:999px; color:#FFF9EE; background:#5B3A1D; box-shadow:0 8px 18px rgb(91 58 29 / .18); font-size:.78rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.brand-contact:hover { background:#3F2818; }
.brand-mobile-menu { display:none; position:static; }
.brand-mobile-menu > summary { display:grid; width:2.75rem; height:2.75rem; place-items:center; border:1px solid rgb(91 58 29 / .22); border-radius:999px; color:#4A301D; background:#FFF9EE; cursor:pointer; }
.brand-mobile-menu > summary svg { width:1.25rem; height:1.25rem; }
.brand-mobile-menu[open] > summary { color:#FFF9EE; background:#5B3A1D; }
.brand-mobile-menu__panel { display:none; }

@media (max-width:1099px) {
    .brand-header__inner { min-height:5rem; padding-inline:1.5rem; }
    .brand-header__logo img { width:3.3rem; height:3.3rem; }
    .brand-header__nav { display:none !important; }
    .brand-mobile-menu { display:block; }
    .brand-mobile-menu[open] > .brand-mobile-menu__panel {
        position:absolute;
        display:block;
        z-index:90;
        top:100%;
        inset-inline:1rem;
        max-height:calc(100vh - 6rem);
        overflow-y:auto;
        padding:1rem;
        border:1px solid rgb(91 58 29 / .14);
        border-radius:0 0 1.5rem 1.5rem;
        color:#4A301D;
        background:#FFF9EE;
        box-shadow:0 24px 50px rgb(45 28 15 / .2);
    }
    .brand-mobile-menu__panel > a { display:block; padding:.9rem 1rem; border-bottom:1px solid rgb(91 58 29 / .09); color:#4A301D; text-decoration:none; }
    .brand-mobile-booking { border-bottom:1px solid rgb(91 58 29 / .09); }
    .brand-mobile-booking > summary { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; color:#4A301D; font-weight:600; cursor:pointer; }
    .brand-mobile-booking[open] > summary { color:#9B6D28; }
    .brand-mobile-booking[open] > summary span:last-child { transform:rotate(45deg); }
    .brand-mobile-booking > div { padding:.25rem .75rem .8rem; }
    .brand-mobile-booking > div a { display:block; margin:.2rem 0; padding:.75rem 1rem; border-radius:.75rem; color:#67482D; background:#F3E8D6; text-decoration:none; }
    .brand-mobile-menu__footer { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding:1rem 1rem .25rem; }
    .brand-mobile-menu__footer a { padding:.55rem .8rem; border:1px solid rgb(91 58 29 / .16); border-radius:999px; color:#4A301D; font-size:.76rem; text-decoration:none; }
}
@media (max-width:760px) {
    .brand-header__inner { gap:.8rem; padding-inline:1rem; }
    .brand-currency,
    .brand-contact { display:none; }
}
@media (max-width:480px) {
    .brand-header__inner { min-height:4.75rem; padding-inline:1.125rem; }
    .brand-header__logo { flex:0 0 3.1rem; min-height:3.5rem; overflow:visible; }
    .brand-header__logo img { display:block; width:auto; max-width:100%; height:3.25rem; object-fit:contain; }
    .brand-header__wordmark { display:none; }
    .brand-language { display:none; }
}
/* Utilities introduced in the category and hotel pages, supplied here to
   remain safe if the frontend compiler is unavailable during deployment. */
.category-card-grid { display:grid; gap:1.75rem; }
.category-card { min-height:17rem; }
.category-card__content { padding:1.5rem 1.75rem; }
.category-card__description { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
@media (min-width:640px) { .category-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) {
    .category-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .category-card-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:639px) { .category-card { min-height:13.5rem; } }