/* ═══════════════════════════════════════════════════════════════ */
/* 🌵 SAHARA SCROLLBAR — Professional Tourism Edition             */
/* Version: 1.0 — Fast · Cross-Browser · Moroccan Desert Colors   */
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════ */
/* 1) ROOT VARIABLES — ألوان صحراوية مغربية                      */
/* ═══════════════════════════════════════════════════════════════ */
:root {
    /* ─── ألوان الشريط الأساسية ─── */
    --sb-track: #F5EDE0;              /* خلفية المسار — رملي فاتح */
    --sb-track-dark: #1A2332;         /* خلفية المسار في الوضع الداكن */
    
    --sb-thumb-start: #E07A3F;        /* بداية الإبهام — برتقالي صحراوي */
    --sb-thumb-end: #D4A574;          /* نهاية الإبهام — ذهبي رملي */
    --sb-thumb-hover-start: #C96A30;  /* Hover — برتقالي غامق */
    --sb-thumb-hover-end: #C49464;    /* Hover — ذهبي غامق */
    
    --sb-border: rgba(224, 122, 63, 0.15);
    --sb-shadow: rgba(224, 122, 63, 0.35);
    
    /* ─── القياسات ─── */
    --sb-width: 10px;
    --sb-width-hover: 12px;
    --sb-radius: 100px;
    
    /* ─── الحركة ─── */
    --sb-transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 2) WEBKIT — Chrome · Edge · Safari · Opera                     */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── المسار الكامل ─── */
::-webkit-scrollbar {
    width: var(--sb-width);
    height: var(--sb-width);
}

/* ─── خلفية المسار ─── */
::-webkit-scrollbar-track {
    background: var(--sb-track);
    border-radius: var(--sb-radius);
    border-left: 1px solid var(--sb-border);
}

/* ─── الإبهام (المقبض) ─── */
::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--sb-thumb-start) 0%,
        var(--sb-thumb-end) 50%,
        var(--sb-thumb-start) 100%
    );
    background-size: 100% 200%;
    border-radius: var(--sb-radius);
    border: 2px solid var(--sb-track);
    transition: var(--sb-transition);
    will-change: background-position;
}

/* ─── Hover ─── */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        var(--sb-thumb-hover-start) 0%,
        var(--sb-thumb-hover-end) 50%,
        var(--sb-thumb-hover-start) 100%
    );
    background-size: 100% 200%;
    animation: sbShimmer 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px var(--sb-shadow);
    border-color: transparent;
}

/* ─── Active (عند السحب) ─── */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        #C96A30 0%,
        #E07A3F 100%
    );
    box-shadow: 0 0 16px var(--sb-shadow);
}

/* ─── الزاوية بين الشريطين ─── */
::-webkit-scrollbar-corner {
    background: var(--sb-track);
}

/* ─── الأزرار (الأسهم) ─── */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* ─── أنيميشن اللمعان ─── */
@keyframes sbShimmer {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 0% 100%; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 3) FIREFOX — Standard CSS Properties                           */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── دعم Firefox 64+ ─── */
@supports (scrollbar-width: thin) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #E07A3F #F5EDE0;
    }
}

/* ─── دعم Firefox 63 وأقدم ─── */
@supports not (scrollbar-width: thin) {
    html {
        /* Firefox يستخدم scrollbar-color فقط */
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 4) الدARK MODE — للصفحات ذات الخلفية الداكنة                   */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── عند وجود class="dark-scroll" على body ─── */
body.dark-scroll::-webkit-scrollbar-track,
.dark-section::-webkit-scrollbar-track {
    background: var(--sb-track-dark);
    border-left-color: rgba(212, 165, 116, 0.15);
}

body.dark-scroll::-webkit-scrollbar-thumb,
.dark-section::-webkit-scrollbar-thumb {
    border-color: var(--sb-track-dark);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 5) SCROLLBAR للمكونات الداخلية (Dropdowns, Modals, etc.)       */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── للمكونات الصغيرة — شريط أنحف ─── */
.mega__types::-webkit-scrollbar,
.mega__cats::-webkit-scrollbar,
.mega-type__tours::-webkit-scrollbar,
.lang-menu__list::-webkit-scrollbar,
.gallery-modal__body::-webkit-scrollbar,
.gallery-modal__filters::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
.swiper::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.mega__types::-webkit-scrollbar-track,
.mega__cats::-webkit-scrollbar-track,
.mega-type__tours::-webkit-scrollbar-track,
.lang-menu__list::-webkit-scrollbar-track,
.gallery-modal__body::-webkit-scrollbar-track,
.gallery-modal__filters::-webkit-scrollbar-track,
.drawer::-webkit-scrollbar-track,
.swiper::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

.mega__types::-webkit-scrollbar-thumb,
.mega__cats::-webkit-scrollbar-thumb,
.mega-type__tours::-webkit-scrollbar-thumb,
.lang-menu__list::-webkit-scrollbar-thumb,
.gallery-modal__body::-webkit-scrollbar-thumb,
.gallery-modal__filters::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb,
.swiper::-webkit-scrollbar-thumb {
    background: rgba(224, 122, 63, 0.4);
    border-radius: 100px;
    border: none;
    transition: background 0.25s ease;
}

.mega__types::-webkit-scrollbar-thumb:hover,
.mega__cats::-webkit-scrollbar-thumb:hover,
.mega-type__tours::-webkit-scrollbar-thumb:hover,
.lang-menu__list::-webkit-scrollbar-thumb:hover,
.gallery-modal__body::-webkit-scrollbar-thumb:hover,
.gallery-modal__filters::-webkit-scrollbar-thumb:hover,
.drawer::-webkit-scrollbar-thumb:hover,
.swiper::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 122, 63, 0.75);
}

/* ─── Firefox للمكونات الداخلية ─── */
@supports (scrollbar-width: thin) {
    .mega__types,
    .mega__cats,
    .mega-type__tours,
    .lang-menu__list,
    .gallery-modal__body,
    .gallery-modal__filters,
    .drawer,
    .swiper {
        scrollbar-width: thin;
        scrollbar-color: rgba(224, 122, 63, 0.4) transparent;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 6) SCROLLBAR للمقاطع الأفقية                                   */
/* ═══════════════════════════════════════════════════════════════ */

.categories__track::-webkit-scrollbar,
.hero__pills::-webkit-scrollbar,
.custom-cta__trust::-webkit-scrollbar {
    height: 0;
    display: none;
}

.categories__track,
.hero__pills,
.custom-cta__trust {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 7) MOBILE — شريط أرفع                                          */
/* ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-width: 1px;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 8) REDUCED MOTION                                              */
/* ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-thumb {
        transition: none !important;
        animation: none !important;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 9) PERFORMANCE — Hardware Acceleration                         */
/* ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar-thumb {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 10) RTL SUPPORT                                                */
/* ═══════════════════════════════════════════════════════════════ */

[dir="rtl"] ::-webkit-scrollbar-track {
    border-left: none;
    border-right: 1px solid var(--sb-border);
}

[dir="rtl"] .mega__types::-webkit-scrollbar,
[dir="rtl"] .mega__cats::-webkit-scrollbar {
    /* Firefox & WebKit handle RTL automatically */
}