/* =========================================================
   THE MARITIME BROTHERHOOD
   GLOBAL BOTTOM NAVIGATION
   Responsive • Minimize • Restore • Destroy Mode
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;800&display=swap");


/* =========================================================
   GLOBAL VARIABLES
   ========================================================= */

:root {
    --nav-green: #4caf50;
    --nav-green-soft: #9ee3a2;

    --nav-text: #b5b5bb;
    --nav-text-active: #ffffff;

    --nav-border: rgba(255,255,255,.08);
    --nav-active-border: rgba(76,175,80,.34);

    --nav-bg-top: rgba(28,28,31,.98);
    --nav-bg-bottom: rgba(11,11,13,.99);

    --nav-width-gap: 28px;
    --nav-max-width: 820px;

    --nav-height: 74px;
    --nav-padding: 7px;

    --nav-bottom:
        max(
            12px,
            env(safe-area-inset-bottom)
        );

    /* Top control dimensions */
    --nav-tab-width: 50px;
    --nav-tab-height: 32px;
    --nav-tab-overlap: 16px;

    /*
       Previous gap = 6px
       5% larger = 6.3px
    */
    --nav-tab-gap: 6.3px;

    /*
       Perfect centering offset.

       50px button
       + 6.3px gap
       = 56.3px between button centres

       Half = 28.15px
    */
    --nav-tab-pair-offset: 28.15px;

}


/* =========================================================
   BOX SIZING
   ========================================================= */

.menu-bar,
.menu-bar *,
.nav-minimize-btn,
.nav-minimize-btn *,
.nav-destroy-btn,
.nav-destroy-btn *,
.nav-restore-btn,
.nav-restore-btn * {
    box-sizing: border-box !important;
}


/* =========================================================
   PAGE SPACE
   ========================================================= */

body {
    padding-bottom:
        calc(
            112px +
            env(safe-area-inset-bottom)
        ) !important;

    transition:
        padding-bottom .3s ease;
}


/* =========================================================
   MAIN NAVIGATION BAR
   ========================================================= */

.menu-bar {
    position: fixed !important;

    left: 50% !important;
    bottom: var(--nav-bottom) !important;

    transform:
        translateX(-50%) !important;

    width:
        calc(
            100% -
            var(--nav-width-gap)
        ) !important;

    max-width:
        var(--nav-max-width) !important;

    height:
        var(--nav-height) !important;

    min-height:
        var(--nav-height) !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        var(--nav-padding) !important;

    background:
        linear-gradient(
            145deg,
            var(--nav-bg-top),
            var(--nav-bg-bottom)
        ) !important;

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

    border-radius:
        20px !important;

    backdrop-filter:
        blur(22px)
        saturate(110%) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(110%) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.62),
        0 5px 16px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    z-index:
        99999 !important;

    transition:
        transform .36s cubic-bezier(.22,1,.36,1),
        opacity .24s ease,
        visibility .36s !important;
}


/* =========================================================
   REMOVE OLD NAV DECORATION
   ========================================================= */

.menu-bar::before,
.menu-bar::after {
    content:
        none !important;

    display:
        none !important;
}


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

