/* ============================================================
   MKTECHSUPPORT V2 — PUBLIC DOWNBAR
   ============================================================

   YOUR TRUSTED TECH PARTNER

   Navigation:
   Home | Services | Repairs | FAQ | Account

   Component:
   includes/public/downbar.php

   Mobile and tablet:
   Visible up to 900px

   Desktop:
   Hidden from 901px

   ============================================================ */


/* ============================================================
   01. DOWNBAR VARIABLES
   ============================================================ */

.mk-downbar {
    --mk-downbar-local-height:
        var(--mk-downbar-height, 68px);

    --mk-downbar-navy: #081b34;
    --mk-downbar-blue: #1769e0;
    --mk-downbar-blue-soft: #eaf2ff;
    --mk-downbar-muted: #64748b;
    --mk-downbar-border: #e2eaf3;

    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 700;

    width: 100%;

    min-height: var(--mk-downbar-local-height);

    padding-bottom:
        env(safe-area-inset-bottom, 0px);

    background: rgba(255, 255, 255, 0.98);

    border-top:
        1px solid var(--mk-downbar-border);

    box-shadow:
        0 -4px 18px rgba(8, 27, 52, 0.08);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}


/* ============================================================
   02. FIVE-COLUMN NAVIGATION
   ============================================================ */

.mk-downbar__inner {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    align-items: stretch;

    width: 100%;
    max-width: 640px;

    min-height:
        var(--mk-downbar-height, 68px);

    margin-inline: auto;
}


/* ============================================================
   03. NAVIGATION ITEM
   ============================================================ */

