/* ============================================================
   AUTOMART V46.3
   PROFILE SETTINGS — FUNCTIONAL TABS
   ============================================================ */


/* ============================================================
   CLICKABILITY
   ============================================================ */

.am-v463-profile-tabs-ready
[data-am-v463-profile-tab] {

    cursor:pointer !important;

    user-select:none;

    -webkit-user-select:none;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.am-v463-clickable-tab {

    cursor:pointer !important;
}


/* ============================================================
   ACTIVE TAB
   Preserve existing AutoMart styling but make state explicit.
   ============================================================ */

.am-v463-profile-tabs-ready
[data-am-v463-profile-tab].am-v463-active {

    position:relative;

    color:#087b4a !important;

    font-weight:800 !important;
}


.am-v463-profile-tabs-ready
[data-am-v463-profile-tab].am-v463-active::after {

    content:"";

    position:absolute;

    left:18%;
    right:18%;
    bottom:-1px;

    height:2px;

    border-radius:99px;

    background:#0aa15f;
}


/* ============================================================
   PANEL SWITCHING
   ============================================================ */

.am-v463-settings-panel[hidden] {

    display:none !important;
}


.am-v463-settings-panel.am-v463-active-panel {

    animation:
        amV463PanelIn
        .2s ease-out;
}


@keyframes amV463PanelIn {

    from {
        opacity:0;
        transform:translateY(4px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}


/* ============================================================
   SINGLE ACTIVE MODULE
   Use the available content width instead of leaving an empty
   second column.
   ============================================================ */

.am-v463-settings-grid
.am-v463-active-panel {

    min-width:0;
}


/* ============================================================
   SECURITY
   When Account Security + Password & Security are both active,
   retain a balanced two-column desktop presentation when their
   existing parent supports it.
   ============================================================ */

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

    .am-v463-settings-grid[
        data-am-v463-active="security"
    ] {

        align-items:start;
    }

}


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

.am-v463-profile-tabs-ready
[data-am-v463-profile-tab]:focus-visible {

    outline:
        2px solid
        rgba(5,154,91,.35)
        !important;

    outline-offset:
        -2px;

    border-radius:
        7px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width:767px) {

    /*
     * Existing profile tab row becomes horizontally scrollable
     * instead of compressing six labels.
     */

    .am-v463-profile-tabs-ready
    [role="tablist"] {

        overflow-x:auto;

        overscroll-behavior-inline:
            contain;

        scrollbar-width:none;
    }


    .am-v463-profile-tabs-ready
    [role="tablist"]::-webkit-scrollbar {

        display:none;
    }


    .am-v463-profile-tabs-ready
    [data-am-v463-profile-tab] {

        flex:
            0 0 auto;

        white-space:
            nowrap;
    }


    .am-v463-settings-panel.am-v463-active-panel {

        width:100% !important;

        max-width:100% !important;

        grid-column:
            1 / -1
            !important;
    }

}


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

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

    .am-v463-settings-panel.am-v463-active-panel {

        animation:none !important;
    }

}