.menu-bar .menu-item {
    position:
        relative !important;

    flex:
        1 1 0 !important;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        60px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.menu-bar .menu-item > a {
    position:
        relative !important;

    width:
        100% !important;

    height:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        5px !important;

    margin:
        0 !important;

    padding:
        6px 2px !important;

    background:
        transparent !important;

    color:
        var(--nav-text) !important;

    font-family:
        "Roboto",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;

    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .18s ease,
        box-shadow .22s ease !important;

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


/* =========================================================
   NAV ICONS
   ========================================================= */

.menu-bar .menu-item > a i {
    position:
        relative !important;

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font-size:
        20px !important;

    line-height:
        1 !important;

    color:
        inherit !important;

    transition:
        color .22s ease,
        transform .22s ease,
        filter .22s ease !important;
}


/* =========================================================
   NAV LABELS
   ========================================================= */

.menu-bar .menu-item > a span {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;

    color:
        inherit !important;

    font-family:
        "Roboto",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-style:
        normal !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .25px !important;

    text-align:
        center !important;

    text-transform:
        uppercase !important;

    text-shadow:
        none !important;
}


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

.menu-bar .menu-item > a.nav-active {
    color:
        var(--nav-text-active) !important;

    background:
        linear-gradient(
            145deg,
            rgba(76,175,80,.16),
            rgba(76,175,80,.045)
        ) !important;

    border-color:
        var(--nav-active-border) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 5px 18px rgba(0,0,0,.22) !important;
}


/* Active icon */

.menu-bar .menu-item > a.nav-active i {
    color:
        var(--nav-green) !important;

    filter:
        drop-shadow(
            0 0 6px
            rgba(76,175,80,.30)
        ) !important;
}


/* Active text */

.menu-bar .menu-item > a.nav-active span {
    color:
        #ffffff !important;
}


/* Remove active underline */

.menu-bar .menu-item > a.nav-active::after {
    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   DESKTOP NAV HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine) {

    .menu-bar .menu-item > a:hover {
        color:
            var(--nav-green-soft) !important;

        background:
            rgba(255,255,255,.035) !important;

        border-color:
            rgba(255,255,255,.07) !important;

        transform:
            translateY(-1px) !important;
    }


    .menu-bar .menu-item > a:hover i {
        color:
            var(--nav-green) !important;

        transform:
            translateY(-2px)
            scale(1.04) !important;
    }
}


/* =========================================================
   TAP FEEDBACK
   ========================================================= */

.menu-bar .menu-item > a:active {
    transform:
        scale(.96) !important;
}


/* =========================================================
   TOP CONTROL BUTTONS
   Minimize + Destroy
   ========================================================= */

.nav-minimize-btn,
.nav-destroy-btn {
    position:
        fixed;

    left:
        50%;

    bottom:
        calc(
            var(--nav-bottom) +
            var(--nav-height) -
            var(--nav-tab-overlap)
        );

    width:
        var(--nav-tab-width);

    height:
        var(--nav-tab-height);

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    margin:
        0;

    padding:
        4px 0 0;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    color:
        var(--nav-green-soft);

    cursor:
        pointer;

    opacity:
        1;

    visibility:
        visible;

    z-index:
        100001;

    appearance:
        none;

    -webkit-appearance:
        none;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        opacity .2s ease,
        transform .22s ease,
        color .2s ease;
}


/* =========================================================
   PERFECTLY CENTER BOTH BUTTONS AS ONE PAIR
   ========================================================= */

.nav-minimize-btn {
    transform:
        translateX(
            calc(
                -50% -
                var(--nav-tab-pair-offset)
            )
        );
}


.nav-destroy-btn {
    transform:
        translateX(
            calc(
                -50% +
                var(--nav-tab-pair-offset)
            )
        );
}


/* =========================================================
   VISIBLE TOP OF BOTH CONTROLS
   ========================================================= */

.nav-minimize-btn::before,
.nav-destroy-btn::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        calc(
            var(--nav-tab-height) -
            var(--nav-tab-overlap)
        );

    background:
        linear-gradient(
            145deg,
            rgba(29,29,32,1),
            rgba(13,13,15,1)
        );

    border-top:
        1px solid
        rgba(255,255,255,.09);

    border-left:
        1px solid
        rgba(255,255,255,.09);

    border-right:
        1px solid
        rgba(255,255,255,.09);

    border-bottom:
        0 !important;

    border-radius:
        15px 15px 0 0;

    box-shadow:
        0 -7px 18px
        rgba(0,0,0,.28);

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   NO LOWER BLACK OVERLAP
   ========================================================= */

.nav-minimize-btn::after,
.nav-destroy-btn::after {
    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   CHEVRONS
   ========================================================= */

.nav-chevron {
    position:
        relative;

    display:
        block;

    width:
        9px;

    height:
        9px;

    border-right:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

    z-index:
        2;
}


.nav-chevron-down {
    transform:
        rotate(45deg);
}


.nav-chevron-up {
    transform:
        rotate(225deg);
}


/* =========================================================
   DESTROY TAB - OPTICAL ARROW ALIGNMENT
   ========================================================= */

/*
   Both chevrons use the same 9px square and 2px borders.
   Rotating that border corner by 225deg makes the visible
   UP arrow sit about 6px higher than the DOWN arrow.
   Offset only the Destroy tab icon; leave Restore unchanged.
*/
.nav-destroy-btn > .nav-chevron-up {
    transform: translateY(4.5px) rotate(225deg);
}


/* =========================================================
   DESTROY MODE - MATCHING UP ARROW
   Uses the same .nav-chevron shape and size as Minimize.
   No SVG, masks, asterisk, or additional icon overrides.
   ========================================================= */

/* =========================================================
   TOP CONTROL HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine) {

    .nav-minimize-btn:hover,
    .nav-destroy-btn:hover {
        color:
            #ffffff;
    }


    .nav-minimize-btn:hover {
        transform:
            translateX(
                calc(
                    -50% -
                    var(--nav-tab-pair-offset)
                )
            )
            translateY(-2px);
    }


    .nav-destroy-btn:hover {
        transform:
            translateX(
                calc(
                    -50% +
                    var(--nav-tab-pair-offset)
                )
            )
            translateY(-2px);
    }


    .nav-minimize-btn:hover::before,
    .nav-destroy-btn:hover::before {
        background:
            linear-gradient(
                145deg,
                rgba(34,34,37,1),
                rgba(15,15,17,1)
            );

        border-color:
            rgba(255,255,255,.14);
    }
}


/* =========================================================
   MINIMIZED NAVIGATION
   ========================================================= */

.menu-bar.nav-minimized {
    transform:
        translateX(-50%)
        translateY(
            calc(
                100% +
                40px +
                env(safe-area-inset-bottom)
            )
        ) !important;

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}


/* =========================================================
   HIDE TOP CONTROLS
   ========================================================= */

.nav-minimize-btn.nav-control-hidden,
.nav-destroy-btn.nav-control-hidden {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


.nav-minimize-btn.nav-control-hidden {
    transform:
        translateX(
            calc(
                -50% -
                var(--nav-tab-pair-offset)
            )
        )
        translateY(18px);
}


.nav-destroy-btn.nav-control-hidden {
    transform:
        translateX(
            calc(
                -50% +
                var(--nav-tab-pair-offset)
            )
        )
        translateY(18px);
}



/* =========================================================
   RESTORE / MENU BUTTON
   ========================================================= */

.nav-restore-btn {
    position:
        fixed;

    left:
        50%;

    bottom:
        max(
            8px,
            env(safe-area-inset-bottom)
        );

    transform:
        translateX(-50%)
        translateY(25px);

    min-width:
        92px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin:
        0;

    padding:
        0 17px;

    background:
        linear-gradient(
            145deg,
            rgba(29,29,32,.99),
            rgba(12,12,14,.99)
        );

    color:
        var(--nav-text);

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        999px;

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 12px 30px rgba(0,0,0,.58),
        inset 0 1px 0 rgba(255,255,255,.05);

    font-family:
        "Roboto",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .25px !important;

    text-transform:
        uppercase !important;

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    z-index:
        100000;

    transition:
        opacity .22s ease,
        transform .3s cubic-bezier(.22,1,.36,1),
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

    appearance:
        none;

    -webkit-appearance:
        none;

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


/* =========================================================
   RESTORE BUTTON VISIBLE
   ========================================================= */

.nav-restore-btn.nav-restore-visible {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   RESTORE ARROW
   ========================================================= */

.nav-restore-btn
.nav-chevron-up {
    color:
        var(--nav-green-soft) !important;
}


/* =========================================================
   RESTORE MENU TEXT
   ========================================================= */

.nav-restore-text {
    color:
        var(--nav-text) !important;

    font-family:
        "Roboto",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-style:
        normal !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .25px !important;

    text-transform:
        uppercase !important;

    text-shadow:
        none !important;
}


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

@media (hover:hover) and (pointer:fine) {

    .nav-restore-btn:hover {
        background:
            rgba(255,255,255,.06);

        border-color:
            rgba(76,175,80,.35);
    }


    .nav-restore-btn:hover
    .nav-restore-text {
        color:
            var(--nav-green-soft) !important;
    }


    .nav-restore-btn:hover
    .nav-chevron-up {
        color:
            var(--nav-green) !important;
    }
}


/* =========================================================
   PAGE SPACE WHEN NAV IS MINIMIZED
   ========================================================= */

body.nav-is-minimized {
    padding-bottom:
        calc(
            62px +
            env(safe-area-inset-bottom)
        ) !important;
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width:900px) {

    :root {
        --nav-width-gap: 22px;

        --nav-height: 72px;
        --nav-padding: 6px;

        --nav-bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        --nav-tab-width: 50px;
        --nav-tab-height: 32px;
        --nav-tab-overlap: 16px;

        --nav-tab-gap: 6.3px;
        --nav-tab-pair-offset: 28.15px;
    }


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


    body.nav-is-minimized {
        padding-bottom:
            calc(
                62px +
                env(safe-area-inset-bottom)
            ) !important;
    }


    .menu-bar {
        border-radius:
            19px !important;
    }


    .menu-bar
    .menu-item {
        height:
            58px !important;
    }


    .menu-bar
    .menu-item > a {
        gap:
            4px !important;

        border-radius:
            13px !important;
    }


    .menu-bar
    .menu-item > a i {
        font-size:
            19px !important;
    }


    .menu-bar
    .menu-item > a span {
        font-size:
            9.5px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .20px !important;
    }
}


/* =========================================================
   PHONES
   Destroy icon slightly smaller
   ========================================================= */

@media (max-width:600px) {

    :root {
        --nav-width-gap: 16px;

        --nav-height: 68px;
        --nav-padding: 5px;

        --nav-bottom:
            max(
                7px,
                env(safe-area-inset-bottom)
            );

        --nav-tab-width: 48px;
        --nav-tab-height: 30px;
        --nav-tab-overlap: 15px;

        /*
           Previous gap = 5px
           +5% = 5.25px
        */
        --nav-tab-gap: 5.25px;

        /*
           (48 + 5.25) / 2
        */
        --nav-tab-pair-offset: 26.625px;

    }


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


    body.nav-is-minimized {
        padding-bottom:
            calc(
                58px +
                env(safe-area-inset-bottom)
            ) !important;
    }


    .menu-bar {
        border-radius:
            17px !important;
    }


    .menu-bar
    .menu-item {
        height:
            56px !important;
    }


    .menu-bar
    .menu-item > a {
        gap:
            4px !important;

        padding:
            5px 1px !important;

        border-radius:
            12px !important;
    }


    .menu-bar
    .menu-item > a i {
        font-size:
            18px !important;
    }


    .menu-bar
    .menu-item > a span {
        font-size:
            8.5px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .12px !important;
    }


    .nav-minimize-btn,
    .nav-destroy-btn {
        padding-top:
            3px;
    }


    .nav-minimize-btn::before,
    .nav-destroy-btn::before {
        border-radius:
            14px 14px 0 0;
    }




    .nav-restore-btn {
        min-width:
            86px;

        height:
            40px;

        padding:
            0 15px;

        gap:
            7px;
    }


    .nav-restore-text {
        font-size:
            8.5px !important;

        letter-spacing:
            .12px !important;
    }
}


/* =========================================================
   SMALL PHONES
   Destroy icon smaller again
   ========================================================= */

@media (max-width:390px) {

    :root {
        --nav-width-gap: 12px;

        --nav-padding: 4px;

        --nav-tab-width: 46px;
        --nav-tab-height: 30px;
        --nav-tab-overlap: 15px;

        /*
           Previous gap = 4px
           +5% = 4.2px
        */
        --nav-tab-gap: 4.2px;

        /*
           (46 + 4.2) / 2
        */
        --nav-tab-pair-offset: 25.1px;

    }


    .menu-bar
    .menu-item > a {
        gap:
            3px !important;
    }


    .menu-bar
    .menu-item > a i {
        font-size:
            17px !important;
    }


    .menu-bar
    .menu-item > a span {
        font-size:
            7.8px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .04px !important;
    }




    .nav-restore-text {
        font-size:
            7.8px !important;

        letter-spacing:
            .04px !important;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width:340px) {

    .menu-bar
    .menu-item > a span {
        display:
            none !important;
    }


    .menu-bar
    .menu-item > a i {
        font-size:
            20px !important;
    }


    .nav-restore-text {
        display:
            block !important;

        font-size:
            8px !important;
    }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width:1200px) {

    :root {
        --nav-height: 76px;
        --nav-bottom: 18px;

        --nav-tab-width: 50px;
        --nav-tab-height: 32px;
        --nav-tab-overlap: 16px;

        --nav-tab-gap: 6.3px;
        --nav-tab-pair-offset: 28.15px;
    }


    body {
        padding-bottom:
            120px !important;
    }


    .menu-bar
    .menu-item {
        height:
            60px !important;
    }


    .menu-bar
    .menu-item > a i {
        font-size:
            20px !important;
    }


    .menu-bar
    .menu-item > a span {
        font-size:
            10px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .30px !important;
    }


    .nav-restore-text {
        font-size:
            10px !important;

        letter-spacing:
            .30px !important;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.menu-bar
.menu-item > a:focus-visible,

.nav-minimize-btn:focus-visible,

.nav-destroy-btn:focus-visible,

.nav-restore-btn:focus-visible {

    outline:
        2px solid
        var(--nav-green) !important;

    outline-offset:
        2px !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    body,

    .menu-bar,

    .menu-bar
    .menu-item > a,

    .menu-bar
    .menu-item > a i,

    .nav-minimize-btn,

    .nav-destroy-btn,

    .nav-restore-btn {

        transition:
            none !important;
    }
}