/* =========================================================
   THOJA PWA - BOTTOM NAVIGATION
   VERSION CORRIGÉE
========================================================= */

/* =========================================================
   BARRE
========================================================= */

.thoja-bottom-nav {

    position: fixed !important;

    left: 10px !important;
    right: 10px !important;

    bottom: calc(10px + env(safe-area-inset-bottom)) !important;

    width: auto !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 4px 8px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: stretch !important;
    justify-content: space-around !important;

    z-index: 2147483647 !important;

    background: rgba(255, 255, 255, 0.96) !important;

    border: 1px solid rgba(255, 255, 255, 0.7) !important;

    border-radius: 30px !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14),
        0 20px 50px rgba(0, 0, 0, 0.10) !important;

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    overflow: visible !important;

    isolation: isolate;

    transform: translate3d(0, 0, 0);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;
}


/* =========================================================
   CHAQUE BOUTON
========================================================= */

.thoja-bottom-nav .thoja-nav-item {

    position: relative !important;

    flex: 1 1 0 !important;

    width: 20% !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 2px 2px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

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

    gap: 2px !important;

    color: #777 !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    border-radius: 20px !important;

    overflow: visible !important;

    transform: none;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ICÔNE
========================================================= */

.thoja-bottom-nav .thoja-nav-icon {

    position: relative !important;

    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    min-height: 32px !important;

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

    flex: 0 0 32px !important;

    display: flex !important;

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

    z-index: 2;

    transform: none !important;
}


/* =========================================================
   SVG
========================================================= */

.thoja-bottom-nav .thoja-nav-icon svg {

    width: 23px !important;
    height: 23px !important;

    min-width: 23px !important;
    min-height: 23px !important;

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

    display: block !important;

    transform: none;

    fill: none;
}


/* =========================================================
   TEXTE
========================================================= */

.thoja-bottom-nav .thoja-nav-label {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

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

    box-sizing: border-box !important;

    text-align: center !important;

    font-size: 10px !important;

    line-height: 12px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    color: inherit !important;

    transform: none !important;

    z-index: 3;
}


/* =========================================================
   BOUTON ACTIF
========================================================= */

.thoja-bottom-nav .thoja-nav-item.active {

    color: #2563eb !important;
}


/* =========================================================
   CERCLE ACTIF
========================================================= */

.thoja-bottom-nav
.thoja-nav-item.active
.thoja-nav-icon::before {

    content: "";

    position: absolute !important;

    width: 40px !important;
    height: 40px !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50%;

    background: #2563eb !important;

    z-index: -1 !important;

    pointer-events: none;

    animation: thoja-active .3s ease;
}


/* =========================================================
   ICÔNE ACTIVE
========================================================= */

.thoja-bottom-nav
.thoja-nav-item.active
.thoja-nav-icon svg {

    color: #fff !important;

    stroke: #fff !important;

    fill: none !important;

    transform: scale(1.05) !important;
}


/* =========================================================
   TEXTE ACTIF
========================================================= */

.thoja-bottom-nav
.thoja-nav-item.active
.thoja-nav-label {

    color: #2563eb !important;

    font-weight: 700 !important;
}


/* =========================================================
   BADGE
========================================================= */

.thoja-bottom-nav .thoja-nav-badge {

    position: absolute !important;

    top: 2px !important;
    right: 18% !important;

    min-width: 18px !important;
    height: 18px !important;

    padding: 0 4px !important;

    display: flex !important;

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

    box-sizing: border-box !important;

    border-radius: 50px !important;

    background: #ff3b30 !important;

    color: white !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    border: 2px solid white !important;

    z-index: 20 !important;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes thoja-active {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.6);
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* =========================================================
   HIDE
========================================================= */

.thoja-bottom-nav.hide {

    transform: translate3d(0, 130%, 0) !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   SHOW
========================================================= */

.thoja-bottom-nav.show {

    transform: translate3d(0, 0, 0) !important;

    opacity: 1 !important;

    pointer-events: auto !important;
}


/* =========================================================
   PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 380px) {

    .thoja-bottom-nav {

        left: 6px !important;
        right: 6px !important;

        height: 64px !important;

        padding: 3px 5px !important;

        border-radius: 26px !important;
    }

    .thoja-bottom-nav .thoja-nav-icon {

        width: 29px !important;
        height: 29px !important;

        min-width: 29px !important;
        min-height: 29px !important;

        flex-basis: 29px !important;
    }

    .thoja-bottom-nav .thoja-nav-icon svg {

        width: 21px !important;
        height: 21px !important;
    }

    .thoja-bottom-nav .thoja-nav-label {

        font-size: 9px !important;
        line-height: 11px !important;
    }
}


/* =========================================================
   TABLETTE
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .thoja-bottom-nav {

        left: 50% !important;
        right: auto !important;

        width: min(600px, calc(100% - 30px)) !important;

        transform: translate3d(-50%, 0, 0) !important;
    }

    .thoja-bottom-nav.hide {

        transform: translate3d(-50%, 130%, 0) !important;
    }
}


/* =========================================================
   ORDINATEUR
========================================================= */

@media (min-width: 1024px) {

    .thoja-bottom-nav {

        display: none !important;
    }
}