/* =========================================================
   SALEHLY — GLIDING NAV PILL FINAL
   روابط القائمة + اللغة + المظهر + تسجيل الدخول
   ========================================================= */

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .salehly-pill-nav {
        position: relative !important;
        isolation: isolate;

        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        width: max-content !important;
        max-width: calc(100vw - 80px) !important;

        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        margin-inline: auto !important;
        padding: 8px !important;
        gap: 4px !important;

        overflow: visible !important;

        border: 1px solid rgba(50, 107, 201, 0.16) !important;
        border-radius: 999px !important;

        background: #f3f7fd !important;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 8px 24px rgba(24, 41, 75, 0.06) !important;
    }

    /* العناصر المباشرة داخل القائمة */
    .salehly-pill-nav > li {
        position: relative !important;
        z-index: 2 !important;

        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .salehly-pill-nav > li::marker {
        content: "" !important;
        display: none !important;
    }

    /* روابط وأزرار القائمة */
    .salehly-pill-nav .nav-link,
    .salehly-pill-nav > li > a,
    .salehly-pill-nav > li > button {
        position: relative !important;
        z-index: 2 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        width: auto !important;

        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        margin: 0 !important;
        padding: 13px 21px !important;

        overflow: visible !important;

        border: 0 !important;
        border-radius: 999px !important;

        color: #606978 !important;
        background: transparent !important;

        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-shadow: none !important;
        cursor: pointer !important;

        transition:
            color 0.22s ease,
            opacity 0.22s ease !important;
    }

    /* المؤشر الأزرق الرئيسي */
    .salehly-pill-nav .salehly-nav-pill {
        position: absolute !important;
        z-index: 1 !important;

        top: 8px !important;
        bottom: 8px !important;
        left: 0 !important;

        display: block !important;

        width: var(--salehly-pill-width, 0px) !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 999px !important;

        background:
            linear-gradient(
                135deg,
                #3d78d7 0%,
                #326bc9 100%
            ) !important;

        box-shadow:
            0 10px 24px rgba(50, 107, 201, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

        pointer-events: none !important;
        opacity: 0;

        transform:
            translate3d(
                var(--salehly-pill-x, 0px),
                0,
                0
            ) !important;

        transition:
            transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
            width 0.4s cubic-bezier(0.65, 0, 0.35, 1),
            opacity 0.18s ease !important;

        will-change: transform, width;
    }

    .salehly-pill-nav.salehly-pill-ready
    .salehly-nav-pill {
        opacity: 1;
    }

    /* العنصر الموجود تحته المؤشر */
    .salehly-pill-nav
    .salehly-pill-active,
    .salehly-pill-nav
    .salehly-pill-active:hover,
    .salehly-pill-nav
    .salehly-pill-active:focus {
        color: #ffffff !important;
    }

    /* بقية العناصر */
    .salehly-pill-nav
    .nav-link:not(.salehly-pill-active):hover,
    .salehly-pill-nav
    > li
    > a:not(.salehly-pill-active):hover,
    .salehly-pill-nav
    > li
    > button:not(.salehly-pill-active):hover {
        color: #326bc9 !important;
    }

    /* =====================================================
       LANGUAGE BUTTON
       ===================================================== */

    .salehly-language-item {
        position: relative !important;
        overflow: visible !important;
    }

    .salehly-language-trigger::after {
        display: none !important;
        content: none !important;
    }

    .salehly-language-chevron {
        flex: 0 0 auto !important;

        transition:
            transform 0.3s
            cubic-bezier(0.65, 0, 0.35, 1) !important;
    }

    .salehly-language-item.is-open
    .salehly-language-chevron {
        transform: rotate(180deg);
    }

    /* =====================================================
       LANGUAGE DROPDOWN
       ===================================================== */

    .salehly-language-item
    .salehly-language-menu {
        position: absolute !important;

        top: calc(100% + 10px) !important;
        left: 50% !important;
        right: auto !important;

        z-index: 9999 !important;

        display: block !important;

        width: 190px !important;
        min-width: 190px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 6px !important;

        overflow: visible !important;

        border:
            1px solid
            rgba(50, 107, 201, 0.14) !important;

        border-radius: 16px !important;

        background: #ffffff !important;

        box-shadow:
            0 18px 45px
            rgba(20, 33, 61, 0.16) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform:
            translate(-50%, -8px)
            scale(0.98) !important;

        transform-origin: top center !important;

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.3s
            cubic-bezier(0.65, 0, 0.35, 1) !important;
    }

    .salehly-language-item.is-open
    .salehly-language-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translate(-50%, 0)
            scale(1) !important;
    }

    /* قائمة اللغات */
    .salehly-language-item
    .salehly-language-list {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 4px !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    /* المؤشر الأزرق داخل قائمة اللغات */
    .salehly-language-item
    .salehly-language-pill {
        position: absolute !important;

        top: 0 !important;
        inset-inline: 0 !important;

        z-index: 1 !important;

        display: block !important;

        height:
            var(
                --salehly-language-pill-height,
                42px
            ) !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 11px !important;

        background: #326bc9 !important;

        box-shadow:
            0 8px 18px
            rgba(50, 107, 201, 0.20) !important;

        opacity: 0;

        pointer-events: none !important;

        transform:
            translateY(
                var(
                    --salehly-language-pill-y,
                    0px
                )
            ) !important;

        transition:
            transform 0.4s
            cubic-bezier(0.65, 0, 0.35, 1),
            height 0.4s
            cubic-bezier(0.65, 0, 0.35, 1),
            opacity 0.2s ease !important;
    }

    .salehly-language-list.is-ready
    .salehly-language-pill {
        opacity: 1;
    }

    /* عنصر اللغة */
    .salehly-language-item
    .salehly-language-option {
        position: relative !important;
        z-index: 2 !important;

        display: block !important;

        width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .salehly-language-option::marker {
        content: "" !important;
        display: none !important;
    }

    /* رابط اللغة */
    .salehly-language-item
    .salehly-language-link {
        position: relative !important;
        z-index: 2 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 8px 12px !important;

        border-radius: 11px !important;

        color: #4f5968 !important;
        background: transparent !important;

        font-size: 0.9rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        transition:
            color 0.2s ease !important;
    }

    .salehly-language-link:hover,
    .salehly-language-link:focus,
    .salehly-language-link.is-pill-active {
        color: #ffffff !important;
        outline: none !important;
    }

    /* =====================================================
       THEME BUTTON
       ===================================================== */

    .salehly-theme-item {
        position: relative !important;
    }

    .salehly-theme-item
    .change-mode {
        gap: 7px !important;
    }

    .salehly-theme-item
    .mode-icons {
        flex: 0 0 auto !important;

        width: 18px !important;
        height: 18px !important;
    }

    /* =====================================================
       LOGIN BUTTON
       ===================================================== */

    .salehly-login-item {
        position: relative !important;
    }

    .salehly-login-item
    .salehly-login-link {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   أجهزة اللابتوب الأصغر
   ========================================================= */

@media
(max-width: 1399.98px)
and
(min-width: 1200px) {

    .salehly-pill-nav .nav-link,
    .salehly-pill-nav > li > a,
    .salehly-pill-nav > li > button {
        padding-inline: 16px !important;
        font-size: 0.88rem !important;
    }
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .salehly-nav-pill {
        display: none !important;
    }

    [data-salehly-nav-extra] {
        width: 100% !important;
    }

    .salehly-language-item {
        position: relative !important;
        width: 100% !important;
    }

    .salehly-language-trigger {
        width: 100% !important;
    }

    .salehly-language-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;

        margin-top: 8px !important;
        padding: 8px !important;

        border:
            1px solid
            rgba(50, 107, 201, 0.12) !important;

        border-radius: 14px !important;

        background: #ffffff !important;
    }

    .salehly-language-item.is-open
    .salehly-language-menu {
        display: block !important;
    }

    .salehly-language-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .salehly-language-pill {
        display: none !important;
    }

    .salehly-language-link {
        display: flex !important;
        align-items: center !important;

        min-height: 42px !important;
        padding: 9px 12px !important;

        border-radius: 10px !important;

        text-decoration: none !important;
    }

    .salehly-language-link.is-current {
        color: #ffffff !important;
        background: #326bc9 !important;
    }
}

/* ==========================================================================
   V5 — Public navigation clarity
   ========================================================================== */
@media (min-width: 1200px) {
    .salehly-pill-nav {
        border-color: #d7dde6 !important;
        background:
            linear-gradient(180deg, #f5f6f8 0%, #eceff3 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 10px 26px rgba(31, 45, 67, 0.08) !important;
    }

    .salehly-pill-nav .nav-link,
    .salehly-pill-nav > li > a,
    .salehly-pill-nav > li > button {
        color: #3d4858 !important;
        text-shadow: none !important;
    }

    .salehly-pill-nav .salehly-nav-pill {
        background: linear-gradient(135deg, #315f9f 0%, #326bc9 100%) !important;
        box-shadow:
            0 11px 25px rgba(41, 91, 164, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    }

    .salehly-pill-nav .salehly-pill-active,
    .salehly-pill-nav .salehly-pill-active:hover,
    .salehly-pill-nav .salehly-pill-active:focus {
        color: #ffffff !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) !important;
    }

    /* Keep the route-active link readable while the glider previews another item. */
    .salehly-pill-nav .nav-link.active:not(.salehly-pill-active),
    .salehly-pill-nav > li.active > a:not(.salehly-pill-active),
    .salehly-pill-nav [aria-current="page"]:not(.salehly-pill-active) {
        color: #183f73 !important;
        text-shadow: none !important;
    }

    .salehly-pill-nav .nav-link:not(.salehly-pill-active):hover,
    .salehly-pill-nav > li > a:not(.salehly-pill-active):hover,
    .salehly-pill-nav > li > button:not(.salehly-pill-active):hover {
        color: #174b92 !important;
    }
}

[data-bs-theme="dark"] .salehly-pill-nav {
    border-color: #33465f !important;
    background: linear-gradient(180deg, #1f2a38 0%, #192330 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.26) !important;
}

[data-bs-theme="dark"] .salehly-pill-nav .nav-link,
[data-bs-theme="dark"] .salehly-pill-nav > li > a,
[data-bs-theme="dark"] .salehly-pill-nav > li > button {
    color: #c4cedb !important;
}

[data-bs-theme="dark"] .salehly-pill-nav .salehly-pill-active,
[data-bs-theme="dark"] .salehly-pill-nav .salehly-pill-active:hover,
[data-bs-theme="dark"] .salehly-pill-nav .salehly-pill-active:focus {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .salehly-pill-nav .nav-link.active:not(.salehly-pill-active),
[data-bs-theme="dark"] .salehly-pill-nav > li.active > a:not(.salehly-pill-active),
[data-bs-theme="dark"] .salehly-pill-nav [aria-current="page"]:not(.salehly-pill-active) {
    color: #a9d2ff !important;
}

@media (max-width: 1199.98px) {
    #navbar_main,
    #navbar_main .navbar-nav {
        background: #f3f5f8 !important;
    }

    #navbar_main .nav-link,
    #navbar_main .salehly-language-trigger,
    #navbar_main .salehly-login-link {
        color: #344054 !important;
    }

    #navbar_main .nav-link.active,
    #navbar_main .nav-link:hover,
    #navbar_main .nav-link:focus-visible {
        color: #174b92 !important;
        background: #e7eef8 !important;
    }

    [data-bs-theme="dark"] #navbar_main,
    [data-bs-theme="dark"] #navbar_main .navbar-nav {
        background: #172230 !important;
    }

    [data-bs-theme="dark"] #navbar_main .nav-link,
    [data-bs-theme="dark"] #navbar_main .salehly-language-trigger,
    [data-bs-theme="dark"] #navbar_main .salehly-login-link {
        color: #d0d9e5 !important;
    }

    [data-bs-theme="dark"] #navbar_main .nav-link.active,
    [data-bs-theme="dark"] #navbar_main .nav-link:hover,
    [data-bs-theme="dark"] #navbar_main .nav-link:focus-visible {
        color: #ffffff !important;
        background: #243a55 !important;
    }
}