/* =========================================================
   MEDIBOOK — SHARED NAVBAR
   One navbar, every public page
========================================================= */

/* ---------- NAVBAR ---------- */

header.mb-navbar{
    position:relative !important;
    z-index:1000 !important;

    width:100% !important;
    min-height:78px !important;
    height:78px !important;

    margin:0 !important;
    padding:0 max(4%, calc((100% - 1240px)/2)) !important;

    /* Prevent right overflow on pages with scrollbar */
    box-sizing:border-box !important;

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

    background:
        linear-gradient(
            90deg,
            rgba(8,5,12,.97) 0%,
            rgba(18,8,24,.96) 48%,
            rgba(9,5,13,.97) 100%
        ) !important;

    border:0 !important;
    border-bottom:1px solid rgba(216,180,254,.10) !important;
    border-radius:0 !important;

    box-shadow:0 12px 36px rgba(0,0,0,.22) !important;

    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}


/* =========================================================
   LOGO
   IMPORTANT:
   Logo is completely isolated from menu active styles.
========================================================= */

header.mb-navbar > a.logo{
    position:relative !important;

    display:inline-flex !important;
    align-items:center !important;
    gap:11px !important;

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

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

    color:#ffffff !important;
    background:transparent !important;
    background-image:none !important;

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

    box-shadow:none !important;
    transform:none !important;

    font-family:"Nunito",Arial,sans-serif !important;
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:-.035em !important;
    text-decoration:none !important;

    overflow:visible !important;
}


/* Logo hover */
header.mb-navbar > a.logo:hover,
header.mb-navbar > a.logo:focus,
header.mb-navbar > a.logo:active{
    color:#ffffff !important;
    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;

    transform:none !important;
    text-decoration:none !important;
}


/* =========================================================
   LOGO TEXT
   MediBook text will NEVER get active/gradient styling.
========================================================= */

header.mb-navbar > a.logo > span:not(.logo-mark){
    display:inline-block !important;

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

    color:#ffffff !important;
    background:transparent !important;
    background-image:none !important;

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

    box-shadow:none !important;

    font-family:"Nunito",Arial,sans-serif !important;
    font-size:inherit !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:-.035em !important;

    text-decoration:none !important;

    transform:none !important;
}


/* =========================================================
   LOGO ICON
========================================================= */

header.mb-navbar > a.logo > .logo-mark{
    width:40px !important;
    height:40px !important;

    flex:0 0 40px !important;

    display:grid !important;
    place-items:center !important;

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

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

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #AB47BC 0%,
            #9C27B0 52%,
            #7B1FA2 100%
        ) !important;

    background-image:
        linear-gradient(
            135deg,
            #AB47BC 0%,
            #9C27B0 52%,
            #7B1FA2 100%
        ) !important;

    box-shadow:
        0 9px 28px rgba(156,39,176,.30),
        0 0 30px rgba(171,71,188,.10) !important;

    font-family:Arial,sans-serif !important;
    font-size:22px !important;
    font-weight:900 !important;
    line-height:1 !important;

    transform:none !important;
}


/* =========================================================
   MAIN MENU
========================================================= */

header.mb-navbar > nav#mainNav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:7px !important;

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

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* =========================================================
   MENU LINKS
   IMPORTANT:
   Direct children only.
========================================================= */

header.mb-navbar > nav#mainNav > a{
    position:relative !important;

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

    width:auto !important;
    min-width:0 !important;
    min-height:46px !important;

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

    color:#cfc4d4 !important;

    background:transparent !important;
    background-image:none !important;

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

    box-shadow:none !important;

    font-family:"Nunito",Arial,sans-serif !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;

    text-decoration:none !important;

    transition:
        color .22s ease,
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease !important;
}


/* ---------- Normal menu hover ---------- */

header.mb-navbar > nav#mainNav > a:hover{
    color:#ffffff !important;

    background:
        rgba(171,71,188,.11) !important;

    background-image:none !important;

    transform:translateY(-1px) !important;

    box-shadow:none !important;
}


