/*
 * Azioni di navigazione: utente, social, lingua e minicarrello.
 * I colori restano nelle variabili del tema; geometria e spaziatura vivono qui.
 */
:root{
    --nav-action-size: 2rem;
    --nav-action-icon-size: 1.15rem;
    --nav-action-gap: .5rem;
    --nav-action-padding: .25rem;
    --nav-action-radius: 50%;
    --nav-action-border-width: 1px;
    --nav-action-dropdown-width: 16rem;
    --nav-action-dropdown-padding: .5rem;
    --nav-action-dropdown-radius: 0;
    --nav-action-badge-size: 1.15rem;
}

.userbar-cont,
.socialmediaicons,
.lang-cont{
    display: flex;
    align-items: center;
}
.lang-cont{
    order: 3;
}

.topbar .userbar-cont{ order: 2; }
.topbar .socialmediaicons{ order: 3; }

.userbar-cont{
    gap: var(--nav-action-gap);
}

.nav-actions{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--nav-action-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-action{
    position: relative;
    display: flex;
    align-items: center;
}

.nav-action-link{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-action-size);
    height: var(--nav-action-size);
    padding: var(--nav-action-padding);
    border: var(--nav-action-border-width) solid var(--border-color);
    border-radius: var(--nav-action-radius);
    color: var(--body-color);
    background-color: transparent;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.nav-action-link:hover,
.nav-action-link:focus-visible{
    color: var(--body-color-light);
    border-color: currentColor;
}

.nav-action-link > .bi,
.nav-action-link > .fa,
.nav-action-link > .fab,
.nav-action-link > .fas{
    font-size: var(--nav-action-icon-size);
    line-height: 1;
}

.nav-action-label{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-action-dropdown{
    min-width: var(--nav-action-dropdown-width);
    padding: var(--nav-action-dropdown-padding);
    border-radius: var(--nav-action-dropdown-radius);
}

.nav-action-dropdown.dropdown-menu-end{
    right: 0;
    left: auto;
}

.nav-user-initials{
    border-color: transparent;
    background-color: var(--theme-info);
    color: var(--theme-info-txt);
    font-size: .9rem;
    text-transform: uppercase;
}

.nav-user-initials.user-90{
    background-color: var(--theme-evidence-bg);
    color: var(--theme-evidence-txt);
}

.nav-user-initials.user-100{
    background-color: var(--alder-bg);
    color: var(--alder-txt);
}

.nav-action-badge{
    position: absolute;
    top: -.45rem;
    right: -.45rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--nav-action-badge-size);
    height: var(--nav-action-badge-size);
    padding: 0 .25rem;
    border-radius: 50rem;
    background-color: var(--theme-evidence-bg);
    color: var(--theme-evidence-txt);
    font-size: .7rem;
    line-height: 1;
}

.socialmediaicons .nav-action-link{
    border-color: transparent;
    color: #fff;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.socialmediaicons .nav-action-link:hover,
.socialmediaicons .nav-action-link:focus-visible{
    color: #fff;
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.08);
    box-shadow: 0 .2rem .45rem rgba(0, 0, 0, .22);
}

.socialmediaicons .nav-action-link > .fab{
    font-size: calc(var(--nav-action-icon-size) * .88);
}

.socialmediaicons .social-facebook{ background-color: #3b5998; }
.socialmediaicons .social-youtube{ background-color: #bb0000; }
.socialmediaicons .social-instagram{
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}
.socialmediaicons .social-linkedin{ background-color: #0073b1; }
.socialmediaicons .social-x{ background-color: #000; }
.socialmediaicons .social-whatsapp{ background-color: #3cb82a; }
.socialmediaicons .social-phone{
    background-color: var(--theme-color3-bg);
    color: var(--theme-color3-txt, #000);
}

.lang-cont .nav-action-flag img{
    display: block;
    width: 1.5rem;
    height: auto;
}

.lang-cont .nav-action-flag:not(.active) img{
    opacity: .55;
}

.lang-cont .dropdown-toggle::after{
    display: none;
}

.lang-cont .nav-action-text{
    padding-inline: .5rem;
    border-color: var(--theme-color2-bg);
    border-radius: var(--nav-action-dropdown-radius);
    text-transform: uppercase;
    opacity: .35;
}
.lang-cont .nav-action-text.active{
    opacity: 1;
}

.mini-cart-menu{
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(32rem, calc(100dvh - 5rem));
    padding: 0;
    overflow-y: auto;
}

.mini-cart-list{
    max-height: 18rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.mini-cart-item{
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: start;
    padding: .75rem;
    border-bottom: 1px solid var(--border-color);
}

.mini-cart-item img{
    width: 3.75rem;
    height: auto;
}

.mini-cart-item a{
    color: var(--body-color);
    text-decoration: none;
}

.mini-cart-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--theme-evidence-bg);
    color: var(--theme-evidence-txt);
}

.mini-cart-summary{
    padding: 1rem;
}

.mini-cart-total{
    color: var(--theme-evidence-bg);
    font-size: 1.1rem;
}

footer .socialmediaicons{
    margin-bottom: var(--margin-bottom-base);
}

@media (max-width: 575px){
    :root{
        --nav-action-gap: .35rem;
    }
}

@media (prefers-reduced-motion: reduce){
    .socialmediaicons .nav-action-link{
        transition: none;
    }

    .socialmediaicons .nav-action-link:hover,
    .socialmediaicons .nav-action-link:focus-visible{
        transform: none;
    }
}