.mk-downbar__item {
    position: relative;

    display: flex;
    flex-direction: column;

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

    gap: 4px;

    min-width: 0;
    min-height:
        var(--mk-downbar-height, 68px);

    padding: 8px 3px;

    color: #64748b;

    background: transparent;

    border: 0;

    text-align: center;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* ============================================================
   04. HOVER
   ============================================================ */

.mk-downbar__item:hover {
    background: #f1f6ff;
    color: #1769e0;
}


/* ============================================================
   05. PRESSED STATE
   ============================================================ */

.mk-downbar__item:active {
    transform: scale(0.96);
}


/* ============================================================
   06. ICON CONTAINER
   ============================================================ */

.mk-downbar__icon {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    color: currentColor;
}


/* ============================================================
   07. SVG ICONS
   ============================================================ */

.mk-downbar__icon svg {
    display: block;

    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    color: inherit;

    opacity: 1;
    visibility: visible;
}

/*
   Important:
   SVG icons in the updated downbar.php use
   fill="none" and stroke="currentColor".

   Do not force fill: currentColor here, as
   that would fill the outlined icons.
*/

.mk-downbar__icon svg path,
.mk-downbar__icon svg circle,
.mk-downbar__icon svg rect,
.mk-downbar__icon svg line {
    stroke: currentColor;
}


/* ============================================================
   08. NAVIGATION LABEL
   ============================================================ */

.mk-downbar__label {
    display: block;

    width: 100%;

    overflow: hidden;

    color: currentColor;

    font-size: 0.7rem;
    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   09. ACTIVE NAVIGATION ITEM
   ============================================================ */

.mk-downbar__item.is-active {
    color: #1769e0;
    background: #eaf2ff;
}

.mk-downbar__item.is-active:hover {
    background: #dceaff;
}


/* ============================================================
   10. ACTIVE ICON
   ============================================================ */

.mk-downbar__item.is-active
.mk-downbar__icon {
    color: #1769e0;
}


/* ============================================================
   11. ACTIVE LABEL
   ============================================================ */

.mk-downbar__item.is-active
.mk-downbar__label {
    color: #1769e0;
    font-weight: 800;
}


/* ============================================================
   12. ACTIVE INDICATOR
   ============================================================ */

.mk-downbar__active-indicator {
    position: absolute;

    top: 0;
    left: 50%;

    width: 32px;
    height: 3px;

    border-radius: 0 0 999px 999px;

    background: #1769e0;

    transform: translateX(-50%);

    pointer-events: none;
}


/* ============================================================
   13. ACCOUNT ICON VISIBILITY
   ============================================================ */

.mk-downbar__item[data-downbar-item="account"]
.mk-downbar__icon {
    color: #081b34;
}

.mk-downbar__item[data-downbar-item="account"]
.mk-downbar__icon svg {
    display: block;

    width: 24px;
    height: 24px;

    opacity: 1;
    visibility: visible;
}

.mk-downbar__item[data-downbar-item="account"]:hover
.mk-downbar__icon,
.mk-downbar__item[data-downbar-item="account"].is-active
.mk-downbar__icon {
    color: #1769e0;
}


/* ============================================================
   14. KEYBOARD ACCESSIBILITY
   ============================================================ */

.mk-downbar__item:focus-visible {
    z-index: 1;

    outline: 3px solid #08b6b2;
    outline-offset: -4px;
}


/* ============================================================
   15. PAGE CONTENT COMPENSATION
   ============================================================ */

/*
   The downbar is fixed, so content needs
   enough space at the bottom.

   Apply compensation to the public application
   wrapper as well as the main content only where
   needed, without changing the desktop layout.
*/

@media (max-width: 900px) {

    .mk-public-main {
        padding-bottom:
            calc(
                var(--mk-downbar-height, 68px)
                + env(safe-area-inset-bottom, 0px)
                + 16px
            );
    }

    .mk-public-app {
        padding-bottom:
            calc(
                var(--mk-downbar-height, 68px)
                + env(safe-area-inset-bottom, 0px)
            );
    }

}


/* ============================================================
   16. DESKTOP
   ============================================================ */

@media (min-width: 901px) {

    .mk-downbar {
        display: none;
    }

}


/* ============================================================
   17. TABLET
   ============================================================ */

@media (min-width: 641px) and (max-width: 900px) {

    .mk-downbar__inner {
        max-width: 560px;
    }

    .mk-downbar__label {
        font-size: 0.74rem;
    }

    .mk-downbar__icon svg {
        width: 25px;
        height: 25px;
    }

}


/* ============================================================
   18. MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .mk-downbar__inner {
        max-width: none;
    }

    .mk-downbar__item {
        gap: 3px;
        padding: 7px 2px;
    }

    .mk-downbar__icon {
        width: 28px;
        height: 28px;
    }

    .mk-downbar__icon svg {
        width: 23px;
        height: 23px;
    }

    .mk-downbar__label {
        font-size: 0.68rem;
    }

}


/* ============================================================
   19. SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .mk-downbar__item {
        padding-inline: 1px;
    }

    .mk-downbar__icon {
        width: 26px;
        height: 26px;
    }

    .mk-downbar__icon svg {
        width: 22px;
        height: 22px;
    }

    .mk-downbar__label {
        font-size: 0.64rem;
        letter-spacing: -0.01em;
    }

}


/* ============================================================
   20. VERY NARROW MOBILE
   ============================================================ */

@media (max-width: 340px) {

    .mk-downbar__label {
        font-size: 0.59rem;
    }

    .mk-downbar__icon svg {
        width: 21px;
        height: 21px;
    }

}


/* ============================================================
   21. SIDEBAR OPEN
   ============================================================ */

/*
   The sidebar and backdrop use higher z-index
   values than the downbar.

   Hide the downbar while the sidebar is open
   to prevent overlapping interactive elements.
*/

body.mk-sidebar-open .mk-downbar {
    pointer-events: none;
}


/* ============================================================
   22. STANDALONE / INSTALLED WEB APP
   ============================================================ */

@supports (
    padding-bottom: env(safe-area-inset-bottom)
) {

    .mk-downbar {
        padding-bottom:
            env(safe-area-inset-bottom);
    }

}


/* ============================================================
   23. REDUCED MOTION
   ============================================================ */

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

    .mk-downbar__item {
        transition: none;
    }

}


/* ============================================================
   24. PRINT
   ============================================================ */

@media print {

    .mk-downbar {
        display: none !important;
    }

    .mk-public-main,
    .mk-public-app {
        padding-bottom: 0 !important;
    }

}

/* ============================================================
   END — MKTECHSUPPORT V2 PUBLIC DOWNBAR
   ============================================================ */