/* =========================================================
   ACTIVE MENU
   ONLY NORMAL MENU ITEMS
========================================================= */

header.mb-navbar > nav#mainNav > a.active:not(.nav-btn){
    color:#ffffff !important;

    background:
        rgba(171,71,188,.13) !important;

    background-image:none !important;

    border:0 !important;

    box-shadow:none !important;

    transform:none !important;
}


/* Active underline */

header.mb-navbar > nav#mainNav > a.active:not(.nav-btn)::after{
    content:"" !important;

    position:absolute !important;

    left:15px !important;
    right:15px !important;
    bottom:5px !important;

    width:auto !important;
    height:2px !important;

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

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

    background:
        linear-gradient(
            90deg,
            #AB47BC,
            #D66DE5
        ) !important;

    box-shadow:none !important;

    transform:none !important;
}


/* =========================================================
   BOOK A DEMO BUTTON
========================================================= */

header.mb-navbar > nav#mainNav > a.nav-btn{
    margin-left:8px !important;

    min-height:48px !important;

    padding:0 21px !important;

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #AB47BC 0%,
            #9C27B0 55%,
            #8E24AA 100%
        ) !important;

    background-image:
        linear-gradient(
            135deg,
            #AB47BC 0%,
            #9C27B0 55%,
            #8E24AA 100%
        ) !important;

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

    box-shadow:
        0 11px 28px rgba(156,39,176,.24) !important;

    transform:none !important;
}


/* Book Demo hover */

header.mb-navbar > nav#mainNav > a.nav-btn:hover{
    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #BA55CA 0%,
            #A02BB5 55%,
            #8E24AA 100%
        ) !important;

    background-image:
        linear-gradient(
            135deg,
            #BA55CA 0%,
            #A02BB5 55%,
            #8E24AA 100%
        ) !important;

    transform:translateY(-1px) !important;

    box-shadow:
        0 15px 34px rgba(156,39,176,.32) !important;
}


/* Book Demo active */

header.mb-navbar > nav#mainNav > a.nav-btn.active{
    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #AB47BC 0%,
            #9C27B0 55%,
            #8E24AA 100%
        ) !important;

    transform:none !important;
}


/* VERY IMPORTANT:
   No underline on Book A Demo */

header.mb-navbar > nav#mainNav > a.nav-btn::after{
    display:none !important;
    content:none !important;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

header.mb-navbar .mb-menu-toggle{
    display:none !important;

    width:44px !important;
    height:44px !important;

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

    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;

    gap:5px !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px !important;

    color:#ffffff !important;

    background:
        rgba(255,255,255,.055) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.16) !important;

    cursor:pointer !important;
}


/* Hamburger lines */

header.mb-navbar .mb-menu-toggle span{
    display:block !important;

    width:19px !important;
    height:2px !important;

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

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

    background:#ffffff !important;

    transition:
        transform .22s ease,
        opacity .22s ease !important;
}


/* Hamburger → X */

header.mb-navbar .mb-menu-toggle.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
}

header.mb-navbar .mb-menu-toggle.is-open span:nth-child(2){
    opacity:0 !important;
}

