/* ============================================================
   INCEPTION V31
   ALL SEARCH DROPDOWNS = DROP-UP

   Province = UP
   City     = UP
   School   = UP

   Anti transparent / anti tembus.
   ============================================================ */


/* ============================================================
   WRAPPERS
   ============================================================ */

#inception-register-v50-host
.v50-searchable:has(#v50-province),

#inception-register-v50-host
.v50-searchable:has(#v50-city),

#inception-register-v50-host
.v50-searchable:has(#v50-school){

    position:
        relative!important;

    overflow:
        visible!important;

    isolation:
        isolate!important;
}



/* ============================================================
   ALL 3 MENUS = FIXED DROP-UP
   ============================================================ */

#inception-register-v50-host
.v50-searchable:has(#v50-province)
> .v50-search-menu,

#inception-register-v50-host
.v50-searchable:has(#v50-city)
> .v50-search-menu,

#inception-register-v50-host
.v50-searchable:has(#v50-school)
> .v50-search-menu{

    position:
        absolute!important;

    top:
        auto!important;

    right:
        0!important;

    bottom:
        calc(100% + 7px)!important;

    left:
        0!important;

    width:
        100%!important;

    min-width:
        100%!important;

    max-width:
        100%!important;

    max-height:
        160px!important;

    margin:
        0!important;

    padding:
        6px!important;

    box-sizing:
        border-box!important;

    overflow-x:
        hidden!important;

    overflow-y:
        auto!important;

    transform:
        none!important;

    transform-origin:
        bottom center!important;

    /*
     * IMPORTANT:
     * benar-benar opaque.
     */
    background:
        #ffffff!important;

    background-color:
        #ffffff!important;

    opacity:
        1!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

    mix-blend-mode:
        normal!important;

    border:
        1px solid
        #d8dfeb!important;

    border-radius:
        11px!important;

    box-shadow:
        0
        14px
        30px
        rgba(27,39,67,.16)!important;

    z-index:
        2147483000!important;

    transition:
        none!important;

    animation:
        none!important;

    visibility:
        visible!important;
}



/* ============================================================
   CLOSED
   ============================================================ */

#inception-register-v50-host
.v50-searchable:has(#v50-province)
> .v50-search-menu:not(.open),

#inception-register-v50-host
.v50-searchable:has(#v50-city)
> .v50-search-menu:not(.open),

#inception-register-v50-host
.v50-searchable:has(#v50-school)
> .v50-search-menu:not(.open){

    display:
        none!important;
}



/* ============================================================
   OPEN
   ============================================================ */

#inception-register-v50-host
.v50-searchable:has(#v50-province)
> .v50-search-menu.open,

#inception-register-v50-host
.v50-searchable:has(#v50-city)
> .v50-search-menu.open,

#inception-register-v50-host
.v50-searchable:has(#v50-school)
> .v50-search-menu.open{

    display:
        block!important;

    opacity:
        1!important;

    visibility:
        visible!important;

    background:
        #ffffff!important;
}



/* ============================================================
   OVERRIDE SEMUA DIRECTION LAMA
   V26 / V27 / V30
   ============================================================ */

#inception-register-v50-host
.v50-searchable.v26-open-up
> .v50-search-menu,

#inception-register-v50-host
.v50-searchable.v26b-flow-dropdown
> .v50-search-menu,

#inception-register-v50-host
.v50-searchable:has(#v50-province)
> .v50-search-menu,

#inception-register-v50-host
.v50-searchable:has(#v50-city)
> .v50-search-menu,

#inception-register-v50-host
.v50-searchable:has(#v50-school)
> .v50-search-menu{

    position:
        absolute!important;

    top:
        auto!important;

    bottom:
        calc(100% + 7px)!important;

    transform:
        none!important;
}



/* ============================================================
   ACTIVE GRID ITEM
   Supaya dropdown berada DI ATAS sibling field.
   ============================================================ */

#inception-register-v50-host
.v50-grid
> *:has(.v50-search-menu.open){

    position:
        relative!important;

    z-index:
        2147482000!important;

    overflow:
        visible!important;
}



/* ============================================================
   CARD / GRID JANGAN CLIP
   ============================================================ */

#inception-register-v50-host
.v50-grid,

#inception-register-v50-host
.v50-card,

#inception-register-v50-host
.inc-final-shell{

    overflow:
        visible!important;
}



/* ============================================================
   OPTIONS = OPAQUE
   ============================================================ */

#inception-register-v50-host
.v50-search-menu
.v50-menu-item{

    position:
        relative!important;

    z-index:
        2!important;

    width:
        100%!important;

    box-sizing:
        border-box!important;

    color:
        #111111!important;

    font-weight:
        700!important;

    text-align:
        left!important;

    opacity:
        1!important;
}


#inception-register-v50-host
.v50-search-menu
.v50-menu-title{

    color:
        #111111!important;

    font-weight:
        750!important;

    opacity:
        1!important;
}


#inception-register-v50-host
.v50-search-menu
.v50-menu-sub{

    color:
        #4c5566!important;

    font-weight:
        600!important;

    opacity:
        1!important;
}



/* ============================================================
   HOVER
   ============================================================ */

#inception-register-v50-host
.v50-search-menu
.v50-menu-item:hover,

#inception-register-v50-host
.v50-search-menu
.v50-menu-item:focus{

    color:
        #111111!important;

    background:
        #f1f4fb!important;

    opacity:
        1!important;
}



/* ============================================================
   SCROLLBAR
   ============================================================ */

#inception-register-v50-host
.v50-search-menu{

    scrollbar-width:
        thin!important;

    scrollbar-color:
        #a8b2c4
        #ffffff!important;
}


#inception-register-v50-host
.v50-search-menu::-webkit-scrollbar{

    width:
        6px!important;
}


#inception-register-v50-host
.v50-search-menu::-webkit-scrollbar-track{

    background:
        #ffffff!important;
}


#inception-register-v50-host
.v50-search-menu::-webkit-scrollbar-thumb{

    background:
        #a8b2c4!important;

    border-radius:
        999px!important;
}



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

@media(max-width:760px){

    #inception-register-v50-host
    .v50-search-menu{

        max-height:
            140px!important;
    }

}