/* ==========================================================================
   Jazberry — template overrides
   Same rules as the source template; palette swapped to blush & champagne.
   cream #FDF8F4 · shell #FFFDFB · blush #F7E7E3 · rose #E8B4B8
   berry #B4436C · berry-deep #8E3A5C · gold #C9A227 · champagne #EBD9C4
   ink #4A2C3A · muted #7A5C6A
   ========================================================================== */

:root {
    --cream: #fdf8f4;
    --shell: #fffdfb;
    --blush: #f7e7e3;
    --rose: #e8b4b8;
    --berry: #b4436c;
    --berry-deep: #8e3a5c;
    --gold: #c9a227;
    --champagne: #ebd9c4;
    --ink: #4a2c3a;
    --muted: #7a5c6a;
    --line: #efe1dc;
}

body {
    background-color: var(--cream);
}

/* Fraunces carries every heading; Plus Jakarta Sans carries everything else. */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
    font-variation-settings: "SOFT" 40, "WONK" 1;
    letter-spacing: -0.02em;
}

/* Arabic root: Cairo for headings — clean, geometric, modern, deliberately
   plain rather than decorative (El Messiri read "too classic", Lemonada read
   "too stylish"; Cairo is the calm middle ground). IBM Plex Sans Arabic
   stays for body copy, a genuine dual-script UI face. */
html[dir="rtl"] body,
html[dir="rtl"] .font-jakarta {
    font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", Tahoma, sans-serif;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .font-display {
    font-family: "Cairo", "Fraunces", Tahoma, sans-serif;
    font-variation-settings: normal;
    letter-spacing: normal;
}

/* This page's markup carries the source template's physical-direction
   Tailwind utilities (right-4, ml-2, left-0, pr-5, text-left…). Mirror the
   handful that are actually compiled into tailwind.css rather than rewrite
   the markup or the framework. */
html[dir="rtl"] .right-4 { right: auto; left: 1rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; }
html[dir="rtl"] .text-left { text-align: right; }

/* A soft nudge toward the category finder below the hero heading. */
.hero-arrow { animation: hero-arrow-bounce 1.8s ease-in-out infinite; }
@keyframes hero-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* The hero's category finder — modelled on Airbnb's segmented search
   bar (label on top, value below, no icons cluttering each segment, the
   whole segment highlights on hover, one circular button at the end) rather
   than the earlier version's icon-plus-label-plus-chevron-per-field, which
   read as busy and cramped at this size. */
.hero-finder {
    background: #fff;
    border-radius: 28px;
    padding: 6px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 460px;
    box-shadow: 0 18px 46px -20px rgba(74, 44, 58, .35);
}
@media (min-width: 640px) {
    .hero-finder {
        flex-direction: row;
        align-items: center;
        border-radius: 999px;
        padding: 6px;
        gap: 0;
    }
}
.hero-finder-field {
    position: relative;
    flex: 1;
    display: flex;
}
.hero-finder-select {
    flex: 1;
    width: 100%;
}

/* Browsers without the customisable-<select> API (appearance: base-select —
   Chrome/Edge 134+, others catching up) get a plain, still-legible fallback:
   a small caption bled in via ::before, sitting over a native select with the
   browser's own dropdown. The rich version below is additive, not required —
   nothing here breaks in an unsupporting browser. */
