/* QRalto authenticated scalable navigation */

.app-authenticated .site-header{
    height:68px;
}

.app-authenticated .nav-shell{
    width:min(1500px,calc(100% - 36px));
    max-width:1500px;
}

.app-authenticated .app-main-nav{
    gap:5px;
    white-space:nowrap;
}

.app-authenticated .app-main-nav>a:not(.button),
.app-authenticated .app-nav-menu>summary{
    display:inline-flex;
    min-height:38px;
    align-items:center;
    gap:6px;
    padding:0 11px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:rgba(16,42,42,.68);
    font-size:12px;
    font-weight:760;
    line-height:1;
    cursor:pointer;
    transition:background .16s ease,color .16s ease;
}

.app-authenticated .app-main-nav>a:not(.button):hover,
.app-authenticated .app-nav-menu:not(.app-create-menu)>summary:hover{
    background:rgba(16,42,42,.055);
    color:var(--ink);
    opacity:1;
}

.app-authenticated .app-main-nav>a.active:not(.button),
.app-nav-menu.active>summary{
    background:#e6efe8;
    color:var(--ink);
}

.app-authenticated .app-main-nav>a.active:not(.button):after{
    content:none;
}

.app-nav-menu{
    position:relative;
    margin:0;
}

.app-nav-menu>summary{
    list-style:none;
}

.app-nav-menu>summary::-webkit-details-marker{
    display:none;
}

.app-nav-menu>summary>svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    transition:transform .16s ease;
}

.app-nav-menu[open]>summary>svg{
    transform:rotate(180deg);
}

.app-nav-menu[open]>summary:not(.app-create-summary){
    background:#edf2ef;
    color:var(--ink);
}

.app-nav-menu-panel{
    position:absolute;
    top:calc(100% + 11px);
    z-index:80;
    display:grid;
    width:330px;
    padding:9px;
    border:1px solid rgba(16,42,42,.12);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 65px rgba(16,42,42,.16);
    backdrop-filter:blur(20px);
}

.app-experience-panel{
    left:-8px;
}

.app-create-panel{
    right:0;
    width:315px;
}

.app-nav-menu-label{
    padding:7px 10px 8px;
    color:rgba(16,42,42,.43);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.app-nav-menu-panel>a{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    align-items:center;
    min-height:62px;
    padding:9px 10px;
    border-radius:11px;
    color:var(--ink);
    transition:background .15s ease;
}

.app-nav-menu-panel>a:hover,
.app-nav-menu-panel>a.active{
    background:#f2f6f3;
}

.app-nav-menu-panel>a.active{
    box-shadow:inset 3px 0 0 var(--green);
}

.app-nav-menu-panel>a>span:last-child{
    min-width:0;
}

.app-nav-menu-panel strong,
.app-nav-menu-panel small{
    display:block;
}

.app-nav-menu-panel strong{
    font-size:12px;
    font-weight:820;
}

.app-nav-menu-panel small{
    margin-top:3px;
    overflow:hidden;
    color:rgba(16,42,42,.52);
    font-size:9px;
    font-weight:600;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.app-nav-product-icon,
.app-create-icon{
    display:grid;
    width:36px;
    height:36px;
    place-items:center;
    border-radius:10px;
    background:#eaf2ed;
    color:var(--green);
}

.app-nav-product-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.6;
}

.app-nav-product-icon.memory{
    background:#f2f5df;
    color:#6e8629;
}

.app-nav-product-icon.passport{
    background:#f0ece5;
    color:#6b5c48;
}

.app-create-summary{
    min-height:42px!important;
    margin-left:7px;
    padding:0 15px!important;
    border-radius:11px!important;
    background:var(--ink)!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:850!important;
}

.app-create-summary:hover,
.app-create-menu[open]>.app-create-summary{
    background:#173b39!important;
}

.app-create-plus{
    color:var(--lime);
    font-size:16px;
}

.app-create-icon{
    background:var(--ink);
    color:var(--lime);
    font-size:16px;
    font-weight:800;
}

.app-create-icon.soft{
    background:#edf3ef;
    color:var(--green);
}

.app-create-divider{
    height:1px;
    margin:6px 9px;
    background:rgba(16,42,42,.1);
}

.app-authenticated .account-menu{
    margin-left:7px;
}

.app-authenticated .account-menu>summary{
    min-height:44px;
}

@media(max-width:1180px){
    .app-authenticated .nav-shell{
        width:min(100% - 24px,1500px);
    }

    .app-authenticated .app-main-nav{
        gap:2px;
    }

    .app-authenticated .app-main-nav>a:not(.button),
    .app-authenticated .app-nav-menu>summary{
        padding-inline:8px;
        font-size:11px;
    }

    .app-authenticated .account-copy{
        display:none;
    }

    .app-authenticated .account-menu>summary{
        min-width:auto;
    }
}

@media(max-width:960px){
    .app-authenticated .site-header{
        height:68px;
    }

    .app-authenticated .main-nav{
        top:68px;
        gap:5px;
        padding:13px;
        background:#fff;
    }

    .app-authenticated .app-main-nav>a:not(.button),
    .app-authenticated .app-nav-menu>summary{
        width:100%;
        min-height:46px;
        justify-content:space-between;
        padding:0 13px;
        font-size:14px;
    }

    .app-nav-menu{
        width:100%;
    }

    .app-nav-menu-panel{
        position:static;
        width:100%;
        margin-top:5px;
        padding:7px;
        border-radius:12px;
        background:#f8faf8;
        box-shadow:none;
    }

    .app-nav-menu-panel>a{
        min-height:59px;
        background:#fff;
    }

    .app-create-summary{
        margin-left:0;
    }

    .app-authenticated .account-menu{
        width:100%;
        margin:4px 0 0;
    }

    .app-authenticated .account-copy{
        display:block;
    }
}

@media(max-width:620px){
    .app-authenticated .nav-shell{
        width:min(100% - 20px,1500px);
    }

    .app-nav-menu-panel small{
        white-space:normal;
    }
}


/* QRalto public navigation */

.public-site .nav-shell{
    width:min(1380px,calc(100% - 48px));
}

.public-site .main-nav{
    gap:7px;
    white-space:nowrap;
}

.public-site .main-nav>a:not(.button),
.public-site .public-products-menu>summary{
    display:inline-flex;
    min-height:40px;
    align-items:center;
    gap:6px;
    padding:0 12px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:rgba(16,42,42,.76);
    font-size:13px;
    font-weight:760;
    line-height:1;
    cursor:pointer;
    transition:background .16s ease,color .16s ease;
}

.public-site .main-nav>a:not(.button):hover,
.public-site .public-products-menu>summary:hover{
    background:rgba(16,42,42,.055);
    color:var(--ink);
    opacity:1;
}

.public-site .main-nav>a.active:not(.button),
.public-site .public-products-menu.active>summary{
    background:var(--mint);
    color:var(--ink);
}

.public-products-menu{
    position:relative;
}

.public-products-menu>summary{
    list-style:none;
}

.public-products-menu>summary::-webkit-details-marker{
    display:none;
}

.public-products-menu>summary>svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    transition:transform .16s ease;
}

