html {
    --topblur-height: 0;
    --search-section-height: var(--catalog-padding);
    --items-scroll-padding: var(--catalog-padding);
}

html:has(body.search) {
    --topblur-height: 10rem;
    --search-section-height: 10rem;
}

html:has(body.search.items) {
    --topblur-height: 23rem;
    --items-scroll-padding: 23rem;
}

html:has(body.search.kwords) {
    --topblur-height: 10rem;
    --search-section-height: 10rem;
}

html:has(body.card) {
    --topblur-height: 0rem;
}


body.catalog aside {
    opacity: 1;
    pointer-events: all;
    right: 0;
}


body.plan_btns app-module-btns-plan {
    opacity: 1;
    pointer-events: all;
}

body.catalog  app-module-btns-plan.route {
    right: calc(var(--side-panel-width) + var(--plan-btns-edge-position));
}

body.catalog  app-module-btns-plan.plans {
    right: calc(var(--side-panel-width) + var(--plan-btns-edge-position));
}


body:not(.card)  app-module-btns-plan.route button.item,
body:not(.routes)  app-module-btns-plan.route button.route,
body:not(.start_point)  app-module-btns-plan.route button.start {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transform: scale(0);
    pointer-events: none;
}


body.plan app-module-plan {
    opacity: 1;
    pointer-events: all;
}

body.search aside section.search {
    opacity: 1;
    pointer-events: all;
}

body.search aside::before {
    top: 10rem;
}

body.card aside::before {
    top: 0rem;
}



body.categories aside section.categories { 
    opacity: 1; 
    pointer-events: all;
}

body.items aside section.items { 
    opacity: 1; 
    pointer-events: all;
}

body.items aside section.categories { 
    top: var(--search-section-height);
    height: 13rem;
    z-index: 500;
}

body.items aside section.categories scroll-area { 
    white-space: nowrap;
    overflow-y: hidden; overflow-x: auto;
}

body.kwords aside section.categories,
body.kwords aside section.items,
body.kwords aside section.item_card {
    opacity: 0; 
    pointer-events: none;
}

body.kwords aside section.kwords {
    opacity: 1; 
    pointer-events: all;
}

body.card aside section.card {
    opacity: 1; 
    pointer-events: all;
}

body.card aside section.categories,
body.card aside section.items,
body.card aside section.item_card,
body.card aside section.topblur,
body.card aside section.search {
    opacity: 0; 
    pointer-events: none;
}



body.gallery .overlay.gallery,
body.idle_promo .overlay.idle_promo {
    opacity: 1; 
    pointer-events: all;
}

body.catalog .overlay.gallery,
body.catalog .overlay.idle_promo,
body.catalog .overlay.keyboard {
    width: calc(100% - var(--side-panel-width));
}



body.idle_warning #overlay_idle_warning {
    opacity: 1;
    pointer-events: all;    
    backdrop-filter: blur(5px);
}



body.trans_routes app-module-btns-plan app-module-plan-trans {
    opacity: 1;
}


body.keyboard .overlay.keyboard {
    opacity: 1;
    pointer-events: all;
}

body.qrcode #overlay_qrcode {
    opacity: 1;
    pointer-events: all;
}





@media screen and (max-width: 1100px) {

    html, body {
        font-size: 7px;
    }
    
    html {
        --side-panel-width: 100%;
    }

    aside {
        backdrop-filter: none;
        background-color: rgb(255,255,255,0.7);
        opacity: 1!important;
    }

    body.card aside::before {
        display: none;
        height: 0;
    }

    #plan, aside {
        height: calc(100% - 9rem);
    }

    app-module-card .qr {
        display: none!important;
    }

    app-module-card scroll-area.description .btns button.btn_on_plan {
        display: inline-block;
    }

    body.catalog #plan {
        width: 100%;
        left: -100dvw;
    }

    body.catalog  app-module-btns-plan.route {
        right: 3rem;
    }
    
    body.catalog  app-module-btns-plan.plans {
        right: 3rem;
    }

    app-module-btns-nav {
        bottom: 0;
    }

    body:not(.card) app-module-btns-nav button.catalog,
    body.card app-module-btns-nav button.item {
        opacity: 1;
        pointer-events: all;
        width: 50%;
        border-left-width: 1px;
        border-right-width: 1px;
        transform: scaleX(1);
    }

    body.catalog .overlay.gallery,
    body.catalog .overlay.idle_promo,
    body.catalog .overlay.keyboard {
        width: 100%;
    }

    /* X close button */
    .overlay::before { 
        display: block;
    }

    body.card.catalog app-module-btns-nav button.item:not(:active) .icon svg path,
    body.catalog:not(.card) app-module-btns-nav button.catalog:not(:active) .icon svg path,
    body:not(.catalog) app-module-btns-nav button.plan:not(:active) .icon svg path {
        fill: var(--ui-master-color);
    }

    nav {
        height: 9rem;
    }

    app-module-kwords button div {
        padding: 1.5rem 2.4rem;
    }
    
    app-module-kwords button div span {
        font-size: 2.4rem;
    }
    
    app-module-btns-plan {
        --plan-btns-edge-position: 2rem;
    }

    app-module-btns-plan app-module-plan-trans {
        --path-width: 4.5;
    }

    @media (orientation: landscape) {
        div[rotatedevice] {
            opacity: 1;
            transition-delay: 0.1s;
            display: block;
        }
    }
    
    
    

}