/* =========================================================
   JPARTS Mobile / Tablet / Desktop Utility Topbar V2

   Shared SVG icons
   - Desktop: large
   - Tablet: medium
   - Mobile / PWA: compact

   Scope:
   .jp-mobile-utility

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


/* =========================================================
   1. Common Base
   ========================================================= */

.jp-mobile-utility {
    box-sizing: border-box;
    width: 100%;

    margin: 0;
    padding: 0;

    background: #ffffff;
    border-bottom: 1px solid #e3e9ef;

    color: #2e627a;

    /* Default: Desktop */
    --jp-utility-icon-size: 20px;
    --jp-utility-font-size: 12px;
    --jp-utility-item-width: 62px;
    --jp-utility-item-height: 48px;
    --jp-utility-item-gap: 4px;
    --jp-utility-track-gap: 8px;
    --jp-utility-track-padding: 6px 14px;
}


/* =========================================================
   2. Horizontal Scroll Track
   ========================================================= */

.jp-mobile-utility__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;

    gap: var(--jp-utility-track-gap);
    padding: var(--jp-utility-track-padding);

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.jp-mobile-utility__track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   3. Menu Items
   ========================================================= */

.jp-mobile-utility .jp-mobile-utility__item {
    display: flex;
    flex: 0 0 auto;

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

    box-sizing: border-box;

    width: auto;
    min-width: var(--jp-utility-item-width);
    min-height: var(--jp-utility-item-height);

    margin: 0;
    padding: 5px 8px;

    gap: var(--jp-utility-item-gap);

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #2e627a;

    font-family: inherit;
    font-size: var(--jp-utility-font-size);
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;
    text-decoration: none;

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


/* =========================================================
   4. Shared SVG Icons
   ========================================================= */

.jp-mobile-utility .jp-mobile-utility__icon {
    display: block;
    flex: 0 0 auto;

    width: var(--jp-utility-icon-size);
    height: var(--jp-utility-icon-size);

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    object-fit: contain;
    vertical-align: middle;
}


/* =========================================================
   5. Logout Form
   ========================================================= */

.jp-mobile-utility__form {
    display: flex;
    flex: 0 0 auto;

    align-items: stretch;

    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}


/* =========================================================
   6. Hover / Focus / Active
   ========================================================= */

.jp-mobile-utility .jp-mobile-utility__item:hover {
    background: #edf5f9;
    color: #174c69;
}

.jp-mobile-utility .jp-mobile-utility__item:focus-visible {
    outline: 2px solid #2462a7;
    outline-offset: -2px;

    background: #edf5f9;
}

.jp-mobile-utility .jp-mobile-utility__item:active {
    background: #dcebf3;
}


/* =========================================================
   7. JPARTS Logo
   ========================================================= */

.site-header .mobile-brand-logo {
    display: block;

    width: auto;
    height: 44px;
    max-width: 100%;

    object-fit: contain;
}


/* =========================================================
   8. Tablet: 601px ~ 1024px
   ========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .jp-mobile-utility {
        --jp-utility-icon-size: 18px;
        --jp-utility-font-size: 11px;

        --jp-utility-item-width: 54px;
        --jp-utility-item-height: 44px;

        --jp-utility-item-gap: 3px;
        --jp-utility-track-gap: 5px;

        --jp-utility-track-padding: 4px 10px;
    }

    .jp-mobile-utility .jp-mobile-utility__item {
        padding: 4px 6px;
    }

    .site-header .mobile-brand-logo {
        height: 40px;
    }
}


/* =========================================================
   9. Mobile / PWA: 381px ~ 600px
   ========================================================= */

@media (max-width: 600px) {

    .jp-mobile-utility {
        --jp-utility-icon-size: 15px;
        --jp-utility-font-size: 10px;

        --jp-utility-item-width: 46px;
        --jp-utility-item-height: 44px;

        --jp-utility-item-gap: 2px;
        --jp-utility-track-gap: 3px;

        --jp-utility-track-padding: 2px 6px;
    }

    .jp-mobile-utility .jp-mobile-utility__item {
        padding: 4px 5px;
        border-radius: 7px;
    }

    .site-header .mobile-brand-logo {
        height: 36px;
    }
}


/* =========================================================
   10. Small Mobile: 380px and below
   ========================================================= */

@media (max-width: 380px) {

    .jp-mobile-utility {
        --jp-utility-icon-size: 14px;
        --jp-utility-font-size: 9px;

        --jp-utility-item-width: 44px;
        --jp-utility-item-height: 44px;

        --jp-utility-item-gap: 2px;
        --jp-utility-track-gap: 2px;

        --jp-utility-track-padding: 2px 4px;
    }

    .jp-mobile-utility .jp-mobile-utility__item {
        padding: 3px 4px;
    }

    .site-header .mobile-brand-logo {
        height: 34px;
    }
}


/* =========================================================
   11. Installed PWA
   ========================================================= */

@media (display-mode: standalone) {

    /* Hide install menu inside installed PWA */
    .jp-mobile-utility__install {
        display: none !important;
    }
}


/* =========================================================
   12. Reduced Motion
   ========================================================= */

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

    .jp-mobile-utility__track {
        scroll-behavior: auto;
    }
}


/* JPARTS Utility Language Selector */

.jp-mobile-utility__language {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
}

.jp-mobile-utility__language select {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 6px;

    border: 1px solid #b8cbd8;
    border-radius: 5px;

    background: #ffffff;
    color: #173b55;

    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .jp-mobile-utility__language {
        margin: 0 4px;
    }

    .jp-mobile-utility__language select {
        min-height: 30px;
        font-size: 10px;
        padding: 3px 4px;
    }
}


/* =========================================
   JPARTS Utility Topbar Alignment V3

   Home: left
   Other menus: right
   ========================================= */

/* Keep the topbar aligned across wide screens */
.jp-mobile-utility__track {
    width: 100%;
}

/* Push all items after Home to the right */
.jp-mobile-utility__track > :nth-child(2) {
    margin-left: auto;
}

/* Keep Home on the left */
.jp-mobile-utility__track > :first-child {
    margin-left: 0;
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
    .jp-mobile-utility__track {
        gap: 5px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .jp-mobile-utility__track {
        justify-content: flex-start;
        gap: 3px;
    }

    /* Allow scrolling when menus exceed screen width */
    .jp-mobile-utility__track > :nth-child(2) {
        margin-left: auto;
    }
}