/* ============================================================
   EREMITA HOLDING CRM
   BRAND NAVIGATION
   ============================================================

   Inseriti       = Prodotti Energia
   XCredito       = X-Credito
   Mybestdubai    = My Best Dubai
   Bastaunclick   = BastaUnClick
   AuraRent       = Aurora Rent
   Myginevra      = MyGinevra
   Closetmuse     = ClosetMuse

   Il click resta NATIVO EspoCRM.
   Questo file modifica solamente l'aspetto grafico.
   ============================================================ */


/* ============================================================
   VARIABILI
   ============================================================ */

:root {
    --brand-card-width: 142px;
    --brand-card-height: 58px;

    --brand-logo-width: 122px;
    --brand-logo-height: 40px;

    --brand-gap-x: 4px;

    --brand-radius: 10px;

    --brand-border: rgba(30, 48, 75, 0.16);

    --brand-shadow:
        0 2px 5px rgba(15, 30, 50, 0.10),
        0 6px 14px rgba(15, 30, 50, 0.08);

    --brand-shadow-hover:
        0 4px 8px rgba(15, 30, 50, 0.14),
        0 10px 22px rgba(15, 30, 50, 0.13);

    --brand-gold: #d6ad55;
}


/* ============================================================
   CONTENITORI BRAND
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"],
.navbar-nav.tabs li[data-name="XCredito"],
.navbar-nav.tabs li[data-name="Mybestdubai"],
.navbar-nav.tabs li[data-name="BastaUnClick"],
.navbar-nav.tabs li[data-name="Bastaunclick"],
.navbar-nav.tabs li[data-name="AuraRent"],
.navbar-nav.tabs li[data-name="Myginevra"],
.navbar-nav.tabs li[data-name="Closetmuse"] {

    margin-left: var(--brand-gap-x);
    margin-right: var(--brand-gap-x);

    padding: 0;

    box-sizing: border-box;
}


/* ============================================================
   CARD PRINCIPALE
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link {

    position: relative;

    width: var(--brand-card-width) !important;
    min-width: var(--brand-card-width) !important;
    height: var(--brand-card-height) !important;

    margin-top: 6px !important;
    margin-bottom: 6px !important;

    padding: 7px 9px !important;

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

    overflow: hidden;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 55%,
            #f7f9fc 100%
        ) !important;

    border:
        1px solid var(--brand-border) !important;

    border-radius:
        var(--brand-radius) !important;

    box-shadow:
        var(--brand-shadow) !important;

    text-decoration: none !important;

    outline: none !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease !important;
}


/* ============================================================
   NASCONDE TESTO STANDARD ESPOCRM
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link .short-label,

.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link .full-label,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link .short-label {

    display: none !important;
}


/* ============================================================
   CONTENITORE LOGO
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link::before,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link::before {

    content: "";

    display: block;

    width: var(--brand-logo-width) !important;
    height: var(--brand-logo-height) !important;

    flex: 0 0 auto;

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

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

    background-color: transparent !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    box-shadow: none !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}


/* ============================================================
   LOGHI
   ============================================================ */


/* PRODotti ENERGIA */

.navbar-nav.tabs
li[data-name="Inseriti"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/Energia.png") !important;
}


/* X-CREDITO */

.navbar-nav.tabs
li[data-name="XCredito"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/Xcredito.png") !important;
}


/* MY BEST DUBAI */

.navbar-nav.tabs
li[data-name="Mybestdubai"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/Mybestdubai.png") !important;

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


/* BASTA UN CLICK */

.navbar-nav.tabs
li[data-name="BastaUnClick"]
> a.nav-link::before,

.navbar-nav.tabs
li[data-name="Bastaunclick"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/bastaunclick.png") !important;

    width: 126px !important;
    height: 42px !important;
}


/* AURORA RENT */

.navbar-nav.tabs
li[data-name="AuraRent"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/aurorarent_italia.png") !important;

    width: 126px !important;
    height: 42px !important;
}


/* MYGINEVRA */

.navbar-nav.tabs
li[data-name="Myginevra"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/myginevra.png") !important;
}


/* CLOSETMUSE */

.navbar-nav.tabs
li[data-name="Closetmuse"]
> a.nav-link::before {

    background-image:
        url("../res/images/brands/Closetmuse.png") !important;

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


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

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link:hover,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 45%,
            #f4f7fb 100%
        ) !important;

    border-color:
        rgba(45, 73, 112, 0.28) !important;

    box-shadow:
        var(--brand-shadow-hover) !important;
}


