/* ============================================================
   MHDCommerce — Menu de usuário (dropdown pós-login)
   Arquivo: wwwroot/css/user-menu.css
   Carregar DEPOIS de site.css
   ============================================================ */

.user-menu { position: relative; }

.user-menu-trigger {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--text-2); padding: 8px 14px; border-radius: 99px;
    transition: background .15s;
}
.user-menu-trigger:hover { background: var(--bg); }
.user-menu-trigger svg { width: 20px; height: 20px; flex-shrink: 0; }
.user-menu-label {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--text);
}
.user-menu-caret { transition: transform .2s; }
.user-menu.open .user-menu-caret { transform: rotate(180deg); }

/* Dropdown */
.user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px; background: var(--white);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0,0,0,.14); overflow: hidden;
    padding: 6px; z-index: 400;
    opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity .15s, transform .15s;
}
.user-menu.open .user-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }

.user-dropdown-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: var(--radius-sm);
    font-size: 14px; color: var(--text-2); text-decoration: none;
    transition: background .1s; cursor: pointer;
}
.user-dropdown-item:hover { background: var(--brand-xlight); color: var(--brand-dark); }
.user-dropdown-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
.user-dropdown-item:hover svg { color: var(--brand); }
.user-dropdown-item.danger:hover { background: #fdecec; color: #c0392b; }
.user-dropdown-item.danger:hover svg { color: #c0392b; }

.user-dropdown-badge {
    margin-left: auto; background: var(--red); color: #fff;
    border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 700;
}

.user-dropdown-sep { height: 1px; background: var(--border); margin: 6px 8px; }