/* ===== Servanex Layout – Modern Glass Navbar ===== */
:root {
    --primary: #2A5C99;
    --primary-600: #214a7a;
    --text: #e8eef7; /* نص فاتح افتراضي */
    --muted: #9aa4b2;
    --bg: #0b1220;
    --surface: #0f172a; /* خلفيات داكنة صريحة */
    --ring: rgba(42,92,153,.35);
    --shadow: 0 10px 30px rgba(2,6,23,.18);
    --radius: 20px;
    --trans: .25s ease;
    --header-h: 84px;
    --footer-h: 0px;
}

/* Basics */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: linear-gradient(180deg,#0b1220 0,#0f172a 100%);
    color: var(--text);
    font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}

[dir="rtl"] body {
    font-family: "Cairo",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, svg {
    max-width: 100%;
    height: auto;
}

/* ===== Desktop Navbar ===== */
.navbar-modern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    min-height: var(--header-h);
    padding: .7rem 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--primary) 55%, transparent));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.14);
    transition: background var(--trans), box-shadow var(--trans), padding var(--trans);
}

    .navbar.scrolled, .navbar-modern.scrolled {
        background: color-mix(in srgb, var(--primary) 88%, transparent);
        box-shadow: var(--shadow);
        padding: .55rem 0;
    }

    .navbar-modern .navbar-brand {
        display: flex;
        align-items: center;
        gap: .6rem;
        color: #fff;
        font-weight: 800;
        letter-spacing: .2px;
    }

        .navbar-modern .navbar-brand img {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            border: 2px solid rgba(255,255,255,.25);
        }

    .navbar .nav-link,
    .navbar-modern .nav-link {
        color: #fff !important;
        font-weight: 700;
        letter-spacing: .2px;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .6rem .9rem !important;
        border-radius: 999px;
        position: relative;
        line-height: 1.1;
        transition: background var(--trans), transform var(--trans), opacity var(--trans);
    }

        .navbar .nav-link i, .navbar-modern .nav-link i {
            font-size: 1.05rem;
            vertical-align: middle;
        }

        .navbar .nav-link:hover, .navbar-modern .nav-link:hover {
            background: rgba(255,255,255,.14);
            transform: translateY(-1px);
        }

        .navbar .nav-link::after, .navbar-modern .nav-link::after {
            content: "";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 6px;
            height: 2px;
            background: #fff;
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--trans);
        }

        .navbar .nav-link:hover::after, .navbar-modern .nav-link:hover::after {
            transform: scaleX(1);
        }

[dir="rtl"] .navbar .nav-link::after, [dir="rtl"] .navbar-modern .nav-link::after {
    transform-origin: right;
}

/* Buttons */
.navbar-modern .btn {
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(255,255,255,.06);
    transition: transform var(--trans), background var(--trans), border-color var(--trans);
}

    .navbar-modern .btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.7);
    }

/* ===== Glassy Dropdowns (dark, no white) ===== */
.dropdown-menu {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: .5rem;
    box-shadow: var(--shadow);
    max-width: 100vw;
}

.dropdown-item {
    border-radius: 10px;
    font-weight: 600;
    color: #e8eef7;
}

    .dropdown-item:hover {
        background: color-mix(in srgb, var(--primary) 18%, transparent);
        color: #fff;
    }

.dropdown-header {
    color: #ffffff;
    opacity: .95;
}

.dropdown-divider {
    border-top-color: rgba(255,255,255,.18);
}

.dropdown-menu .dropdown-item i {
    width: 20px;
    text-align: center;
    opacity: .9;
}

/* Icon-only pills + badges */
.icon-pill {
    border-radius: 999px !important;
    padding: .35rem .6rem;
    line-height: 1;
    color: #fff;
}

.icon-btn {
    position: relative;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    border: 0;
}

    .icon-btn:focus {
        outline: none;
    }

    .icon-btn::after {
        display: none;
    }
    /* نستخدم before أدناه فقط */
    .icon-btn[data-count]::before {
        content: attr(data-count);
        position: absolute;
        top: -6px;
        inset-inline-end: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: #dc3545;
        color: #fff;
        font-size: 11px;
        line-height: 18px;
        text-align: center;
        font-weight: 700;
    }

    .icon-btn[data-count="0"]::before, .icon-btn:not([data-count])::before {
        display: none;
    }