.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link:hover::before,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link:hover::before {

    transform: scale(1.035);
}


/* ============================================================
   BRAND ATTIVO
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"].active > a.nav-link,
.navbar-nav.tabs li[data-name="XCredito"].active > a.nav-link,
.navbar-nav.tabs li[data-name="Mybestdubai"].active > a.nav-link,
.navbar-nav.tabs li[data-name="BastaUnClick"].active > a.nav-link,
.navbar-nav.tabs li[data-name="Bastaunclick"].active > a.nav-link,
.navbar-nav.tabs li[data-name="AuraRent"].active > a.nav-link,
.navbar-nav.tabs li[data-name="Myginevra"].active > a.nav-link,
.navbar-nav.tabs li[data-name="Closetmuse"].active > a.nav-link,

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link.active,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link.active {

    border-color:
        var(--brand-gold) !important;

    box-shadow:
        0 0 0 2px rgba(214, 173, 85, 0.18),
        0 0 14px rgba(214, 173, 85, 0.18),
        0 6px 16px rgba(15, 30, 50, 0.14) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffdf8 100%
        ) !important;
}


/* ============================================================
   LINEA ORO BRAND ATTIVO
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="XCredito"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="Mybestdubai"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="BastaUnClick"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="Bastaunclick"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="AuraRent"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="Myginevra"].active > a.nav-link::after,
.navbar-nav.tabs li[data-name="Closetmuse"].active > a.nav-link::after {

    content: "";

    position: absolute;

    left: 28%;
    right: 28%;
    bottom: 3px;

    height: 2px;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d6ad55,
            transparent
        );
}


/* ============================================================
   CLICK
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link:active,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link:active {

    transform:
        translateY(0)
        scale(0.985);
}


/* ============================================================
   RESPONSIVE - MONITOR FINO A 1500px
   ============================================================ */

@media (max-width: 1500px) {

    :root {
        --brand-card-width: 132px;
        --brand-card-height: 56px;

        --brand-logo-width: 114px;
        --brand-logo-height: 38px;

        --brand-gap-x: 3px;
    }
}


/* ============================================================
   RESPONSIVE - 1366px / NOTEBOOK
   ============================================================ */

