/*==================================================
    MAESTER APP NAVIGATION
    PART 1 - Navigation Layout
==================================================*/

/*==============================
    HIDE BY DEFAULT
==============================*/

.app-nav,
.app-overlay,
.fab-menu {
    display: none;
}

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

@media (max-width:1199px) {

    /*==============================
        APP NAVIGATION
    ==============================*/

    .app-nav {

        position: fixed;

        left: 50%;
        bottom: calc(14px + env(safe-area-inset-bottom));

        transform: translateX(-50%);

        width: calc(100% - 16px);
        max-width: 640px;

        height: 72px;

        padding: 10px 20px;

        display: flex;
        justify-content: space-between;
        align-items: center;

        background: rgba(255, 255, 255, .98);

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

        border-radius: 24px;

        box-shadow:
            0 10px 35px rgba(15, 23, 42, .12);

        z-index: 999;

    }

    /*==============================
        NAV ITEMS
    ==============================*/

    .app-nav-item {

        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 6px;

        min-width: 60px;

        text-decoration: none;

        color: #757575;

        transition: .30s ease;

        user-select: none;

        -webkit-tap-highlight-color: transparent;

    }

    .app-nav-item i {

        font-size: 21px;

        transition: .30s ease;

    }

    .app-nav-item span {

        font-size: 10px;

        font-weight: 600;

        line-height: 1;

        transition: .30s ease;

    }

    /* Space for Apply Button */

    .app-nav-item:nth-child(2) {

        margin-right: 26px;

    }

    .app-nav-item:nth-child(4) {

        margin-left: 26px;

    }

}

/*==================================================
    PART 2 - Active Navigation
==================================================*/

@media (max-width:1199px) {

    /*==============================
        ACTIVE STATE
    ==============================*/

    .app-nav-item.active {

        color: var(--primary-color);

    }

    .app-nav-item.active i {

        color: var(--primary-color);

        transform: none;

    }

    .app-nav-item.active span {

        color: var(--primary-color);

        font-weight: 700;

    }

    .fab-btn.active {

        background: linear-gradient(135deg,
                #e47d0d,
                #f39b24);

        box-shadow: 0 10px 25px rgba(239, 144, 45, .45);
    }

    /*==============================
        REMOVE DEFAULT INDICATORS
    ==============================*/

    .app-nav-item::before,
    .app-nav-item::after {

        display: none;

    }

    .app-nav-item.active::before,
    .app-nav-item.active::after {

        display: none;

    }

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

    .app-nav-item:hover {

        color: var(--primary-color);

        transform: none;

    }

    .app-nav-item:hover i {

        color: var(--primary-color);

        transform: none;

    }

    .app-nav-item:hover span {

        color: var(--primary-color);

    }

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

    .app-nav-item:active {

        transform: scale(.96);

    }

    .app-nav-item:active i {

        transform: none;

    }

    /*==============================
        TRANSITIONS
    ==============================*/

    .app-nav-item,
    .app-nav-item i,
    .app-nav-item span {

        transition:
            color .30s ease,
            transform .30s ease,
            opacity .30s ease;

    }

}

/*==================================================
    PART 3 - APPLY BUTTON
==================================================*/

@media (max-width:1199px) {

    /*==============================
        APPLY BUTTON
    ==============================*/

    .fab-btn {

        position: absolute;

        left: 50%;
        top: 50%;

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

        width: 60px;
        height: 60px;

        border: none;
        outline: none;

        border-radius: 18px;

        background: linear-gradient(135deg,
                #ef902d,
                #ffab37);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 2px;

        color: #fff;
        text-decoration: none;
        cursor: pointer;

        z-index: 1001;

        transition:
            background .3s ease,
            box-shadow .3s ease,
            transform .2s ease;

        box-shadow:
            0 10px 25px rgba(239, 144, 45, .30);

        -webkit-tap-highlight-color: transparent;

    }

    /*==============================
        ICON
    ==============================*/

    .fab-btn i {

        font-size: 20px;

        color: #fff;

        transition: .3s ease;

    }

    /*==============================
        TEXT
    ==============================*/

    .fab-btn span {

        font-size: 10px;

        font-weight: 700;

        color: #fff;

        line-height: 1;

    }

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

    .fab-btn:hover {

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

        background: linear-gradient(135deg,
                #f59e32,
                #ffb84a);

    }

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

    .fab-btn:active {

        transform:
            translate(-50%, -50%) scale(.95);

    }

    /*==============================
        ACTIVE
    ==============================*/

    .fab-btn.active {

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

        background: linear-gradient(135deg,
                #e47d0d,
                #f39b24);

    }

}

/*==================================================
    NAVIGATION ENTRY
==================================================*/

@keyframes navSlideUp {

    from {

        opacity: 0;
        transform: translate(-50%, 80px);

    }

    to {

        opacity: 1;
        transform: translate(-50%, 0);

    }

}

.app-nav {

    animation: navSlideUp .45s ease;

}

/*==================================================
    PERFORMANCE
==================================================*/

.app-nav,
.fab-btn,
.fab-action {

    will-change: transform;

}

@media (min-width: 0px) {
    .section-scroll-nav {
        position: fixed;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .section-scroll-nav a {
        position: relative;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #d8d8d8;
        transition: .35s ease;
        cursor: pointer;
    }

    .section-scroll-nav a:hover,
    .section-scroll-nav a.active {
        background: #ef902d;
    }

    .section-scroll-nav a.active {
        width: 16px;
        height: 16px;
        box-shadow:
            0 0 0 6px rgba(239, 144, 45, .18),
            0 8px 22px rgba(239, 144, 45, .35);
        transform: scale(1.15);
    }

    .section-scroll-nav a::after {
        content: attr(data-title);
        position: absolute;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        background: #111827;
        color: #fff;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        opacity: 0;
        visibility: hidden;
        transition: .25s ease;
        pointer-events: none;
        text-transform: capitalize;
    }

    .section-scroll-nav a:hover::after {
        opacity: 1;
        visibility: visible;
        left: 34px;
    }
}


/*==================================================
        AUTO HIDE MOBILE APP NAV
==================================================*/

@media (max-width:1199px){

    .app-nav{

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

    }

    .app-nav.nav-hidden{

        transform:translate(-50%,120px);

        opacity:0;

        pointer-events:none;

    }

}

/*==================================================
    TABLET APP NAVIGATION EXTENSION
    Keep the existing mobile app navigation unchanged visually,
    but allow it on tablet portrait and landscape up to 1199px.
==================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
    html {
        scroll-padding-bottom: 108px;
    }

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .app-nav {
        width: min(calc(100% - 48px), 640px);
        bottom: calc(18px + env(safe-area-inset-bottom));
    }
}