html[dir="rtl"] .icon-btn[data-count]::before {
    right: -6px;
}

html[dir="ltr"] .icon-btn[data-count]::before {
    right: -6px;
    left: auto;
}

/* Avatar */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.35);
}

/* Main area */
main[role="main"] {
    padding-top: var(--header-h);
    min-height: calc(100dvh - var(--header-h) - var(--footer-h));
}

/* Footer */
footer {
    background: radial-gradient(1200px 400px at 10% -20%, color-mix(in srgb, var(--primary) 45%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--primary) 60%, transparent), var(--bg));
    color: #fff;
}

    footer h5 {
        font-weight: 800;
        letter-spacing: .3px;
    }

    footer .footer-col a {
        color: color-mix(in srgb, #ffffff 85%, transparent);
        text-decoration: none;
    }

        footer .footer-col a:hover {
            color: #fff;
            text-decoration: underline;
        }

    footer .social-icons a {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.14);
        border-radius: 14px;
        transition: transform var(--trans), background var(--trans);
    }

        footer .social-icons a:hover {
            transform: translateY(-2px);
            background: rgba(255,255,255,.24);
        }

    footer .border-top {
        border-color: rgba(255,255,255,.22) !important;
    }

/* Scroll to top */
.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--trans);
    cursor: pointer;
    z-index: 1030;
}

    .scroll-top.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* Cards & buttons */
.card {
    border: 0;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: #e8eef7;
}

.btn {
    border-radius: 14px !important;
    font-weight: 700;
}

    .btn:active {
        transform: translateY(1px) scale(.99);
    }

/* Compact tweaks */
.navbar-modern .navbar-nav {
    gap: .25rem;
}

@media (min-width: 1400px) {
    .navbar-modern .navbar-nav {
        gap: .5rem;
    }
}

@media (max-width: 1399.98px) {
    .navbar-modern .navbar-brand span {
        display: none;
    }

    .navbar-modern .nav-link .nav-label {
        display: none;
    }
}

/* Offcanvas search (dark) */
.offcanvas-search {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: var(--shadow);
    color: #e8eef7;
}

    .offcanvas-search .offcanvas-header {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .offcanvas-search .input-group-text {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.16);
        color: #e8eef7;
    }

    .offcanvas-search .form-control {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.16);
        color: #e8eef7;
        height: 56px;
    }

        .offcanvas-search .form-control::placeholder {
            color: #c7d2fe;
            opacity: .7;
        }

/* Hide legacy search on mobile */
@media (max-width: 991.98px) {
    .search-box {
        display: none;
    }
}

/* ===== App-like Mobile Layout ===== */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 60%, transparent), color-mix(in srgb, var(--primary) 85%, transparent));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.mh-logo-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
}

.mh-account, .mh-icon {
    padding: .4rem .6rem;
    color: #fff;
}

@media (max-width: 991.98px) {
    main[role="main"] {
        padding-top: calc(56px + env(safe-area-inset-top, 0));
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0));
        min-height: calc(100dvh - var(--footer-h));
    }

    footer {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0));
    }
}

/* Bottom Tab Bar */
.mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    padding: 6px max(env(safe-area-inset-left,12px),12px) calc(6px + env(safe-area-inset-bottom,0)) max(env(safe-area-inset-right,12px),12px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid rgba(255,255,255,.16);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    z-index: 1050;
}

.mtab-item, .mtab-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    color: #e8eef7;
    background: transparent;
    border: 0;
    border-radius: 12px;
    padding: 6px 4px;
}

    .mtab-item i, .mtab-btn i {
        font-size: 1.05rem;
    }

    .mtab-item.active, .mtab-item:hover, .mtab-btn:hover {
        background: rgba(255,255,255,.12);
    }

/* Footer accordion on mobile */
@media (max-width: 991.98px) {
    .footer-col h5 {
        margin-bottom: .5rem;
    }

    .footer-col .collapse:not(.show) {
        display: none;
    }

    .footer-col .collapser {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .5rem 0;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

        .footer-col .collapser i {
            opacity: .9;
        }
}

/* Message menu text wrapping */
.messages-menu .dropdown-item {
    white-space: normal;
}

.messages-menu img {
    object-fit: cover;
}
.num-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}