@media (max-width: 1380px) {

    :root {
        --brand-card-width: 124px;
        --brand-card-height: 54px;

        --brand-logo-width: 108px;
        --brand-logo-height: 36px;

        --brand-gap-x: 2px;
    }

    .navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link,
    .navbar-nav.tabs li[data-name="XCredito"] > a.nav-link,
    .navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link,
    .navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link,
    .navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link,
    .navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link,
    .navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link,
    .navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link {

        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}


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

@media (max-width: 991px) {

    :root {
        --brand-card-width: 132px;
        --brand-card-height: 54px;

        --brand-logo-width: 112px;
        --brand-logo-height: 36px;
    }

    .navbar-nav.tabs li[data-name="Inseriti"],
    .navbar-nav.tabs li[data-name="XCredito"],
    .navbar-nav.tabs li[data-name="Mybestdubai"],
    .navbar-nav.tabs li[data-name="BastaUnClick"],
    .navbar-nav.tabs li[data-name="Bastaunclick"],
    .navbar-nav.tabs li[data-name="AuraRent"],
    .navbar-nav.tabs li[data-name="Myginevra"],
    .navbar-nav.tabs li[data-name="Closetmuse"] {

        margin-top: 2px;
        margin-bottom: 2px;
    }
}


/* ============================================================
   ACCESSIBILITÀ / FOCUS
   ============================================================ */

.navbar-nav.tabs li[data-name="Inseriti"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="XCredito"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="Mybestdubai"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="BastaUnClick"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="Bastaunclick"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="AuraRent"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="Myginevra"] > a.nav-link:focus,
.navbar-nav.tabs li[data-name="Closetmuse"] > a.nav-link:focus {

    outline:
        2px solid rgba(214, 173, 85, 0.55) !important;

    outline-offset: 2px !important;
}

/* ============================================================ EREMITA 
   HOME - LOGO PRINCIPALE Trasforma il logo sinistro in una card 
   coerente con i brand 
   ============================================================ */
.navbar .navbar-brand { position: relative; width: 72px !important; 
    min-width: 72px !important; height: 58px !important; margin-top: 6px 
    !important; margin-bottom: 6px !important; margin-left: 4px 
    !important; margin-right: 8px !important; padding: 5px !important; 
    display: flex !important; align-items: center !important; 
    justify-content: center !important; box-sizing: border-box 
    !important; background:
        linear-gradient( 180deg,
            #ffffff 0%, ffffff 55%, f7f9fc 100%
        ) !important; border: 1px solid rgba(30, 48, 75, 0.16) 
        !important;
    border-radius: 10px !important; box-shadow: 0 2px 5px rgba(15, 30, 
        50, 0.10), 0 6px 14px rgba(15, 30, 50, 0.08) !important;
    overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s 
        ease, border-color 0.18s ease !important;
}
/* Logo Eremita dentro la card */ .navbar .navbar-brand > img { display: 
    block !important; width: auto !important; height: auto !important; 
    max-width: 58px !important; max-height: 48px !important; object-fit: 
    contain; margin: 0 auto !important; transition:
        transform 0.18s ease, filter 0.18s ease;
}
/* Hover card Home */ .navbar .navbar-brand:hover { transform: 
    translateY(-2px); border-color:
        rgba(45, 73, 112, 0.28) !important; box-shadow: 0 4px 8px 
        rgba(15, 30, 50, 0.14), 0 10px 22px rgba(15, 30, 50, 0.13) 
        !important;
}
/* Logo leggermente più grande passando col mouse */ .navbar 
.navbar-brand:hover > img {
    transform: scale(1.06);
}
/* Click */ .navbar .navbar-brand:active { transform: translateY(0) 
        scale(0.985);
}
/* Focus tastiera */ .navbar .navbar-brand:focus { outline: 2px solid 
        rgba(214, 173, 85, 0.55) !important;
    outline-offset: 2px !important;
}
/* ============================================================ 
   RESPONSIVE EREMITA HOME 
   ============================================================ */
@media (max-width: 1500px) { .navbar .navbar-brand { width: 68px 
        !important; min-width: 68px !important; height: 56px !important; 
        margin-left: 3px !important; margin-right: 6px !important;
    }
    .navbar .navbar-brand > img { max-width: 54px !important; 
        max-height: 46px !important;
    }
}
@media (max-width: 1380px) { .navbar .navbar-brand { width: 64px 
        !important; min-width: 64px !important; height: 54px !important; 
        margin-left: 2px !important; margin-right: 5px !important;
    }
    .navbar .navbar-brand > img { max-width: 51px !important; 
        max-height: 43px !important;
    }
}

/* EREMITA_COMPACT_V1 - Barra marchi compatta */

:root {
    --brand-card-width: 128px;
    --brand-card-height: 48px;
    --brand-logo-width: 112px;
    --brand-logo-height: 32px;
    --brand-gap-x: 3px;
}

/* Margini e spaziatura delle tessere */

.navbar-nav.tabs li:is(
    [data-name="Inseriti"],
    [data-name="XCredito"],
    [data-name="Mybestdubai"],
    [data-name="BastaUnClick"],
    [data-name="Bastaunclick"],
    [data-name="AuraRent"],
    [data-name="Myginevra"],
    [data-name="Closetmuse"]
) > a.nav-link {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    padding: 4px 6px !important;
}

/* Logo principale Eremita */

.navbar .navbar-brand {
    width: 62px !important;
    min-width: 62px !important;
    height: 48px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    padding: 4px !important;
}

.navbar .navbar-brand > img {
    max-width: 50px !important;
    max-height: 38px !important;
}

/* Monitor fino a 1500px */

@media (max-width: 1500px) {
    :root {
        --brand-card-width: 120px;
        --brand-card-height: 46px;
        --brand-logo-width: 104px;
        --brand-logo-height: 31px;
    }

    .navbar .navbar-brand {
        width: 58px !important;
        min-width: 58px !important;
        height: 46px !important;
    }

    .navbar .navbar-brand > img {
        max-width: 47px !important;
        max-height: 36px !important;
    }
}

/* Monitor fino a 1380px */

@media (max-width: 1380px) {
    :root {
        --brand-card-width: 112px;
        --brand-card-height: 44px;
        --brand-logo-width: 96px;
        --brand-logo-height: 29px;
    }

    .navbar .navbar-brand {
        width: 56px !important;
        min-width: 56px !important;
        height: 44px !important;
    }

    .navbar .navbar-brand > img {
        max-width: 45px !important;
        max-height: 34px !important;
    }
}

/* Tablet */

@media (max-width: 991px) {
    :root {
        --brand-card-width: 120px;
        --brand-card-height: 46px;
        --brand-logo-width: 104px;
        --brand-logo-height: 31px;
    }
}