/* =============================================
   URM My Account — 2-column layout
   Classi: solo ur-myaccount-layout-*
   ============================================= */

/* --- Base (mobile first: 1 colonna) --- */
.ur-myaccount-layout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.ur-myaccount-layout-main {
    width: 100%;
    min-width: 0;
}

.ur-myaccount-layout-sidebar {
    width: 100%;
}

/* --- Desktop: 2 colonne (>= 992px) --- */
@media (min-width: 992px) {

    .ur-myaccount-layout-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }

    .ur-myaccount-layout-main {
        flex: 1 1 auto;
    }

    .ur-myaccount-layout-sidebar {
        flex: 0 0 320px;
        width: 320px;
        position: sticky;
        top: 24px;
    }

}

/* =============================================
   URM Navigation — accessible tabs
   Classi: solo ur-tabs-*
   ============================================= */

/* --- Lista nav --- */
.ur-tabs-nav .ur-tabs-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* --- Singolo item --- */
.ur-tabs-nav .ur-tabs-item {
    flex: 0 0 auto;
}

/* --- Link --- */
.ur-tabs-nav .ur-tabs-link {
    display: block;
    padding: 8px 16px;
    white-space: nowrap;
    text-decoration: none;
}

/* --- Stato attivo (PHP) --- */
.ur-tabs-nav .ur-tabs-link--active {
    font-weight: 600;
}

/* --- Focus visibile (keyboard) --- */
.ur-tabs-nav .ur-tabs-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --- Desktop: stack verticale nella sidebar --- */
@media (min-width: 992px) {
    .ur-tabs-nav .ur-tabs-list {
        flex-direction: column;
        overflow-x: visible;
        gap: 2px;
    }
}