/* Removed @import rules. Ensure base.css, header.css, media-viewer.css, dialog.css, profile.css, subscription.css, settings.css, affiliate.css, footer.css, and reactions.css are linked in the HTML where needed. */

the-account {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
}

the-account div.divider {
    flex: 0 0 1px;
    background-color: rgba(var(--primary-rgb), .25);
    align-self: stretch;
}

/* --- Consolidated Tab Bar Styles (also applied in communities.css) --- */
the-account .tab-bar
/* Add 'the-community .tab-bar' selector in communities.css */
 {
    align-self: center;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), .5);
    background: rgba(0, 0, 0, .75);
    border-radius: .25rem;
    position: relative;
    /* backdrop-filter: blur(1rem); */
    box-shadow: 0px .25rem 1rem 0 rgb(0 0 0 / 50%), inset 0 0 2rem 0 rgba(var(--primary-rgb), calc(var(--glow-intensity) / 3));
}

the-account .tab-bar a
/* Add 'the-community .tab-bar a' selector in communities.css */
 {
    display: block;
    text-decoration: none;
    color: var(--primary-color);
    padding: 1rem 2rem;
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
}

the-account .tab-bar a.active
/* Add 'the-community .tab-bar a.active' selector in communities.css */
 {
    color: var(--input-color);
}

the-account .tab-bar a.active::after
/* Add 'the-community .tab-bar a.active::after' selector in communities.css */
 {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--secondary-color);
    box-shadow: 0 .5rem 1.5rem rgba(var(--secondary-rgb), calc(var(--glow-intensity) / 2));
}
/* --- End Consolidated Tab Bar Styles --- */


/*********** MEDIA QUERIES START HERE ***********/
@media only screen and (max-width: 720px) {

    body {
        gap: .5rem;
    }

    the-account {
        gap: .5rem;
    }

    /* Apply media query to both tab bars */
    the-account .tab-bar a
    /* Add 'the-community .tab-bar a' selector in communities.css */
     {
        padding: .75rem;
        white-space: nowrap;
        font-size: .8rem;
    }

}
/*********** MEDIA QUERIES END HERE ***********/