.hero-finder-field { flex-direction: column; justify-content: center; gap: 2px; padding: 10px 22px; border-radius: 22px; cursor: pointer; transition: background .18s ease; }
.hero-finder-field:hover, .hero-finder-field:focus-within { background: var(--blush, #F7E7E3); }
.hero-finder-field::before { content: attr(data-label); font-size: .72rem; font-weight: 700; color: #151312; }
.hero-finder-select { appearance: none; -webkit-appearance: none; border: none; outline: none; background: transparent; cursor: pointer; font-family: inherit; font-size: .92rem; font-weight: 500; color: #6b6b6b; padding: 0; }
.hero-finder-select .hero-finder-label { display: none; }

/* The real thing: native <select>, but every part of it is now a normal DOM
   node we style directly — the closed-state button, the open picker panel,
   and each option — instead of the OS drawing an unstyleable native listbox.
   This is what was asked for: real custom option styling, and since the
   whole field IS the select's own button now, clicking anywhere on it opens
   the dropdown (no more "only the value text is clickable"). */
@supports selector(::picker(select)) {
    .hero-finder-select,
    .hero-finder-select::picker(select) {
        appearance: base-select;
    }
    .hero-finder-field { padding: 0; }
    .hero-finder-field::before { display: none; }
    .hero-finder-select {
        border: none;
        background: transparent;
        color: inherit;
        /* The picker-icon is positioned relative to the <select>'s own box,
           not the button's — without an explicit height here the select
           stays a default single-line box even though the button inside it
           (label stacked over the value) renders taller, so the browser's
           icon ends up vertically centred on the wrong, shorter box and
           reads as pinned to the top. */
        display: flex;
        align-self: stretch;
        height: 100%;
        position: relative;
    }
    .hero-finder-select > button {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;
        padding: 10px 22px;
        border: none;
        background: transparent;
        border-radius: 22px;
        cursor: pointer;
        font-family: inherit;
        text-align: start;
        transition: background .18s ease;
    }
    .hero-finder-select > button:hover,
    .hero-finder-select:open > button {
        background: var(--blush, #F7E7E3);
    }
    .hero-finder-select .hero-finder-label {
        display: block;
        font-size: .72rem;
        font-weight: 700;
        color: #151312;
    }
    .hero-finder-select selectedcontent {
        font-size: .92rem;
        font-weight: 500;
        color: #6b6b6b;
    }
    .hero-finder-select::picker-icon {
        position: absolute;
        inset-inline-end: 18px;
        top: 50%;
        translate: 0 -50%;
        margin: 0;
        color: #b8a3ac;
    }
    .hero-finder-select::picker(select) {
        border: none;
        border-radius: 18px;
        margin-top: 8px;
        padding: 8px;
        min-width: 220px;
        background: #fff;
        box-shadow: 0 20px 50px -18px rgba(74, 44, 58, .4);
        opacity: 0;
        transition: opacity .16s ease, transform .16s ease;
        transform: translateY(-4px);
    }
    .hero-finder-select:open::picker(select) {
        opacity: 1;
        transform: translateY(0);
    }
    @starting-style {
        .hero-finder-select:open::picker(select) {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
    .hero-finder-select option {
        padding: 11px 16px;
        border-radius: 12px;
        font-size: .92rem;
        color: #151312;
        cursor: pointer;
        transition: background .12s ease;
    }
    .hero-finder-select option:hover,
    .hero-finder-select option:focus {
        background: var(--blush, #F7E7E3);
    }
    .hero-finder-select option:checked {
        font-weight: 700;
        color: var(--berry, #B4436C);
        background: var(--blush, #F7E7E3);
    }
    .hero-finder-select option::checkmark {
        display: none;
    }
}
/* Footer links inherit their colour from the surrounding list (a light dusty
   grey, readable on the dark footer) — but style.css's global `a { color:
   var(--berry-deep) }` targets the <a> itself, and an explicit same-element
   rule always beats an inherited one no matter the specificity of either. A
   dark maroon on a near-black footer fails contrast badly. `footer a` (two
   type selectors) is more specific than the bare `a` it needs to beat. */
footer a { color: inherit; }

/* The compiled build ships no rule for these two — the source theme extended
   them in its tailwind.config, which never made it into the CSS. */
.shadow-custom,
.lg\:shadow-custom {
    box-shadow: 0 14px 40px -18px rgba(74, 44, 58, 0.28);
}

.rounded-custom,
.lg\:rounded-custom {
    border-radius: 16px;
}

@media (max-width: 1023px) {
    .lg\:shadow-custom {
        box-shadow: none;
    }
    .lg\:rounded-custom {
        border-radius: 0;
    }
}

/* Fixed bottom Instagram button. Physical `right`/`bottom` (not logical
   insets) so it stays in the same visual corner in both LTR and RTL — a
   floating social icon is a universal utility, not language-flowed content.
   The pill is just the round icon at rest; hovering (or focus, for keyboard/
   touch) grows it into a label capsule instead of popping a separate
   tooltip, which keeps everything inside one clickable target. */
.ig-float {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 60;
    display: flex;
    align-items: center;
    height: 56px;
    padding-inline: 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, #feda75 0%, #d62976 45%, #4f5bd5 100%);
    box-shadow: 0 14px 32px -10px rgba(214, 41, 118, .5), 0 4px 14px -4px rgba(0, 0, 0, .25);
    overflow: hidden;
    max-width: 56px;
    transition: max-width .35s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease, transform .25s ease;
}
.ig-float:hover,
.ig-float:focus-visible {
    max-width: 190px;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -10px rgba(214, 41, 118, .6), 0 6px 18px -4px rgba(0, 0, 0, .3);
}
.ig-float-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #d62976;
}
.ig-float-label {
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding-inline: 4px 16px;
}
.ig-float-ping {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #feda75 0%, #d62976 45%, #4f5bd5 100%);
    opacity: .55;
    animation: ig-float-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.ig-float:hover .ig-float-ping,
.ig-float:focus-visible .ig-float-ping {
    animation-play-state: paused;
    opacity: 0;
}
@keyframes ig-float-ping {
    0% { transform: scale(1); opacity: .55; }
    75%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (max-width: 640px) {
    .ig-float {
        bottom: 16px;
        right: 16px;
    }
}

/* Loading screen. Reuses the brand mark (a leaf sprouting from a stack of
   template screens) as the motif — it sprouts/settles rather than spinning,
   so it reads as "growing your site" instead of a generic spinner. `body.
   is-loading` (set server-side so there's no flash-of-unstyled content)
   locks scroll until JS clears it on window `load`. */
body.is-loading { overflow: hidden; }
.preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream, #fdf8f4);
    opacity: 1;
    transition: opacity .5s ease;
}
body:not(.is-loading) .preloader {
    opacity: 0;
    pointer-events: none;
}
.preloader-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.preloader-mark {
    height: 64px;
    width: auto;
    animation: preloader-sprout 1.7s cubic-bezier(.34, 1.4, .4, 1) infinite;
    transform-origin: 50% 90%;
}
.preloader-word {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink, #4a2c3a);
    opacity: 0;
    animation: preloader-fade .6s ease .25s forwards;
}
.preloader-bar {
    width: 96px;
    height: 4px;
    border-radius: 999px;
    background: var(--blush, #f7e7e3);
    overflow: hidden;
}
.preloader-bar-fill {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--berry, #b4436c), var(--gold, #c9a227));
    animation: preloader-slide 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes preloader-sprout {
    0%, 100% { transform: scale(1) rotate(0deg); }
    35% { transform: scale(1.08) rotate(-4deg); }
    65% { transform: scale(.97) rotate(3deg); }
}
@keyframes preloader-fade {
    to { opacity: 1; }
}
@keyframes preloader-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(340%); }
}
html.no-motion .preloader-mark,
html.no-motion .preloader-bar-fill { animation: none; }
html.no-motion .preloader-word { opacity: 1; animation: none; }
html.no-motion .preloader-bar-fill { width: 100%; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------ category tags */

.category-ecommerce {
    background-color: #fdeef0;
    color: #b4436c;
}

.category-education {
    background-color: #f8f0e2;
    color: #8a6a22;
}

.category-events {
    background-color: #f7e7e3;
    color: #8e3a5c;
}

.category-ai {
    background-color: #f3ecf7;
    color: #6b3a78;
}

.category-healthcare {
    background-color: #eaf1ec;
    color: #3f6b52;
}

.category-real-estate {
    background-color: #fbeee2;
    color: #a2622a;
}

.category-magazine {
    background-color: #f2efe8;
    color: #6f6350;
}

.category-architecture {
    background-color: #f1e9e6;
    color: #6f5a52;
}

/* Badges describe what the template is, not how well it sells. */
.category-trilingual {
    background-color: #ebd9c4;
    color: #6b5218;
}

.category-bilingual {
    background-color: #f7e7e3;
    color: #8e3a5c;
}

.category-dynamic {
    background-color: #e8d8f0;
    color: #5c3070;
}

/* ------------------------------------------------------------------ swiper */

.swiper-pagination {
    .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        background-color: #d8c3bd !important;
    }

    .swiper-pagination-bullet-active {
        background-color: #b4436c !important;
    }
}

.swiper-pagination-custom {
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .swiper-pagination-bullet-active {
        width: 32px !important;
        height: 10px !important;
        border-radius: 5px;
        background-color: #b4436c;
    }
}

.shop-details {
    .thumbSwiper {
        .swiper-slide {
            border: 2px solid transparent;
        }

        .swiper-slide-thumb-active {
            border: 2px solid #b4436c;
            border-radius: 8px;

            img {
                border-radius: 8px;
            }
        }
    }
}

.tours-details-02 {
    .thumbSwiper02 {
        .swiper-slide {
            border: 2px solid transparent;
        }

        .swiper-slide-thumb-active {
            border: 2px solid #b4436c;
            border-radius: 8px;

            img {
                border-radius: 8px;
            }
        }
    }
}

.star-wrapper .iconify {
    stroke: #c9a227;
    stroke-width: 1.5;
}

.star-wrapper.active .iconify {
    color: #c9a227;
    stroke: #c9a227;
}

/* --------------------------------------------------------------- noUiSlider */

.noUi-horizontal {
    height: 4px !important;
}

.noUi-tooltip {
    display: none !important;
}

.noUi-handle {
    top: -10px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 100% !important;
    box-shadow: none !important;
    border: 2px solid #b4436c;

    &::before {
        display: none !important;
    }

    &::after {
        display: none !important;
    }
}

.noUi-target {
    box-shadow: none !important;
    background: #efe1dc !important;
    border: none !important;
}

.noUi-handle-lower {
    cursor: pointer !important;
    right: -24px !important;
}

.noUi-handle-upper {
    cursor: pointer !important;
    right: 0 !important;
}

.checkout-box {
    background-color: #ebd9c4;
    position: relative;
    border-radius: 2px;

    &::before {
        content: "";
        display: block;
        border: 15px solid #ebd9c4;
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        position: absolute;
        top: -15px;
        left: 0;
        margin: -15px 0 0 25px;
    }
}

/* The Arabic nav labels ("من نحن", "تواصل ودعم"…) are short phrases with a
   space in them — inside the flex nav row they wrap onto a second line once
   the row gets a little tight, instead of the whole item just staying put. */
.header-menu ul > li > a,
.header-menu ul > li > div > a {
    white-space: nowrap;
}

/* --------------------------------------------------------- off-canvas menu */

@media (max-width: 1023px) {
    .header-menu {
        position: fixed;
        top: 0;
        left: -320px;
        width: 320px;
        height: 100vh;
        background-color: #fffdfb;
        box-shadow: -2px 0 10px rgba(74, 44, 58, 0.12);
        transition: left 0.3s ease;
        z-index: 1000;
        padding: 20px;
        margin: 0;
        box-sizing: border-box;
        overflow-y: auto;

        &.active {
            left: 0;
        }

        ul {
            padding-top: 20px;

            &.active {
                padding-top: 0;
            }
        }

        &.active ul {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .nav-father.active {
            .nav-wrapper {
                margin-top: 12px;
                height: auto;
                opacity: 1;
                visibility: visible;
                transition: all 0.3s ease;
                width: 100%;
            }
        }

        .nav-wrapper {
            height: 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            padding-left: 15px;
        }
    }

    body.active::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(74, 44, 58, 0.35);
        z-index: 999;
        transition: all 0.3s ease;
    }

    .sidebar-filter {
        position: fixed;
        top: 0;
        left: -320px;
        width: 320px;
        height: 100vh;
        background-color: #fffdfb;
        box-shadow: -2px 0 10px rgba(74, 44, 58, 0.12);
        transition: left 0.3s ease;
        z-index: 1000;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .sidebar-filter.active {
        left: 0;
    }

    .overlay-for-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(74, 44, 58, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }

    .overlay-for-sidebar.active {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 640px) {
    #scroll-nav {
        display: none !important;
    }
    .swiper-button-next {
        width: 38px !important;
        height: 38px !important;
    }

    .swiper-button-prev {
        width: 38px !important;
        height: 38px !important;
    }
}