/* ===== Navbar (mobile polish) ===== */
.main-navbar {
    /*    background: linear-gradient(90deg, #8A1538 0%, #6b0f2b 100%);*/
    background: var(--maroon);
    padding: 10px 0;
    line-height: 1.5;
    /*    border-bottom: 1px solid rgba(255,255,255,.15);*/
}

.main-navbar .navbar-brand img {
    width: clamp(13rem, 15vw, 15rem);
    height: auto;
}

/* Make the hamburger look good on dark bg */
.main-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 12px;
    padding: .35rem .6rem;
    outline: none;
}

.main-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/* White toggler icon */
.main-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Links look like your “hero pills” */
/* Base pill style */
.hero-nav-link {
    color: #ffffff;
    text-decoration: none;
    width: 210px;
    /* adjust (190–240) */
    height: 46px;
    /* same height for all */
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    background-color: transparent;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    /* prevent breaking */
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    gap: .35rem;
    font-size: 1rem;
    line-height: 1.5;
    /* spacing between icon and text */
    transition: all .2s ease-in-out;
}

/* Active "الرئيسية" look — white outline + light fill */
.hero-nav-link.active {
    opacity: 1;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .12);
    /* stronger outline */
}

    /* Hover matches Figma active */
    .hero-nav-link:hover {
        background: rgba(255,255,255,.16);
        opacity: 1;
        color: #fff !important;
        text-decoration: none;
    }

.hero-nav-link:focus-visible,
.main-navbar .btn-login:focus-visible,
.main-navbar .navbar-toggler:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.28);
}

/* Make the icons smaller and tighter like your screenshot */
.hero-nav-link i {
    font-size: 1.0rem;
    padding: 2px 0px;
    /* creates the small rounded bubble */
    border-radius: 30px;
}

/* For the non-active pill ("جميع الخدمات") → light grey text only */
.hero-nav-link:not(.active) {
    color: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(255, 255, 255, .32);
    background: transparent;
    opacity: 1;
}

/* On hover, be slightly brighter but still NOT a full pill */
.hero-nav-link:not(.active):hover {
    opacity: 1;
    background: rgba(255,255,255,.12);
    border-color: rgba(255, 255, 255, .48);
}

/* Login button style */
.main-navbar .btn-login {
    border: 1px solid rgba(255, 255, 255, .7);
    color: #000000;
    border-radius: 12px;
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    background-color: #fff;
    width: 130px;
}

    /* Hover matches Figma active */
    .main-navbar .btn-login:hover {
        opacity: 1;
        text-decoration: none;
    }

/* ========== Small screens only (phones & small tablets) ========== */
@media (max-width: 575.98px) {

    /* Smaller logo */
    .main-navbar .navbar-brand img {
        width: 10rem;
        height: auto;
    }

    /* Hide the standalone login near brand on phones */
    .main-navbar>.container>.btn-login {
        display: none !important;
    }

    /* Make collapse dropdown full-width and readable */
    .main-navbar .navbar-collapse {
        position: absolute;
        inset-inline: 0;
        /* stretch left→right in RTL/LTR */
        top: 100%;
        background: linear-gradient(90deg, #8A1538 0%, #6b0f2b 100%);
        padding: .9rem;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
        z-index: 1000;
    }

    /* Center the two links; put login at end */
    .main-navbar .navbar-nav {
        gap: .6rem;
    }

    .main-navbar .navbar-nav .nav-item {
        flex: 0 0 auto;
    }

    .main-navbar .navbar-nav .nav-link {
        width: 100%;
        text-align: center;
        padding: .65rem .9rem;
        justify-content: center !important;
    }


    /* Show a full-width login inside the menu on phones */
    .main-navbar .navbar-nav .btn-login {
        display: block !important;
        width: 100%;
        margin-top: .25rem;
    }
}

/* ========== Medium+ (tablets landscape & desktop) ========== */
@media (max-width: 576px) {

    /* Keep collapse inline, remove dropdown panel styling */
    .main-navbar .navbar-collapse {
        flex-direction: column !important;
        width: 100% !important;
    }

    .main-navbar .centered {
        width: 100% !important;
        flex-direction: column !important;
    }

    /* Force login item full width and remove auto margin */
    .main-navbar .navbar-nav li:last-child {
        margin-inline-start: 0 !important;
        /* removes ms-auto in RTL or LTR */
        width: 100% !important;
    }

    .hero-nav-link {
        border: 1px solid rgba(255, 255, 255, .25) !important;
        border-radius: 12px !important;
    }

    .btn-login {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 992px) {

    /* Keep collapse inline, remove dropdown panel styling */
    .main-navbar .navbar-collapse {
        flex-direction: column !important;
        width: 100% !important;
    }

    .main-navbar .centered {
        width: 100% !important;
        flex-direction: column !important;
    }

    /* Force login item full width and remove auto margin */
    .main-navbar .navbar-nav li:last-child {
        margin-inline-start: 0 !important;
        /* removes ms-auto in RTL or LTR */
        width: 100% !important;
    }

    /* Show a full-width login inside the menu on phones */
    .main-navbar .navbar-nav .btn-login {
        display: block !important;
        width: 100%;
        margin-top: .25rem;
    }

    /* Center the two links; put login at end */
    .main-navbar .navbar-nav {
        gap: .6rem;
    }

    .main-navbar .navbar-nav .nav-item {
        flex: 0 0 auto;
    }

    .main-navbar .navbar-nav .nav-link {
        width: 100%;
        text-align: center;
        padding: .65rem .9rem;
    }
}