header.mb-navbar .mb-menu-toggle.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media(max-width:820px){

    header.mb-navbar{
        min-height:70px !important;
        height:70px !important;

        padding:
            0 4%
            !important;
    }


    /* Logo */

    header.mb-navbar > a.logo{
        font-size:18px !important;
    }

    header.mb-navbar > a.logo > .logo-mark{
        width:38px !important;
        height:38px !important;

        flex-basis:38px !important;

        border-radius:10px !important;

        font-size:20px !important;
    }


    /* Mobile hamburger */

    header.mb-navbar .mb-menu-toggle{
        display:flex !important;
    }


    /* Mobile dropdown */

    header.mb-navbar > nav#mainNav{
        position:absolute !important;

        top:calc(100% + 10px) !important;

        left:4% !important;
        right:4% !important;

        width:auto !important;

        display:none !important;

        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;

        gap:4px !important;

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

        background:
            linear-gradient(
                145deg,
                rgba(17,8,23,.985),
                rgba(8,5,12,.99)
            ) !important;

        border:1px solid rgba(171,71,188,.22) !important;
        border-radius:17px !important;

        box-shadow:
            0 24px 65px rgba(0,0,0,.42),
            0 0 35px rgba(156,39,176,.08) !important;

        backdrop-filter:blur(22px) !important;
        -webkit-backdrop-filter:blur(22px) !important;
    }


    /* Open state */

    header.mb-navbar > nav#mainNav.mb-open{
        display:flex !important;
    }


    /* Mobile links */

    header.mb-navbar > nav#mainNav > a{
        width:100% !important;

        min-height:48px !important;

        justify-content:flex-start !important;

        padding:0 15px !important;

        color:#cfc4d4 !important;

        background:transparent !important;
        background-image:none !important;

        border-radius:11px !important;

        font-size:14px !important;

        transform:none !important;
    }


    /* Mobile hover */

    header.mb-navbar > nav#mainNav > a:hover{
        color:#ffffff !important;

        background:
            linear-gradient(
                90deg,
                rgba(171,71,188,.15),
                rgba(171,71,188,.055)
            ) !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(171,71,188,.15),
                rgba(171,71,188,.055)
            ) !important;

        transform:none !important;
    }


    /* Mobile active */

    header.mb-navbar > nav#mainNav > a.active:not(.nav-btn){
        color:#ffffff !important;

        background:
            linear-gradient(
                90deg,
                rgba(171,71,188,.15),
                rgba(171,71,188,.055)
            ) !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(171,71,188,.15),
                rgba(171,71,188,.055)
            ) !important;

        transform:none !important;
    }


    /* Remove desktop underline on mobile */

    header.mb-navbar > nav#mainNav > a.active:not(.nav-btn)::after{
        display:none !important;
        content:none !important;
    }


    /* Mobile Book Demo */

    header.mb-navbar > nav#mainNav > a.nav-btn{
        width:100% !important;

        justify-content:center !important;

        margin:5px 0 0 !important;

        min-height:50px !important;

        padding:0 16px !important;

        color:#ffffff !important;

        background:
            linear-gradient(
                135deg,
                #AB47BC,
                #9C27B0,
                #8E24AA
            ) !important;

        background-image:
            linear-gradient(
                135deg,
                #AB47BC,
                #9C27B0,
                #8E24AA
            ) !important;

        border-radius:11px !important;
    }


    header.mb-navbar > nav#mainNav > a.nav-btn:hover{
        color:#ffffff !important;

        background:
            linear-gradient(
                135deg,
                #BA55CA,
                #A02BB5,
                #8E24AA
            ) !important;

        transform:none !important;
    }


    header.mb-navbar > nav#mainNav > a.nav-btn.active{
        color:#ffffff !important;

        background:
            linear-gradient(
                135deg,
                #AB47BC,
                #9C27B0,
                #8E24AA
            ) !important;
    }


    /* No pseudo element on Book Demo */

    header.mb-navbar > nav#mainNav > a.nav-btn::after{
        display:none !important;
        content:none !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    header.mb-navbar{
        padding:0 4.5% !important;
    }


    header.mb-navbar .mb-menu-toggle{
        width:42px !important;
        height:42px !important;
    }


    header.mb-navbar > nav#mainNav{
        left:4.5% !important;
        right:4.5% !important;
    }


    header.mb-navbar > a.logo{
        font-size:17px !important;
    }


    header.mb-navbar > a.logo > .logo-mark{
        width:37px !important;
        height:37px !important;

        flex-basis:37px !important;

        font-size:19px !important;
    }
}


/* =========================================================
   BODY LOCK WHEN MOBILE MENU IS OPEN
========================================================= */

body.mb-menu-open{
    overflow:hidden;
}


@media(min-width:821px){

    body.mb-menu-open{
        overflow:auto;
    }
}