.public-products-menu[open]>summary>svg{
    transform:rotate(180deg);
}

.public-products-menu[open]>summary{
    background:#edf2ef!important;
    color:var(--ink)!important;
}

.public-products-panel{
    position:absolute;
    top:calc(100% + 12px);
    left:-8px;
    z-index:80;
    display:grid;
    width:350px;
    padding:9px;
    border:1px solid rgba(16,42,42,.12);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 65px rgba(16,42,42,.16);
    backdrop-filter:blur(20px);
}

.public-products-label{
    padding:7px 10px 8px;
    color:rgba(16,42,42,.43);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.public-products-panel>a{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:11px;
    align-items:center;
    min-height:64px;
    padding:9px 10px;
    border-radius:11px;
    color:var(--ink);
    text-decoration:none;
    transition:background .15s ease;
}

.public-products-panel>a:hover,
.public-products-panel>a.active{
    background:#f2f6f3;
}

.public-products-panel>a.active{
    box-shadow:inset 3px 0 0 var(--green);
}

.public-products-panel>a>span:last-child{
    min-width:0;
}

.public-products-panel strong,
.public-products-panel small{
    display:block;
}

.public-products-panel strong{
    font-size:12px;
    font-weight:840;
}

.public-products-panel small{
    margin-top:3px;
    color:rgba(16,42,42,.52);
    font-size:9px;
    font-weight:600;
    line-height:1.35;
}

.public-product-icon{
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border-radius:10px;
    background:#edf3ef;
    color:var(--green);
    font-size:16px;
    font-weight:850;
}

.public-product-icon.memory{
    background:#f2f5df;
    color:#6e8629;
}

.public-product-icon.passport{
    background:#f0ece5;
    color:#6b5c48;
}

.public-product-icon.menu{
    background:#e8f0ed;
    color:#315f55;
}

.public-site .main-nav>.button{
    margin-left:5px;
    min-height:42px;
    padding-inline:19px;
    border-radius:12px;
}

@media(max-width:1100px){
    .public-site .nav-shell{
        width:min(100% - 28px,1380px);
    }

    .public-site .main-nav{
        gap:3px;
    }

    .public-site .main-nav>a:not(.button),
    .public-site .public-products-menu>summary{
        padding-inline:9px;
        font-size:12px;
    }
}

@media(max-width:960px){
    .public-site .main-nav{
        gap:5px;
        white-space:normal;
    }

    .public-products-menu{
        width:100%;
    }

    .public-site .main-nav>a:not(.button),
    .public-site .public-products-menu>summary{
        width:100%;
        min-height:46px;
        justify-content:space-between;
        padding:0 13px;
        font-size:14px;
    }

    .public-products-panel{
        position:static;
        width:100%;
        margin-top:5px;
        padding:7px;
        border-radius:12px;
        background:#f8faf8;
        box-shadow:none;
    }

    .public-products-panel>a{
        min-height:60px;
        background:#fff;
    }

    .public-site .main-nav>.button{
        width:100%;
        margin:4px 0 0;
    }
}

@media(max-width:620px){
    .public-site .nav-shell{
        width:min(100% - 20px,1380px);
    }

    .public-products-panel small{
        white-space:normal;
    }
}