/* tires template — site-owner CSS override hook. Loads last (weight 500).
   Add custom rules here without touching template.css. */

/* Plugin-injected account tabs (Change Password / My Garage / My Reviews) arrive as
   <li class="nav-item"><a|button class="nav-link">…</a></li> — a template layout
   override cannot intercept them (FileLayout resolves an absolute basePath), so
   reset the Bootstrap nav-tabs chrome here to match .account-nav-item. */
.page-account .account-nav > .nav-item {
    list-style: none;
}
.page-account .account-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-align: left;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.page-account .account-nav .nav-link:hover {
    background: var(--brand-bg-elevated);
    color: var(--brand-text);
    border-left-color: var(--brand-border-strong);
}
.page-account .account-nav .nav-link.active {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary-light);
    border-left-color: var(--brand-primary);
    font-weight: var(--weight-semibold);
}

/* Logout is a real POST <form> (CSRF token), unlike the mockup's plain <a> — collapse
   the form out of the box model so its button sits as a normal flex/flow item and
   strip default button chrome so it still reads as a plain link/nav item. */
.page-account .account-header-logout-form,
.page-account .account-nav-logout-form {
    display: contents;
}
.page-account .account-logout-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Empty-state notices in the account panes keep their Bootstrap `alert alert-info`
   classes (myprofile.js toggles #j2c-no-orders / #j2c-no-downloads by id), so they
   are re-themed here rather than reclassed in the layout. The `!important` matches
   com_j2commerce's own `.j2commerce .alert-info` rule in
   media/com_j2commerce/css/site/j2commerce_bs5.css, which is itself !important. */
.page-account .j2commerce .alert-info,
.page-account .alert-info {
    background-color: var(--brand-bg-card) !important;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-md);
    color: var(--brand-text-secondary) !important;
}